@font-face{
font-family: 'Kingthings-Gothique';
src: url('kingthings/web fonts/kingthingsgothique_regular_macroman/Kingthings_Gothique-webfont.woff') format('woff');
}

@font-face{
font-family: 'DarkerGrotesque';
src: url('darker/DarkerGrotesque-Medium.ttf') format('truetype');
}

body {
    margin:0;
    padding:calc(8px + 1.5625vw);
    font-size:100%;
    font-family: 'DarkerGrotesque';
}

/* holy grail 3-column layout */
/* grid container */
.holy-grail-bottom-footer-grid {
    display:grid;
    grid-template-rows:auto 1fr auto auto auto;
    grid-template-areas:
        'header'
        'main-content'
        'left-sidebar'
        'right-sidebar'
        'footer';

    /* fallback height */
    min-height:calc(100vh - 2*(8px + 1.5625vw));

    /* new small viewport height for modern browsers */
    min-height:calc(100svh - 2*(8px + 1.5625vw));
}

/* general column padding */
.holy-grail-bottom-footer-grid > * {
    padding:1rem;
}

h1, h2 {
    font-family: 'Kingthings-Gothique';
}

/* assign columns to grid areas */
.holy-grail-bottom-footer-grid > .header {
    grid-area:header;
    text-align:center;
}
.holy-grail-bottom-footer-grid > .main-content {
    grid-area:main-content;
    border: 1px solid gray;
    border-radius: 1em;
}
.holy-grail-bottom-footer-grid > .left-sidebar {
    grid-area:left-sidebar;
    text-align: center;
}
.holy-grail-bottom-footer-grid > .right-sidebar {
    grid-area:right-sidebar;
}
.holy-grail-bottom-footer-grid > .footer {
    grid-area:footer;
    text-align:right;
}

/* tablet breakpoint */
@media (min-width:768px) {
    .holy-grail-bottom-footer-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows:auto 1fr auto auto;
        grid-template-areas:
            'header header'
            'main-content main-content'
            'left-sidebar right-sidebar'
            'footer footer';
    }
}

/* desktop breakpoint */
@media (min-width:1024px) {
    .holy-grail-bottom-footer-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows:auto 1fr auto;
        grid-template-areas:
            'header header header header'
            'left-sidebar main-content main-content right-sidebar'
            'footer footer footer footer';
    }
}