* {
    box-sizing: border-box;
    text-align: center;
    margin: 0;
    padding: 0;
    border: 0;
}

body {
    font-family: "Inter", sans-serif;
}

main {
    margin-top: 5vh;
    margin-bottom: 5vh;
    margin-left: calc(15% - 4px);
    margin-right: calc(15% - 4px);
    display: grid;
    grid-template-rows: 12.5vh 22.5vh 70vh 15vh;
    grid-template-columns: 17.5vw 17.5vw 17.5vw 17.5vw;
    justify-content: center;
}

#header {
    border: 2px solid black;
    font-size: 300%;
    grid-column: 1 / span 4;
    grid-row: 1/ span 1;
    font-family: "Merriweather", serif;
    align-content: center;
}

img {
    border: 2px solid black;
    grid-column: 1 / span 4;
    grid-row: 2/ span 1;
    height: 100%;
    width: 100%;
    padding-left: 18%;
    padding-right: 18%;
}

p {
    padding-top: 5%;
    border: 2px solid black;
    font-family: "Inter", sans-serif;
    font-size: 225%;    
    color: azure;
    -webkit-text-stroke: 1px black;
    align-content: center;
    padding: 10px;
}

#footer {
    border: 2px solid black;
    grid-column: 1 / span 4;
    grid-row: 4/ span 1;
    font-family: "Merriweather", serif;
    font-weight: bold;
    align-content: center;
    font-size: 200%;

}

.hero-banner {
    background-image: 
        linear-gradient(rgba(170, 229, 164, 0.3), rgba(170, 229, 164, 0.3)), 
        url('Image/MajorasChild.jpg');
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
}

/* 
.inter-<uniquifier> {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.merriweather-<uniquifier> {
  font-family: "Merriweather", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
*/