body {
    overflow: hidden;
    background-color: var(--base-color);
    font-family: 'Helvetica', 'Tahoma', 'Arial', sans-serif;
}



/* Counter circle */

#counterCircle {
    transition: transform 0.15s ease-out;
    transform: rotateY(90deg);
    /* backface-visibility: hidden; */
    /* background-color: #363636; */
    /* background-color: var(--base-color); */
    width: calc((var(--loop-width) * var(--loop-historical-scale) - var(--counterCircle-offset)));
    height: calc((var(--loop-width) * var(--loop-historical-scale) - var(--counterCircle-offset)));
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: calc((-0.5 * (var(--loop-width) * var(--loop-historical-scale) - var(--counterCircle-offset))));
    margin-left: calc((-0.5 * (var(--loop-width) * var(--loop-historical-scale) - var(--counterCircle-offset))));
}

#counterCircle.visible {
    transform: none;
}

/* Counter */

#counterCircle > #counter {
    position: absolute;
    border-radius: 50%;
    background-color: rgb(38, 38, 38);
    width: calc((var(--loop-width) * var(--loop-historical-scale) - var(--counterCircle-offset)) * 0.5);
    height: calc((var(--loop-width) * var(--loop-historical-scale) - var(--counterCircle-offset)) * 0.5);
    margin-top: calc((var(--loop-width) * var(--loop-historical-scale) - var(--counterCircle-offset)) * -0.25);
    margin-left: calc((var(--loop-width) * var(--loop-historical-scale) - var(--counterCircle-offset)) * -0.25);
    top: 27.5%;
    left: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: white;
    font-size: calc((var(--loop-width) * var(--loop-historical-scale) - var(--counterCircle-offset)) * 0.23);
    font-family: monospace;
    filter: drop-shadow(-0.1em 0.1em 1vh rgb(100,100,100));
}

#counterCircle > #turnsLeftStaticText {
    position: absolute;
    background-color: rgb(38, 38, 38);
    color: white;
    border-radius: 12vh;
    width: calc((var(--loop-width) * var(--loop-historical-scale) - var(--counterCircle-offset)) * 0.4);
    height: calc((var(--loop-width) * var(--loop-historical-scale) - var(--counterCircle-offset)) * 0.125);
    margin-top: calc((var(--loop-width) * var(--loop-historical-scale) - var(--counterCircle-offset)) * -0.0625);
    margin-left: calc((var(--loop-width) * var(--loop-historical-scale) - var(--counterCircle-offset)) * -0.2);
    top: 62.5%;
    left: 50%;
    content: "Test";
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: calc((var(--loop-width) * var(--loop-historical-scale) - var(--counterCircle-offset)) * 0.055);
    filter: drop-shadow(-0.2em 0.2em 1vh rgb(100,100,100));
}

#counterCircle > #counter.flipAnim {
    animation: ui-flip-part-1, ui-flip-part-2;
    animation-duration: 0.2s, 1s;
    animation-delay: 0s, 0.2s;
    animation-iteration-count: 1;
}

/* Forward and back history buttons */

#counterCircle > #historyForwardButton, #historyBackwardButton {
    position: absolute;
    display: flex;
    width: calc(4 / 34 * (var(--loop-width) * var(--loop-historical-scale) - var(--counterCircle-offset)));
    height: calc(4 / 34 * (var(--loop-width) * var(--loop-historical-scale) - var(--counterCircle-offset)));
    top: 85%;
    margin-top: calc(-2 / 34 * (var(--loop-width) * var(--loop-historical-scale) - var(--counterCircle-offset)));
    margin-left: calc(-2 / 34 * (var(--loop-width) * var(--loop-historical-scale) - var(--counterCircle-offset)));
    transition: filter 0.25s ease-out;
    transition: filter 0.25s ease-out; 
    filter: var(--unfocused-color-filter);
    z-index: 1;
    padding: calc(4 / 34 * (var(--loop-width) * var(--loop-historical-scale) - var(--counterCircle-offset)) * 0.02);

    & img {
        width: 100%;
        height: 100%;
        transition: scale 0.8s ease-out; /* If the browser doesn't support the below transition */
        transition: scale 0.8s linear(0, 1.2, 0.8, 1.1, 0.9, 1, 1, 1);
        pointer-events: none;
    }
}

