* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
}
html,
body {
  width: 100%;
  height: 100%;
}
/* ROOT */
:root {
  /* COLORS */
  --main-bg-color: #0f0f0f;
  --second-bg-color: #222222;
  --font-color: #e4e4e4;
  --second-font-color: #908f8f;
  --border-color: #5b5b5b;
  /* --nav-logo-color:#2020dc00; */
  /* HEIGHTS */
  --top-header-h: 56px;
  /* WIDTHS */
  --side-bar-w: 0px;
}
.page-loading-animation {
  background-color: var(--main-bg-color);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 2rem;
  row-gap: 7.5px;
  z-index: 1000;
  transition: opacity, 0.25s;
}
.l-dot {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 5px solid var(--second-font-color);
  position: relative;
  transform-origin: center;
  overflow: hidden;
  animation-name: boxshadow-animation;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-fill-mode: backwards;
  animation-iteration-count: infinite;
}
/* animation */
@keyframes boxshadow-animation {
  0% {
    box-shadow: 0 0 3px 3px var(--second-font-color);
  }
  10% {
    box-shadow: 0 0 2.5px 2.5px var(--second-font-color);
  }
  20% {
    box-shadow: 0 0 2px 2px var(--second-font-color);
  }
  30% {
    box-shadow: 0 0 1.5px 1.5px var(--second-font-color);
  }
  40% {
    box-shadow: 0 0 1px 1px var(--second-font-color);
  }
  50% {
    box-shadow: 0 0 0.5px 0.5px var(--second-font-color);
  }
  60% {
    box-shadow: 0 0 1px 1px var(--second-font-color);
  }
  70% {
    box-shadow: 0 0 1.5px 1.5px var(--second-font-color);
  }
  80% {
    box-shadow: 0 0 2px 2px var(--second-font-color);
  }
  90% {
    box-shadow: 0 0 2.5px 2.5px var(--second-font-color);
  }
  100% {
    box-shadow: 0 0 3px 3px var(--second-font-color);
  }
}
.l-dot::before {
  content: "";
  position: absolute;
  width: 80px;
  height: 40px;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-color: #4158d0;
  background-image: linear-gradient(
    43deg,
    #4158d0 0%,
    #c850c0 46%,
    #ffcc70 100%
  );
  background-size: 400% 400%;
  left: 50%;
  top: 50%;
  border-radius: 100px 75px 100px 50px;
  transform: translate(-50%, -50%);
  transform-origin: center;
  animation-name: floting-animation;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-fill-mode: backwards;
  animation-iteration-count: infinite;
}
.l-dot::after {
  overflow: hidden;
  content: "I-Tube";
  position: absolute;
  width: 80px;
  height: 80px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-size: 200px;
  transform-origin: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  font-weight: 900;
  background: radial-gradient(
    circle farthest-corner at center center,
    #0066ff,
    #00ffff,
    #00ffa2
  );
  background-size: 400% 400%;
  background-clip: text;
  color: transparent;
  animation-name: floting-animation;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-fill-mode: backwards;
  animation-iteration-count: infinite;
}
/* animation */
@keyframes floting-animation {
  0% {
    top: 45%;
    background-position: 0% 50%;
  }
  25% {
    top: 50%;
    background-position: 50% 50%;
  }
  50% {
    top: 55%;
    background-position: 100% 50%;
  }
  75% {
    top: 50%;
    background-position: 50% 50%;
  }
  100% {
    top: 45%;
    background-position: 0% 50%;
  }
}
/* pre-loading */
.pre-loading {
  font-size: 2.25rem;
  position: relative;
  font-weight: 600;
  color: var(--second-font-color);
}
.pre-loading::after {
  content: "Loading...";
  position: absolute;
  top: 0;
  left: -3.75ch;
  animation-name: loading-animation-01;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-fill-mode: backwards;
  animation-iteration-count: infinite;
}
@keyframes loading-animation-01 {
  0%,
  25% {
    content: "Loading";
  }
  25%,
  50% {
    content: "Loading.";
  }
  50%,
  75% {
    content: "Loading..";
  }
  75%,
  100% {
    content: "Loading...";
  }
}
