HTML, BODY {
    height:                100%;
    min-height:            100%;
    margin:                0;
}

BODY {
    display:               grid;
    grid-template-rows:    1fr auto 1fr;
    grid-template-areas:
        "header"
        "main"
        "footer";
    row-gap:               3rem;
    background-color:      #000;
    color:                 #fff;
    background-image:      url("/siteMedia/games/hangman/spidey.gif");
}

HEADER {
    grid-area:             header;
}

HEADER > H1 {
    font-family:           Creepy;
    font-size:             3rem;
    font-weight:           bold;
    text-align:            center;
    color:                 #e35146;
    margin-top:            .5em;
    margin-bottom:         .5em;
}

MAIN {
    display:               grid;
    grid-area:             main;
    grid-template-columns: .2fr 1fr .25fr 1fr .2fr;
    grid-template-areas:
        ". o_con_alpha       .         gallows    ."
        ".    board        board        board     ."
        ". status_line  status_line  status_line  ."
        ". con_stat_lnk con_stat_lnk con_stat_lnk .";
    row-gap:               4rem;
}

#scoreboard {
    font-family:           Arial;
    font-size:             2rem;
    text-align:            center;
    color:                 #00ff00;
    text-shadow:           2px 2px 3px crimson;
}

BUTTON#home_btn {
        background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24px' height='24px' viewBox='0 0 24 24' version='1.1'%3E%3Cg id='surface1'%3E%3Cpath style=' stroke:none%3Bfill-rule:nonzero%3Bfill:rgb(0%25 0%25 0%25)%3Bfill-opacity:1%3B' d='M 23.617188 10.933594 L 19.976562 7.292969 L 19.976562 3.089844 C 19.976562 2.328125 19.359375 1.710938 18.597656 1.710938 C 17.839844 1.710938 17.222656 2.328125 17.222656 3.089844 L 17.222656 4.539062 L 14.511719 1.828125 C 13.171875 0.492188 10.84375 0.492188 9.503906 1.832031 L 0.402344 10.933594 C -0.132812 11.472656 -0.132812 12.34375 0.402344 12.882812 C 0.941406 13.417969 1.8125 13.417969 2.351562 12.882812 L 11.453125 3.777344 C 11.75 3.484375 12.269531 3.484375 12.566406 3.777344 L 21.667969 12.882812 C 21.9375 13.148438 22.289062 13.285156 22.640625 13.285156 C 22.996094 13.285156 23.347656 13.148438 23.617188 12.882812 C 24.152344 12.34375 24.152344 11.472656 23.617188 10.933594 Z M 23.617188 10.933594 '/%3E%3Cpath style=' stroke:none%3Bfill-rule:nonzero%3Bfill:rgb(0%25 0%25 0%25)%3Bfill-opacity:1%3B' d='M 12.488281 6.390625 C 12.222656 6.128906 11.796875 6.128906 11.53125 6.390625 L 3.527344 14.394531 C 3.398438 14.523438 3.328125 14.695312 3.328125 14.875 L 3.328125 20.710938 C 3.328125 22.082031 4.4375 23.191406 5.808594 23.191406 L 9.773438 23.191406 L 9.773438 17.054688 L 14.246094 17.054688 L 14.246094 23.191406 L 18.210938 23.191406 C 19.582031 23.191406 20.691406 22.082031 20.691406 20.710938 L 20.691406 14.875 C 20.691406 14.695312 20.621094 14.523438 20.492188 14.394531 Z M 12.488281 6.390625 '/%3E%3C/g%3E%3C/svg%3E");
    background-repeat:     no-repeat;
    background-position:   30% center;
}

BUTTON.nav_button {
    padding-right:         2em;
    width:                 2em;
    height:                2.2em;
    font-size:             1em;
    border:                1px solid silver;
	border-radius:         0 1em 1em 0;
}

/*  Common  */
BUTTON {
    border:                none;
	background-color:      #6aa584;
}

BUTTON:hover {
    cursor:                pointer;
    transform:             translate(2px, 2px);
}

BUTTON:active {
    transform:             scale(0.97);
}


