@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

* {
  font-family: "Roboto";
}

.slab {
  font-family: "Roboto Slab";
}

body {
  background-image: url("res/background.svg");
}

.bg-theme-1 {
  background-color: #FAF7F0;
}

.bg-theme-2 {
  background-color: #D8D2C2;
}

.bg-theme-3 {
  background-color: #d8a48c;
}

.bg-theme-4 {
  background-color: #4A4947;
}

.text-theme-1 {
  color: #FAF7F0;
}

.text-theme-2 {
  color: #D8D2C2;
}

.text-theme-3 {
  color: #d8a48c;
}

.text-theme-4 {
  color: #4A4947;
}

/* initial hidden state */
.reveal {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 600ms ease, transform 600ms ease;
  will-change: opacity, transform;
  transform-origin: center;
}

/* revealed state */
.reveal.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* optional: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    transition: none;
    transform: none;
    opacity: 1;
  }
}