html,
body,
#app {
  height: 100%;
  margin: 0px;
  padding: 0px;
}

.chromeframe {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
}

.parentBox {
  height: 100%;
  background: #052368;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.scalableBox {
  /* width: 40px; */
  /* height: 70px; */
  width: 60px;
  height: 105px;
}

.apringBox {
  transition: stroke 0.3s;
}

.apwormOneBox,
.apwormTwoBox {
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

.apwormTwoBox {
  animation-name: worm2;
  visibility: hidden;
}

.apwormOneBox {
  animation-name: worm1;
}

.loading-text {
  font-family: 'Open Sans';
  color: #FFF;
  font-size: 24px;
  margin-top: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: hsl(var(--hue), 10%, 10%);
    --fg: hsl(var(--hue), 10%, 90%);
  }

  .apringBox {
    stroke: hsla(var(--hue), 10%, 90%, 0.9);
  }
}

@keyframes worm1 {
  from {
    animation-timing-function: ease-in-out;
    stroke-dashoffset: -87.96;
  }

  20% {
    animation-timing-function: ease-in;
    stroke-dashoffset: 0;
  }

  60% {
    stroke-dashoffset: -791.68;
    visibility: visible;
  }

  60.1%,
  to {
    stroke-dashoffset: -791.68;
    visibility: hidden;
  }
}

@keyframes worm2 {

  from,
  60% {
    stroke-dashoffset: -87.96;
    visibility: hidden;
  }

  60.1% {
    animation-timing-function: cubic-bezier(0, 0, 0.5, 0.75);
    stroke-dashoffset: -87.96;
    visibility: visible;
  }

  77% {
    animation-timing-function: cubic-bezier(0.5, 0.25, 0.5, 0.88);
    stroke-dashoffset: -340;
    visibility: visible;
  }

  to {
    stroke-dashoffset: -669.92;
    visibility: visible;
  }
}