#gridcontainer {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    width: 50%;
    height:1250px;
    margin:auto;
    background-color: rgba(0, 0, 0, 0.7);
}
.griditem {
    border: 1px solid rgba(0, 0, 0, 0.8);
}
#item1 {
    grid-area:1/1/2/5;
}
#item2 {
    grid-area:2/1/4/5;
}
#item3 {
    grid-area: 4/1/8/2;
}
#item4 {
    grid-area:4/2/8/3;
}
#item5 {
    grid-area: 4/3/8/4;
}
#item6 {
    grid-area:4/4/8/5;
}
#item7 {
    grid-area:8/1/9/5
}
img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
h1 {
    text-align:center;
    font-size:48px;
    font-family:"Audiowide";
    color:white;
}
p {
    font-family:"Trirong";
    margin:5px;
    font-size:11pt;
    color:white;
}
body {
    background-image: url("background.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size:100% 100%;
}
footer {
    text-align:center;
    font-family:"Trirong", sans-serif;
    color: white;
}