#gallows {
    /*position:              relative;*/
    grid-area:             gallows;
    text-align:            left;
    min-height:            321px;
}

/*
#gallows {
    position:              absolute;
    max-height:            100%;
}
*/



#outer_container_alphabet {
    grid-area:             o_con_alpha;
    text-align:            right;
}

#container_alphabet {
    display:               inline-block;
    width:                 clamp(11em, 100%, 19em);
    margin-bottom:         1rem;
    text-align:            center;
}

#container_alphabet > A:link,
#container_alphabet > A:visited {
    display:                 inline-block;
    margin:                  .5em;
    font-family:             Georgia, 'Times New Roman', Times, serif;
    font-size:               1.5em;
    text-underline-position: under;
    text-decoration-color:   #5d5df7;
    color:                   #f00;
}
#container_alphabet > A.vowel:link,
#container_alphabet > A.vowel:visited {
/*    color:                   #fd6c23; */
    color:                   color-mix(in lch, #f00 50%, #ff0);
}
#container_alphabet > A:hover,
#container_alphabet > A.vowel:hover {
    color:                   #ff0;
    text-decoration-color:   #ff0;
}


#board {
    grid-area:             board;
    text-align:            center;
    color:                 #fff;
}

#status_line {
    grid-area:             status_line;
    font-family:           Creepy;
    font-size:             2rem;
    text-align:            center;
    color:                 #aa55dd;
}

#container_status_link {
    grid-area:             con_stat_lnk;
    text-align:            center;
    min-height:            1.4rem;
}

#container_status_link > A:link,
#container_status_link > A:visited {
    font-family:           Verdana;
    font-size:             1rem;
    font-weight:           bold;
    color:                 #f90;
    opacity:               0;
}
#container_status_link > A:hover {
    color:                 #ff0;
}

.blank {
    font-family:           Georgia, 'Times New Roman', Times, serif;
    font-size:             1rem;
    margin:                .25em;
    line-height:           2em;
}

.fadein {
    --trans_time:          2s;
    animation:             fade_in ease-in var(--trans_time);
    animation-fill-mode:   forwards;
    animation-iteration-count: 1;
}

.fadeout {
    --trans_time:          2s;
    opacity:               0;
    transition:            opacity var(--trans_time) ease-out;
}

.inactive {
    filter:                saturate(80%);
    opacity:               80%;
}
.inactive > A {
    text-decoration:       none;
    cursor:                not-allowed;
}

.letter {
    line-height:           2em;
    font-family:           Georgia, 'Times New Roman', Times, serif;
    font-size:             2em;
    color:                 #f00;
}

.letters_missed {
    color:                 #ff0;
}

.loading {
    font-family:           'Courier New',
                           'Courier',
                           'Lucida Sans Unicode' !important;
    font-style:            italic;
    color:                 #fafabe !important;
    text-shadow:           0px 0px 5px #fff;
}

.waiting {
    opacity:               1;
    animation:             fade_pulse 2s ease-in-out infinite;
}

.failed {
    color:                 #f00 !important;
    text-shadow:           2px 2px 5px #e21697 !important;
    font-weight:           bold;
}

.punctuation {
    font-family:           Arial;
    font-size:             1.5em;
    color:                 #f00
}

.space {
    display:               inline-block;
    width:                 3.3ch;
    height:                1em;
}






