:root {
        --mc-primeYellow: #C2FF27;
        --mc-blue1: #0B0912;
        --mc-gray3: #48506A;
        --mc-black: #121520;
        --mc-grayWhite: #EFF0F2;
        --mc-grayBlack: #121520;
        --mc-black-trans65: #121520A6;
        --mc-black-trans25: #12152040;
}
@font-face {
        font-family: "ABC";
        src: url("../fonts/ABCMonumentGrotesk-Light.woff2") format("woff2");
        font-weight: 300
}
@font-face {
        font-family: "ABC";
        src: url("../fonts/ABCMonumentGrotesk-Medium.woff2") format("woff2");
        font-weight: 400
}
@font-face {
        font-family: "ABC Mono";
        src: url("../fonts/ABCMonumentGroteskSemi-Mono-Light.woff2") format("woff2");
        font-weight: 300
}
@font-face {
        font-family: "ABC Mono";
        src: url("../fonts/ABCMonumentGroteskSemi-Mono-Medium.woff2") format("woff2");
        font-weight: 400
}
body {
        background: var(--mc-blue1);
        color: var(--mc-gray3);
        font-family: "ABC";
        font-weight: bold;
        font-size: 4rem;
        text-align: center;
        margin: 0;
        overflow: hidden;
}
.shadow { display: none; }
* { box-sizing: border-box; }
[data-engine] {
        position: fixed;
        top: 0;
        left: 0;
}
h1 {
        z-index: 1;
        position: relative;
        margin-top: 50%;
}
.loading-wrap {
        position: fixed;
        width: 100vw;
        height: 100vh;
        font-size: 20px;
        text-align: left;
        margin: 20px;
        font-family: "ABC Mono";
}
.loading-wrap .file {
        font-size: 14px;
        font-weight: normal;
}
.fg-constant {
        background: var(--mc-blue1);
        width: 100vw;
        height: 100vh;
        margin: 0;
        position: relative;
        z-index: 2;
        pointer-events: none;
        opacity: 0;
        transition: 2s ease opacity;
}
.hud {
        width: 100vw;
        height: 100vh;
        padding: 24px 19px;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 2;
        opacity: 0;

        display: flex;
        flex-direction: column;
        justify-content: space-between;

        transition: 1s ease opacity;
}
.hud-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
}
.hud-icon-btn,
.hud-text-btn {
        background: var(--mc-black-trans65);
        border-radius: 100%;
        width: 44px;
        height: 44px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        cursor: default;
        backdrop-filter: blur(4px);
}
.hud-icon-btn {
        cursor: pointer;
        transition: 0.33s ease background;
}
.hud-icon-btn:hover { background: var(--mc-black); }
.hud-text-btn {
        font-size: 14px;
        font-weight: 500;
        line-height: 18px;
        letter-spacing: 0em;
        width: auto;
        border-radius: 22px;
        flex-direction: row;
        color: var(--mc-grayWhite);
        padding: 0 17px;
}
.hud-text {
        color: var(--mc-grayWhite);
        text-align: left;
        font-size: 19px;
        font-weight: 500;
        line-height: 29px;
        letter-spacing: -0.02em;
        padding: 17px;
        position: relative;
        text-shadow: 0px 2px 58px #121520;
}
.hud-text:before {
        content: "";
        position: absolute;
        left: -50px;
        right: -50px;
        top: -50px;
        bottom: -50px;
        background: #121520;
        opacity: 0.5;
        z-index: -1;
        filter: blur(37px);
}
.green-btn {
        color: var(--mc-grayBlack);
        font-family: "ABC";
        font-size: 15px;
        font-weight: 500;
        line-height: 23px;
        letter-spacing: 0.11em;

        background: var(--mc-primeYellow);
        padding: 16.5px 28px;
        border-radius: 10px;
        opacity: 0;

        cursor: pointer;
}
.mobile-message {
        position: fixed;
        top: 0;
        left: 0;
        height: 100dvh;
        width: 100dvw;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        background: var(--mc-black);
        color: var(--mc-grayWhite);
        letter-spacing: 0.2rem;
        line-height: 3rem;
}
.mobile-message div {
        opacity: 0;
        animation: fade-in 2s forwards ease-in;
}
@keyframes fade-in {
        from { opacity: 0; }
        to { opacity: 1; }
}

/* TEMP */
.atmosphere {
        display: fixed;
        top: 0;
        left: 0;
        z-index: 2;
}
/* TEMP */


/* FUNCTIONAL */
.no-pointer { pointer-events: none; }
.all-pointer { pointer-events: all; }
.yellow { color: var(--mc-primeYellow); }