body {
        margin: 0;
        background-color: black;
        overflow: hidden;
    }
    
    body.stop-transitions * {
        transition: all 0s linear 0s !important;
    }
    
    canvas,
    img {
        image-rendering: optimizeSpeed;
        image-rendering: -moz-crisp-edges;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: optimize-contrast;
        image-rendering: pixelated;
        -ms-interpolation-mode: nearest-neighbor;
    }
    
    img {
        display: none;
    }
    
    .canvas-container {
        margin: auto;
        position: relative;
        aspect-ratio: 16 / 9;
        width: 100%;
        display: flex;
        justify-content: center;
        overflow: hidden;
    }
    
    #canvas {
        position: absolute;
        background-color: lightgrey;
    }
    
    #restart-button {
        background-color: #EE0000;
        top: 49vw;
        left: 16vw;
        position: absolute;
        width: 6vw;
        height: 6vw;
        margin-left: -15%;
        border-radius: 3vw 3vw 3vw 3vw;
        transition: border-radius 0.2s ease-in, background-color 0.2s ease-in, width 1s ease-in 0s, height 1s ease-in 0s, top 1s ease-in 0s, left 1s ease-in 0s, font-size 1s ease-in 0s;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 1.5vw;
    }
    
    #restart-button:hover {
        border-radius: 2vw 2vw 2vw 2vw;
        background-color: #FF0000;
    }
    
    #restart-button .restart-button-open:hover {
        border-radius: 1vw 1vw 1vw 1vw;
        background-color: #FF0000;
    }
    
    .restart-button-open {
        top: 42vw !important;
        left: 16vw !important;
        width: 12vw !important;
        height: 12vw !important;
        font-size: 2vw !important;
        transition: width 1s ease-in 1s, height 1s ease-in 1s, top 1s ease-in 1s, left 1s ease-in 1s, font-size 1s ease-in 1s !important;
    }
    
    #menu-button {
        background-color: #00EE00;
        top: 49vw;
        left: 24vw;
        position: absolute;
        width: 6vw;
        height: 6vw;
        margin-left: -15%;
        border-radius: 3vw 3vw 3vw 3vw;
        transition: border-radius 0.2s ease-in, background-color 0.2s ease-in, width 1s ease-in 0s, height 1s ease-in 0s, top 1s ease-in 0s, left 1s ease-in 0s, font-size 1s ease-in 0s;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 1.5vw;
    }
    
    #menu-button:hover {
        border-radius: 2vw 2vw 2vw 2vw;
        background-color: #00FF00;
    }
    
    #menu-button .menu-button-open:hover {
        border-radius: 1vw 1vw 1vw 1vw;
        background-color: #00FF00;
    }
    
    .menu-button-open {
        top: 42vw !important;
        left: 30vw !important;
        width: 12vw !important;
        height: 12vw !important;
        font-size: 2vw !important;
        transition: width 1s ease-in 1s, height 1s ease-in 1s, top 1s ease-in 1s, left 1s ease-in 1s, font-size 1s ease-in 1s !important;
    }
    
    .hidden {
        display: none !important;
    }
    
    #title-img {
        top: 10vw;
        left: 50vw;
        position: absolute;
        width: 80vw;
        height: 6vw;
        background-image: none;
        background-repeat: no-repeat;
        background-size: contain;
        image-rendering: crisp-edges;
        margin-left: -18vw;
        transition: top 4s ease-out;
    }
    
    .title-raise {
        top: 1vw !important;
    }
    
    #play-button {
        background-color: #00EE00;
        top: 10vw;
        left: 56vw;
        position: absolute;
        width: 0vw;
        height: 0vw;
        margin-left: -15%;
        border-radius: 3vw 3vw 3vw 3vw;
        transition: border-radius 0.2s ease-out, background-color 0.2s ease-in, width 1s ease-in 1.5s, height 1s ease-in 1.5s, top 1s ease-in 1.5s, left 1s ease-in 1.5s, opacity 1s ease-in 1.5s, font-size 1s ease-in 1.5s;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        display: flex;
        opacity: 0;
        font-size: 0vw;
    }
    
    .play-button-open {
        top: 10vw !important;
        left: 56vw !important;
        width: 18vw !important;
        height: 6vw !important;
        opacity: 1 !important;
        font-size: 3vw !important;
    }
    
    #play-button:hover {
        border-radius: 2vw 2vw 2vw 2vw;
        background-color: #00FF00;
    }
    
    #cover {
        background-color: black;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }
    
    .fade-in {
        animation-duration: 2s;
        animation-name: fadeIn;
        animation-fill-mode: forwards;
    }
    
    .fade-out {
        animation-duration: 2s;
        animation-name: fadeOut;
        animation-fill-mode: forwards;
    }
    
    @keyframes fadeIn {
        from {
            opacity: 0;
            display: block;
        }
        to {
            opacity: 1;
            display: block;
        }
    }
    
    @keyframes fadeOut {
        from {
            opacity: 1;
            display: block;
        }
        to {
            opacity: 0;
            display: none;
        }
    }
    
    #audio-control {
        position: absolute;
        top: 0;
        left: 0;
        width: 15%;
        height: 8%;
        font-size: 1vw;
    }
    
    #audio-control #music {
        background-color: white;
        position: absolute;
        top: 5%;
        left: 35%;
        width: 4vw;
        height: 4vw;
        color: black;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 1vw;
        transition: background-color 0.2s ease-in, border-radius 0.2s ease-in, color 0.2s ease-in;
        cursor: pointer;
    }
    
    #audio-control #sound {
        background-color: white;
        position: absolute;
        top: 5%;
        left: 5%;
        width: 4vw;
        height: 4vw;
        color: black;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 1vw;
        transition: background-color 0.2s ease-in, border-radius 0.2s ease-in, color 0.2s ease-in;
        cursor: pointer;
    }
    
    #audio-control #pause {
        background-color: white;
        position: absolute;
        top: 5%;
        left: 65%;
        width: 4vw;
        height: 4vw;
        color: black;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 1vw;
        transition: background-color 0.2s ease-in, border-radius 0.2s ease-in, color 0.2s ease-in;
        cursor: pointer;
    }
    
    #audio-control #music:hover,
    #audio-control #sound:hover,
    #audio-control #pause:hover {
        border-radius: 2vw;
    }
    
    .active {
        background-color: black !important;
        color: white !important;
    }
    
    #display-score {
        pointer-events: none;
        top: 0vw;
        left: 25%;
        position: absolute;
        width: 50%;
        height: 20vw;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        font-family: Trebuchet MS;
    }
    
    #depth #mid-bar {
        background: linear-gradient(#089ce0, #270060);
        position: absolute;
        top: 1%;
        left: 98%;
        width: 1%;
        height: 98%;
        display: block;
        border-radius: 1vw;
        outline: black 1px solid;
    }
    
    #depth #indicator {
        background-color: red;
        position: absolute;
        top: 97%;
        left: 98%;
        width: 1vw;
        height: 1vw;
        display: block;
        border-radius: 1vw;
        outline: black 1px solid;
    }
    
    #display-score {
        display: flex;
        justify-content: center;
        align-items: center;
        color: black;
        font-family: Trebuchet MS;
        width: 50vw;
        left: 25vw;
        height: 100%;
        top: 0%;
        background-image: none;
        background-repeat: no-repeat;
        background-size: contain;
        image-rendering: crisp-edges;
        position: absolute;
        rotate: 10deg;
        transition: top 1s ease-in-out 4s, rotate 1s ease-in-out 4s;
    }
    
    #display-score #score-top {
        top: 2.8vw;
        left: 6vw;
        position: absolute;
        font-size: 4vw;
        transition: top 1s ease-out, opacity 1s ease-out;
    }
    
    #display-score #score-mid {
        left: 6vw;
        top: 11vw;
        position: absolute;
        font-size: 3vw;
        transition: opacity 1s ease-out 1s;
    }
    
    #display-score #score-msg {
        top: 17vw;
        left: 3.5vw;
        width: 17vw;
        height: 14vw;
        position: absolute;
        font-size: 3vw;
        transition: opacity 1s ease-out 2s;
    }
    
    #display-score.hide {
        rotate: 0deg;
        top: -100%;
        transition: top 1s ease-out, rotate 1s ease-out;
    }
    
    #trophies-display {
        position: absolute;
        top: 110%;
        width: 80%;
        height: 100%;
        margin: auto;
        display: flex;
        justify-content: center;
        border-radius: 1vw;
        border: 1vw solid goldenrod;
        background-color: yellow;
        transition: top 1s ease-out 0s;
    }
    
    #trophies-display table {
        position: absolute;
        margin: auto 0px;
        display: inline-table;
    }
    
    #trophies-display table p {
        font-size: 1.5vw;
        text-align: center;
    }
    
    #trophies-display table div {
        font-size: 2vw;
        outline: black 1px solid;
        width: 100%;
        padding: 1vw;
        border-radius: 1vw;
        background-color: rgba(0, 0, 0, 0.5);
    }
    
    #trophies-display td {
        padding: 3vw;
    }
    
    #trophies-display #trophies {
        position: absolute;
        border-radius: 1vw;
        border: 0.5vw solid goldenrod;
        background-color: yellow;
        text-align: center;
        width: 10vw;
        top: -10%;
        font-size: 2vw;
        cursor: pointer;
        transition: top 0.1s ease-out 0s;
    }
    
    #trophies-display #trophies:hover {
        top: -10.5%;
    }
    
    #trophies-display.semi {
        top: 95%;
        transition: top 1s ease-out 2s;
    }
    
    #trophies-display.open {
        top: 15%;
        transition: top 1s ease-out 0s;
    }
    
    #trophies-display.semiQuick {
        top: 95%;
        transition: top 1s ease-out 0s;
    }
    
    #trophies-display table div.completed {
        background-color: gold;
        outline: darkgoldenrod 1px solid;
    }
    
    #trophies-display #trophies-clear {
        position: absolute;
        border-radius: 1vw;
        border: 0.5vw solid red;
        background-color: crimson;
        text-align: center;
        width: 15vw;
        top: 70%;
        font-size: 2vw;
        cursor: pointer;
        transition: top 0.1s ease-out 0s;
    }
    
    #trophies-display #trophies-clear:hover {
        animation: shake 0.5s linear 0s;
    }
    
    @keyframes shake {
        0% {
            translate: -0.5vw 0vw;
        }
        25% {
            translate: 0.5vw 0vw;
        }
        50% {
            translate: -0.5vw 0vw;
        }
        75% {
            translate: 0.5vw 0vw;
        }
        100% {}
    }