/*Font*/
.silkscreen-regular {
  font-family: "Silkscreen", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.silkscreen-bold {
  font-family: "Silkscreen", sans-serif;
  font-weight: 700;
  font-style: normal;
}


.roboto-<uniquifier> {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

/* Text links */
a {text-decoration: none; color:#92B8FF;}

/* Text highlight */
::selection {
color:#000000;
background-color:#FFB861;  
}

::selection a {
color:#000000;
background-color:#FFB861;
}



body {
    padding: 0;
    margin: 0;
    width:100vw, 100vh;
    background-size: 100vw; height:100%;
    font-family:  Helvetica, sans-serif, consolas;
    color: #ffffff;
}

nav {
  background-color: #5E57CB;
  height: 70px;
  width:90%;
  margin:auto;
  position:fixed;
  bottom: 24px;
  display:flex;
  justify-content:center;
  align-content:center;
  width:fit-content;
  border-radius:20px;
}



/*Bar fills as you scroll*/
.progressbar {
  height:5px;
  position:sticky;
  top:0%;
  animation:
    scaleProgress auto linear,
    colorChange auto linear;
  animation-timeline: scroll(root);
}

@keyframes scaleProgress {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

@keyframes colorChange {
  0% {
    background-color: #FFB861;
  }
 
  50% {
      background-color: #F83F7A;
    }
 
  100% {
    background-color: #5E57CB;
  }
}

/*Windows 98 UI*/
.window {
  color:#000000;
}
  


/*Bubble background*/
@keyframes move {
    100% {
        transform: translate3d(0, 0, 1px) rotate(360deg);
    }
}

.background {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: -10;
    background: #000000;
    overflow: hidden;
}

.background span {
    width: 3vmin;
    height: 3vmin;
    border-radius: 3vmin;
    backface-visibility: hidden;
    position: absolute;
    animation: move;
    animation-duration: 41;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}


.background span:nth-child(0) {
    color: #ff3874;
    top: 43%;
    left: 30%;
    animation-duration: 12s;
    animation-delay: -26s;
    transform-origin: 17vw -12vh;
    box-shadow: 6vmin 0 1.4317454335513573vmin currentColor;
}
.background span:nth-child(1) {
    color: #6f5cff;
    top: 1%;
    left: 100%;
    animation-duration: 26s;
    animation-delay: -19s;
    transform-origin: 15vw 12vh;
    box-shadow: -6vmin 0 1.3525276238237836vmin currentColor;
}
.background span:nth-child(2) {
    color: #ff9d14;
    top: 66%;
    left: 58%;
    animation-duration: 6s;
    animation-delay: -70s;
    transform-origin: -22vw 22vh;
    box-shadow: 6vmin 0 0.857781329314493vmin currentColor;
}
.background span:nth-child(3) {
    color: #ff9d14;
    top: 27%;
    left: 8%;
    animation-duration: 64s;
    animation-delay: -36s;
    transform-origin: -2vw 15vh;
    box-shadow: 6vmin 0 1.6471538179901781vmin currentColor;
}
.background span:nth-child(4) {
    color: #ff3874;
    top: 83%;
    left: 94%;
    animation-duration: 45s;
    animation-delay: -60s;
    transform-origin: -20vw -4vh;
    box-shadow: 6vmin 0 0.9513857355448363vmin currentColor;
}
.background span:nth-child(5) {
    color: #ff9d14;
    top: 59%;
    left: 20%;
    animation-duration: 18s;
    animation-delay: -16s;
    transform-origin: -8vw -21vh;
    box-shadow: -6vmin 0 1.6476245499896915vmin currentColor;
}
.background span:nth-child(6) {
    color: #ff9d14;
    top: 23%;
    left: 77%;
    animation-duration: 64s;
    animation-delay: -40s;
    transform-origin: -20vw 12vh;
    box-shadow: 6vmin 0 1.5856040607390258vmin currentColor;
}
.background span:nth-child(7) {
    color: #ff9d14;
    top: 11%;
    left: 70%;
    animation-duration: 27s;
    animation-delay: -21s;
    transform-origin: -9vw 11vh;
    box-shadow: 6vmin 0 0.9157587312782304vmin currentColor;
}
.background span:nth-child(8) {
    color: #ff3874;
    top: 65%;
    left: 55%;
    animation-duration: 80s;
    animation-delay: -50s;
    transform-origin: 7vw 12vh;
    box-shadow: 6vmin 0 1.5163482764605516vmin currentColor;
}
.background span:nth-child(9) {
    color: #ff3874;
    top: 56%;
    left: 4%;
    animation-duration: 24s;
    animation-delay: -48s;
    transform-origin: 21vw 16vh;
    box-shadow: -6vmin 0 1.5347892785291293vmin currentColor;
}
.background span:nth-child(10) {
    color: #6f5cff;
    top: 75%;
    left: 57%;
    animation-duration: 41s;
    animation-delay: -3s;
    transform-origin: -7vw 13vh;
    box-shadow: -6vmin 0 1.2663588039076132vmin currentColor;
}
.background span:nth-child(11) {
    color: #6f5cff;
    top: 87%;
    left: 7%;
    animation-duration: 91s;
    animation-delay: -3s;
    transform-origin: -14vw 18vh;
    box-shadow: -6vmin 0 0.8167335420326064vmin currentColor;
}
.background span:nth-child(12) {
    color: #ff9d14;
    top: 80%;
    left: 74%;
    animation-duration: 48s;
    animation-delay: -74s;
    transform-origin: 12vw -6vh;
    box-shadow: 6vmin 0 1.3289769194018313vmin currentColor;
}
.background span:nth-child(13) {
    color: #ff3874;
    top: 99%;
    left: 76%;
    animation-duration: 78s;
    animation-delay: -11s;
    transform-origin: 20vw -12vh;
    box-shadow: -6vmin 0 0.8690614245924249vmin currentColor;
}
.background span:nth-child(14) {
    color: #ff3874;
    top: 14%;
    left: 89%;
    animation-duration: 66s;
    animation-delay: -69s;
    transform-origin: 4vw -14vh;
    box-shadow: -6vmin 0 1.2730012638307535vmin currentColor;
}
.background span:nth-child(15) {
    color: #6f5cff;
    top: 86%;
    left: 42%;
    animation-duration: 12s;
    animation-delay: -73s;
    transform-origin: -11vw -19vh;
    box-shadow: 6vmin 0 1.6985391835661807vmin currentColor;
}
.background span:nth-child(16) {
    color: #6f5cff;
    top: 97%;
    left: 55%;
    animation-duration: 65s;
    animation-delay: -4s;
    transform-origin: 6vw -12vh;
    box-shadow: 6vmin 0 1.6151699406944853vmin currentColor;
}
.background span:nth-child(17) {
    color: #ff3874;
    top: 84%;
    left: 74%;
    animation-duration: 74s;
    animation-delay: -55s;
    transform-origin: -19vw -14vh;
    box-shadow: -6vmin 0 1.0588575051684823vmin currentColor;
}
.background span:nth-child(18) {
    color: #ff3874;
    top: 46%;
    left: 46%;
    animation-duration: 80s;
    animation-delay: -55s;
    transform-origin: -4vw -15vh;
    box-shadow: 6vmin 0 1.317362031141371vmin currentColor;
}
.background span:nth-child(19) {
    color: #ff3874;
    top: 1%;
    left: 90%;
    animation-duration: 7s;
    animation-delay: -19s;
    transform-origin: 17vw -18vh;
    box-shadow: 6vmin 0 1.0627076088845222vmin currentColor;
}
.background span:nth-child(20) {
    color: #ff9d14;
    top: 9%;
    left: 66%;
    animation-duration: 27s;
    animation-delay: -39s;
    transform-origin: -13vw -20vh;
    box-shadow: 6vmin 0 0.7820762247824904vmin currentColor;
}
.background span:nth-child(21) {
    color: #6f5cff;
    top: 80%;
    left: 96%;
    animation-duration: 92s;
    animation-delay: -68s;
    transform-origin: -22vw 14vh;
    box-shadow: -6vmin 0 1.6782087977013127vmin currentColor;
}
.background span:nth-child(22) {
    color: #6f5cff;
    top: 11%;
    left: 67%;
    animation-duration: 17s;
    animation-delay: -70s;
    transform-origin: 0vw 3vh;
    box-shadow: 6vmin 0 1.0610931826017391vmin currentColor;
}
.background span:nth-child(23) {
    color: #ff9d14;
    top: 14%;
    left: 39%;
    animation-duration: 88s;
    animation-delay: -20s;
    transform-origin: 4vw -17vh;
    box-shadow: -6vmin 0 1.2236726460421123vmin currentColor;
}
.background span:nth-child(24) {
    color: #6f5cff;
    top: 75%;
    left: 69%;
    animation-duration: 88s;
    animation-delay: -83s;
    transform-origin: -16vw 21vh;
    box-shadow: 6vmin 0 1.206572829288965vmin currentColor;
}
.background span:nth-child(25) {
    color: #ff9d14;
    top: 76%;
    left: 27%;
    animation-duration: 24s;
    animation-delay: -7s;
    transform-origin: -16vw 10vh;
    box-shadow: 6vmin 0 1.0983260936750763vmin currentColor;
}
.background span:nth-child(26) {
    color: #6f5cff;
    top: 32%;
    left: 45%;
    animation-duration: 69s;
    animation-delay: -73s;
    transform-origin: 12vw 21vh;
    box-shadow: -6vmin 0 1.3289924044719337vmin currentColor;
}
.background span:nth-child(27) {
    color: #ff9d14;
    top: 35%;
    left: 47%;
    animation-duration: 47s;
    animation-delay: -9s;
    transform-origin: -21vw -15vh;
    box-shadow: 6vmin 0 0.8531665638079811vmin currentColor;
}
.background span:nth-child(28) {
    color: #ff3874;
    top: 79%;
    left: 37%;
    animation-duration: 25s;
    animation-delay: -85s;
    transform-origin: -5vw -1vh;
    box-shadow: -6vmin 0 0.9646592434376126vmin currentColor;
}
.background span:nth-child(29) {
    color: #ff3874;
    top: 42%;
    left: 36%;
    animation-duration: 74s;
    animation-delay: -20s;
    transform-origin: 12vw -10vh;
    box-shadow: 6vmin 0 0.9334960486089477vmin currentColor;
}
.background span:nth-child(30) {
    color: #6f5cff;
    top: 58%;
    left: 19%;
    animation-duration: 72s;
    animation-delay: -62s;
    transform-origin: -13vw 9vh;
    box-shadow: 6vmin 0 1.0856563698412733vmin currentColor;
}
.background span:nth-child(31) {
    color: #ff9d14;
    top: 44%;
    left: 67%;
    animation-duration: 88s;
    animation-delay: -32s;
    transform-origin: -16vw -22vh;
    box-shadow: 6vmin 0 1.5951983283349453vmin currentColor;
}
.background span:nth-child(32) {
    color: #ff3874;
    top: 14%;
    left: 14%;
    animation-duration: 47s;
    animation-delay: -71s;
    transform-origin: 8vw 23vh;
    box-shadow: -6vmin 0 1.7419401680531381vmin currentColor;
}
.background span:nth-child(33) {
    color: #ff9d14;
    top: 45%;
    left: 57%;
    animation-duration: 6s;
    animation-delay: -89s;
    transform-origin: -4vw 19vh;
    box-shadow: -6vmin 0 1.183279207199595vmin currentColor;
}
.background span:nth-child(34) {
    color: #ff3874;
    top: 82%;
    left: 50%;
    animation-duration: 15s;
    animation-delay: -40s;
    transform-origin: 6vw 18vh;
    box-shadow: -6vmin 0 0.7678168960296154vmin currentColor;
}
.background span:nth-child(35) {
    color: #ff3874;
    top: 21%;
    left: 64%;
    animation-duration: 43s;
    animation-delay: -18s;
    transform-origin: -3vw -10vh;
    box-shadow: 6vmin 0 1.2059043372236062vmin currentColor;
}
.background span:nth-child(36) {
    color: #ff9d14;
    top: 78%;
    left: 75%;
    animation-duration: 41s;
    animation-delay: -58s;
    transform-origin: -24vw -11vh;
    box-shadow: -6vmin 0 1.2970251517380098vmin currentColor;
}
.background span:nth-child(37) {
    color: #ff3874;
    top: 51%;
    left: 100%;
    animation-duration: 50s;
    animation-delay: -18s;
    transform-origin: 25vw -3vh;
    box-shadow: 6vmin 0 1.456943711920044vmin currentColor;
}
.background span:nth-child(38) {
    color: #6f5cff;
    top: 72%;
    left: 36%;
    animation-duration: 57s;
    animation-delay: -14s;
    transform-origin: -5vw 12vh;
    box-shadow: -6vmin 0 1.717632951798127vmin currentColor;
}
.background span:nth-child(39) {
    color: #ff9d14;
    top: 6%;
    left: 24%;
    animation-duration: 87s;
    animation-delay: -2s;
    transform-origin: 10vw 20vh;
    box-shadow: -6vmin 0 1.4120549014176231vmin currentColor;
}
.background span:nth-child(40) {
    color: #ff3874;
    top: 100%;
    left: 59%;
    animation-duration: 62s;
    animation-delay: -9s;
    transform-origin: 4vw -9vh;
    box-shadow: 6vmin 0 1.5680658889382166vmin currentColor;
}
.background span:nth-child(41) {
    color: #ff9d14;
    top: 87%;
    left: 9%;
    animation-duration: 28s;
    animation-delay: -57s;
    transform-origin: 9vw -20vh;
    box-shadow: 6vmin 0 0.9277677016210198vmin currentColor;
}
.background span:nth-child(42) {
    color: #ff9d14;
    top: 78%;
    left: 3%;
    animation-duration: 11s;
    animation-delay: -1s;
    transform-origin: -4vw 4vh;
    box-shadow: 6vmin 0 1.5572711513558781vmin currentColor;
}
.background span:nth-child(43) {
    color: #6f5cff;
    top: 9%;
    left: 58%;
    animation-duration: 21s;
    animation-delay: -82s;
    transform-origin: 0vw 12vh;
    box-shadow: 6vmin 0 1.2408409673718594vmin currentColor;
}
.background span:nth-child(44) {
    color: #ff9d14;
    top: 60%;
    left: 55%;
    animation-duration: 27s;
    animation-delay: -42s;
    transform-origin: 1vw 2vh;
    box-shadow: 6vmin 0 1.187010494288618vmin currentColor;
}
.background span:nth-child(45) {
    color: #ff9d14;
    top: 33%;
    left: 57%;
    animation-duration: 66s;
    animation-delay: -4s;
    transform-origin: 9vw 25vh;
    box-shadow: -6vmin 0 0.9507247034939648vmin currentColor;
}
.background span:nth-child(46) {
    color: #ff9d14;
    top: 6%;
    left: 32%;
    animation-duration: 12s;
    animation-delay: -5s;
    transform-origin: 12vw 12vh;
    box-shadow: 6vmin 0 1.208393200313181vmin currentColor;
}
.background span:nth-child(47) {
    color: #6f5cff;
    top: 36%;
    left: 95%;
    animation-duration: 34s;
    animation-delay: -90s;
    transform-origin: -16vw 15vh;
    box-shadow: 6vmin 0 0.7825519398126819vmin currentColor;
}
.background span:nth-child(48) {
    color: #6f5cff;
    top: 14%;
    left: 3%;
    animation-duration: 33s;
    animation-delay: -21s;
    transform-origin: -3vw 11vh;
    box-shadow: 6vmin 0 1.5688212450369123vmin currentColor;
}
.background span:nth-child(49) {
    color: #6f5cff;
    top: 87%;
    left: 20%;
    animation-duration: 81s;
    animation-delay: -24s;
    transform-origin: -8vw -23vh;
    box-shadow: -6vmin 0 1.2452695898482573vmin currentColor;
}