html {
    font-family: 'Roboto Mono', monospace;
}



#sidebar {
    position: absolute;
    width: 160px;
    border-right: 1px solid black;
    padding-right: 30px;
}
    #sidebar ul {
        list-style: none;
        text-align: right;
    }

        #sidebar ul a {
            text-decoration: none;
            text-transform: uppercase;
            color: black;
        }

        #sidebar ul a:hover {
            text-decoration: underline;
            color: darkgray;
        }
        
        #sidebar ul a:visited {
            color: black;
        }
    
    #sidebar h1 {
        text-align: right;
    }


#body {
    padding-left: 50px;
    margin-left: 160px;
    max-width: 800px;
    height: 200px;
}
    #body #content {
        display: inline-block;
        width: 90%;
        
    }

    #body #content #mainContent, #sidebar ul {
        font-size: 32px;
    }

    #body #content h1, #sidebar h1 {
        font-size: 36px;
    }

    @media (min-width:1000px) {
        #body #content {
            width: 74%;
        }

        #body #content h1, #sidebar h1 {
            font-size: 20px;
        }

        #body #content #mainContent, #sidebar ul {
            font-size: 16px;
        }
    }

    /* #body #content h1, #sidebar h1{
        font-size: calc(20px + (20 - 72) * ((100vw - 300px) / (1600 - 300)));
    }

    #body #content #mainContent, #sidebar ul {
        font-size: calc(12px + (44 - 12) * ((100vw - 300px) / (1600 - 300)));
    } */