#page-landing {
  background: linear-gradient(329.54deg, #29b6d1 0%, #00c7c7 100%);
  
  min-height: 100vh;
  text-align: center;
  
  display: flex;
}

#container {
  margin: auto;
  
  width: min(90%, 112rem);
  /* enquanto for menor que 1120px, ele aplicará o width de 90%. */
}

#logo {
  animation-delay: 50ms;
}

.location {
  animation-delay: 100ms;
}

.location, h1, .visit p {
  height: 16vh;
}

main h1 {
  font-size: clamp(4rem, 8vw, 8.4rem);
  /* mínimo que pode chegar, valor que 
  quero, valor máximo que pode chegar */
  
  animation-delay: 150ms;
}

.visit p {
  animation-delay: 200ms;
}

.visit a {
  width: 8rem;
  height: 8rem;
  
  border: none;
  border-radius: 3rem;
  margin: 0 auto;
  
  background: #ffd666;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  transition: background .2s;
  animation-delay: 250ms;
}

.visit a:hover {
  background: #96feff;
}



/* desktop version */
@media (min-width: 760px) {
  #container {
    background: url("../images/bg.svg") no-repeat 80% / clamp(30rem, 54vw, 56rem);
    
    padding: 5rem 2rem;
  }
  
  header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .location, h1, .visit p {
    height: initial;
    text-align: initial;
  }
  
  .location {
    text-align: right;
    font-size: 2.4rem;
    line-height: 1.5;
  }
  
  main h1 {
    font-weight: bold;
    line-height: .88;
    
    margin: clamp(10%, 9vh, 12%) 0 4rem;
    /* mínimo que pode chegar, valor que
    quero, valor máximo que pode chegar*/
    
    width: min(300px, 80%);
    /* enquanto for menor que 300px, ele 
    aplicará o width de 80%. */
  }
  
  .visit {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .visit p {
    font-size: 2.4rem;
    line-height: 1.5;
    
    width: clamp(20rem, 20vw, 30rem);
    /* mínimo que pode chegar, valor que
    quero, valor máximo que pode chegar*/
  }
  
  .visit a {
    margin: initial;
  }
}