@charset "utf-8";
.item1 {
grid-area: a;
text-align: center;
background-color: rgb(49, 49, 49);
color: white;
}
.item2 {
   grid-area: b; 
   background-color: darkgrey;
}
.item3 {
    grid-area: c;
    background-color: lightgrey;
    height: 100px;
}
.item4 {
    grid-area: d;
    background-color: lightgrey;
    height: 100px;
}
.item5 {
    grid-area: e;
    background-color: lightgrey;
    height: 100px;
}
.item6 {
    grid-area: f;
    background-color: darkgrey;
}
.item7 {
    grid-area: g;
    background-color: lightgrey;
    height: 100px;
}
.item8 {
    grid-area: h;
    background-color: lightgrey;
    height: 100px;
}
.item9 {
    grid-area: i;
    text-align: center;
    background-color: rgb(49, 49, 49);
}

.grid-container1 {
    display: grid;
    grid-template-areas: 
    "a a a a a a"
    "b b b b b b"
    "c c d d e e"
    "f f f f f f"
    "g g g h h h"
    "i i i i i i";
    width: 800px;
    background-color: black;
    gap: 1px;
    border: 1px black;
    margin: 50px;
}

.grid-container2 {
    display: grid;
    grid-template-areas: 
    "a a a a a"
    "b b b f f"
    "c d e g h"
    "i i i i i";
    width: 800px;
    background-color: black;
    gap: 1px;
    border: 1px black;
    margin: 50px;
}
.grid-container1 > div {
    padding: 20px 20px;
    font-size: 15px;
}

.grid-container2 > div {
    padding: 20px 20px;
    font-size: 15px;
}
.big{
    font-size: larger;
    font-weight: 1000;
}
.extrabig{
    font-size: x-large;
    font-weight: 100000;
}