@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;
}
h2 {
    text-align: center;
    font-size: 3.5rem;
}
h3 {
    text-align: center;
    font-size: 3rem;
}
p {
    font-size: 2.5rem;
    margin-left: 25%;
    max-width: 50%;
}
.right {
    text-align: right;
}
.center {
    text-align: center;
}
/*GRID ALIGNMENT BELOW, EVERYTHING ELSE ABOVE*/
#pandorah {grid-area:section1;}
#pandorahtext {grid-area:section2;}
#ezra {grid-area:section3;}
#ezratext {grid-area:section4;}
#forg {grid-area:section5;}
#forgtext {grid-area:section6;}

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