/* The main font of the website */
    @font-face {
        font-family: AbFont;
        src: url("../fonts/A♭ Font.ttf");
    }

/* Basic text style */
    body {
        font-family: AbFont, Verdana, sans-serif;
        text-align: center;
        font-size: 32px;
        color: white;

        margin: 0;
    }

/* Other small styles */
    a { text-decoration: none; color: #CFDFE9; text-shadow: 2px 2px 15px rgb(0, 0, 0, 0.5);}
    p { margin: 0.3em auto; }
    img { display: block; }

/* Big Header 1 */
    h1{
        margin: 0.6em;
        font-size: 64px;
        font-weight: normal;
        text-shadow: 2px 2px 15px rgb(0, 0, 0, 0.5);
        letter-spacing: 0.025em;
    }

/* Medium Header 2 */
    h2{
        margin: 0.5em 0.5em 0.1em;
        font-size: 32px;
        font-weight: normal;
        text-shadow: 2px 2px 15px rgb(0, 0, 0, 0.5);
        letter-spacing: 0.025em;
    }

/* -------------------------------------------------------- */
/* -------------------------------------------------------- */

/* The base properties of all blocks */
    div.block, div.block_adaptive, div.block_adaptive_image, div.block_chat {
        background-color: rgba(15,15,15,0.975);
        box-shadow: 0 0 10px rgba(238, 255, 252, 0.01);
        border-radius: 10px;
        line-height: 1.1;
        text-align: left;
    }


/* A simple black background behind text */
    div.block {
        width: 16em;
        padding: 0.35em 0.7em;
        margin: 0.5em auto;
    }

/* Adaptive version of the black block, made for div containers */
    div.block_adaptive {
        max-width: 8em;
        padding: 0.32em 0.62em;
        margin: 0.5em;
    }

/* A simple black background behind images that scales automatically */
    div.block_adaptive_image {
        max-width: 16em;
        padding: 0.6em;
        margin: 0.5em auto;
        display: inline-block;
        text-align: center;
    }

/* A simple black background behind text */
    div.block_chat {
        outline: #2a3034 4px solid;
        width: 94%;
        padding: 0.42em 0.7em;
        margin: 0.6em auto;
        overflow: hidden;
        overflow-wrap: break-word;
    }

/* -------------------------------------------------------- */
/* -------------------------------------------------------- */

/* Container for even layout of elements*/
    div.tight_flex_container, div.flex_container, div.open_flex_container {
        margin: 0.5em auto;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }
    div.tight_flex_container {width: calc(100% + 2 * 0.64em); margin: -0.35em -0.7em;}
    div.flex_container {width: 100%; margin: auto auto;}
    div.open_flex_container {width: 80%;}

/* -------------------------------------------------------- */
/* -------------------------------------------------------- */

/* The base properties of all inputs */
        input.entry, input.button, label.radio, input.chatpad_button, input.chatpad_entry, .chatpad_name_entry {
        font-family: AbFont, Verdana, sans-serif;
        font-size: 32px;
        color: white;

        background-color: #1E1E1E;
        border: 3px solid #3f3f3f;
        border-radius: 4px;

        --speed: 0.1s;
        -webkit-transition:
        color var(--speed) ease-in-out,
        border var(--speed) ease-in-out,
        background-color var(--speed) ease-in-out;
        transition:
        color var(--speed) ease-in-out,
        border var(--speed) ease-in-out,
        background-color var(--speed) ease-in-out;
    }

   ::placeholder {
       color: rgba(255, 255, 255, 0.4);
   }

/* Input entry */
    input.entry {
        width: 13.5em; height: 1.45em;
        padding: 0.2em 0.4em;
        margin: 0.2em 0.1em;
    }

/* Focused input entry */
    input.entry:focus{
        outline: #2a3034 4px solid;
    }

/* Input entry - valid and invalid state */
    input.valid{ background-color: #0f1f0f; border: 3px solid #204020; color: #80ff80;}
    input.valid:focus{ background-color: #142914; border: 3px solid #458a45; color: #80ff80; }
    input.invalid{ background-color: #1f0f0f; border: 3px solid #402020; color: #ff8080; }
    input.invalid:focus{ background-color: #291414; border: 3px solid #8a4545; color: #ff8080; }

/* Input button */
    input.button {
        width: 8em; height: 2em;
        padding: 0.2em 0.4em;
        margin: 0.75em 0.25em;
    }
/* Input button */
    input.button:hover {
        cursor: pointer;
        color: #fafafa;
        background-color: #262626;
        border: 3px solid #474747;
    }



/* ChatPad stuff */
    input.chatpad_button, input.chatpad_entry, .chatpad_name_entry {
        background-color: rgba(15,15,15,0.975);
        box-shadow: 0 0 10px rgba(238, 255, 252, 0.01);
        border: none;
        outline: #2a3034 4px solid;
    }

/* ChatPad button */
    input.chatpad_button {
        width: 2em; height: 2em;
        padding: 0.2em 0.3em 0.2em 0.4em;
        margin: 0 0;
    }
 /* Input entry */
    input.chatpad_entry {
        width: 20.25em; height: 1.6em;
        padding: 0.2em 0.5em;
        margin: 0.5em 0.4em 0.25em 0.05em;
    }

/* Input radio */
    label.radio {
        padding: 0.25em;
        text-align: center;
        flex-grow: 1; flex-basis: 0;
        cursor: pointer;

        color: #3f3f3f;
        background-color: rgba(15,15,15,0.975);
        border: 3px solid #0F0F0FF8;
        border-radius: 10px;
    }
    label.radio input {
        width: 0; height: 0;
        position: absolute;
        opacity: 0;
        cursor: default;
    }
    label.radio:hover {
        color: #4d4d4d;
        background-color: rgba(20, 20, 20, 0.97)
    }
    label.radio:has(input:checked) {
        color: #FFFFFFFF;
        background-color: rgba(31, 31, 31, 0.97);
        border-color: #3b3b3b;
    }

/* -------------------------------------------------------- */
/* -------------------------------------------------------- */

    #abraham {
        color: #CFDFE9;
        text-shadow: 2px 2px 15px rgb(0, 0, 0, 0.5);
        cursor: pointer;
    }

    .rave {
        animation: rave 0.52956845466s linear infinite;
        animation-delay: -0.05s;
    }

    @keyframes rave {
        from { color: #71b2da; filter: hue-rotate(0deg) }
        to { color: #3490c9; filter: hue-rotate(360deg) }
    }