:root {
    --color-invalid:  #f00;
}

BODY {
    background-color:    #b79fc6;
    text-align:          center;
}

H1 {
    font-family:         Georgia, 'Times New Roman', Times, serif;
    text-align:          center;
}

FORM {
    display:             inline-block;
    margin-bottom:       1em;
    padding:             .75em 1.25em;;
    background-color:    #fffdd0ce;
    border:              2px solid #c4d2d4;
    border-radius:       1em;
    box-shadow:          5px 5px 5px hsla(57, 85%, 20%, 0.808);
    vertical-align: middle;
}
/* Only display button when there is new valid input. */
FORM:invalid button {
    display: none;
}
LABEL:has(+ INPUT) {
    display: inline-block;
    vertical-align: middle;
    font-family:         'Times New Roman', Times, serif;
    font-size:           1.2em;
    font-weight:         bold;
}
INPUT[type="text"] {
    display: inline-block;
    vertical-align: middle;
    margin:              auto .4em;
    font-family:         'Courier New', Courier, monospace;
    font-size:           1.1em;
    border-radius:       .5em;
}
INPUT[type="text"] + DIV.error + BUTTON {
    font-family:         Georgia, 'Times New Roman', Times, serif;
    font-size:           1.1em;
    letter-spacing:      .05em;
    border-radius:       .5em;
}
INPUT:not(:placeholder-shown):invalid {
    outline:             1px solid var(--color-invalid);
    background-color:    rgb(227, 230, 81);
}
INPUT:not(:placeholder-shown):invalid + DIV.error {
    display:             block;
}
/* Input error - hidden (valid state) */
INPUT + DIV.error {
    display:             none;
    margin:              .5em auto;
    font-family:         'Times New Roman', Times, serif;
    font-size:           1em;
    font-weight:         bold;
    color:               var(--color-invalid);
}

TABLE {
    margin:              auto;
    border:              3px #5b4773 outset;
    box-shadow:          .4em .4em .75em #54075699;
    overflow:            hidden;
    border-collapse:     collapse;
    font-family:         'Courier New', Courier, monospace;
    font-size:           1.2rem;
}
TABLE > CAPTION {
    margin-top:          1rem;
    caption-side:        bottom;
    font-family:         Comic Sans MS;
    font-size:           1rem;
    font-style:          italic;
    color:               #222;
}
TR:nth-of-type(odd) > TD {
    background-color:    #b196cf99;
}
TH, TD {
    padding:             .3em;
    text-align:          center;
    vertical-align:      middle;
    border:              1px solid #ea3797b0;
}
TH {
    background-color:    #5fc8df;
    font-family:         'Times New Roman', Times, serif;
}
TBODY TD {
    position:            relative;
    background-color:    #9577b699;
    font-size:           1.2rem;
    cursor:              pointer;
}
TBODY TD:hover {
    font-weight:         bold;
    background-color:    rgb(113, 245, 31) !important;
}
TBODY TR:hover TD {
    background-color:    #eee8aa9f;
}
TBODY TD:hover:before {
    content:             '';
    position:            absolute;
    left:                0;
    right:               0;
    top:                 -9999px;
    bottom:              -9999px;
    background-color:    palegoldenrod;
    z-index:             -1
}

#toast_span {
    position:            absolute;
    z-index:             100;
    visibility:          hidden;
    padding:             .4em .5em;
    background:          linear-gradient(120deg, #1aa5e1 0%, #58c3f1 50%, #1aa5e1 100%);
    background-color:    #1aa5e1;
    border:              2px outset #3d535c;
    border-radius:       1em;
    font-family:         'Times New Roman', Georgia, Times, serif;
    font-size:           .9em;
}
#toast_span.show {
    visibility:          visible;
    animation:
        fade_in 0.25s ease-in forwards,
        fade_out .5s 1s ease-out forwards;
}
#toast_span > .var {
    font-family:         'Courier New', Courier, monospace;
    font-size:           1.1em;
    font-weight:         bold;
    color:               rgb(249, 41, 17);
}

.no_animations {
    animation:           none !important;
}


/* ********** */
/* Animations */
/* ********** */
@keyframes fade_in {
    0%   { opacity: 0; padding: 0; font-size:.2em; }
    100% { opacity: 1; padding: .4em .5em; font-size: .9em; }
}
@keyframes fade_out {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}