/* Adjust for tall, narrow screens. */
@media (max-aspect-ratio: 1200 / 1920) and (max-device-width: 1080px) {
    HEADER > H1 {
        font-size:         4.5rem;
    }

    #scoreboard {
        font-size:         3rem;
    }

    MAIN {
        grid-template-columns: 1fr;
        grid-template-areas:
            "gallows"
            "board"
            "status_line"
            "con_stat_lnk"
            "o_con_alpha";
    }

    BUTTON#home_btn {
        background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='40px' height='40px' viewBox='0 0 24 24' version='1.1'%3E%3Cg id='surface1'%3E%3Cpath style=' stroke:none%3Bfill-rule:nonzero%3Bfill:rgb(0%25 0%25 0%25)%3Bfill-opacity:1%3B' d='M 23.617188 10.933594 L 19.976562 7.292969 L 19.976562 3.089844 C 19.976562 2.328125 19.359375 1.710938 18.597656 1.710938 C 17.839844 1.710938 17.222656 2.328125 17.222656 3.089844 L 17.222656 4.539062 L 14.511719 1.828125 C 13.171875 0.492188 10.84375 0.492188 9.503906 1.832031 L 0.402344 10.933594 C -0.132812 11.472656 -0.132812 12.34375 0.402344 12.882812 C 0.941406 13.417969 1.8125 13.417969 2.351562 12.882812 L 11.453125 3.777344 C 11.75 3.484375 12.269531 3.484375 12.566406 3.777344 L 21.667969 12.882812 C 21.9375 13.148438 22.289062 13.285156 22.640625 13.285156 C 22.996094 13.285156 23.347656 13.148438 23.617188 12.882812 C 24.152344 12.34375 24.152344 11.472656 23.617188 10.933594 Z M 23.617188 10.933594 '/%3E%3Cpath style=' stroke:none%3Bfill-rule:nonzero%3Bfill:rgb(0%25 0%25 0%25)%3Bfill-opacity:1%3B' d='M 12.488281 6.390625 C 12.222656 6.128906 11.796875 6.128906 11.53125 6.390625 L 3.527344 14.394531 C 3.398438 14.523438 3.328125 14.695312 3.328125 14.875 L 3.328125 20.710938 C 3.328125 22.082031 4.4375 23.191406 5.808594 23.191406 L 9.773438 23.191406 L 9.773438 17.054688 L 14.246094 17.054688 L 14.246094 23.191406 L 18.210938 23.191406 C 19.582031 23.191406 20.691406 22.082031 20.691406 20.710938 L 20.691406 14.875 C 20.691406 14.695312 20.621094 14.523438 20.492188 14.394531 Z M 12.488281 6.390625 '/%3E%3C/g%3E%3C/svg%3E");
    }

    BUTTON.nav_button {
        width:             3.5em;
        height:            3.8em;
    }

    #gallows {
        display: block;
        margin:auto;
        text-align:            center;
        margin-bottom:         3rem;
    }

    #outer_container_alphabet {
        text-align:            center;
    }

    #container_alphabet {
        font-size:             2rem;
    }

    #status_line {
        font-size:             3rem;
    }

    #container_status_link {
        min-height:            2rem;
    }
    #container_status_link > A:link,
    #container_status_link > A:visited,
    #container_status_link > A:hover {
        font-size:             1.8rem;
    }

    .blank {
        font-family:           Georgia, 'Times New Roman', Times, serif;
        font-size:             2rem;
    }

    .letter {
        font-size:             3rem;
    }

}



/* Adjust for wide, short screens (like phone in landscape). */
@media (max-device-height: 700px) {
    BODY {
        grid-template-rows:    auto 1fr;
        grid-template-areas:
            "header"
            "main";
        gap:                   1rem;
    }

    HEADER {
        display:               grid;
        grid-template-columns: 1fr auto auto 1fr;
        grid-template-areas:
            ". h1 scoreboard .";
        column-gap:            4em;
        align-items:           center;
    }

    HEADER > H1 {
        grid-area:             h1;
        font-size:             1.7rem;
    }

    MAIN {
        grid-template-columns: 1rem 1fr 2rem auto 1rem;
        grid-template-areas:
            ". board             .       gallows ."
            ". status_line  status_line  gallows ."
            ". con_stat_lnk con_stat_lnk gallows ."
            ". o_con_alpha  o_con_alpha  gallows .";
        row-gap:               1.5rem;
    }

    #scoreboard {
        grid-area:             scoreboard;
        font-size:             1.5rem;
    }

    #gallows {
        height:                200px;
        min-height:            auto;
        text-align:            right;
    }

    #outer_container_alphabet {
        text-align:            center;
    }

    #container_alphabet {
        width:                 90%;
    }

}



/* ********** */
/* Animations */
/* ********** */
@keyframes fade_pulse {
    0%, 100% { opacity: .3; }
    50% { opacity: 1;}
}

@keyframes fade_in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}