/* HEX CODES

Neon pink: #FE019A
Light green: #81E4AE
Teal: #006161;
Lime yellow: #C7EA46
Deep purple: #301934
Dark blue: #012231;

*/

body {
    margin: 0;
    background-color: black;
    font-family: 'Inter', sans-serif;
}

.noselect {
    -webkit-touch-callout: none;
      -webkit-user-select: none;
       -khtml-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none; 
              user-select: none;
}

.screen {
    position: relative;
    width: 360px;
    height: 680px;
    margin: 0 auto;
    overflow: hidden;
}

.progress-bar {
    position: relative;
    z-index: 1;
    column-count: 7;
    column-gap: 0.4em;
    margin: 0.5em;
}

.progress {
    background-color: black;
    height: 0.3em;
    border-radius: 5px;
    opacity: 0.3;
}

.progression {
    background-color: white;
    height: 0.3em;
    width: 0;
    border-radius: 5px;
}

.left, .right {
    position: absolute;
    top: 0;
    height: 100%;
}

.left {
    width: 20%;
}

.right {
    right: 0;
    width: 80%;
}

.right:hover, .left:hover {
    cursor: pointer;
}

#animateProgress {
    animation: progressBar 18s linear forwards;
}

#page1 #animateProgress {
    animation: progressBar 8.5s linear forwards;
}

#page3 #animateProgress {
    animation: progressBar 35s linear forwards;
}

#page6 #animateProgress {
    animation: progressBar 24s linear forwards;
}

#page7 #animateProgress {
    animation: progressBar 28s linear forwards;
}

#reanimateProgress {
    animation: progressBar2 9s linear forwards;
}

@keyframes progressBar {
    100% {
        width: 100%;
    }
}

@keyframes progressBar2 {
    100% {
        width: 100%;
    }
}