#page-landing {
  background: linear-gradient(329.54deg, #29b6d1 0%, #00c7c7 110%);

  text-align: center;
  min-height: 80vh;

  display: flex;
}

#container {
  margin: auto;

  width: min(70%, 90rem);
}

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

#logo {
  animation-delay: 50ms;
}

.location {
  animation-delay: 100ms;
}

main h1 {
  animation-delay: 150ms;
  font-size: clamp(4rem, 8vw, 8.4rem);
}

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

.visit a {
  width: 8rem;
  height: 8rem;
  background: #ffd666;

  border: none;
  border-radius: 3rem;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: auto;

  transition: background 200ms;
  animation-delay: 250ms;
}

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

/* desktop version */
@media (min-width: 1080px) {
  #container {
    padding: 6rem 6rem;
    /* shorthand background: image repeat possition size*/
    background: url("../images/bg.svg") no-repeat 80% /
      clamp(50rem, 84vw, 56rem);
  }

  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: 4.4rem;
    line-height: 1.5;
  }

  main h1 {
    font-weight: bold;
    line-height: 0.9;

    margin: clamp(10%, 9vh, 12%) 0 4rem;

    width: min(300px, 70%);
  }

  .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);
  }

  .visit a {
    margin: initial;
  }
}