:root {
  --background-brown: #221911;
  --background-brown-12: #291F14;

  --text-beige: #DECCBA;
  --header-beige: #C5A687;

  --see-through-background: rgba(34, 25, 17, 0.6);
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;

  background-color: var(--background-brown);
  color: var(--text-beige);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Cormorant Garamond', serif;
  color: var(--header-beige);
}

p {
  font-family: 'Lora', serif;
}

.section {
  padding: 48px;

  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.section.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 1024px) {
  .section {
    padding-top: 160px;
    padding-bottom: 160px;
  }
}