/********************************** Grid Layout **********************************/
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto auto auto;
    grid-template-areas: 'header header' 'mission mission' 'image1 content1' 'content2 image2' 'image3 content3' 'content4 image4';
    justify-items: center;
    align-items: center;
    grid-row-gap: 1em;
}

#grid-head{
    grid-area: header;
}
#grid-mission{
    grid-area: mission;
}
#grid-image1{
    grid-area: image1;
}
#grid-image2 {
    grid-area: image2;
}
#grid-image3 {
    grid-area: image3;
}
#grid-image4 {
    grid-area: image4;
}
#grid-content1 {
    grid-area: content1;
    align-content: center;
    justify-content: center;
}
#grid-content2 {
    grid-area: content2;
    align-content: center;
    justify-content: center;
}
#grid-content3 {
    grid-area: content3;
    align-content: center;
    justify-content: center;
}
#grid-content4 {
    grid-area: content4;
}

/********************************** Index Items **********************************/
h1.index {
    color: white;
    font-size: 300%;
}
h2.index {
    color: white;
}
h3.index {
    margin-top: .5em;
    margin-bottom: .5em;
    margin-left: 20%;
    margin-right: 20%;
    line-height: 2;
}
hr.indexTop {
    display: block;
    margin-top: 5%;
    margin-bottom: 0.5em;
    margin-left: 20%;
    margin-right: 20%;
    border-style: inset;
    border-width: 20px;
    border: solid #022E6D;
}

hr.indexBottom {
    display: block;
    margin-top: 0.5em;
    margin-bottom: 5%;
    margin-left: 20%;
    margin-right: 20%;
    border-style: inset;
    border-width: 20px;
    border: solid #022E6D;
}
.container {
    position: relative;
    text-align: center;
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.resize {
    width: 100%;
}
/*********************** Mobile Layout ***************************/
@media screen and (max-width: 1000px) {
    .grid-container{
        margin-right: 1.5%;
        margin-left: 1.5%;
    }
    hr.indexTop{
        margin-left: 5%;
        margin-right: 5%;
    }
    hr.indexBottom{
        margin-left: 5%;
        margin-right: 5%;
    }
    h3.index {
        margin-left: 5%;
        margin-right: 5%;
        line-height: 2;
        font-size: 100%;
    }
    h2{
        font-size: 125%;
        margin-left: 1%;
        margin-right: 1%;
    }
}
@media screen and (max-width: 750px) {
    h1.index {
        font-size: 125%;
    }

    h2.index {
        font-size: 95%;
    }
}

@media screen and (max-width: 415px) {
    h1.index {
        font-size: 100%;
    }

    h2.index {
        font-size: 75%;
    }
}

@media screen and (max-width: 275px) {
    h1.index {
        font-size: 5px;
    }

    h2.index {
        font-size: 5px;
    }

    body {
        color: black;
    }
}