html {
  height: 100%
}

body {
  background: #0F1620;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  font-family: sans-serif;
}

#splash {
  width: 100vw; height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#coin {
  width: 100px;
  height: 109px;
  position: relative;
  transform-style: preserve-3d;
  animation: swing 2.5s ease-in-out infinite;
  margin-bottom: 10px;
}

.front, .slice {
  width: 100px;
  height: 109px;
  position: absolute;
  background-image: url("../../icons/logo.svg?v=1.0.61");
  background-size: cover;
}

.slice {
  --depth: 0px;
  transform: translateZ(var(--depth));
  filter: drop-shadow(0 0 0.4px #e7edff);
}


.progress-ring {
  width: 75px;
  height: 75px;
  position: relative;
  margin-top: 20px;
}

.progress-ring svg {
  transform: rotate(-90deg);
}

.progress-ring circle {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
}

.progress-bg {
  stroke: rgba(255,255,255,0.15);
}

.progress-value {
  stroke: #3566f4;
  filter: drop-shadow(0 0 2px #3566f4);
  transition: stroke-dashoffset .2s linear;
}

#loader-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #999;
  font-size: 13px;
  font-weight: normal;
}

@keyframes swing {
  0%   { transform: rotateY(35deg); }
  50%  { transform: rotateY(-35deg); }
  100% { transform: rotateY(35deg); }
}