html {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 2rem;
    background-color: #F7F7F7;
    /*
    background-image: url(https://p.turbosquid.com/ts-thumb/W0/NpPGeV/DuFnuU1w/torii2/jpg/1542065631/600x600/fit_q87/ec0e36d48fafb66ba565cb000be00f308f0ba61b/torii2.jpg);
    */
    background-image: url('./public/torii2.jpg');
    background-repeat: no-repeat;
    background-position: right;
    background-attachment: fixed;
    color: rgb(7, 28, 46);
    text-align: justify;
}

@media (min-width: 1000px) and (max-width: 4000px) {
    body{
        background-color: #f7f7f779;
    }

    body, footer {
       max-width: 60%;
       min-width: 40%;
       margin: 0 auto;
       display: block;
       position: sticky;
       left: 420px;
    }

    .nav-link:last-of-type {
        border-bottom: none;
    }
    

    .nav-link {
        display: block;
        max-width: 337px;
        width: 100%;
        height: 100%;
        border-top: solid 2px grey;
        font-size: 1rem;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        text-align: left;
        padding: 15px 1rem;
    }

    #navbar {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        max-width: 400px;
        height: 100%;
        width: 456px;
        background-color: #F7F7F7;
        border-right: solid grey 2px;
    }
}

@media (min-width: 320px)  and (max-width: 999px) {
    html {
        box-sizing: border-box;
        background-image: none;
    }

    h1 {
        display: inline-block;
        width: 100%;
        margin: 0 auto;
        text-align: center;
        font-size: 1.1em;
        border-bottom: solid gray 2px;
    }

    body, footer {
        width: 100%;
        max-width: 980px;
        min-width: 400px;
        margin: 0 auto;
    }

    nav {
       width: 100%;
       margin: 0 auto;
    }

    .nav-link {
        display: inline-block;
        width: 100%;
        border-bottom: 2px solid grey;
    }

    body {
        margin: 0 auto;
        width: 100%;
    }

}

.note {
    margin-top: 50px;
    text-align: center;
    font-style: italic;
    font-size: 0.8rem;
}

header {
    color: rgb(235, 1, 118);
    text-align: center;
    font-style: oblique 10deg;
    font-weight: bold;
}

section, footer {
    width: 90%;
    margin: 0 auto;
    margin-top: 50px;
}



h6, h5 {
    margin: auto;
    color: rgb(235, 1, 118);
    font-size: 1rem;

}

.if-example {
    color: rgb(235, 1, 118);
    font-weight: bold;
}

footer a {
    color: rgb(235, 1, 118);
    text-decoration: none;
}

.nav-link  {
    text-decoration: none;
}

a:hover {
    background-color: rgb(235, 1, 118);
    color: #F7F7F7;
}

code {
    background-color: rgba(169, 169, 169, 0.293);
    margin-bottom: 2rem;
}

.codeex {
    margin: 1rem;
}

.ps { 
    font-style: italic;
}