:root {
    --a1: #111;
    --a2: #222;
    --a3: #333;
    --a4: #444;
    --a5: #555;
    --a6: #666;
    --a7: #777;
    --a8: #888;
    --a9: #999;

    --m3: #2c73d2;
    --m4: #2ecc71;
    --m5: #ff4a4e;
    --m6: #ffe081;
}

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

@font-face {
    src: url('../font/Teko-Bold.ttf') format('truetype');
    font-family: 'Teko';
    font-weight: inherit;
    font-style: normal;
}

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

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;

    font-family: 'Teko', sans-serif;
    font-weight: inherit;
    font-size: 1.25rem;
    line-height: 0.75;
    color: var(--a9);
}

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

#headerwrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--a4);
}

    #header {
        margin: 25px;
        text-align: center;
    }

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

#contentwrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    background-color: var(--a3);
}

    #content {
        margin: 25px;
        text-align: center;

        font-size: 5rem;
        color: white;

        user-select: none;
    }

        #content img {
            display: block;
            width: 100px;
        }

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

#footerwrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--a4);
}

    #footer {
        margin: 25px;
        text-align: center;
    }

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

@media only screen and (max-width: 1200px) {

    #content {
        font-size: 2rem;
    }

}