@font-face {
    font-family: "Normal";
    src:
        local("Arvo"),
        url("./media/fonts/Arvo-Regular.ttf");
}

@font-face {
    font-family: "Emphatic";
    src: url("./media/fonts/Arvo-Bold.ttf");
}

@font-face {
    font-family: "Numbers";
    src:
        local("Bebas Neue"),
        url("./media/fonts/BebasNeue-Regular.ttf");
}

:root {
    --backgroundcolor: #212121;
    --secondarybackgroundcolor: #0a0a0a;
    --bordercolor: rgba(255, 255, 255, 0.1);
    --accentcolor: #89a91d;
}

* {
    margin: 0;
    padding: 0;
    user-select: none;
}

body {
    background-color: #0e0e0e;
    overflow: hidden;
}

.devoverlay {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0.8em;
    padding: 0.7em;
    border: 2px solid;
    color: white;
    background: black;
    z-index: 1;
}

.headsupdisplay {
    top: 0;
    left: 0;
    position: absolute;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.scoredisplay {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0em 1em;
    font-size: 1vw;
}

.scorenumberdisplay {
    font-family: Numbers;
    text-transform: uppercase;
    font-size: 2em;
    transform: skew(18deg, 0deg);
}

span.scoredisplaynumber.currentscoreunit {
    font-size: 0.5em;
}

span.miniscorenumber {
    font-size: 1em;
}

span.scoredisplaynumber:not(.miniscorenumber) {
    font-size: 2.4em;
}

.scoreflavor {
    font-family: Emphatic;
    font-size: 1.3em;
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 1em;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 0px black, 1px 1px 0px black;
}

span.scoredisplaynumber,
.ingametimercontent {
    color: white;
    /* text-shadow: 0px 1px 0px black, 0px 2px 0px black, 0px 3px 0px black, 0px 4px 0px black, 0px 5px 0px black, 0px 6px 0px black; */
    text-shadow: 0px 6px 0px black;
}

span.inactivescoredisplay.scoredisplaynumber {
    color: #535353;
}

.healthdisplay {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 1em 2em;
    font-size: 1.2vw;
    font-family: Normal;
}

.healthbarcontainer {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 28vw;
    text-align: right;
    transform: skew(-26deg, 0deg);
    filter: drop-shadow(0 0.2em 0px black);
}

.overhealthbarcontainer {
    position: absolute;
    bottom: 2em;
    right: 0;
    color: white;
    font-family: 'Emphatic';
    letter-spacing: 0.2em;
}

.healthbarwrapper {
    height: 2em;
    width: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    clip-path: polygon(100% 0, 100% 25%, 70% 25%, 70% 100%, 0 100%, 0 0);
    background: #212121;
}

.healthbarwidth {
    position: absolute;
    top: 0;
    left: 100%;
    height: 2.2em;
    width: 100%;
    box-shadow: inset 0px 0px 24px black;
}

.healthbarnumberdisplay {
    font-family: Numbers;
    font-size: 1.4em;
    position: absolute;
    bottom: 0;
    left: 0.5em;
}

span.healthbarnumber.maxhealth {
    opacity: 0.5;
}

.healthflavor {
    color: #ffffff;
    font-size: 1.1em;
    font-family: Emphatic;
    margin: -0.1em 0.3em;
    text-shadow: 2px 2px 0px black, 1px 1px 0px black, 3px 3px 0px black;
}

.pausedmenuwrapper {
    width: 100%;
    height: 100%;
    font-size: 2vw;
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.pausedmenuflavor {
    position: absolute;
    bottom: 0;
    color: white;
    font-family: Emphatic;
    transform: skew(-20deg, 0deg);
    margin: 0.3em 0.5em;
    font-size: 1.9em;
    transition: left 0.3s;
    pointer-events: none;
    text-shadow: 0.2em 0.2em rgba(0, 0, 0, 0.9);
}

.pausedmenubackgroundflair {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    height: 43vh;
    display: flex;
    flex-direction: column;
}

.pmbgfi {
    flex-grow: 1;
    transition: margin-right 0.4s, width 0.4s;
    transform: scaleY(1.1);
}

.pmbgfi:nth-child(odd) {
    text-align: right;
    transform: rotate(180deg) scaleY(1.1);
}

.pmbgficon {
    height: 100%;
    background: var(--secondarybackgroundcolor);
    transition: 0.4s;
    display: inline-block;
    box-sizing: border-box;
    border-block: 0.125em solid var(--bordercolor);
}

.pausedmenucubebg {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50vh;
    height: 50vh;
    image-rendering: pixelated;
    background-image: url(./media/images/greencube.png);
    background-size: cover;
    background-repeat: no-repeat;
    transition: top 0.5s;
    filter: brightness(0.7);
}

.pausedmenumaincontent {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 50%);
    transition: bottom 0.5s;
    text-align: center;
    width: 50vh;
    font-family: Normal;
    color: white;
    text-shadow: 0px 3px 0px rgba(0, 0, 0, 0.5);
}

.pausedmenubutton {
    position: relative;
    background: rgba(0, 0, 0, 0.4);
    margin-block: 0.1em;
    padding-block: 0.15em;
    overflow: hidden;
    transition: background 0.3s, color 0.3s;
    cursor: pointer;
    user-select: none;
}

.pausedmenubutton.selectedpausebutton {
    background: rgb(0 0 0 / 80%);
    color: var(--accentcolor);
    transition: background 0s, color 0s;
}

.devoverlaytitle {
    font-family: monospace;
    font-size: 1.3em;
    width: 20.6em;
    border-bottom: 2px solid;
}

.devoverlaycontent {
    font-family: monospace;
    padding-top: 0.7em;
}

.devoverlaycontent *:nth-child(odd) {
    color: #a8a8a8;
}

.devoverlaycontent div {
    border-left: 2px solid;
    padding-left: 0.4em;
}

.pausedmenulevelname {
    position: absolute;
    bottom: 70%;
    color: white;
    margin: 0.5em 0.8em;
    font-family: 'Normal';
    transition: right 0.5s;
    transform: skew(17deg, 0deg);
}

.pausedmenulevelchallenges {
    position: absolute;
    bottom: 70%;
    color: white;
    margin: 0.5em 0.8em;
    font-family: 'Normal';
    transition: left 0.5s;
    display: flex;
    font-size: 0.6em;
    padding: 0.4em 0em;
}

.pausedmenulevelchallengeitem {
    text-align: center;
    background: var(--backgroundcolor);
    margin: 0.2em 0.7em;
    padding: 0.2em 0.5em;
    border: 0.2em solid rgba(255, 255, 255, 0.1);
}

.pausedmenulevelchallengenumber {
    font-size: 0.7em;
}

.pausedmenulevelchallengedesc {
    font-family: 'Emphatic';
}

.pausedmenulevelchallengeitem.completed {
    color: #534829;
    background: #b78f19;
    border: 0.2em solid rgba(255, 255, 255, 0.4);
}

.gamecanvas {
    image-rendering: pixelated;
}

.gamecontainer {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.settingsmenuwrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.settingsmenucontainer {
    position: absolute;
    height: 100%;
    background-color: var(--secondarybackgroundcolor);
    font-size: 1vw;
    text-align: right;
    color: white;
    border-left: 0.4em solid;
    box-sizing: border-box;
    transition: filter 0.3s;
    pointer-events: all;
}

.settingsmenubgoccluder {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    transition: right 0.2s;
    background: rgba(0, 0, 0, 0.5);
    pointer-events: all;
}

.settingsmenutitle {
    color: white;
    font-family: 'Emphatic';
    font-size: 3em;
    margin: 0.1em 0.5em;
    border-bottom: 2px solid;
    height: 1.3em;
}

.settingsdividericon {
    background-image: url(https://cubecollector.net/cubeicon/green?s=16);
    background-color: rgba(255, 255, 255, 0.3);
    height: 0.9em;
    width: 0.9em;
    padding: 0.2em;
    background-repeat: no-repeat;
    background-position: center;
}

.settingsdivider {
    display: flex;
    border-bottom: 2px solid;
    margin-block: 1.2em 0.6em;
    font-size: 1.7vw;
    position: relative;
}

.settingsdividerline {
    flex-grow: 1;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.3), transparent);
}

.settingsdividertext {
    font-family: 'Emphatic';
    padding-right: 0.5em;
}

.settingspagecategorycontainer {
    width: 90%;
    margin: 0 auto;
}

.settingsdivider:before,
.settingsdivider:after {
    content: '';
    border-width: 2px;
    position: absolute;
    top: -2px;
    width: 0.3em;
    height: 0.3em;
}

.settingsdivider:before {
    left: -2px;
    border-top: 2px solid;
    border-left: 2px solid;
}

.settingsitemcontainer {
    text-align: left;
    font-family: 'Normal';
    background: rgba(255, 255, 255, 0.1);
    padding: 0.5em 1em;
    margin: 1em 0.1em;
    position: relative;
    border-left: 2px solid;
    outline-offset: 0.1em;
    transition: outline-offset 0.2s;
}

.settingsitemtitle {
    font-size: 1.4em;
    border-bottom: 1px solid;
    position: relative;
    z-index: 1;
}

.settingsitemdesc {
    font-size: 0.6em;
    color: #a3a3a3;
    margin-bottom: 0.8em;
    position: relative;
    z-index: 1;
}

.settingsitemperformanceimpact {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 1em;
    width: 1em;
    image-rendering: pixelated;
    position: absolute;
    top: 0;
    right: 0;
    margin: 0.3em;
    cursor: help;
    z-index: 1;
}

.settingsperformanceimpacttooltip {
    position: absolute;
    right: 1.9em;
    bottom: -0.1em;
    white-space: nowrap;
    pointer-events: none;
    padding: 0.2em 0.4em;
    background: #121212;
    border: 1px solid;
    box-shadow: -0.3em 0.3em rgba(0, 0, 0, 0.5);
    font-size: 0.7em;
    transition: 0.4s;
    opacity: 0;
}

.settingsitemperformanceimpact:hover .settingsperformanceimpacttooltip {
    transition: 0s;
    opacity: 1;
}

.settingsitemuiflavor {
    left: 0.2em;
    bottom: 0;
}

.settingsitemuiwrapper {
    padding: 0.2em 0.6em;
}

.settingsitemuinumbercontainer {
    display: flex;
    width: 100%;
    height: 1em;
    position: relative;
    z-index: 1;
}

input[type="range"] {
    flex-grow: 1;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    height: 2em;
}

.settingsitemuiflavor,
.settingsitemuioutput {
    position: absolute;
    opacity: 0.4;
    font-size: 1.9vw;
    pointer-events: none;
    font-family: 'Emphatic';
    color: black;
}

.settingsitemuioutput {
    right: 0.1em;
    top: 0;
}

input[type="range"]::-webkit-slider-runnable-track {
    background: #888888;
    height: 1em;
    margin-inline: 1.2em 4em;
}

input[type="range"]::-moz-range-track {
    background: #888888;
    height: 1em;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: #ffffff;
    margin-top: -0.25em;
    height: 1.5em;
    width: 1em;
}

input[type="number"] {
    color: white;
    border: 2px solid;
    width: 7em;
    padding: 0.1em 0.5em;
    box-sizing: border-box;
    height: 2em;
    font-size: 0.6em;
    background: rgba(255, 255, 255, 0.2);
    outline: none;
    font-family: 'Emphatic';
    transition: color 0.5s;
}

.settingsitemuiselectioncontainer {
    position: relative;
    z-index: 1;
}

.settingsitemuiselectionitem {
    margin: 0.2em 0.4em;
    background: rgba(255, 255, 255, 0.1);
    padding: 0.1em 0.3em;
    border-left: 2px solid;
    overflow: hidden;
    display: flex;
    height: 1.5em;
    transition: color 0.5s, background 0.5s;
}

.siuisit {
    display: block;
    flex-grow: 1;
    font-size: 1.2em;
}

.siuisif {
    width: 1.5em;
    height: 1.5em;
    background-image: url(https://cubecollector.net/cubeicon/red);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1em;
    image-rendering: pixelated;
    margin-inline: 0.1em 0.4em;
}

.settingsitemuiselectionitem:hover,
.settingsitemuiselectionitem.siuisis {
    cursor: pointer;
    background: var(--secondarybackgroundcolor);
    color: var(--accentcolor);
    transition: 0s;
}

.settingsitemuiselectionitem.siuisis .siuisif {
    background-image: url(https://cubecollector.net/cubeicon/green);
}

input[type="number"]:focus {
    color: var(--accentcolor);
    transition: 0s;
}

input[type="range"]::-webkit-slider-thumb:active,
input[type="range"]::-webkit-slider-thumb:hover {
    background: var(--accentcolor);
}

.settingsmenucontent {
    overflow-x: hidden;
    height: calc(100% - 4.6em);
}

.settingsitemuibooleancontainer {
    position: relative;
    z-index: 1;
    display: flex;
    height: 2em;
}

.settingsitemuibooleanflavor {
    flex-grow: 1;
    font-size: 1.4em;
    margin-block: 0.15em;
}

.siuibsw {
    width: 5em;
    background: #717171;
    color: #bebebe;
    box-sizing: border-box;
    height: 2em;
    border: 0.2em solid;
    position: relative;
    transition: 0.2s;
    cursor: pointer;
}

.siuibsw.turnedon {
    color: var(--accentcolor);
    background: white;
}

.siuibsc {
    color: inherit;
    background: currentColor;
    box-sizing: border-box;
    aspect-ratio: 1;
    height: 1.7em;
    transition: left 0.2s;
    position: absolute;
    top: 0;
    left: 0;
}

.turnedon .siuibsc {
    left: 64%;
}

.settingsitemuikeybindopenbutton {
    position: relative;
    text-align: center;
    color: var(--accentcolor);
    border: 0.1em solid white;
    background: var(--secondarybackgroundcolor);
    font-family: 'Emphatic';
    padding: 0.3em 0.2em;
    cursor: pointer;
    margin-bottom: 1em;
}

.settingsslidercontainer {
    position: absolute;
    top: 0;
    height: 100vh;
    width: 100vw;
    transition: right 0.2s;
}

.settingsitemcontainer.selected,
.settingsitemcontainer.hovering {
    outline: 0.2em solid white;
    outline-offset: 0.3em;
}

.settingsitemcontainer.selected {
    outline-color: var(--accentcolor);
    outline-width: 0.4em;
}

.buttonprompticon {
    border-image-slice: 23 23 23 23 fill;
    border-image-width: 20px 20px 20px 20px;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: stretch stretch;
    border-image-source: url("./media/images/prompts/keyboard_base.png");
    border-style: solid;
}

.buttonpromptshud {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    flex-wrap: nowrap;
    color: white;
    max-width: 50vw;
    font-family: 'Normal';
    font-size: 0.8vw;
    transition: bottom 0.2s, left 0.4s;
    z-index: 2;
    pointer-events: none;
}

.buttonpromptsflavor {
    position: absolute;
    width: calc(100% + 2.1em);
    background: var(--secondarybackgroundcolor);
    bottom: -0.1em;
    left: 0;
    font-size: 3.5em;
    color: var(--bordercolor);
    padding-inline: 0.5em;
    text-align: right;
    box-sizing: border-box;
    border: 0.1em solid;
    border-left: none;
    overflow: hidden;
}

.buttonpromptwrapper {
    position: relative;
    margin-inline: 0.5em;
    text-align: center;
}

.buttonpromptactiontext.movementactiontext {
    transform: translateY(1.9em);
}

.buttonprompticon {
    padding: 0.2em 0.4em;
    display: inline-block;
    text-transform: uppercase;
    image-rendering: pixelated;
}

.buttonprompticoncontainer {
    height: 2em;
}

.buttonprompticoncontainer.movementprompt {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 7.4em;
    margin-top: -25%;
}

.buttonprompticon.invisiblebuttonprompt {
    opacity: 0;
}

.buttonprompticoncontainer.movementprompt .buttonprompticon {
    box-sizing: border-box;
    flex-grow: 1;
    flex-shrink: 0;
    width: 33%;
}

.buttonprompticondivider {
    transform: scale(2.4);
    display: inline-block;
    padding-inline: 0.5em;
}

.ksibdi {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0.4em;
    font-size: 0.7em;
}

.ksicb {
    background: var(--secondarybackgroundcolor);
    color: white;
    border: 1px solid;
    margin-block: 0.4em;
    padding: 0.1em 0.4em;
    font-size: 1em;
}

.ksicc {
    padding: 0.2em 0.6em;
    background: rgba(255, 255, 255, 0.1);
}

.selected.ksicb {
    outline: 2px solid;
    color: var(--accentcolor);
    outline-offset: 1px;
}

.ksicb.ubko {
    color: red;
}

.settingsitemkeymargin {
    margin-inline: 1.7em;
}

.settingsitemdesc.keybindneededwarn {
    color: red;
}

.dialogueboxcontainer {
    position: absolute;
    left: 0;
    height: 30vh;
    transition: 0.4s;
    width: 100%;
    font-size: 0.8vw;
}

.dialogueboxbackgroundelement {
    background-color: var(--secondarybackgroundcolor);
    width: calc(100% - 6em);
    height: 90%;
    margin: auto;
    box-sizing: border-box;
    border: 0.6em solid rgba(255, 255, 255, 0.1);
    font-size: 1em;
}

.dialogueboxflavor {
    font-family: Emphatic;
    position: absolute;
    color: rgba(255, 255, 255, 0.1);
    top: 0;
    right: 0;
    font-size: 12em;
    transform: skew(0deg, -13deg);
}

.dialogueboxcontentcontainer {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 6%;
    width: 88%;
    height: 80%;
    color: white;
}

.dialogueboxspeakername {
    font-family: 'Emphatic';
    font-size: 3.4em;
    margin-bottom: 0.1em;
    margin-top: 0.5em;
}

.dialogueboxcontent {
    font-family: 'Normal';
    font-size: 2.5em;
    position: relative;
}

@keyframes wavyTextAnimation {
    0% {
        transform: translateY(-0.1em);
    }

    25% {
        transform: translateY(0em);
    }

    50% {
        transform: translateY(0.1em);
    }

    75% {
        transform: translateY(0em);
    }

    100% {
        transform: translateY(-0.1em);
    }
}

@keyframes angryTextAnimation {
    0% {
        transform: translate(-1px, -1px);
    }

    10% {
        transform: translate(-1px, 1px);
    }

    20% {
        transform: translate(-1px, -1px);
    }

    30% {
        transform: translate(1px, 1px);
    }

    40% {
        transform: translate(-1px, 1px);
    }

    50% {
        transform: translate(1px, -1px);
    }

    60% {
        transform: translate(-1px, 1px);
    }

    70% {
        transform: translate(1px, -1px);
    }

    80% {
        transform: translate(-1px, 1px);
    }

    90% {
        transform: translate(-1px, 1px);
    }

    100% {
        transform: translate(1px, -1px);
    }
}

@keyframes rainbowTextAnimation {
    0% {
        filter: hue-rotate(0deg);
    }

    100% {
        filter: hue-rotate(360deg);
    }
}

.dialogueboxcontent span.rainbow {
    color: rgb(0, 191, 0);
}

.dialogueboxcontent span.animated {
    display: inline-block;
}

.dialogueboxcontent span.italic {
    font-style: italic;
}

.dialogueboxcontent span.bold {
    font-weight: bolder;
}

.dialogueboxcontent span.strike {
    text-decoration: line-through;
}

.dialogueboxcontent span.underline {
    text-decoration: underline;
}

.dialogueboxcontent span.tiny {
    font-size: 0.5em;
}

.dialogueboxcontent span.large {
    font-size: 1.7em;
}

.dialogueboxcontent span {
    transition: 0.2s;
}

.bossbardisplay {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 50%;
    top: 1em;
    width: 66%;
    transition: transform 0.3s;
    font-size: 0.9vw;
}

.bossbarcontainer {
    height: 2em;
    margin-block: 0.2em;
    position: relative;
    border-radius: 0.3em;
    box-shadow: 0em 0.2em 0px rgba(0, 0, 0, 0.3);
}

.bossbars {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #0c0c0c;
    border-radius: inherit;
    overflow: hidden;
}

.bossbars * {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    box-shadow: inset 0px 1em 0px rgba(0, 0, 0, 0.3);
}

.extrabossbars {
    display: flex;
    font-size: 0.5em;
}

.extrabossbars .bossbarcontainer {
    flex-grow: 1;
    margin: 0.7em 0.5em;
}

.extrabossbars .bossbarname {
    display: none;
}

div.bossbarimage {
    position: absolute;
    top: unset;
    bottom: -0.7em;
    width: 2.3em;
    height: 2.3em;
    background-size: 100% 100%;
    image-rendering: pixelated;
    box-shadow: unset;
    left: 0.7em;
}

.bossbarname {
    position: relative;
    text-align: center;
    font-size: 1.3em;
    font-family: 'EMPHATIC';
    padding-block: 0.2em;
    text-shadow: 0.2em 0.2em 0px rgba(0, 0, 0, 0.3);
}

.gameovercontainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #83000040;
    font-size: 0.9vw;
    transition: opacity 0.2s;
}

.gameoverheader {
    text-align: center;
    font-size: 9.1em;
    color: white;
    font-family: 'Emphatic';
    margin-top: 1.1em;
}

.gameoversubtitle {
    font-size: 0.2em;
    text-shadow: 0px 0.15em 0px rgba(0, 0, 0, 0.3);
}

.gameoverkillerinfo {
    font-size: 0.2em;
    width: 80vw;
    margin: 0.5em auto;
    display: flex;
    justify-content: center;
    text-shadow: 0px 0.15em rgba(0, 0, 0, 0.3);
}

.gameoverkillername {
    padding-inline: 0.3em;
    margin-inline: 0.4em;
    display: inline-block;
    position: relative;
    outline: 0.1em solid;
}

.gameoverkillericon {
    transform: translateY(0.1em);
    width: 0.9em;
    height: 0.9em;
    image-rendering: pixelated;
    margin-right: 0.2em;
}

.gameovertitle {
    text-shadow: 0px 0.1em 0px rgba(0, 0, 0, 0.4);
}

.gameoveroptions {
    margin-top: 1.5em;
    font-size: 2em;
    color: white;
    text-align: center;
    font-family: 'Emphatic';
}

.gameovermenuoption {
    margin-block: 1.9em;
    padding-block: 0.2em;
}

.gameovermenuoption span {
    background: var(--secondarybackgroundcolor);
    padding: 0.2em 0.7em;
    border-inline: 0.4em solid;
    transition: 0.2s;
}

.gameovermenuoption.selected {
    font-style: italic;
}

.gameovermenuoption.selected span {
    padding: 0.2em 4em;
    cursor: pointer;
    border-inline: 2em solid;
    transition: 0s;
}

.screentransitioner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--backgroundcolor);
    box-shadow: inset 0px 3em rgba(0, 0, 0, 0.3), inset 0px -3em rgba(0, 0, 0, 0.3);
    z-index: 5;
    font-size: 1vw;
}

