:root {
    --master-font-size: 24px;
    --title-factor: 1.25;
    --subtitle-factor: 0.5;
    --status-factor: 0.4;
    --square-factor: 1;

    --btn-factor: 0.5;
    --btn-side-pad: 4rem;

    --banner-top-pad: 36px;

    --game-btn-size: 75px;
    --bg-color: rgb(13, 13, 15);
    --text-color: white;
}

body {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    min-height: 100%;
}

.title {
    margin-top: var(--banner-top-pad);
    font-size: calc(var(--master-font-size) * var(--title-factor));
    transition: font-size 250ms ease,
                margin-top 250ms ease;
}

/* QUERIES */
/* LG */
@media only screen and (min-width: 992px) {
    :root {
        --master-font-size: 64px;
        --btn-side-pad: 60px;
        --banner-top-pad: 72px;
        --game-btn-size: 64px;
    }
}

/* MD */
@media only screen and (min-width: 769px) and (max-width: 992px) {
    :root {
        --master-font-size: 56px;
        --btn-side-pad: 54px;
        --banner-top-pad: 96px;
        --game-btn-size: 56px;
    }
}

/* S */
@media only screen and (min-width: 592px) and (max-width: 768px) {
    :root {
        --master-font-size: 48px;
        --btn-side-pad: 48px;
        --banner-top-pad: 128px;
        --game-btn-size: 48px;
    }
}

/* XS */
@media only screen and (max-width: 591px) {
    :root {
        --master-font-size: 36px;
        --btn-side-pad: 42px;
        --banner-top-pad: 96px;
        --game-btn-size: 48px;
    }
}

/* XXS */
@media only screen and (max-width: 396px) {
    :root {
        --master-font-size: 24px;
        --btn-side-pad: 36px;
        --banner-top-pad: 72px;
        --game-btn-size: 48px;
    }
}