html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    width: 100%;
    user-select: none;
    font-family: Arial, sans-serif;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: black;
    scrollbar-width: none;
    text-transform: uppercase;
    filter: saturate(140%);
}

body.fullscreen {
    height: 100vh;
    color: white;
    background-color: black;
}

body::-webkit-scrollbar {
    display: none;
}

#wrapper {
    display: flex;
    flex-direction: column;
    position: relative;
    left: 0;
    top: 0;
    margin: 0 auto;
    min-height: 100%;
    max-width: 350px;
    min-width: 300px;
    width: 88vw;
    background-image: url("/image/bolts17.png"), url("/image/griptape1.png");
    background-position: center center, center center;
    background-size: auto, 100px;
    background-repeat: no-repeat, repeat;
    justify-content: center;
    align-items: center;
    align-content: center;
    border-left: solid 2px #ff00d4;
    border-right: solid 2px #ff00d4;
    outline: solid 4px rgb(132, 0, 255);
    box-sizing: border-box;
    image-rendering: smooth;
}

canvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 97;
    /* pointer-events: none; */
    touch-action: none;
}

#version {
    font-size: calc(20px);
    color: #ffffff;
}

#centeredDiv {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    align-items: center;
    align-content: center;
    justify-content: center;
}

h1, h2, p {
    color: #eee;
}

#menuH2 {
    display: inline-block;
    position: relative;
    top: 5%;
    padding-top: 10%;
    height: 25px;
}

body.fullscreen h1, h2, body.fullscreen p {
    color: #eee;
}

#praise {
    display: flex;
    position: relative;
    top: 0;
    left: 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: auto;
    min-height: 20vh;
    width: 98%;
    overflow: visible;
    padding-bottom: 1.7em;
    margin: 0 0;
    opacity: 1;
    z-index: -2;
}

#text-content-wrapper {
    display: flex;
    position: relative;
    top: 0;
    left: 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: auto;
    min-height: 100%;
    width: 100%;
    font-family: 'bangers';
    font-size: 2em;
    font-weight: bold;
    color: #ffff00;
    text-shadow:
        -1px -1px 0 #000000,
        1px -1px 0 #000000,
        -1px  1px 0 #000000,
        1px  1px 0 #000000;
    background-color: transparent;
    background: none;
    max-height: 15vh;
    overflow-x: visible;
    overflow-y: auto;
    text-align: center;
    white-space: pre-wrap;
    box-sizing: border-box;
    border-radius: 15px;
    line-height: 1;
    scrollbar-width: none;
    -ms-overflow-style: none;
    outline: none;
    border: none;
}

#text-content-wrapper::-webkit-scrollbar {
    display: none;
}

#debugInfo {
    font-family: Arial, sans-serif;
    display: none;
    position: fixed;
    top: 60px;
    right: 5px;
    opacity: 0;
}

#status, #trickStatus {
    font-size: 1.8em;
    font-weight: bold;
    margin-bottom: 10px;
}

#valuesDisplay {
    font-family: monospace;
    font-size: 0.55em;
    background-color: rgba(0, 0, 0, 0.8);
    color: #00ff00;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #00ff00;
    box-shadow: 0 2px 5px rgba(0,255,0,0.3);
    margin-bottom: 5px;
    width: auto;
    text-align: left;
    white-space: pre-wrap;
    line-height: 1.1;
}

body.fullscreen #valuesDisplay {
    background-color: #555;
    color: white;
}

#timer {
    display: inline-flex;
    position: relative;
    top: 2%;
    left: 0;
    transform: translate(0, -2%);
    width: 75%;
    height: 10%;
    font-family: monospace;
    font-size: calc(10px + 1em);
    font-weight: bold;
    text-shadow:
        -1px -1px 0 #1100ff,
        1px -1px 0 #1100ff,
        -1px  1px 0 #1100ff,
        1px  1px 0 #1100ff;
    color: hotpink;
    align-items: center;
    align-content: center;
    justify-content: center;
    margin-bottom: 20px;
    z-index: 101;
}

#score {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 75%;
    font-family: 'digital-7';
    font-size: calc(12px + 1em);
    font-weight: bold;
    line-height: 1;
    color: hotpink;
    text-shadow:
        -1px -1px 0 #1100ff,
        1px -1px 0 #1100ff,
        -1px  1px 0 #1100ff,
        1px  1px 0 #1100ff;
    background-color: #b1efff88;
    border-radius: 8px;
    border: 4px solid #00ffc8;
    outline: solid 1px black;
    box-shadow: 0 0 15px #00ffc8b3;
    margin-bottom: 1em;
    box-sizing: border-box;
    padding: 5px;
    z-index: 101;
}

