main {
  display: flex;
  align-items: center;
  flex-direction: column;
}

#height {
  position: fixed;
  visibility: hidden;
  height: 100vh;
}

#parallax {
  position: fixed;
  left: 0;
  top: 0;
  height: 200vh;
  width: 100%;
  background-image: url("./assets/background.jpg");
  background-position: center;
  background-size: cover;
  z-index: -1;
  --grayscale: 100%;
  -webkit-filter: grayscale(var(--grayscale));
  filter: grayscale(var(--grayscale));
}

#landing {
  position: relative;
  height: calc(100vh - 220px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  text-shadow: 1px 1px 2px black;
}

#landing img {
  width: 100%;
}

#landing button {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  bottom: calc(25% - 5rem);
  padding: 0.75rem 1.75rem;
  border-radius: 2.5rem;
  background-color: white;
  border: none;
  box-shadow: var(--box-shadow);
  font-size: 1.25rem;
  cursor: pointer;
  z-index: 10;
}

#landing button svg {
  transition: 250ms ease-in-out;
}

#landing button:hover svg {
  transform: rotate(90deg);
  fill: var(--highlight-color);
}

#about {
  display: flex;
  align-items: center;
  max-width: min(75vw, 1000px);
  min-height: calc(100vh - 75px);
  margin-block: 2rem;
}

#about > div {
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: white;
  box-shadow: var(--box-shadow);
  overflow: hidden;
  max-width: 500px;
}

#about > div > div {
  padding: 2rem;
}

#about img {
  width: 100%;
}

@media (min-width: 475px) {
  #landing img {
    width: unset;
    height: 75%;
    z-index: 10;
  }
}

@media (min-width: 700px) {
  #landing {
    height: calc(100vh - 155px) !important;
  }
}

@media (min-width: 1125px) {
  #about {
    margin-block: unset;
  }

  #about > div {
    flex-direction: row;
    max-width: unset;
  }

  #about img {
    width: unset;
    height: 475px;
  }
}