@import url('utilAndVariables.css');
@import url('nav.css');

body {
  background: rgb(1, 13, 26);
}

/* Landing Page*/
.background {
  background: url(../img/world-dotted-90.jpg);
}

.landing-descript {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 5rem 0;
  color: var(--main-color-light);
  background: transparent;
}

.landing-descript span {
  display: block;
}

.landing-descript h2 {
  font-size: 3rem;
  padding: 1rem;
  padding-bottom: 2rem;
}

.landing-descript h2 span:nth-child(1) {
  font-weight: 900;
  line-height: .9;
}

.landing-descript h2 span:nth-child(2) {
  padding-top: .25rem;
  font-size: 1.3rem;
  font-weight: 600;
  max-width: 85%;
  margin: auto;
}

.landing-content {
  display: flex;
  flex-wrap: wrap;
  background: var(--main-color-darker);
}

.landing-content .wrapper {
  flex: 1;
  padding: 2rem .5rem;
  text-align: center;
  z-index: 1;
} 

.landing-content .wrapper:nth-child(2) {
  background: var(--main-color-darker);
}

.landing-content h3 {
  font-size: 1.5rem;
  padding: .5rem;
  font-weight: 900;
}

.landing-content p {
  font-size: 1rem;
  padding: .5rem;
  letter-spacing: 0px;
  font-weight: 400;
  max-width: 40rem;
  text-align: center;
  margin: auto;
  color: var(--main-color-light);
  line-height: 1.4;
}

/* REGIONS*/
.regions-heading {
  text-align: center;
  padding: 6rem 1rem;
  font-size: 2.5rem;
  background: var(--color-stand-out);
  color: var(--main-color-light);
  font-weight: 900;
  background: transparent;

}

.regions-container {
  background: var(--main-color-darker);
}

#regions {
  display: flex;
  flex-wrap: wrap;
}

.region-wrapper {
  width: 16.66666%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-top: 3px solid transparent;
  transition: all .3s ease;
}

.region-wrapper:nth-child(odd) {
  background: var(--main-color-darker);
}

.region-wrapper:nth-child(even) {
  background: var(--main-color-dark);
}

.region-wrapper:hover {
  border-top: 3px solid var(--color-stand-out-light);
}

.region-wrapper a {
  display: inline-block;
  padding: 5rem 2rem;
  transition: all .3s ease-out;
  text-transform: capitalize;
}

#africa a{
  color: #fefefe81;
}

#africa a span{
  font-size: .75rem;
  display: block;
}

/* FOOTER */
#main-footer {
  width: 100%;
  background: rgb(1, 13, 26);
  border-top: var(--border-thin) var(--color-stand-out-transparent);
  padding: 2rem .5rem;
  text-align: center;
}

#main-footer a {
  font-size: 3rem;
  color: var(--color-stand-out);
  transition: all .3s ease;
}

#main-footer a:hover {
  color: var(--color-stand-out-light);
}


/* Media queries*/
/* mobile landscape and tablets*/

@media(max-width: 1024px) {

  .background {
    background: url(../img/world-dotted-90.jpg) center;
  }

  .region-wrapper a {
    padding: 2.5rem;
  }
}

/* Mobile*/
@media(max-width : 500px){

  .background {
    background: url(../img/world-dotted-90.jpg)
  }

  #nav {
    padding: .5rem 1rem;
    font-size: 1rem;
  }

  .landing-descript h2 {
    margin-top: 5rem;
  }
  
  .landing-descript h2 span:nth-child(1) {
    padding-bottom: 1rem;
  }
  
  .landing-content {
    flex-direction: column;
  }

  .landing-content .wrapper {
    flex: 1;
    padding: 4rem .5rem;
    text-align: center;
    border: none;
    border-top: var(--border-thin) var(--color-stand-out-transparent);
    z-index: 1;
  }

  .landing-content .wrapper:first-child{
    border-top: none;
  }

  #regions {
    flex-direction: column;
  }

  .region-wrapper {
    width: 100%;
    font-size: 1.5rem;
  }

  .region-wrapper:first-child {
    border-top: none;
  } 

  .region-wrapper a {
    padding: 5rem;
  }
}


/* Big screens*/
@media(min-width: 1950px){
  .background {
    background: url(../img/world-dotted-90.jpg) no-repeat center center/cover;
  }
}