:root{
    --margin: 20px;
    --XL-margin: 60px;
    --font-size: 20px;
    --white: #fcfcfc;
    --grey: #343131;
    --red-link: rgb(250, 97, 77);
}
body{
    font: var(--font-size) "Open Sans", sans-serif;
    background-color: #fcfcfc;
}

a{
    color: var(--grey);
}

a:hover{
    color: var(--red-link);
}

h1{
    padding-bottom: calc(var(--margin) - 10px); 
    line-height: 1em;
}

h2{
    font-size: 1.2em;
}
h3{
    font-size: 1.15em;
}

h2, h3, h4{
    margin-bottom: calc(var(--margin) - 10px);
    line-height: 1em;
}

p{
    margin-bottom: var(--margin);
    font-size: 0.8em;
}
ul, ol{
    margin-bottom: var(--margin);
}

nav{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0; 
    background-color: var(--grey);
    width: 300px;
}

pre,p code{
    font-family: 'Courier New', Courier, monospace;
    background-color: var(--grey);
    color: var(--white);
    padding: calc(var(--margin) - 10px );
    border-radius: 12px;
    margin-bottom: var(--margin);
    font-size: 0.7em;
}

#menuButton{
    display: none;
}

#header{
    color: var(--white);
    display: block;
    position: relative;
    width: object–fit;
    text-align: center;
    margin: var(--margin);
    font-size: 0.5em;
    border-bottom: 1px solid var(--white);
}

#footer{
    color: var(--white);
    display: block;
    position: fixed;
    bottom: 0;
    width: 300px;
    font-size: 0.8em;
    text-align: center;
}

nav ul{
    list-style-type: none ;
}

nav a{
    color:  var(--white);
    text-decoration: none;
}


main{
    margin-left: calc(300px);
    padding: var(--margin) calc(2*var(--margin));
    padding-top: var(--XL-margin);
    max-width: 60vw;
}

main h1{
    margin-bottom: var(--XL-margin);
    border-bottom: 1px solid black;
}
table,td,th{   
    border: 1px solid;
}
table{
    margin: var(--margin)  0;
    border-collapse: collapse;
}



/* Mobile */
@media (max-width: 1080px){
    main{
        padding: var(--margin);
        margin: 0;
        max-width: inherit;
        width: 100%;
    }
    #header{
        display: flex;
        justify-content:   space-between;
        
    }
    #header h1{
        font-size: 2em;
        display: block;
        height: min-content;
    }
    #footer{
        position: relative;
        margin: auto;
        margin-top: var(--margin);
    }
    #menuButton{
        display: block;
        border: none;
        color: var(--white);
        font-size: 40px;
        line-height: 1em;
        margin-top: -20px;
    }
    #menu { display: none;}
    #menu.open {
    display: block !important;
    }
    nav{
        bottom: inherit;
        width: 100vw;
        min-height: 50px;
        height: min-content;
    }
    main{
        margin-top: 50px;
        padding-top: var(--XL-margin);
    }

}