@media (prefers-color-scheme: light) {
    body {
        background-color: #FFFFFF;
    }

    div.body {
        color: black;
        margin: 0px 20%;
        padding: 0px;
    }

    li.nav-item {
        padding: 20px;
    }

    h4 {
        text-align: center;
        padding: 30px;
    }

    div.box {
        margin: 10px;
        padding: 20px;
        font-size: 18px;
    }

    a {
        color: #6c757d
    }

    a:visited {
        color: #6c757d;
    }

    a.navbar-brand {
        padding-left: 30px;
    }
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #36393F;
    }

    div.body {
        color: #FFFFFF;
        margin: 0px 20%;
        padding: 0px;
    }

    li.nav-item {
        padding: 30px;
    }

    h3 {
        padding: 20px;
    }

    h4 {
        text-align: center;
        padding: 20px;
    }

    div.box {
        margin: 10px;
        padding: 20px;
        font-size: 18px;
    }

    a.navbar-brand {
        padding-left: 30px;
    }
}