@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap");

body {
  font-family: "DM Sans", sans-serif;
  background-image:
    radial-gradient(circle at 8% 0%, oklch(0.7 0.21 300 / 7%), transparent 30rem),
    radial-gradient(circle at 100% 25%, oklch(0.83 0.17 158 / 6%), transparent 36rem);
}

h1, h2, h3, header, footer {
  font-family: "Space Grotesk", sans-serif;
}

h1, h2, h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

section[id] {
  scroll-margin-top: 5.5rem;
}

#home > div > img {
  object-position: 68% center;
  opacity: .85;
}

#home > div > div:nth-child(2) {
  background: linear-gradient(90deg, oklch(.13 .035 265 / .96), oklch(.13 .035 265 / .88) 34%, oklch(.13 .035 265 / .32) 69%, oklch(.13 .035 265 / .05));
}

#home .backdrop-blur-md {
  border-color: rgb(255 255 255 / 15%);
  background-color: rgb(12 17 32 / 35%);
  backdrop-filter: blur(8px);
}

#about img,
#scenarios img {
  transition: transform 700ms cubic-bezier(.2, .7, .2, 1);
}

#about img:hover,
#scenarios img:hover {
  transform: scale(1.02);
}

@media (max-width: 640px) {
  #home > div > img {
    object-position: 64% center;
  }
}