.scoreH2 {
    position:relative;
    top: 0;
    left: 0;
    text-shadow:
        -1px -1px 0 #000000,
        1px -1px 0 #000000,
        -1px  1px 0 #000000,
        1px  1px 0 #000000;
    z-index: 101;

}

#logoDiv {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: top;
    align-items: center;
    align-content: center;
    top: 0;
    left: 0;
    width: auto;
    height: 8%;
    min-width: 120px;
    min-height: 120px;
    /* margin-bottom: 30%; */
    border-radius: 5%;
    background-image: url("/image/logo.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 110% 110%;
    /* border: solid 2px #8400ff; */
    box-shadow:
        inset 0 0 1em 3em #ff00f23d,
        0 0 10px 1px #0099ff,
        0 0 25px 15px #00ffc866;
    image-rendering: smooth;
    z-index: 101;
    opacity: 0.8;
    border: solid 1px rgb(34, 30, 66);
    filter: saturate(150%) brightness(1.2);
}

#trickDisplay {
    display: flex;
    position: relative;
    top: 0;
    left: 0;
    width: 75%;
    height: 0.5em;
    min-height: 0.5em;
    max-height: 36px;
    font-family: monospace;
    font-size: calc(10px + 0.5em);
    font-weight: bold;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
    color: hotpink;
    text-align: center;
    align-items: center;
    align-content: center;
    justify-content: center;
    background-color: #b1efff88;
    border-radius: 8px;
    border: 4px solid #00ffc8;
    outline: solid 1px black;
    box-shadow: 0 0 15px #00ffc8b3;
    margin-bottom: 20px;
    z-index: 101;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 30px 0 30px 0;
    scrollbar-width: none;
}

button {
    padding: 8px 14px;
    margin-bottom: 10px;
    /* font-size: 18px; */
    color: #fff;
    background: linear-gradient(45deg, #00ffc8, #8400ff);
    border: 3px solid #00ffc8;
    border-radius: 8px;
    text-transform: uppercase;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    box-shadow: 0 0 15px #00ffc8b3;
    cursor: pointer;
    outline: none;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    cursor: pointer;
    z-index: 101;
    outline: solid 2px blue;
}

button:hover {
    background: linear-gradient(45deg, #8400ff, #00ffc8);
    box-shadow: 0 0 25px #00ffc8;
    transform: scale(1.05);
}

button:active {
    transform: scale(1.0);
    box-shadow: 0 0 10px #00ffc8;
}

#startGameButton {
    height: 100%;
    width: 100%;
    margin: 0 auto;
    background-color: black;
    background: linear-gradient(45deg, #141414, #000333);
    background-image: url("/image/vaporbg.gif");
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat; 
    box-shadow: none;
    border: solid 4px#06003f;
    border-radius: 0;
    z-index: 101;
    color: #00ffb3;
    outline: solid 2px black;
    text-shadow:
        -1px -1px 0 #000000,
        1px -1px 0 #000000,
        -1px  1px 0 #000000,
        1px  1px 0 #000000;
}

#startGameButton:hover {
    transform: scale(1.0);
}

#startGameButton:active {
    transform: scale(1.0);
}

#tryAgainButton {
    display: inline-block;
    opacity: 0;
}

#backToMenuButton {
    display: none;
    position: absolute;
    bottom: 5%;
    margin-bottom: 10%;
}

#ok {
    display: inline-block;
    position: relative;
    top: 0;
    left: 0;
    transform: translate(0, 0);
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 25px;
    padding-right: 25px;
    z-index: 201;
}

.warning { color: orange; font-weight: bold; }
.error { color: red; font-weight: bold; }
.success { color: green; font-weight: bold; }
.info { color: steelblue; font-weight: bold; }

#vidContainer {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding-bottom: 177.78%;
    z-index: 102;
}

#menu {
    display: none;
    position: relative;
    flex-direction: column;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: rgb(0, 0, 0);
    background-image: url("/image/bg51.gif");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #542eff;
    color: white;
    font-family: monospace;
    font-size: calc(10px + 0.25em);
    font-weight: bold;
    justify-content: center;
    align-content: center;
    align-items: center;
    text-align: center;
    z-index: -1;
    padding: 10% 0 10% 0;
}