#counterCircle > #historyForwardButton.disabled, #historyBackwardButton.disabled {
    filter: var(--disabled-color-filter) !important;
    pointer-events: none !important;
    cursor: none !important;
}

#counterCircle > #historyForwardButton.cooldown, #historyBackwardButton.cooldown {
    pointer-events: none !important;
    cursor: none !important;
}

#counterCircle > #historyForwardButton:hover, #historyBackwardButton:hover {
    filter: var(--focused-color-filter);
    cursor: pointer;
}

#counterCircle > #historyForwardButton:active, #historyBackwardButton:active {
    & img {
        scale: 0.8;
    }
}

#counterCircle > #historyForwardButton {
    left: 75%
}

#counterCircle > #historyBackwardButton {
    left: 25%;
    rotate: 180deg;
}

/* History turn counter */

#counterCircle > #historyTurn {
    position: absolute;
    background-color: rgb(100, 100, 100);
    width: calc(10 / 34 * (var(--loop-width) * var(--loop-historical-scale) - var(--counterCircle-offset)));
    height: calc(4 / 34 * (var(--loop-width) * var(--loop-historical-scale) - var(--counterCircle-offset)));
    top: 85%;
    left: 50%;
    margin-top:  calc(-2 / 34 * (var(--loop-width) * var(--loop-historical-scale) - var(--counterCircle-offset)));;
    margin-left:  calc(-5 / 34 * (var(--loop-width) * var(--loop-historical-scale) - var(--counterCircle-offset)));
    border-radius: 12vh;
    color: white;
    text-align: center;
    line-height:  calc(4 / 34 * (var(--loop-width) * var(--loop-historical-scale) - var(--counterCircle-offset)));
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size:  calc(0.048 * (var(--loop-width) * var(--loop-historical-scale) - var(--counterCircle-offset)));
    transition-property: width, margin-left, font-size, left;
    transition-duration: 0.07s;
    transition-timing-function: ease-out;
    filter: drop-shadow(0ch 0ch 1vh rgb(150,150,150));
    transform: rotateX(0);
}

#counterCircle > #historyForwardButton:hover:active ~ #historyTurn, #historyBackwardButton:hover:active ~ #historyTurn {
    width:  calc(6 / 34 * (var(--loop-width) * var(--loop-historical-scale) - var(--counterCircle-offset)));
    margin-left:  calc(-3 / 34 * (var(--loop-width) * var(--loop-historical-scale) - var(--counterCircle-offset)));
    font-size:  calc(0.025 * (var(--loop-width) * var(--loop-historical-scale) - var(--counterCircle-offset)));;
}

#counterCircle > #historyForwardButton:hover:active ~ #historyTurn {
    left: 60%;
}

#counterCircle > #historyBackwardButton:hover:active ~ #historyTurn {
    left: 40%;
}

#counterCircle > #historyTurn.disabled { /* Replace with ::disabled selector? */
    visibility: hidden;
}

#counterCircle > #historyTurn.flip_Anim {
    animation: ui-flip-part-1, ui-flip-part-2;
    animation-duration: 0.1s, 0.5s;
    animation-delay: 0s, 0.1s;
}




/* Toast */
#toast {
    animation: 5s ease 0s toast;
    animation-fill-mode: forwards;
    display: flex;
    position: absolute;
    height: 3.75vh;
    line-height: 3.75vh;
    width: 20vh;
    top: 95%;
    left: 50%;
    margin-top: -1.25vh;
    margin-left: -10vh;
    font-size: 2vh;
    align-items: center;
    justify-content: center;
    text-align: justify;
    font-weight: bold;
    white-space: nowrap;

    #toastPill {
        height: 100%;
        width: fit-content;
        padding-left: 7.5%;
        padding-right: 7.5%;
        border-radius: 12vh;
        color: white;
        background-color: rgb(221, 24, 24);
        /* filter: drop-shadow(-0.5vh 0.5vh 0vh rgb(255, 136, 136)); */
        filter: drop-shadow(-0.5vh 0.5vh 0.5vh rgb(255, 136, 136));
    }
}




/* General buttons and modals */

.textButtonList {
    display: inline-flex;
    position: fixed;
    
    button {
        height: 3vh;
        width: fit-content;
        /* border: none; */
        outline: none;
        color: var(--unfocused-color);
        transition: color 0.25s ease;
        font-size: 2vh;
        background-color: rgba(0, 0, 0, 0);
        display: block;
        padding: 0;
    }

    button:hover, button:focus {
        color: var(--focused-color);
        filter: drop-shadow(0vh 0vh 0vh 0.25vh var(--focused-color));
        cursor: pointer;
    }
}

