/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body, html {
  height: 100%;
  margin: 0;
  z-index: 0;
}

* {
  box-sizing: border-box;
}

.bg-special {
  height: 15%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  left: 0px;
  top: 0px;
}
.logo-text {
  background-color: rgb(34, 34, 59); /* Fallback color */
  background-color: rgba(34, 34, 59, 1); /* Black w/opacity/see-through */
  color: rgba(255, 255, 255, 1);
  font-weight: bold;
  font-size: 25px;
  border: 5px solid #f1f1f1;
  position: fixed;/* Stay fixed */
  top: 5%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 200px;
  padding: 10px;
  text-align: center;
  animation: 4s ease-in 0s 1 appear;
  animation-fill-mode: forwards;
}
.bg-image {
  /* Full height */
  height: 25%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  left: 0px;
  top: 0px;
}
.fake-nav {
  height: 10%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  left: 0px;
  top: 0px;
}

#bar1 {
  animation: 2s ease-out 0s 1 loadup1;
  animation-fill-mode: forwards;
}
#bar2 {
  animation: 2s ease-out 0s 1 loadup2;
  animation-fill-mode: forwards;
}
#bar3 {
  animation: 2s ease-out 0s 1 loadup3;
  animation-fill-mode: forwards;
}
#bar4 {
  animation: 2s ease-out 0s 1 loadup4;
  animation-fill-mode: forwards;
}
/* Position text in the middle of the page/image */
.bg-text {
  background-color: rgb(34, 34, 59); /* Fallback color */
  background-color: rgba(34, 34, 59, 0.5); /* Black w/opacity/see-through */
  color: rgb(242, 233, 228);
  color: rgba(242, 233, 228, 1);
  font-weight: bold;
  font-size: 80px;
  border: 10px solid #f1f1f1;
  position: fixed; /* Stay fixed */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 650px;
  padding: 20px;
  text-align: center;
  animation: 1.8s fadeout;
  animation-fill-mode: forwards;
}

/* animations below this line hehe */


@keyframes loadup1 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes loadup2 {
  0% {
    transform: translateX(0);
  }
  5% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes loadup3 {
  0% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes loadup4 {
  0% {
    transform: translateX(0);
  }
  15% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes appear {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}