:root {
    --white: #FFFFFF;
    --broken-white: #EBEBEB;
    --broken-white2: #FCFCFC;
    --black: #000000;
    --purple-main: #8000FF;
    --purple-main55: #8000FF55;
    --purple-main25: #8000FF25;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

h1 {
    font-family: moraco;
}

h2 {
    font-family: moraco;
}

h3 {
    font-family: oswald;
}

p {
    font-family: lato;
}

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

body {
    height: 100vh;
    width: 100%;
    display: grid;
    grid-template-columns: 15% 85%;
    grid-template-rows: 15% 85%;
    grid-template-areas: "menu header" "menu main";

    header {
        z-index: 4;
        background-color: var(--white);
        grid-area: header;
    }

    #menu {
        z-index: 5;
        background-color: var(--white);
        box-shadow: 1px 0 5px grey;
        grid-area: menu;
    }

    main {
        background-color: var(--broken-white);
        grid-area: main;
        overflow-y: auto;

        #content {
            min-height: 100%;
            padding: 2vh;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    }

    footer {
        background-color: var(--white);
    }

    .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        padding: 10px 28px 11px;
        border-radius: 5px;
        margin: 0 1%;

        p {
            white-space: nowrap;
            font-weight: 600;
        }

        &:hover {
            cursor: pointer;
        }
    }

    .btn-primary {
        background-color: var(--purple-main);
        border: 1px solid var(--purple-main);

        p {
            color: var(--white);
        }
    }

    .btn-secondary {
        border: 1px solid grey;

        p {
            color: var(--black);
        }
    }
}