@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');

*
{
    margin: 0;
    box-sizing: border-box;
}

#hint
{
    display: none;
    position: fixed;
    z-index: 100;

    padding: 10px;

    font-size: 25px;
    white-space: pre-line;

    border: 5px var(--fgcolor) solid;
    background-color: var(--bgcolor);
}

:root
{
    font-family: 'Google Sans Code';

    body
    {
        --bgcolor: white;
        --fgcolor: black;
        --errcolor: red;

        display: grid;
        grid-template:
        "W S" 1.5fr
        "T R" 0.5fr /
        1fr 500px;

        height: 100vh;
        width:  100vw;

        padding: 100px;

        background-color: var(--bgcolor);
        color: var(--fgcolor);

        transition: color background-color;
    }

    body::backdrop
    {
        background-color: var(--bgcolor);
        color: var(--fgcolor);
    }
}

#wordArea
{
    grid-area: W;
    align-content: center;
    z-index: 10;
    --fsize: 100px;

    padding-right: 100px;

    #wordSuffix::before
    {
        content: " ";
    }

    #theWord, #wordSuffix
    {
        font-size: var(--fsize);
        font-weight: 500;
    }

    .wordPartA
    {
        color: var(--fgcolor);
    }

    .wrongTyping
    {
        color: var(--errcolor);
    }

    .wordPartB
    {
        color: var(--bgcolor);
    }
    .wordPartB::before
    {
        content: attr(content);

        position: absolute;
        z-index: -1;

        color: transparent;
        -webkit-text-stroke-width: calc(var(--fsize) / 20);
        -webkit-text-stroke-color: var(--fgcolor);
    }

    #fullWord
    {
        display: none;;
    }

    #theNumber, #wordSuffix, #fullWord
    {
        font-size: 50px;
        font-weight: 500;
    }

    #wordSuffix
    {
        white-space: pre-wrap;
    }
}

#titleArea
{
    grid-area: T;
    align-content: center;

    cursor: pointer;

    div:nth-child(1)
    {
        font-size: 50px;
        font-weight: 500;
    }

    div:nth-child(2)
    {
        font-size: 25px;
        font-weight: 300;
    }
}

#scoreArea
{
    grid-area: S;
    align-content: center;
    text-align: center;

    border-left: 5px var(--fgcolor) solid;

    /* background-color: var(--fgcolor);
    color: var(--bgcolor); */

    #theScore
    {
        font-weight: 100;
        font-size: 100px;
    }

    #theTimer, #theFinish
    {
        font-size: 25px;
    }
}

#recordArea
{
    grid-area: R;

    --fsize: 25px;
    font-size: var(--fsize);
    font-weight: 100;
    
    border-left: 5px var(--fgcolor) solid;
    border-top: 5px var(--fgcolor) dotted;
    padding-left: var(--fsize);

    #theRecord
    {
        list-style: none;
        padding-left: 0;

        height: calc(var(--fsize) * 6 + var(--fsize) * 0.5);
        overflow: scroll;
        scrollbar-width: none;
        
        li
        {
            white-space: pre-wrap;
        }
    }   
}