.tlcont {
    position: absolute;
    font-size: 1.6em;
    font-family: 'Emphatic';
    color: white;
    text-align: right;
    bottom: 0;
    right: 0;
    margin: 2.1em;
    text-shadow: 0.2em 0.2em rgba(0, 0, 0, 0.4);
}

.tltitle {
    font-size: 3em;
}

.tltip {
    font-style: italic;
    display: inline-block;
    max-width: 33vw;
}

.parrychainindicator {
    position: absolute;
    left: -28vw;
    bottom: 100%;
    margin: 0.7em 5em;
    font-size: 1.4em;
    text-shadow: 0.1em 0.1em 0px rgba(0, 0, 0, 0.4);
}

.levelselectcontainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    font-size: 2vw;
    display: flex;
    flex-direction: column;
}

.levelselecttitle {
    color: white;
    font-family: 'Emphatic';
    font-size: 2em;
    padding: 0.2em 1.5em 0.2em 1.5em;
    margin-right: auto;
    margin-left: 0.3em;
    border-bottom: 0.1em solid;
    white-space: nowrap;
}

.levelselectbackbutton {
    position: absolute;
    top: 0.6em;
    left: 0.7em;
    font-family: 'Normal';
    color: white;
    cursor: pointer;
    font-size: 0.7em;
    filter: brightness(0.5);
    transition: filter 0.2s;
}

