/* loader page*/
.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(6.9px);
  -webkit-backdrop-filter: blur(6.9px);
  transition: loading 3s ease-in-out, opacity 3s, visibility 3s;
  transition-delay: 3s;
  z-index: 9999;
  font-family: Consolas, "courier new";
  /* transition: all 500ms ease-in-out; */
  /* animation: loading 1s ease-in-out infinite; */
}

.loader img {
  width: 300px;
  align-self: center;
  opacity: 0.7;
  /* height: 500px; */
}

.loader--hidden {
  scale: 0;
  visibility: none;
  z-index: -2;
}

.loader h4 {
  font-size: 20px;
  font-weight: 800;
  font-family: Consolas, "courier new";
  text-shadow: 0 0 2px #ffffff3a, 0 0 10px #ffffff3a, 0 0 15px #ffffff3a,
    0 0 20px #18ffb215, 0 0 30px #18ffb215, 0 0 40px #18ffb215,
    0 0 55px #18ffb215, 0 0 75px #18ffb215;
  opacity: 0.8;
}

/* background video */
#video {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  min-width: 100vh;
  min-height: 100vh;
  z-index: -10;
  background: rgba(0, 0, 0, 0.46);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(9.7px);
  -webkit-backdrop-filter: blur(9.7px);
  -webkit-filter: blur(3px);
  opacity: 0.8;
}

.default {
  color: #f8f8f2;
}

.space {
  color: #888;
}

.blue {
  color: blue;
}

.red {
  color: rgb(245, 64, 64);
}

.yellow {
  color: yellow;
}

.purple {
  color: purple;
}

.orange {
  color: orange;
}

/* div hover animation */
#container1,
#container2,
#container3,
#container4,
#container5,
#container6,
#container7,
#container8 {
  perspective: 15px;
}

#inner1,
#inner2,
#inner3,
#inner4,
#inner5,
#inner6,
#inner7,
#inner8 {
  transition: transform 0.5s;
  -webkit-transition: transform 0.5s;
  overflow: hidden;
}

section {
  opacity: 0;
  transition: transform 0.5s ease, opacity 1s ease;
  transform: translateX(-100px);
}

section.active {
  opacity: 1;
  transform: translateX(0);
}

/* parralex */