@font-face {
    font-family: Megrim;
    src: url(fonts/Megrim-Regular.ttf);
}

@font-face {
    font-family: B612;
    src: url(fonts/B612Mono-Regular.ttf);
}

@font-face {
    font-family: B612 Italic;
    src: url(fonts/B612Mono-Italic.ttf);
}


body {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(images/spacebg.avif);
}

* {
    color:white;
}

#gridContainer {
    display:grid;
    grid-template-areas:
    "herotitle herotitle herotitle herotitle"
    "image image image image"
    "p1 p2 p3 p4"
    "footer footer footer footer";
    grid-template-columns: 1fr 1fr 1fr 1fr ;
    grid-template-rows: .5fr 1fr 2fr .5fr;
}

#gridContainer > * {
    border: solid black;
    background-color: rgba(125, 25, 125, 0.2);
    margin-bottom: 1vw;
}

header {
    grid-area: herotitle;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Megrim;
    font-size: 5vw;
}

#heroImage {
    grid-area: image;
    width: 100%;
    filter: saturate(50%);
}

p:not(footer > p) {
    font-family: b612;
    font-size: larger;
    line-height: 150%;
}

#p1 {
    grid-area: p1;
}

#p2 {
    grid-area: p2;
}

#p3 {
    grid-area: p3;
}

#p4{
    grid-area: p4;
}

footer {
    grid-area: footer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: b612 italic;
}