:root {
    --primary: #59bcc1;
    --secondary:#a53c0e;
    --ternary:#b4afae;
    --fourth:#f4eae1;
    --textOnPrimary:#000;
    --textOnSecondary:#fff;
    --whiteOverlay: rgba(255, 255, 255, 0.7);
    --whiteOverlayHover: rgba(255, 255, 255, 0.3);
}

body {
    background-color: var(--fourth);
    font-size: 14pt;
    font-family: "REM", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

h1 {
    font-size: 1.7em;
}

.brandingFont, h1 {
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: italic !important;
}

header {
    background-color: var(--primary);
    color: var(--textOnPrimary);
}
    header h1 {
        margin: 0;
        padding: 10px;
    }
        header h1 a {
            color: var(--textOnPrimary);
            text-decoration: none;
        }
    header nav {
        padding: 0 5px;
        background-color: var(--whiteOverlay);
        line-height: 1.2em;
    }
        header nav a {
            display: inline-block;
            color: var(--textOnPrimary);
            text-decoration: none;
            padding:10px;
            margin:0 5px;
            
        }
        header nav a:hover {
            background-color: var(--whiteOverlayHover);
        }

footer {
    background-color:  var(--whiteOverlay);
    color: var(--textOnPrimary);
    text-align: center;
    padding: 10px;
    border-top: 1px solid var(--ternary);
    border-bottom: 1px solid var(--ternary);
}