/* imports */
@import url("css/buttons.css");
@import url("css/text.css");
@import url("css/mediaquery.css");

/* Homepage gradient */
body{
  background: linear-gradient(to bottom, rgba(214, 160, 25, 0.387), rgba(12, 16, 230, 0.2)), url("assets/homescreen.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: top;
  width: 100%;
  height: 100%;
  letter-spacing: 0.02em;
  font-weight: 400;
  -webkit-font-smoothing: antialiased; 
  overflow: hidden;
 }

/* Gray fade in */
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f5f5f5; /* Grey color */
  z-index: 10;
  transition: opacity 0.5s ease-in-out;
}

.hidden {
  opacity: 0;
}

/* animation that fades out the overlay */
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}
 
 /* fade-in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* slide-in animation */
@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(center);
  }
}

/* slide-in animation */
@keyframes slideUp {
  from {
    transform: translate(-50%, 100%);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}