@font-face {
    font-family: Encode;
    src: url(/assets/EncodeSansSemiExpanded-Regular.ttf);
}

@font-face {
    font-family: Encode-SC;
    src: url(/assets/EncodeSansSC-ExtraBold.ttf);
}


/* 
Calculate document height in a way suitable for mobile browsers 
https://dev.to/nirazanbasnet/dont-use-100vh-for-mobile-responsive-3o97 
*/
:root {
    --doc-height: 100%;
}

body {
    margin: 0px;
    overflow: hidden;

    /* All further sizes are calculated with em, based on this value */
    font-size: 2vh;
    font-family: Encode;
    font-style: normal;
}

h1 {
    color: #4E6A73;
    font-size: min(4em, 8vw);
    font-weight: 900;
    text-align: center;
    font-family: Encode-SC;
    width: 100%;
}

a {
    color: #adadad;
}

.flexparentrow {
    display: inline-flex;
    flex-direction: row
}

.flexparentcol {
    display: inline-flex;
    flex-direction: column
}

.container {
    align-items: center;
    gap: 0em;

    width: 100vw;

    /* Use height calculated in JS for correct mobile layouting */
    height: 100vh;
    height: var(--doc-height);
}

.left-chessboard {
    background: linear-gradient(270deg, #000 -32.56%, #9C9C9C 18.75%, #FFF 99.73%), 50% url("/assets/checkerboard.png");
    background-size: 100% 30%;
    background-blend-mode: screen, multiply, normal;

    display: flex;

    height: 100%;
    width: 20vw;
    min-width: 0vw;
    max-width: 300px;

    padding: 0em 0em;
}

.right-chessboard {
    background: linear-gradient(91deg, #000 -43.76%, #9C9C9C 11.75%, #FFF 99.36%), 50% url("/assets/checkerboard.png");
    background-size: 100% 30%;
    background-blend-mode: screen, multiply, normal;

    display: flex;

    height: 100%;
    width: 20vw;
    min-width: 0vw;
    max-width: 300px;

    padding: 0em 0em;
}

.background {
    background: linear-gradient(90deg, rgba(47, 72, 88, 0.2) 0.36%, rgba(247, 251, 243, 0.2) 37.06%, rgba(247, 251, 243, 0.2) 69.62%, rgba(47, 72, 88, 0.2) 99.6%), #F7FBF3;

    display: flex;

    height: 100%;
    width: 100%;

    padding: 0em 0em;

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

@media only screen and (max-width: 1000px) {
    .left-chessboard {
        display: none;
    }

    .right-chessboard {
        display: none;
    }
}

.explanation {
    text-align: center;
    font-size: 1.25em;
    margin: 2em;
}

.solution {
    align-items: center;
    gap: 0.5em;
}

.result-success {
    text-align: center;
    color: #64A038;
}

.result-fail {
    text-align: center;
    color: #611515;
}

.playarea {
    overflow-x: hidden;
    overflow-y: auto;

    align-items: center;
    gap: 0.5em;
    position: relative;
}

.playline {
    background: #F7F9F5;
    border: 1px #CAD5CD;
    border-style: solid;
    border-radius: 0.5em;

    width: 100%;
    height: 1.5em;

    display: flex;
    position: relative;

    align-items: center;
    justify-content: space-between;

    color: #2F4858;
    font-size: 1.3em;
}

.fade-animation {
    animation: fadeIn 0.75s ease-in-out;
    animation-fill-mode: both;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.category {
    margin: 1em;
    font-weight: 600;
}

.answer {
    margin: 1em;
    font-weight: 400;
}

.progressbar-wrapper {
    background: #FFFFFF00;
    height: 0.75em;
    width: 95%;
    border: 1px #2F4858;
    border-radius: 2.5em;
    border-style: solid;
    margin: 0.5em;

    animation: progressFade 7s;
    animation-fill-mode: forwards;
}

@keyframes progressFade {
    0% {
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    85% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.progressbar {
    background: #64A038;
    width: 30%;
    height: 100%;
    border-radius: 2.5em;

    animation: progressBar 6s ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes progressBar {
    0% {
        width: 0%;
        background: #64A038;
    }

    100% {
        width: 100%;
        background: #E49B59;
    }
}

.divider {
    position: absolute;
    left: 50%;

    width: 0.3em;
    height: 100%;
    background: #005AA1;
}

.editparent {
    align-items: center;
    justify-content: space-around;

    gap: 0.5em;
    margin-left: 1em;
    margin-right: 1em;
    margin-bottom: 0.5em;

    height: 3em;
}

.text-wrapper {
    width: 75%;
    height: 100%;
}

.textedit {
    box-sizing: border-box;

    width: 100%;
    height: 100%;

    border-radius: 1.75em;
    border: 1px solid #4E6A74;
    background: #FAFAFA;

    font-family: Encode;
    font-style: normal;
    font-size: 1.3em;
    font-weight: 600;
    color: #2F4858;
    text-align: center;
}

.skip-button {
    width: 25%;
    height: 100%;

    flex-shrink: 0;
    border-radius: 1.75em;
    border-color: #2F4858;
    background: #F7FBF3;
    color: #2F4858;

    font-family: Encode-SC;
    font-style: normal;
    font-size: 1.3em;
    text-align: center;
}

.answer-button {
    width: 25%;
    height: 100%;

    flex-shrink: 0;
    border-radius: 1.75em;
    background: #2F4858;
    color: #FAFAFA;

    font-family: Encode-SC;
    font-style: normal;
    font-size: 1.3em;
    text-align: center;
}

.flash-red {
    animation: flashRed 0.5s ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes flashRed {
    0% {
        background: #E49B59;
    }

    100% {
        background: #FAFAFA;
    }
}

.tab-hint {
    position: relative;
    height: 100%;
    top: -75%;
    float: right;
    padding-right: 1em;

    color: #4E6A74;
}

@media only screen and (max-width: 750px) {
    .tab-hint {
        display: none;
    }
}


.start-button {
    width: 75%;
    height: 1.5em;

    flex-shrink: 0;
    border-radius: 1.75em;
    background: #2F4858;

    font-family: Encode-SC;
    font-style: normal;
    color: #FAFAFA;
    text-align: center;
    font-size: 2.25em;
    font-weight: 600;
}

.enter-hint {
    position: relative;
    color: #FAFAFA;
    top: -1em;
    left: 10.75em;
    font-size: 0.3em;
    font-weight: 400;
}

.footer {
    background: #2F4858;

    bottom: 0em;
    height: 1.5em;
    width: 100%;

    font-family: Encode;
    font-style: normal;
    text-align: center;
    color: #c5c5c5;
    font-size: min(1.2vw, 0.6em);
    font-weight: 300;
}