:root {
    --steelgray: #303030;
    --brightred: #c7405e;
    --softwhite: #e0e0e0;
}

@media screen and (min-device-width: 768px) {
    /* For desktop */

    body {
        font-family: "Fira Code", monospace;
        margin: 0px;
        background-color: var(--steelgray);
        color: var(--softwhite);
    }

    h1 {
        font-size: 48px;
        text-align: center;
        color: var(--brightred);
        margin: 0px;
        padding: 48px 0px 0px 0px;
    }

    h2 {
        margin-left: 25%;
        margin-right: 25%;
        font-size: 36px;
        text-indent: 48px;
        line-height: 48px;
    }

    p {
        margin-left: 25%;
        margin-right: 25%;
        font-size: 18px;
        text-indent: 30px;
        line-height: 30px;
        text-align: justify;
    }

    p a {
        text-decoration: none;
        color: var(--brightred);
    }

    div.menu {
        display: flex;
        margin-top: 20px;
        margin-bottom: 20px;
        justify-content: center;
        font-size: 24px;
    }

    div.menu a {
        margin: 8px 20px;
        padding: 8px;
        text-decoration: none;
        color: var(--brightred);
    }
}

@media screen and (max-device-width: 768px) {
    /* For mobile */
    
    body {
        font-family: "Fira Code", monospace;
        margin: 0px;
        background-color: var(--steelgray);
        color: var(--softwhite);
    }

    h1 {
        font-size: 72px;
        text-align: center;
        color: var(--brightred);
        margin: 0px;
        padding: 48px 0px 0px 0px;
    }

    h2 {
        font-size: 64px;
        text-indent: 72px;
        line-height: 48px;
    }

    p {
        margin-left: 48px;
        margin-right: 48px;
        font-size: 48px;
        text-indent: 48px;
        line-height: 72px;
        text-align: justify;
    }

    p a {
        text-decoration: none;
        color: var(--brightred);
    }

    div.menu {
        display: flex;
        margin-top: 20px;
        margin-bottom: 20px;
        justify-content: center;
        font-size: 36px;
    }

    div.menu a {
        margin: 8px 20px;
        padding: 8px;
        text-decoration: none;
        color: var(--brightred);
    }
}