/* ============
== Variables ==
============ */
/* ============
==== Fonts ====
============ */
@font-face {
  font-family: 'Press Start 2P';
  src: url('../fonts/PressStart2P-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
/* ============
=== Globals ===
============ */
@keyframes gradientMove {
  0% {
    background-size: 100% 4px;
  }
  50% {
    background-size: 100% 2px;
  }
  100% {
    background-size: 100% 4px;
  }
}
@keyframes textOpacityFlicker {
  0% {
    opacity: 0.85;
    transform: skewX(0.5deg);
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0.85;
  }
  75% {
    opacity: 1;
    transform: skewX(0.5deg);
  }
  100% {
    opacity: 0.85;
  }
}
@keyframes textShadowMove {
  0% {
    text-shadow: 3px 2px 2px #fb0c0c, 0px 0px -2px #34fb0c, 0px -2px 3px rgba(12, 79, 251, 0.5);
  }
  25% {
    text-shadow: 3px 2px 2px #fb0c0c, -3px 2px 3px #34fb0c, 0px -2px 3px rgba(12, 79, 251, 0.5);
  }
  50% {
    text-shadow: 3px 2px 2px #fb0c0c, 2px -1px 2px #34fb0c, 0px -2px 3px rgba(12, 79, 251, 0.5);
  }
  75% {
    text-shadow: 3px 2px 2px #fb0c0c, -3px 2px 3px #34fb0c, 0px -2px 3px rgba(12, 79, 251, 0.5);
  }
  100% {
    text-shadow: 3px 2px 2px #fb0c0c, 0px 0px -2px #34fb0c, 0px -2px 3px rgba(12, 79, 251, 0.5);
  }
}
.main-font {
  color: #fff;
  font-family: "Press Start 2P";
}
.screen-flicker {
  background: linear-gradient(to bottom, #000, #000 50%, #222 50%, #222);
  animation: gradientMove 200ms ease infinite;
}
.flickering-text {
  text-shadow: 3px 2px 2px #fb0c0c, -3px 0px 2px #34fb0c, 0px -2px 3px rgba(12, 79, 251, 0.5);
  animation: textShadowMove 5000ms ease infinite, textOpacityFlicker ease 200ms infinite;
}
.info-block {
  border: 4px solid #fff;
}
.info-block legend {
  padding: 0px 10px;
  float: unset;
  width: unset;
  margin-bottom: unset;
  line-height: unset;
}
p {
  font-size: 0.85rem;
}
@media only screen and (max-width: 350px) {
  .small-font-xxs-mobile {
    font-size: 0.8em;
  }
  .px-unset-xxs-mobile {
    padding-right: unset !important;
    padding-left: unset !important;
  }
}
/* ============
=== Loading === 
============ */
#loading {
  display: flex;
  z-index: 1;
}
.cubes {
  display: flex;
  flex-flow: row wrap;
  height: 8rem;
  position: relative;
  transition: all 300ms ease-in-out 0s;
  width: 8rem;
}
.cubes .cube {
  animation: cubeScalingAnimation 1.5s infinite ease-in-out;
  background-color: #fff;
  box-shadow: 3px 3px 3px #fb0c0c, -2px 3px 2px #34fb0c;
  height: 23%;
  width: 23%;
  margin: 1%;
}
.cubes .cube-13 {
  animation-delay: 0.1s;
}
.cubes .cube-9,
.cubes .cube-14 {
  animation-delay: 0.2s;
}
.cubes .cube-5,
.cubes .cube-10,
.cubes .cube-15 {
  animation-delay: 0.3s;
}
.cubes .cube-1,
.cubes .cube-6,
.cubes .cube-11,
.cubes .cube-16 {
  animation-delay: 0.4s;
}
.cubes .cube-2,
.cubes .cube-7,
.cubes .cube-12 {
  animation-delay: 0.5s;
}
.cubes .cube-3,
.cubes .cube-8 {
  animation-delay: 0.6s;
}
.cubes .cube-4 {
  animation-delay: 0.7s;
}
@keyframes cubeScalingAnimation {
  0% {
    transform: scale3d(1, 1, 1);
  }
  35% {
    transform: scale3d(0, 0, 1);
  }
  70% {
    transform: scale3d(1, 1, 1);
  }
}
/* ============
=== Landing === 
============ */
@keyframes scrollArrowFlicker {
  0% {
    opacity: 0.85;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0.85;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0.85;
  }
}
@keyframes scrollArrowMove {
  33% {
    transform: translateY(30px);
  }
  67% {
    transform: translateY(60px);
  }
  100% {
    transform: translateY(90px) scale3d(0.5, 0.5, 0.5);
  }
}
@keyframes scrollArrowLeftShadowMove {
  0% {
    box-shadow: 3px 3px 3px #fb0c0c, 0px 0px 0px #34fb0c;
  }
  25% {
    box-shadow: 3px 3px 3px #fb0c0c, -4px 3px 2px #34fb0c;
  }
  50% {
    box-shadow: 3px 3px 3px #fb0c0c, 4px -6px 2px #34fb0c;
  }
  75% {
    box-shadow: 3px 3px 3px #fb0c0c, -4px 3px 2px #34fb0c;
  }
  100% {
    box-shadow: 3px 3px 3px #fb0c0c, 0px 0px 0px #34fb0c;
  }
}
@keyframes scrollArrowRightShadowMove {
  0% {
    box-shadow: 3px 5px 3px #fb0c0c, 0px 0px 0px #34fb0c;
  }
  25% {
    box-shadow: 3px 5px 3px #fb0c0c, 0px 0px 0px #34fb0c;
  }
  50% {
    box-shadow: 3px 5px 3px #fb0c0c, 2px -3px 2px #34fb0c;
  }
  75% {
    box-shadow: 3px 5px 3px #fb0c0c, 0px 0px 0px #34fb0c;
  }
  100% {
    box-shadow: 3px 5px 3px #fb0c0c, 0px 0px 0px #34fb0c;
  }
}
.chevron {
  position: absolute;
  opacity: 0;
  width: 56px;
  height: 16px;
  bottom: 120px;
  transform: scale3d(0.5, 0.5, 0.5);
  animation: scrollArrowMove 3s ease-out infinite, scrollArrowFlicker 200ms infinite;
}
.chevron:first-child {
  animation: scrollArrowMove 3s ease-out 1s infinite, scrollArrowFlicker 200ms 1s infinite;
}
.chevron:last-child {
  animation: scrollArrowMove 3s ease-out 2s infinite, scrollArrowFlicker 200ms 2s infinite;
}
.chevron:before,
.chevron:after {
  content: ' ';
  position: absolute;
  top: 0;
  height: 100%;
  width: 51%;
  background: #fff;
  border: 1px solid #fff;
}
.chevron:before {
  left: 0;
  transform: skew(0deg, 30deg);
  box-shadow: 3px 3px 3px #fb0c0c, -2px 3px 2px #34fb0c;
  animation: scrollArrowLeftShadowMove 5000ms ease infinite;
}
.chevron:after {
  right: 0;
  width: 50%;
  transform: skew(0deg, -30deg);
  box-shadow: 2px 5px 3px #fb0c0c, 0px 0px 0px #34fb0c;
  animation: scrollArrowRightShadowMove 5000ms ease infinite;
}