:root {
    --bg-color: #2e0080;
    --bg-color-light: #6d3cc3;
    --fg-color: #da7820;
    --fg-color-light: #ffd993;
    --fg-color-lighter: #ffca4b;
    --fg-color-dark: #934313;
    --fg-color-darker: #844936;
    --acc-color: #ebff00;

    --radioactive: #46ff63;
    --off-black: #212121;
    --off-white: #e8e8e8;
    --gray: #343434;
    --green: #2fba2f;
    --green-light: #97d266;
    --green-dark: #456a26;
    --red: #ff4949;
    --red-light: #ff8a8a;
    --red-dark: #6a2626;
    --amber: #da7820;
    --hot-pink: #ff3ab2;

    --btn-color: #a9e300;
    --btn-color-hover: #d9ff68;
    --btn-text-color: #cce9ff;
}

* {
    box-sizing: border-box;
    font-family: "Open Sans", sans-serif;
    letter-spacing: 0.22vh;
    font-family: sans-serif;
    overflow-wrap: anywhere;
}

.std-body {
    background-color: var(--bg-color);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 55vh;
    padding: 20px;
    box-sizing: border-box;
}

.wide-body {
    background-color: var(--bg-color);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 110vh;
    padding: 20px;
    box-sizing: border-box;
}

.fixed-height {
    height: 100vh;
    justify-content: center;
}

.body-var-height {
    min-height: 100vh;
    height: auto;
    justify-content: flex-start;
}


.title {
    color: transparent;
    -webkit-text-stroke: 0.3vh var(--acc-color); 
    font-size: 7vh;
    text-align: center;
}

.title-2 {
    color: var(--acc-color);
    -webkit-text-stroke: 0.2vh var(--off-black); 
    font-size: 7vh;
    font-weight: 600;
    text-align: center;
}

.title-3 {
    color: var(--radioactive);
    -webkit-text-stroke: 0.2vh var(--off-black); 
    font-size: 5vh;
    font-weight: 600;
    text-align: center;
}

.title-4 {
    font-size: 2vh;
    font-weight: 600;
    text-align: center;
}

.std-text {
    color: var(--off-black);
    font-size: 2vh;
    text-align: center;
}


.subtitle {
    color: var(--acc-color);
    font-size: 2vh;
    font-family: sans-serif;
    text-align: center;
}

.question-title {
    color: var(--radioactive);
    font-size: 4vh;
    font-weight: bold;
    font-family: sans-serif;
    text-align: center;
    padding: 2vh 1vh;
    margin: 0;
}

.question-container {
    background-color: var(--fg-color-darker);
    margin: 3vh 1.5vh;
    border-radius: 2vh;
}

.content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--fg-color);
    width: 100%;
    min-height: clamp(60vh, 80vh, 300px);
    & form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        & .btn {
            margin-top: 20px;
        }
    }
    padding: clamp(20px, 6vw, 60px);
}


.btn {
    padding: 1vh 2vh;
    border: none;
    border-radius: 1vh;
    background-color: var(--btn-color);
    font-size: 2vh;
    font-family: "Open Sans", sans-serif;
    font-size: 2vh;
    text-decoration: none;
    text-transform: uppercase;
    color: var(--off-black);
    cursor: pointer;
    position: relative;
    user-select: none;
}



.btn:hover {
    cursor: pointer;
    background-color: var(--btn-color-hover);
}

.btn-small {
    padding: 0.5vh 1vh;
    border: none;
    border-radius: 0.7vh;
    background-color: var(--btn-color);
    font-size: 1.5vh;
    font-family: "Open Sans", sans-serif;
    text-decoration: none;
    text-transform: uppercase;
    color: var(--off-black);
    cursor: pointer;
    position: relative;
    user-select: none;
}

.btn-small:hover {
    background-color: var(--btn-color-hover);
}

.std-input {
   padding: 1.5vh 2vh; 
   margin: 0.5vh;
   background-color: var(--fg-color-light);
   border: none;
   /*border-radius: 0.5vh;*/
   text-align: center;
   font-size: 2.4vh;
   color: var(--off-black);
}

.std-input::placeholder {
    opacity: 0.8;
    color: var(--fg-color-dark);
}

.std-input:focus-visible {
    outline: none;
}

/* Effects */
.cartoon-shadow {
    border: 0.2vh solid var(--off-black);
    box-shadow: 0.05vh 0.05vh 0 0, 0.1vh 0.1vh 0 0, 0.15vh 0.15vh 0 0, 0.2vh 0.2vh 0 0, 0.25vh 0.25vh 0 0, 0.3vh 0.3vh 0 0;
}

.cartoon-shadow-small {
    border: 0.2vh solid var(--off-black);
    box-shadow: 0.05vh 0.05vh 0 0, 0.1vh 0.1vh 0 0, 0.15vh 0.15vh 0 0, 0.2vh 0.2vh 0 0;
}

.cartoon-indent {
    box-shadow: inset 0vh 0vh 0 0, inset 0.2vh 0.3vh 0 0;
}

.shimmer {
    position: relative;
    border: 0px solid transparent;
    border-radius: 1.5vh;
    overflow: hidden;
    isolation: isolate;
}

.shimmer::before {
    content: "";
    position: absolute;
    inset: -100vw;
    z-index: -1;

    background: repeating-conic-gradient(
        from 0deg,
        var(--acc-color) 0deg 5deg,
        color-mix(in srgb, var(--acc-color) 40%, transparent) 5deg 10deg
    );

    animation: shimmer-spin 10s linear infinite;
}

.shimmer::after {
    content: "";
    position: absolute;
    inset: 1.5vh;
    z-index: -1;
    background: var(--fg-color);
    border-radius: 12px;
}

@keyframes shimmer-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Used to create a textbox with an exaggerated shadow */
.cartoon-textbox {
    padding: 2vh;
    background-color: var(--bg-color-light);
    color: var(--off-white);
    font-weight: bold;
    font-size: 2vh;
    text-transform: uppercase;
    box-shadow:  0.8vh 0.8vh 0 0 var(--off-black);
}