@font-face{font-family:space grotesk;font-style:normal;font-display:swap;src:local("Space Grotesk Regular"),local("SpaceGrotesk-Regular"),url(SpaceGrotesk-Regular.woff2)format("woff2")}
@font-face{font-family:space grotesk;font-style:normal;font-weight:700;font-display:swap;src:local("Space Grotesk Regular"),local("SpaceGrotesk-Regular"),url(SpaceGrotesk-Bold.woff2)format("woff2")}

*, *::before, *::after {
    box-sizing          : border-box;
}

* {
    margin              : 0;
}

body {
    display             : flex;
    flex-direction      : row;

    margin              : 0;
    padding             : 0;
    
    background          : #fff;
    color               : #4b3aba;

    font-family         : space grotesk;
    font-size           : 1.44em;
    line-height         : 1.65;
    text-align          : left;

    border-right        : 40px solid #f0dcac;
}

a {
    color : #4b3aba;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height : 1.2;
}

h1 {
    font-size : 2.5em;
    margin : 0 0 0.77em 0;
}

h2 {
    font-size : 2em;
    margin : 0.57em 0 0.27em 0;
}

h3 {
    font-size : 1.5em;
    margin : 0 0 0.37em 0;
}

p, ol, ul, code {
    margin : 0.57em 0; 
}

aside {
    background : #a8f3f4;
    width : 400px;

    border-right : 40px solid #f0dcac;
}

aside header, aside nav, aside footer {
    margin : 60px;
}

main {
    max-width : 900px;
}

main, aside {
    min-height : 100vh;
}

main header, main article {
    margin : 60px;
}

main article {
    padding : 30px 0 0 0;
}

aside nav {
    position: sticky;
    top : 60px;
}

aside nav ol {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

aside nav ol li a {
    font-size : 30px;
    text-decoration: none;
    line-height : 1.75;
}

aside nav ol li a:hover {
    text-decoration : underline;
}

aside #menu-toggle {
    display : none;
    font-size : 2em;
    color : #4b3aba;
    background : transparent;
    border : 0;
}

aside nav footer {
    margin : 40px 0 0 0;
}

aside nav footer ol li a {
    font-size : 1em;
}

@media(max-width:1000px) {
    body {
        flex-direction: column;
        border : 0;
    }

    aside {
        min-height : auto;
        width : 100%;
        border-right : 0;
        border-bottom : 40px solid #f0dcac;
    }

    aside header {
        display : flex;
        flex-direction: row;
        justify-content : space-between;
    }

    aside header > * {
        width : 35%;
        max-width : 35%;
    }

    aside nav {
        display : none;
    }

    aside #menu-toggle {
        display : initial;
    }

    aside nav ul li a {
        font-size : 3em;
    }
}

@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
    body {
        font-size           : 2.44em;
    }
}