* {
    margin: 0;
    padding: 0;
    touch-action: none;
    user-select: none;
}

@font-face {
  font-family: "m6x11plus";
  src: url("../fonts/m6x11plus.ttf") format("truetype");
  font-weight: normal;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Regular.ttf") format("truetype");
  font-weight: normal;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; 
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
}

canvas {
    display: block;
    width: 100dvw;
    height: 100dvh;
    z-index: 0;
    position: fixed;
    transform: scale(1.5);
    transition: 
        transform 2.3s cubic-bezier(.08,.3,.37,1.07),
        filter 2.3s cubic-bezier(.08,.3,.37,1.07);
}

/*thoughtful zoom and rotate*/
.bg-withdraw-anim {
  transform: scale(2) rotate(-4deg);
  transform-origin: center;
  filter: brightness(1) grayscale(50%); 
}

/*more intense zoom and rotate*/
.bg-username-anim {
  transform: scale(2.5) rotate(-8deg);
  transform-origin: center;
  filter: brightness(0.7) grayscale(100%);
}

#balance {
    font-family: Helvetica;
    font-size: min(20vw, 275px);
    color: white;
    position: fixed;
    cursor: pointer;
}

#withdrawal-amount {
    font-family: Helvetica;
    font-size: min(25vw, 300px);
    color: white;
    position: fixed;
    cursor: pointer;
}

#withdrawal-input {
    position: fixed;
    font-size: 50px;
    transform: translateY(-5000px);
    pointer-events: none
}

#username-input {
    position: fixed;
    font-size: 50px;
    transform: translateY(-5000px);
    pointer-events: none
}

/*Short sentence confirming who to send to and how much*/
#withdrawal-description {
    display: none;
    font-family: Helvetica;
    font-size: min(4vw, 60px);
    color: white;
    position: fixed;
    top: calc(50vh + 200px);
}

#withdrawal-description span {
  display: inline-block;
  animation: wave 1.2s infinite ease-in-out;
  animation-fill-mode: both;
  will-change: transform, opacity;
  opacity: 0.75;
}

#back-btn {
    display: none;
    border: none;
    font-family: Helvetica;
    font-size: min(3vw, 60px);
    color: white;
    position: fixed;
    background: none;
    top: calc(50vh - 200px);
    left: 15vw;
    cursor: pointer;
}

#back-btn:hover, #next-btn:hover {
    opacity: 80%;
}

#back-btn:active, #next-btn:active {
    opacity: 60%;
}

#next-btn {
    display: none;
    border: none;
    font-family: Helvetica;
    font-size: min(3vw, 60px);
    color: white;
    position: fixed;
    background: none;
    top: calc(50vh - 200px);
    right: 15vw;
    cursor: pointer;
}

.withdrawal-ui {
    display: none;
}

.username-ui {
    display: none;
}

#username-description {
    font-family: Helvetica;
    font-size: min(4vw, 60px);
    color: white;
    position: fixed;
    top: 50vh;
    opacity: 0.5;
}

#username-description span {
  display: inline-block;
  animation: wave 1.2s infinite ease-in-out;
  animation-fill-mode: both;
  will-change: transform, opacity;
}

#confirm-description {
    display: none;
    font-family: Helvetica;
    font-size: min(4vw, 60px);
    color: white;
    position: fixed;
    top: 50vh;
}


.digit-entry {
    color: rgba(255, 255, 255, 0.5);
}

.blinking-cursor {
  position: relative;
}

.blinking-cursor::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  height: 75%;
  width: 1.5px;
  background-color: white;
  animation: blink 1s step-start infinite;
}

@keyframes blink {
  0%, 50% {
    opacity: 1;
  }
  50.01%, 100% {
    opacity: 0;
  }
}

@keyframes wave {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

.glow {
  text-shadow: 0 0 7.5px currentColor;
}

.red-shake {
  animation: shakeFadeRedToWhite 0.35s 2;
}

@keyframes shakeFadeRedToWhite {
  0% {
    transform: translateX(0);
    color: red;
    opacity: 1;
  }
  25% {
    transform: translateX(-10px);
    color: #ff6666; /* lighter red */
  }
  50% {
    transform: translateX(10px);
    color: #ff9999; /* even lighter */
  }
  75% {
    transform: translateX(-10px);
    color: #ffcccc; /* near white */
  }
  100% {
    transform: translateX(0);
    color: white;
  }
}

.wysi {
    display: inline-block;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    animation: wysi-keyframes 1.5s infinite;
    text-shadow: 0 0 15px white;
    background: linear-gradient(45deg, hsl(0, 100%, 65%), hsl(90, 100%, 65%), hsl(180, 100%, 65%), hsl(270, 100%, 65%), hsl(360, 100%, 65%), hsl(90, 100%, 65%), hsl(180, 100%, 65%), hsl(270, 100%, 65%), hsl(360, 100%, 65%));
    background-clip: text;
    background-size: 300%;
    color: transparent;
    transition: color 0.5s;

}

@keyframes wysi-keyframes {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.swell {
  animation: swell 1s cubic-bezier(0,0,.01,.99) forwards;
}

#confirm-description.swell {
    animation: swell 4s ease forwards;
}

@keyframes swell {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.25);
    filter: brightness(2);
  }
}


.loader {
    width: 200px;
    height: 200px;
    border: 15px solid #FFF;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    }

    @keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
} 

#blackout {
    display: none;
    height: 100vh;
    width: 100vw;
    transform: scale(2);
    position: fixed;
    background: black;
    z-index: 99;
}