@layer base { }

#logo { background-color: #f0cfc2; }
#products { background-color: #F6F4EF; }
html { font-family: Jost,system-ui,sans-serif; }

footer { background-color: #C1CABB}

#socials img { opacity: 0.7; margin: 0px 10px;}
#socials img:hover { opacity: 0.4;}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.animate-fade-up {
  animation: fade-up 0.8s ease-out forwards;
}
.animate-fade-in {
  animation: fade-in 0.6s ease-out forwards;
}
.animate-scale-in {
  animation: scale-in 0.6s ease-out forwards;
}
.animation-delay-100 {
  animation-delay: 100ms;
}
.animation-delay-200 {
  animation-delay: 200ms;
}
.animation-delay-300 {
  animation-delay: 300ms;
}
.animation-delay-400 {
  animation-delay: 400ms;
}
.animation-delay-500 {
  animation-delay: 500ms;
}