/* ==================================================== */
/* GENERAL: */

    @font-face{
        font-family: 'CustomFont';
        src: url('/_/main.ttf');
    }

    html {
        background-image: url('/_/background.gif');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        background-attachment: fixed; /* Keeps the background fixed when scrolling */
        image-rendering: optimizeSpeed;
        margin: 2vh 4vw;
    }

    * {
        font-family: CustomFont;
    }

    body {
        background-position: center center;
        flex-direction: column;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
    }

    a {
        text-decoration : none;
    }

/* ==================================================== */
/* a.TITLE: */

    a.title {
        font-size: xx-large;
        border: 2px solid black;
        padding: .5em .5em;
        color: white;
        border-radius: 5px;
        background-color: rgb(6, 170, 69);
        margin-bottom: 3%;
        width: 65vw;
    }

/* ==================================================== */
/* a.BACK: */

    a.back {
        background-color: rgb(0, 153, 255);
        border: 2px solid black;
        font-size: large;
        padding: .4em .4em;
        cursor: pointer;
        color: white;
        border-radius: 5px;
        min-width: 5vw;
        margin-bottom: .5%;
    }

    a.back:hover {
        background-color: rgb(26, 105, 158);
    }

/* ==================================================== */
/* a.OPTIONS: */

    .option {
        font-size: xx-large;
        padding: .4em 0.25em;
        width: 60vw;
        margin-bottom: 3%;
    }

    .smalloption {
        font-size: large;
        padding: .4em 0.25em;
        width: 30vw;
        margin-bottom: 3%;
    }

    .submit {
        font-size: large;
        padding: .4em 0.25em;
        width: 10vw;
        margin-bottom: 3%;
    }

    .smalloption, .option, .submit {
        border: 2px solid black;
        cursor: pointer;
        color: white;
        border-radius: 5px;
        display: block;
        background-color: rgb(0, 153, 255);
    }

    .smalloption:hover, .option:hover, .submit:hover {
        background-color: rgb(23, 129, 199);
    }

/* ==================================================== */
/* text-input.OPTIONS: */

input.form {

            font-size: xx-large;
        padding: .4em 0.25em;
        width: 60vw;
        margin-bottom: 3%;

        font-size: large;
        padding: .4em .25em;
        width: 30vw;
        margin-bottom: 3%;

        border: 2px solid black;
        border-radius: 5px;
        display: block;

}

/* ==================================================== */
/* HR: */

    /* HR */
    hr.hide {
        height: 5px;
        border-color: transparent;
    }

    hr {
        width: 95vw;
    }

/* ==================================================== */
/* H1: */

    h1 {
        font-size: 4em;
    }

    h1.thin {   
        font-weight: 5;
    }

    h1.title {
        font-weight: 100;
        font-size: 3.5em;
    }

    h1.subtitle {
        line-height: 1em;
        font-weight: 100;
        font-size: 1.5em;
    }