dialog {
    z-index: 50;
    position: absolute;
    max-width: 90vw;
    max-height: 90%;
    border: none;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    /* overflow-y: auto; */
    overflow: visible;
    white-space: nowrap;
    border-radius: 2vh;
    color: var(--focused-color);
    text-align: justify;
    background-color: var(--base-color);
    justify-content: center;
    align-items: center;
    filter: drop-shadow(-1vh 1vh 1vh rgb(50, 50, 50));
    transition: opacity 0.25s ease-out;
    opacity: 0;
}

dialog::backdrop {
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 0.25s ease-out;
}

dialog.visible  {
    opacity: 1;
}

dialog.visible::backdrop {
    background-color: rgba(0, 0, 0, 0.75);
}

dialog > .title {
    position: absolute;
    top: -5%;
    left: 1%;
    display: inline-flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
    width: fit-content;
    height: fit-content;

    div {
        position: relative;
        visibility: visible;
        margin-right: 1.5%;
        height: fit-content;

        .letter {
            scale: 0.5;
        }
    }

    div:has(.endLetterBorder) {
        z-index: -1;
    }

    div.startOfWord:not(:first-child) {
        margin-left: 7.5%;
    }
}

dialog > .button {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--focused-color);
    transition: filter ease-out 0.5s, background-color ease-out 0.5s, color ease-out 0.5s;
}

dialog > .button:hover {
    cursor: pointer;
}

dialog > .button.circularButton {
    z-index: 55;
    width: 5vh;
    height: 5vh;
    margin-top: -2.5vh;
    font-size: 3.5vh;
    transition: filter ease-out 0.4s, background-color ease-out 0.4s, color ease-out 0.4s, scale ease-out 0.1s;

    div {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        transform: rotateY(0deg);
        transition: transform ease-out 0.4s;
    }
}

dialog > .button.circularButton:hover {
    scale: 1.05;

    div {
        transform: rotateY(360deg);
    }
}

dialog > .button.circularButton.exitButton {
    top: -1%;
    right: 1%;
    filter: drop-shadow(-0.5vh 0.25vh 0vh #909090);

    div {
        background-color: white;
    }
}

dialog > .button.circularButton.exitButton:hover {
    filter: drop-shadow(-0.5vh 0.5vh 0vh #ff7979);

    div {
        background-color: red;
        color: white;
    }
}

/* Informational buttons and dialogs */

#rulesAndInfoButtons.textButtonList {
    justify-content: flex-end;
    top: 1.5vh;
    right: 1.25vh;
    left: auto;
    bottom: auto;

    button {
        padding-left: 1.25vh;
        padding-right: 1.25vh;
        border-width: 0 0 0 0 ;
    }

    :not(:last-child) {
        border-width: 0vh 0.3vh 0vh 0vh;
        border-color: var(--disabled-color);
        border-style: inset;
    }
}

dialog#howToPlayDialog {
    height: 60vh;
    width: 95vh;
    max-width: 85vw;


    div#howToPlayDialog_content {

        scale: 0.9;
        height: 100%;
        margin-left: 2vh;
        margin-right: 2vh;
        margin-top: auto;
        margin-bottom: auto;
        white-space: normal;
        overflow-y: auto;

        div#howToPlayDialog_basicInstructions {
            display: inline-flex;
            width: 100%;
            height: fit-content;
            min-height: 50%;
            margin-bottom: 6.5%;

            p {
                margin-top: auto;
                margin-bottom: auto;
                margin-left: 2vh;
                line-height: 1.6;
                font-size: 2.5vh;
                width: 70%;
            }

            img {
                width: 30%;
                margin-right: 2vh;
                margin-top: auto;
                margin-bottom: auto;
            }
        }

        div#howToPlayDialog_key {
            display: inline-flex;
            width: 100%;
            height: fit-content;
            min-height: 40%;

            div {
                visibility: visible;
                position: relative;
                margin-left: auto;
                margin-right: auto;
                height: fit-content;
                

                .letter {
                    display: flex;
                    top: 0;
                    left: 0;
                    scale: 0.9;
                    margin-top: 15%;
                }

                p {
                    position: absolute;
                    font-size: 2.1vh;
                    font-weight: bold;
                    text-align: center;
                    margin-top: 45%;
                }
            }
        }
    }
}

