* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    text-decoration: none;
    color: var(--paragraph);
}

body {
    background-color: var(--background);
    height: 100dvh;
    width: 100%;
    max-width: 100%;
    display: flex;

    @media screen and (max-width: 979px) {
        flex-direction: column-reverse;
    }

    header {
        background-color: var(--background);
        width: 5%;
        border-right: 2px solid var(--menuBorder);

        @media screen and (max-width: 1200px) {
            width: 8%;
        }

        @media screen and (max-width: 979px) {
            width: 100%;
            max-width: 100%;
            height: 8%;

            border-right: 0;
            border-top: 2px solid var(--menuBorder);
        }
    }

    main {
        height: 100vh;
        max-height: 100vh;
        width: 100%;
        padding: 0;
        margin: 0;

        overflow-y: scroll;

        #content {
            width: 100%;
            padding: .5%;
        }
    }
}

::-webkit-scrollbar {
    background-color: var(--background);
    width: 1dvh;

    @media screen and (max-width: 979px) {
        display: none;
        width: 0;
    }
}

::-webkit-scrollbar-thumb {
    background-color: var(--primary);
    border-radius: .75vh;

    @media screen and (max-width: 979px) {
        display: none;
        width: 0;
    }
}

h1 {
    font-family: maroco;
    color: var(--h1);
    margin: 0;
    font-size: 3rem;

    @media screen and (max-width: 767px) {
        font-size: 2rem;
    }
}

h2 {
    font-family: oswald;
    color: var(--title);
    margin: 0;
    font-size: 2.5rem;

    @media screen and (max-width: 767px) {
        font-size: 1.85rem;
    }
}

h3 {
    font-family: oswald;
    color: var(--title);
    margin: 0;

    font-size: 1.5rem;
}

h4 {
    font-family: oswald;
    color: var(--title);
    margin: 0;

    font-size: 1.5rem;
}

p {
    font-family: lato;
    color: var(--paragraph);

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