/* Colors */
:root {
  --pc4: #fae7c9;
  --white: #ffffff;
}
/* KEYFRAMES */

@keyframes fade-up {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0px) scale(1);
  }
}

body {
  background: linear-gradient(90deg, var(--pc4) 25%, rgba(255, 255, 255, 0)),
    url(../media/hero.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left center;
  height: 100vh;
  text-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
  color: white;
}

.content--animation {
  animation: fade-up 0.5s;
}
.btn--color {
  background-color: #cee6f3;
}

.btn--color:hover {
  background-color: #cee6f3;
}

.headline {
  font-weight: 700;
  letter-spacing: 0.1em;
}
.sub-headline {
  font-size: 1.2rem;
}

@media (max-width: 600px) {
  body {
    background-position: -30rem center;
  }
}