.levelselectbackbutton:hover {
    text-decoration: underline;
    transition: filter 0s;
    filter: brightness(1);
}

.levelselectcontent {
    flex-grow: 1;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    padding-top: 0.3em;
    padding-bottom: 1.5em;
}

.levelselectitemcontainer {
    max-width: 33%;
    /* height: calc(100% / 3); */
    padding: 0.3em;
    box-sizing: border-box;
    width: 33%;
    cursor: pointer;
    flex-grow: 1;
}

.levelselectitemnum {
    font-family: Numbers;
    font-size: 0.6em;
    position: absolute;
    top: 0;
    right: 0;
    color: white;
    margin-right: 0.3em;
    text-shadow: 0px 0.13em 0px black;
}

.levelselectitemwrapper {
    background: rgba(255, 255, 255, 0.1);
    border: 0.1em solid rgba(255, 255, 255, 0.1);
    width: 100%;
    box-sizing: border-box;
    display: flex;
    transition: 0.3s;
    outline: 0em solid white;
    flex-direction: column;
    position: relative;
}

.levelselectitembackground {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.levelselectitemtitle {
    font-size: 1.3em;
    font-family: 'Emphatic';
    color: white;
    padding: 0.1em 0.5em;
    margin: 0em 0.2em;
    border-bottom: 2px solid;
    text-shadow: 0em 0.1em black;
    position: relative;
}

.levelselectitemcontent {
    flex-grow: 1;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

.levelselectitemchallenges {
    display: flex;
    flex-wrap: nowrap;
    font-size: 0.6em;
    text-align: center;
    height: 2.7em;
    justify-content: space-around;
}

.levelselectitemchallenge {
    flex-grow: 1;
    width: 0;
    background: var(--backgroundcolor);
    border: 0.2em solid rgba(255, 255, 255, 0.1);
    margin: 0.4em 0.2em;
    box-shadow: 0.2em 0.2em 0px rgba(0, 0, 0, 0.3);
    padding-block: 0.2em;
    height: 1.5em;
    color: white;
}

.levelselectitemchallengedesc {
    color: inherit;
    font-size: 0.7em;
    font-family: 'Normal';
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.levelselectitemchallengecomplete {
    font-size: 0.6em;
    font-family: 'Emphatic';
    color: inherit;
    letter-spacing: 0.3em;
}

.levelselectitemtimerank {
    display: flex;
    flex-wrap: nowrap;
    font-size: 0.7em;
    flex-grow: 1;
}

.levelselectitemtime,
.levelselectitemrank {
    flex-grow: 1;
    width: 0px;
    color: white;
    font-family: 'Normal';
    margin: 0.2em;
    padding-inline: 1em;
    padding-block: 0.4em;
    box-sizing: border-box;
    text-shadow: 0.1em 0.1em black;
}

.levelselectitemrank {
    text-align: right;
}

.levelselectitemcontainer.active .levelselectitemwrapper {
    outline: 0.2em solid white;
    outline-offset: 0.2em;
    transition: 0s;
}

.levelselectarrows {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0.8em;
    display: flex;
}

.levelselectarrowbutton {
    color: white;
    font-size: 2em;
    margin-inline: 0.2em;
    width: 1.2em;
    height: 1.2em;
    user-select: none;
}

.levelselectarrowbutton:hover {
    cursor: pointer;
    text-decoration: underline;
}

.victoryscreencontainer {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(2px);
}

.victoryscreentitle {
    height: 2.5em;
    box-sizing: border-box;
    padding-inline: 30vw;
    font-size: 5em;
    color: var(--accentcolor);
    font-family: 'Emphatic';
    text-shadow: 0.1em 0.1em rgba(0, 0, 0, 0.3);
    padding-top: 1.4em;
}

.victoryscreencontent {
    background: var(--backgroundcolor);
    width: 44vw;
    margin-inline: 28vw;
    box-sizing: border-box;
    border: 0.1em solid rgba(255, 255, 255, 0.1);
    font-size: 2.3vw;
    overflow: hidden;
}

.victoryscreenlevelname {
    font-family: 'Normal';
    color: white;
    margin-inline: 0.5em;
    padding-block: 0.2em;
    padding-inline: 0.4em;
    border-bottom: 0.1em solid;
}

.vssrc {
    display: flex;
    font-size: 0.6em;
    justify-content: space-around;
    margin-block: 0.6em;
}

.vssw {
    width: 27%;
    height: 4.2em;
    font-size: 0.7em;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
    color: white;
    font-family: 'Normal';
    padding: 0.3em;
    box-sizing: border-box;
    border: 0.2em solid rgba(255, 255, 255, 0.1);
    box-shadow: 0.3em 0.3em rgba(0, 0, 0, 0.3);
}

.vsst {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.2em;
    font-family: 'Emphatic';
}

.vssc {
    font-size: 1em;
    padding-top: 0.2em;
    font-style: italic;
    white-space: nowrap;
    margin-inline: 0.7em;
    border-top: 0.2em solid rgba(255, 255, 255, 0.1);
    margin-top: 0.2em;
    color: var(--accentcolor);
}

.victoryscreenscorecontainer {
    font-size: 1.2em;
    color: white;
    font-family: 'Normal';
    padding-inline: 0.5em;
    margin-inline: 0.4em;
}

.victoryscreenscorenumber {
    font-family: 'Numbers';
    text-shadow: 0.1em 0.1em rgba(0, 0, 0, 0.5);
}

.victoryscreenscorenumber span {
    font-family: 'Emphatic';
    font-size: 0.4em;
    transform: translateY(-1em);
    display: inline-block;
    font-style: italic;
    color: var(--accentcolor);
}

.victoryscreenscorebarwrapper {
    height: 0.7em;
    position: relative;
    margin-top: 0.8em;
    margin-bottom: 0.3em;
    outline: 0.1em solid rgba(0, 0, 0, 0.3);
}

.victoryscreenscorebartheresholds {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.victoryscreenscorethereshold {
    position: absolute;
    bottom: 0;
    height: 0.7em;
    transform: translateX(-50%);
    width: 0.1em;
    background: rgba(0, 0, 0, 0.3);
}

.victoryscreenscoretheresholdletter {
    position: absolute;
    bottom: 100%;
    font-size: 0.7em;
    transform: translateX(-43%);
}

.victoryscreenscorebar {
    height: 100%;
    background: white;
    transition: background 0.2s;
}

.victoryscreenscoreandrank {
    display: flex;
}

.victoryscreenrank {
    text-align: right;
    flex-grow: 1;
    font-size: 0.7em;
    font-family: 'Emphatic';
    text-decoration: underline;
    transition: color 0.2s;
    text-shadow: 0.1em 0.1em rgba(0, 0, 0, 0.5);
}

.victoryscreenchallengescontainer {
    display: flex;
    margin: 0.3em;
    font-size: 0.7em;
    font-family: 'Normal';
}

.victoryscreenchallenge {
    width: 0;
    flex-grow: 1;
    text-align: center;
    margin-inline: 0.6em;
    height: 1.9em;
    background: rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    padding: 0.2em;
    border: 0.1em solid rgba(255, 255, 255, 0.1);
    box-shadow: 0.2em 0.2em rgba(0, 0, 0, 0.3);
    transition: background 0.5s, filter 1s;
}

.vscdd {
    color: white;
    font-family: 'Normal';
    font-size: 0.7em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vscdci {
    font-size: 0.4em;
    color: #f7e23e;
}

.victoryscreenchallenge.completed {
    background: #b78f19;
    border: 0.1em solid rgba(255, 255, 255, 0.3);
}

.victoryscreenchallenge.completed .vscdd {
    color: #534829;
}

.levelselectitemchallenge.completed {
    color: #534829;
    background: #b78f19;
    border-color: rgba(255, 255, 255, 0.3);
}

.victoryscreenoptions {
    display: flex;
    margin: 0.4em 0.6em;
    justify-content: space-around;
}

.victoryscreenbutton {
    height: 1.2em;
    color: white;
    font-family: 'Normal';
    background: rgba(0, 0, 0, 0.3);
    padding: 0.2em 0.6em;
    border: 0.1em solid rgba(255, 255, 255, 0.1);
    font-size: 0.8em;
    transition: 0.2s;
    outline: 0em solid white;
    outline-offset: 0em;
}

.victoryscreenoptions:not(.disabled) .victoryscreenbutton.active {
    color: var(--accentcolor);
    outline: 0.1em solid white;
    outline-offset: 0.1em;
    background: var(--backgroundcolor);
    transition: 0s;
    cursor: pointer;
}

.victoryscreenoptions.disabled {
    pointer-events: none;
    filter: brightness(0.3);
}

.levelselectitemcontainer.lockedlevel {
    pointer-events: none;
}

.levelselectlocked {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    background-image: url(./media/images/lock.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 3em 3em;
    image-rendering: pixelated;
}

.ingametimercontainer {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 4.9em;
    padding: 0.1em 0.2em;
}

.ingametimercontent {
    font-family: 'Numbers';
    transform: skew(-18deg, 0deg);
}

.mainmenucontainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 1em;
    font-size: 2vw;
}

.mainmenutitle {
    font-size: 6.1em;
    font-family: 'Emphatic';
    display: inline-block;
    color: white;
    filter: drop-shadow(0.5vw 0.5vw rgba(0, 0, 0, 0.6));
}

.mainmenusplashtext {
    font-family: 'Normal';
    font-size: 0.15em;
    text-align: right;
    box-sizing: border-box;
    padding-left: 33%;
    margin-top: -1em;
    color: var(--accentcolor);
    background: var(--backgroundcolor);
    padding-right: 2.5%;
    padding-block: 0.2em;
    text-shadow: 0.1em 0.1em rgba(0, 0, 0, 0.5);
    border: 0.1em solid rgba(255, 255, 255, 0.1);
}

.mainmenubutton {
    color: white;
    font-family: 'Normal';
    margin-block: 0.6em;
    padding-inline: 0.4em;
    padding-block: 0.2em;
    white-space: nowrap;
    background: var(--backgroundcolor);
    box-shadow: 0.2em 0.2em rgba(0, 0, 0, 0.6);
}

.mainmenubuttoncontainer {
    position: absolute;
    top: 7em;
    left: 0;
    padding: 3em 3.6em;
    width: 15em;
}

.mainmenubuttonsubtitle {
    font-size: 0.4em;
    filter: brightness(0.4);
    text-align: right;
    transition: filter 0.2s, margin 0.2s, color 0.2s;
}

.mainmenubuttontitle {
    font-family: 'Emphatic';
    transition: border-width 0.2s, padding-left 0.4s;
    font-size: 1.3em;
    border-left: 0px solid;
    text-shadow: 0.1em 0.1em rgba(0, 0, 0, 0.4);
}

.mainmenubutton.active .mainmenubuttontitle {
    border-left-width: 0.3em;
    transition: border-width 0s, padding-left 0s;
    padding-left: 0.4em;
}

.mainmenubutton:hover {
    cursor: pointer;
}

.active .mainmenubuttonsubtitle {
    margin-right: 0.8em;
    transition: filter 0s, margin 0s, color 0s;
    filter: brightness(1);
    color: var(--accentcolor);
}

.mainmenubutton.disabledmainmenubutton {
    pointer-events: none;
    filter: brightness(0.4);
}

.mainmenuversion {
    position: absolute;
    bottom: 0;
    right: 0;
    color: white;
    font-family: Numbers;
    font-size: 0.7em;
    padding: 0.3em 0.5em;
}

.mainmenuversion:before {
    content: 'v';
    color: var(--accentcolor);
}

.extrasmenucontent {
    position: absolute;
    top: 3.3em;
    left: 1.1em;
    width: 13em;
}

.aboutpagebuttons {
    display: flex;
    height: 5.5em;
    box-sizing: border-box;
    padding: 0.4em;
    flex-wrap: nowrap;
}

.aboutpagebutton {
    flex-grow: 1;
    font-family: 'Normal';
    text-align: center;
    box-sizing: border-box;
    width: 0px;
    border: 0.3em solid;
    margin: 0.2em 0.5em;
    outline: 0em solid white;
    outline-offset: 0em;
    transition: outline 0.2s, outline-offset 0.2s;
}

.aboutpagebuttonlogo {
    height: 2.9em;
    padding-top: 0.3em;
}

.aboutpagebutton.active {
    outline: 0.2em solid white;
    outline-offset: 0.2em;
    cursor: pointer;
    transition: outline 0s, outline-offset 0s;
}

.aboutpagesubtitle {
    font-family: 'Normal';
    color: white;
    margin-top: 1em;
    margin-left: 2em;
    font-size: 1.1em;
    width: 21em;
    border-bottom: 0.1em solid;
}

.aboutpagesubtitle:before {
    content: '> ';
}

.aboutpagetext {
    color: white;
    font-size: 0.8em;
    margin: 0.4em 4.2em;
    font-family: 'Normal';
}

.aboutpagesignature {
    font-size: 1.2em;
    color: var(--accentcolor);
    text-align: right;
}

.changelogspagecontent {
    height: 77vh;
    overflow-x: hidden;
}

.changelogspageupdate {
    color: rgba(255, 255, 255, 0.2);
    margin: 0.4em;
    border: 0.2em solid;
    padding: 0.2em;
    font-family: 'Normal';
    background: #0e0e0e;
}

.changelogspageupdateversion:after {
    content: ' -';
}

.changelogspageupdateversion:before {
    content: 'v';
}

.changelogupdatechangelist {
    font-size: 0.7em;
    margin: 0.6em 0.2em;
}

.changelogspageupdatetitle {
    color: var(--accentcolor);
    margin-inline: 0.5em;
    padding-inline: 0.5em;
    border-bottom: 0.1em solid #6b6b6b;
}

.changelogspageupdateversion {
    color: white;
}

.gamechangelog:before {
    content: '> ';
}

.gamechangelog div {
    color: var(--accentcolor);
    filter: brightness(0.5);
    font-style: italic;
    margin-left: 2.2em;
}

.gamechangelog {
    margin-left: 1em;
    color: white;
}

.gamechangelog div:before {
    content: 'Developer Note: ';
}

.statisticspagecontent {
    overflow-x: hidden;
    height: 77vh;
    font-size: 0.7em;
}

.statisticspagestatitem {
    font-family: 'Emphatic';
    color: white;
    width: 33.33%;
    display: inline-block;
    box-sizing: border-box;
    padding: 0.4em;
}

.statisticspagestattitle {
    white-space: nowrap;
    background: var(--backgroundcolor);
    border: 0.1em solid rgba(255, 255, 255, 0.1);
    padding: 0.2em 0.5em;
}

.statisticspagestatdata {
    color: var(--accentcolor);
    font-family: Normal;
}

.levelselectlockedflavor {
    position: absolute;
    bottom: 0.4em;
    left: 50%;
    transform: translateX(-50%);
    width: 75%;
    color: white;
    font-family: 'Normal';
    font-size: 0.5em;
    white-space: nowrap;
    text-align: center;
}

.bestiarycontent {
    display: flex;
    height: 77vh;
    flex-direction: column;
}

.bestiaryheader {
    height: 9em;
    box-sizing: border-box;
    display: flex;
    padding: 0.4em 1em;
}

.bestiaryselectionlist {
    /* flex-grow: 1; */
    display: flex;
    flex-wrap: wrap;
}

.bestiaryselectionitem {
    width: calc(100% / 19);
    text-align: center;
    box-sizing: border-box;
    padding: 0.3em;
    color: white;
    transition: outline 0.2s, outline-offset 0.2s;
    outline: 0em solid;
    color: white;
    outline-offset: 0em;
}

.bestiaryselectionitemimage {
    aspect-ratio: 1;
    height: 100%;
    background-position: center center;
    background-size: 70% 70%;
    image-rendering: pixelated;
    background-repeat: no-repeat;
    background-color: var(--backgroundcolor);
    box-sizing: border-box;
    border: 0.1em solid rgba(255, 255, 255, 0.1);
}

.bestiarystatscontainer {
    width: 24em;
    display: flex;
}

.bestiarymodelview {
    width: 8.3em;
    display: flex;
    flex-direction: column;
}

.bestiaryheader>div {
    background: var(--backgroundcolor);
    box-sizing: border-box;
    padding: 0.2em 0.5em;
    margin: 0.4em 0.2em;
    border: 0.1em solid rgba(255, 255, 255, 0.1);
    font-family: 'Normal';
    color: white;
}

.bestiaryentrytitle {
    text-align: center;
    font-family: 'Emphatic';
    border-bottom: inherit;
    font-size: 0.8em;
    /* white-space: nowrap; */
}

.bestiaryentrymodelcontainer {
    flex-grow: 1;
    overflow: hidden;
}

.bestiarystatscontainer>div {
    width: 0px;
    flex-grow: 1;
    margin: 1em 0.5em;
    font-size: 1.2em;
}

.bestiaryenemystats {
    border-right: inherit;
    border-right-width: 0.2em;
}

.bestiaryenemystat,
.bestiaryplayerstat {
    white-space: nowrap;
}

.bestiaryplayerstats {
    text-align: right;
}

.bestiaryenemyblurbcontainer {
    overflow-x: hidden;
    flex-grow: 1;
    width: 0px;
}

.bestiaryenemydesc:before {
    content: '- Description';
}

.bestiaryenemydesc:before,
.bestiaryenemystrat:before {
    display: block;
    color: var(--accentcolor);
    font-size: 1.2em;
    font-family: 'Emphatic';
}

.bestiaryenemyblurbcontainer>div {
    font-size: 0.5em;
}

.bestiaryenemystrat:before {
    content: '- Strategy';
}

.bestiaryselectionitem.active,
.bestiaryselectionitem.open {
    transition: outline 0s, outline-offset 0s;
    outline: 0.1em solid;
    outline-offset: -0.2em;
    cursor: pointer;
}

.bestiarymodelcanvas {
    image-rendering: pixelated;
    filter: drop-shadow(0.2em 0.2em rgba(0, 0, 0, 0.3));
}

.bestiaryenemystat {
    font-size: 0.6em;
}

.bestiarystatnumber {
    color: var(--accentcolor);
    font-family: 'Emphatic';
}

.bestiaryselectionitem.open {
    outline-color: var(--accentcolor);
    outline-width: 0.2em;
}

.bestiaryplayerstat {
    font-size: 0.7em;
    margin-block: 0.5em;
}

.levelselectsubtitle {
    font-size: 0.2em;
    text-align: right;
    filter: brightness(0.5);
    margin-top: -0.2em;
}

.introscreencontainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.introscreencontentcontainer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5em;
    text-align: center;
    color: white;
    font-family: 'Normal';
    filter: drop-shadow(0.2em 0.2em 0px rgba(0, 0, 0, 0.5));
}

.introscreenslideimage {
    background-image: url(./media/images/intro/intro.png);
    width: 8em;
    height: 8em;
    image-rendering: pixelated;
    margin: 1em auto;
}

.introscreenslideheader {
    font-family: 'Emphatic';
}

.introscreenskipviewer {
    color: var(--accentcolor);
    font-size: 2.5em;
    font-family: 'Normal';
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0.2em 0.5em;
}