#menu div {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
    left: 0;
    width: 80%;
    max-width: 600px;
    height: auto;
    min-height: 250px;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: rgba(17, 0, 255, 0.356);
    border: solid 10px white;
    border-radius: 25px;
    outline: solid 1px black;
    padding: 0 0 20% 0;
}

#menu div h1,
#menu div p {
    margin: 0;
}

#grip {
    color: white;
    text-shadow:
        -1px -1px 0 #000000,
        1px -1px 0 #000000,
        -1px  1px 0 #000000,
        1px  1px 0 #000000;
    background-color: #99ffe0;
    border: solid 2px #00aeff;
    width: 50%;
}

#paintPen {
    color: black;
    text-shadow:
        -1px -1px 0 #000000,
        1px -1px 0 #000000,
        -1px  1px 0 #000000,
        1px  1px 0 #000000;
    background-color: #99ffe0;
    border: solid 2px #00aeff;
    width: 50%;
}

#splashOverlay {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    padding: 0;
    background-color: black;
}

.grade-highlight {
    color: red;
    font-weight: bolder;
    font-size: 1.4em;
}

.text-before-style {
    color: white;
}

.text-after-style {
    color: white;
}

#warningText {
    font-size: calc(20px + 1.5em);
    color: #ff1d1d;
    border: solid 2px #ff1d1d;
}

#startMenu {
    display: flex;
    position: relative;
    flex-direction: column;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(45deg, #00ffc8, #8400ff);
    background-image: url("/image/bg45.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    color: rgb(120, 255, 154);
    text-shadow:
        -1px -1px 0 #000000,
        1px -1px 0 #000000,
        -1px  1px 0 #000000,
        1px  1px 0 #000000;
    font-family: monospace;
    font-size: calc(10px + 0.5em);
    font-weight: bold;
    align-content: center;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-left: 10%;
    margin-right: 10%;
    z-index: -2;
}

#innerStartMenu {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: transparent;
    align-content: center;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 0 35% 0;
}

#customizeGriptape {
    display: none;
    position: relative;
    flex-direction: column;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgb(0, 0, 0);
    background-image: url("/image/menugif.gif");
    background-position: center -5%;
    background-repeat: no-repeat;
    background-size: 90% 90%;
    color: white;
    font-family: monospace;
    font-size: calc(10px + 0.25em);
    font-weight: bold;
    align-content: center;
    align-items: center;
    text-align: center;
    z-index: -2;
}

.combo {
    box-shadow:
        inset 24em 0 8em -16em rgba(0, 238, 255, 0.678),
        inset -24em 0 8em -16em rgba(0, 238, 255, 0.678),
        inset 0 24em 8em -16em rgba(0, 238, 255, 0.678),
        inset 0 -24em 8em -16em rgba(0, 238, 255, 0.678);
    transition: box-shadow 0.3s ease-out;
}

.noCombo {
    box-shadow:
        inset 10em 0 8em -8em rgba(0, 255, 200, 0.3),
        inset -10em 0 8em -8em rgba(0, 255, 200, 0.3),
        0 0 25px 10px rgba(0, 255, 200, 0.7);
    transition: box-shadow 0.3s ease-out;
}

.superCombo {
    box-shadow:
        inset 24em 0 8em -16em rgba(9, 255, 0, 0.678),
        inset -24em 0 8em -16em rgba(9, 255, 0, 0.678),
        inset 0 24em 8em -16em rgba(9, 255, 0, 0.678),
        inset 0 -24em 8em -16em rgba(9, 255, 0, 0.678);
    transition: box-shadow 0.3s ease-out;
}

.noSuperCombo {
    box-shadow:
        inset 10em 0 8em -8em rgba(0, 255, 200, 0.3),
        inset -10em 0 8em -8em rgba(0, 255, 200, 0.3),
        0 0 25px 10px rgba(0, 255, 200, 0.7);
    transition: box-shadow 0.3s ease-out;
}

span {
    opacity: 1;
}

span.fade-out {
    opacity: 0;
}

#shred {
    font-family: 'adrip1';
    font-size: 3em;
    font-weight: bold;
    color: #33ff00;
    text-shadow:
        -1px -1px 0 #000000,
        1px -1px 0 #000000,
        -1px  1px 0 #000000,
        1px  1px 0 #000000;
}