body {
    background-color: black;
    background-image: url(https://th.bing.com/th/id/OIP.G2prQnGbkvaedgYeXFRSigHaFw?pid=ImgDet&rs=1);
    margin-top:0;
    margin-right: 0;
    margin-left: 0;
    padding: 0;
    margin-bottom: 0;
    align-content: center;
}

/* HEADER */

.header {
    position: sticky;
    top: 0px;
    z-index: 9999;
    width: 100%;
}

h1 {
    font-family: franklin-gothic-condensed, sans-serif;
    font-weight: 600;
    font-style: normal;
    text-align: center;
    color: white;
    font-size: 70px;
    position: relative;
    bottom: 35px;
    padding: 0;
    margin: 0;
}

a#buttons {
    font-family: franklin-gothic-condensed, sans-serif;
    font-weight: 600;
    font-style: normal;
    text-align: center;
    color: white;
    font-size: 20px;
    margin: 0;
    text-decoration: none;
}

a#buttons:hover {
    border: 2px solid white;
    text-decoration: underline;
    color: white;
}

.pic {
    background-image: url(https://i.pinimg.com/originals/b6/cc/d5/b6ccd518804c5d799d01aecaa46380d8.jpg);
    background-size: cover;
    background-position: center 20%;
    width: 100%; 
    margin: auto;
    height: 200px;
    text-align: center;
}

.menu {
    border-bottom:  2px white solid;
    background-color:black;
}

ul {
    margin: 0;
    padding: 0;
    margin-top: 0px;
    margin-bottom: 0px;
}


.navigation {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 0fr;
    flex-wrap: wrap;
}

.navigation {
    font-family: franklin-gothic-condensed, sans-serif;
    font-weight: 600;
    font-style: normal;
    text-align: center;
    color: white;
    font-size: 20px;
    margin: 0;
    margin-top: -30px;
    padding-bottom: 20px;
}

.buttons {
    font-style: normal;
    text-transform: uppercase;
    text-decoration: none;
    color: white;
}

@media (min-width: 750px) {
    .navigation {
        grid-template-columns: 100%; 
        margin-left: auto;
        margin-right: auto;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        max-width:1080px; 
        font-size: 30px;
    }
}

/* MAIN AREA */


h2 {
    margin: 0;
    padding-left: 0;
    text-align: center;
    font-family: franklin-gothic-condensed, sans-serif;
    font-weight: 600;
    font-style: normal;
    text-align: center;
    color: white;
}

h3 {
    margin: 0;
    padding-left: 0;
    text-align: center;
    font-family: franklin-gothic-condensed, sans-serif;
    font-weight: 600;
    font-style: normal;
    text-align: center;
    color: white;
}

.main {
    background-color: black;
    position: relative;
    color: white;
}

.intro {
    text-align: center;
    display: block;
    margin-left: 60px;
    margin-right: 60px;
    padding-top: 35px;
    padding-bottom: 10px;
}

.infogrid {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    flex-wrap: wrap;
    padding-top: 20px;
    max-width: 1080px;
    align-items: center;
}

.infogrid li {
    padding-top: 20px;
    margin: 0;
    padding-left: 10px;
    padding-right: 10px;
}

p {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
}

.gridpic {
    text-align: center;
    margin: auto;
}

@media (min-width: 1000px) {
    .infogrid {
        grid-template-columns: 100%; 
        list-style: none;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        margin: auto;
        max-width: 1080px;
        align-content: center;
        text-align: center;
    }
}

@media (max-width: 1000px) {
    .infogrid {
        grid-template-columns: 100%; 
        list-style: none;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        margin: auto;
        max-width: 700px;
        align-content: center;
    }
}

@media (min-width: 700px) {
    .p {
        margin-left: 0px;
        margin-right: 0px;
    }
}

@media (max-width: 700px) {
    .p {
        margin-left: 0px;
        margin-right: 0px;
    }
}
p {
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 15px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    margin: auto;
    text-align: center;
}

h3 {
    padding-bottom: 10px;
    font-size: larger;
}

h2 {
    padding-top: 20px;
    padding-bottom: 30px;
}


/* 800-1000 needs margin control */



/* BOTTOM AREA */

.bottom {
    text-align: center;
    color: white;
    background-color: rgb(43, 43, 43);
    margin: 0;
    padding-top: 20px;
    padding-bottom: 20px;
}