body {
    background-image: url(Images/download\ \(4\).jpg);
    background-repeat: no-repeat;
    background-size:cover;
}
#container {
    display: grid;
    grid-template-areas:
        "header header header header"
        "image image image image"
        "content2 content3 content4 content5"
        "content2 content3 content4 content5"
        "footer footer footer footer"; 
    gap: 8px;
}
.header { 
    grid-area: header; 
    border: 2px solid black;
    background-color: rgba(126, 126, 126, .8);
    font-family: "Rubik Burned", system-ui;
    font-weight: 400;
    font-style: normal;
    text-align: center;
}
.image { 
    grid-area: image;
    border: 2px solid black;
    background-color: rgba(126, 126, 126, .8);
    text-align: center;
}

.content2 { 
    grid-area: content2; 
    border: 2px solid black;
    background-color: rgba(126, 126, 126, .8);
    font-family: "Rubik Pixels", system-ui;
    font-weight: 400;
    font-style: normal;
    text-align: center; 
}
.content3 { 
    grid-area: content3; 
    border: 2px solid black;
    background-color: rgba(126, 126, 126, .8);
    font-family: "Rubik Pixels", system-ui;
    font-weight: 400;
    font-style: normal;
    text-align: center;
}

.content4 { 
    grid-area: content4; 
    border: 2px solid black; 
    background-color: rgba(126, 126, 126, .8);
    font-family: "Rubik Pixels", system-ui;
    font-weight: 400;
    font-style: normal; 
    text-align: center;
}
.content5 { 
    grid-area: content5; 
    border: 2px solid black;
    background-color: rgba(126, 126, 126, .8);
    font-family: "Rubik Pixels", system-ui;
    font-weight: 400;
    font-style: normal;
    text-align: center;
}
.footer { 
    grid-area: footer; 
    border: 2px solid black; 
    background-color: rgba(126, 126, 126, .8);
    font-family: "Rubik Pixels", system-ui;
    font-weight: 400;
    font-style: normal;
    text-align: center;
}
.nav {
    display: flex;
    padding: 10px;
    margin-top: 5px;
    gap: 10px;
    flex-direction: row;
    justify-content: center;
}    
.rubik-burned-regular {
  font-family: "Rubik Burned", system-ui;
  font-weight: 400;
  font-style: normal;
}
.rubik-pixels-regular {
  font-family: "Rubik Pixels", system-ui;
  font-weight: 400;
  font-style: normal;
}

a:link {
  color: rgb(0, 0, 0);
  cursor: pointer;
}

a:visited {
  color: rgb(0, 0, 0);
  cursor: pointer;
}

a:hover {
  color: rgb(94, 94, 94);
  cursor: pointer;
}

a:active {
  color: rgb(238, 238, 238);
  cursor: pointer;
}
@media screen and (min-width: 600px) and (max-width: 1199px){
    #container{
        grid-template-areas: 
        "header header"
        "image image"
        "content2 content3"
        "content4 content5"
        "footer footer";
    }
    body {
        font-size: larger;
    }
}
@media screen and (min-width: 0px) and (max-width: 599px) {
    #container{
        grid-template-areas: 
        "header"
        "image"
        "content2"
        "content3"
        "content4"
        "content5"
        "footer";
    }
    Img {
        display: none;
    }
    body {
        font-size: medium;
    }
}
@media screen and (min-width: 1200px) {
    #container{
        grid-template-areas:
        "header header header header"
        "image image image image"
        "content2 content3 content4 content5"
        "content2 content3 content4 content5"
        "footer footer footer footer"; 
    }
    body {
        font-size: larger;
    }
}