@font-face {
    font-family: 'Crayon';
    src: url('font/DkNouveauCrayonRegular-R2j6.otf');
}
* {
    max-width:100%;
    font-family: 'Crayon', sans-serif;
}
body {
    background-image: url("img/bgindex.jpg");
    background-repeat: repeat-y;
}
header {
    margin-left: auto;
    margin-right: auto;
    width: 35%;
}
/*BASIC FORMATTING ABOVE, SPECIFIC RULES BELOW*/
h1 {
    text-align: center;
    font-size: 4rem;
}
p {
    font-size: 2.5rem;
    margin-left: 25%;
    max-width: 50%;
}
/*GRID ALIGNMENT BELOW, EVERYTHING ELSE ABOVE*/
#sect1 {grid-area:section1;}
#sect2 {grid-area:section2;}
#sect3 {grid-area:section3;}
#sect4 {grid-area:section4;}
#sect5 {grid-area:section5;}

#mainnavigation {
    display:grid;
    width:75%;
    max-width:100%;
    grid-template-areas:". . section1 ."
                        "section2 section5 section5 ."
                        ". section5 section5 section3"
                        ". section4 . .";
    margin-left:auto;
    margin-right:auto;
}
@media screen and (max-width:760px){
    #mainnavigation {
        grid-template-areas:"section1"
                            "section2"
                            "section3"
                            "section4"
                            "section5"
    }
}