:root {
    --tile-size: 151px;
    --background-travel-radius: 1000px;
    --background-travel-angle: 0;
    --background-scale: 1;
}

body {
    background-color: #191919;
    background-image: url(grid_tile.png);
    background-repeat: repeat;
    display: flex;
    flex-direction: column;
    transition-duration: 20s;
    transition-timing-function: linear;
    background-position: calc(var(--background-travel-radius) * cos(var(--background-travel-angle))) calc(var(--background-travel-radius) * sin(var(--background-travel-angle)));
    background-size: calc(var(--tile-size) * var(--background-scale));
}

#container {
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: row;
    max-height: 100vh;
}

#schematic {
    max-width: 60%;
    top: 0%;
    max-height: 80vh;
}

/* Lyrics */

@keyframes box-appear {
    0% {
        scale: 0;
    }

    100% {
        scale: 1;
    }
}

.text-box-container {
    align-self: stretch;
    position: relative;
    flex-grow: 1;
}

.text-box {
    border: 2px dashed #c9c241;
    transition: scale 0.3s;
    position: absolute;
    display: inline;
    padding: 5px;
    font-family: "DotGothic16", sans-serif;
    color: hsl(45.45, 22.15%, 70.79%);
    font-size: clamp(1em, 2.5vw, 2em);
    user-select: none;
}

.text-box-left {
    right: 0%;
    transform: translateY(-50%);
    transform-origin: left center;
}

.text-box-right {
    transform: translateY(-50%);
    transform-origin: left center;
}

.text-box-hidden {
    scale: 0.01;
}

.text-box-shown {
    scale: 1;
}

@keyframes colour-flicker {
    0% {
        color:hsla(45.45, 50%, 70.79%, 100%);
    }
    100% {
        color: hsla(45.45, 70%, 70.79%, 100%);
    }
}

.lyric-text-hidden {
    color: hsla(45.45, 22.15%, 70.79%, 10%);
}

.lyric-text-shown {
    color: hsla(45.45, 22.15%, 70.79%, 100%);
}

.lyric-text-active {
    color:hsla(45.45, 50%, 70.79%, 100%);
    animation: colour-flicker 0.2s infinite alternate;
}

/* Media Controls */

#media-controls {
    align-self: center;
    width: min-content;
    display: flex;
    font-family: 'Noto Sans Symbols 2', sans-serif;
    user-select: none;
}

#media-controls a {
    font-size: clamp(5em, 2.5vw, 8em);
    text-decoration: none;
    width: 2.5em;
    text-align: center;
    color: #c9c241;
    margin: auto;
}

#volume-controls {
    width: max-content;
}

#vertical-padding {
    min-height: 2cm;
}

.disabled-loading {
    display: none !important;
}

.disabled-acceptance {
    display: none !important;
}

#loading {
    font-size: 2.5em;
    text-align: center;
    color: #c9c241;
    font-family: "DotGothic16", sans-serif;
}

/* Instructions Dialog */

#instructions {
    position: absolute;
    margin: auto;
    border: 3px solid #c9c241;
    color: #c9c241;
    align-self: center;
    top: 40%;
    background: black;
    padding: 1em 3em;
    font-family: "DotGothic16", sans-serif;
    text-align: center;
    font-size: clamp(1em, 1.5vw, 1.5em);
}

#instructions > a {
    color: #c9c241;
    border: 2px outset #c9c241;
    background: rgb(17, 17, 17);
    display: block; 
    width: max-content;
    margin: auto;
}

#instructions > a:visited {
    color: #c9c241;
}

/* For spark effect */
@keyframes main-pulse {
    to {
        scale: 0.9;
    }
}

@keyframes arc-vertical {
    0% {
        transform: translateY(0%);
    }
    20% {
        transform: translateY(-200%);
    }
    100% {
        transform: translateY(600%);
    }
}

@keyframes arc-left {
    100% {
        transform: translateX(-300%);
    }
}

@keyframes arc-right {
    to {
        transform: translateX(300%);
    }
}

@keyframes dissipate {
    to {
      scale: 0;  
    }
}

.spark {
    background: radial-gradient(white, lightblue);
    border-radius: 50%;
}

.spark-main {
    position: absolute;
    width: 13px;
    height: 13px;
    top: 300px;
    left: 300px;
    animation: main-pulse 0.1s ease-in-out infinite alternate;
}

.spark-particle-1-vertical {
    position: absolute;
    top: 50%;
    left: 5%;
    animation: arc-vertical 0.3s 1 ease-in;
    z-index: 1;
}

.spark-particle-2-vertical {
    position: absolute;
    top: 10%;
    left: 50%;
    animation: arc-vertical 0.3s 1 ease-in 0.1s;
    z-index: 1;
}

.spark-particle-1 {
    width: 8px;
    height: 8px;
    z-index: 1;
    animation: arc-left 0.3s 1 linear, dissipate 0.3s 1 ease-in;

}

.spark-particle-2 {
    width: 5px;
    height: 5px;
    z-index: 1;
    animation: arc-right 0.3s 1 ease-in-out 0.1s, dissipate 0.3s 1 ease-in 0.1s;
}