dialog#controlsDialog {
    height: 60vh;
    width: 90vh;
    max-width: 85vw;

    div#controlsDialog_content {

        flex-direction: column;
        scale: 0.9;
        height: 100%;
        margin-left: 2vh;
        margin-right: 2vh;
        margin-top: auto;
        margin-bottom: auto;
        white-space: normal;
        overflow-y: auto;
        font-weight: bold;
        display: flex;

        img {
            filter: drop-shadow(-1vh 1vh 0vh rgb(150, 150, 150));
        }

        p.mappingText {
            flex: 1;
            text-align: center;
            font-size: 5vh;
            margin-left: 7.5%;
        }

        div#controlsDialog_TypeLetters {
            display: inline-flex;
            justify-content: left;
            align-items: center;
            width: 100%;
            height: 33.3%;

            img {
                width: 15%;
            }

            img#controlsDialog_TypeLetters_A-key {
                margin-left: 4.5%;
            }

            p#controlsDialog_TypeLetters_to-text {
                font-size: 4vh;
                margin-left: 3.5%;
            }

            img#controlsDialog_TypeLetters_Z-key {
                margin-left: 4%;
            }

            p.mappingText {
                margin-left: 1.5%;
            }
        }

        div#controlsDialog_SelectLetters {
            display: inline-flex;
            justify-content: left;
            align-items: center;
            width: 100%;
            height: 33.3%;

            img {
                width: 15%;
            }

            img#controlsDialog_SelectLetters_LeftArrow-key {
                margin-left: 8%;
            }

            img#controlsDialog_SelectLetters_RightArrow-key {
                margin-left: 4%;
            }

            p {
                font-size: 4;
            }
        }

         div#controlsDialog_Submit {
            display: inline-flex;
            justify-content: left;
            align-items: center;
            width: 100%;
            height: 33.3%;

            img {
                margin-left: 10%;
                width: 30%;
            }
        }

    }
}

dialog#infoDialog {
    height: fit-content;
    max-height: 60vh;
    width: 60vh;
    max-width: 85vw;

    div#infoDialog_content {
        height: 100%;
        width: 100%;
        white-space: normal;
        overflow: auto;
        font-size: 2vh;
        margin-top: 1.5vh;
        margin-bottom: 1.5vh;

        p {
            margin-left: 1.5vh;
            margin-right: 1.5vh;
        }

        ul {
            padding-inline-start: 3vh;
            margin-block-start: 0.2em;
        }
    }

    div.button.circularButton#repoButton {
        top: -1%;
        right: 11.5%;

        div {
            background-color: black;
            filter: drop-shadow(-0.5vh 0.25vh 0vh #909090);

            img {
                position: absolute;
                width: 75%;
                height: 75%;
                filter: none;
                transition: opacity ease-out 0.4s;
            }

            img#repoButton_logo {
                opacity: 1;
            }

            img#repoButton_logo_onHover {
                opacity: 0;
            }
        }
    }

    div.button.circularButton#repoButton:hover {
        div {
            background-color: white;
            filter: drop-shadow(-0.5vh 0.25vh 0vh #464646);

            img#repoButton_logo {
                opacity: 0;
            }

            img#repoButton_logo_onHover {
                opacity: 1;
            }
        }
    }
}




/* Animations */

@keyframes ui-flip-part-1 {
    0% {
        transform: rotateX(0deg);
    }
    100% {
        transform: rotateX(90deg);
    }
}

@keyframes ui-flip-part-2 {
    0% {
        transform: rotateX(-90deg);
    }
    20% {
        transform: rotateX(0deg);
    }
    40% {
        transform: rotateX(60deg);
    }
    60% {
        transform: rotateX(-40deg);
    }
    80% {
        transform: rotateX(25deg);
    }
    100% {
        transform: rotateX(0deg);
    }
}

@keyframes toast {
    0% {
        opacity: 0;
        transform: translateY(1vh);
    }
    10% {
        opacity: 1;
        transform: translate(0vh);
    }
    80% {
        opacity: 1;
        transform: translate(0vh);
    }
    100% {
        opacity: 0;
        transform: translateY(-1vh);
    }
}