body{
    background-image: url(Images/OneShot.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: contain;
    background-color: rgb(58, 0, 58);
}
main {
    display: grid;
    grid-template-areas: 
        "header header header header"
        "hero hero hero hero"
        "para1 para2 para3 para4"
        "footer footer footer footer";
    grid-template-rows: 100px 300px fit-content 100px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    background-color: rgba(255, 255, 255, 0.6);
}
div {
    border: 1px solid;
    justify-content: center;
    align-content: center;
}
#header {
    grid-area: header;
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
#hero {
    grid-area: hero;
    background-image: url(Images/Niko.jpg);
    background-repeat: no-repeat;
    background-position: fixed;
    background-size: cover;
    height: 300px;
}
#para1 {
    grid-area: para1;
}
#para2 {
    grid-area: para2;
}
#para3 {
    grid-area: para3;
}
#para4 {
    grid-area: para4;
    font-size: small
}
#footer {
    grid-area: footer;
    text-align: center;
    font-family: "Science Gothic", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: italic;
}
#hero, #para1, #para2, #para3, #para4 {
    font-family: "Science Gothic", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}