.grid-container1 {
    width: 800px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    font-family: Arial, Helvetica, sans-serif;
    border: 2px solid black;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    grid-template-areas:
    "ett1 ett1 ett1 ett1 ett1 ett1"
    "tva1 tva1 tva1 tva1 tva1 tva1"
    "tre1 tre1 fyr1 fyr1 fem1 fem1"
    "sex1 sex1 sex1 sex1 sex1 sex1"
    "sju1 sju1 sju1 att1 att1 att1"
    "nio1 nio1 nio1 nio1 nio1 nio1"
}
.grid-container2 {
    width: 1000px;
    height: auto;
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;
    font-family: Arial, Helvetica, sans-serif;
    border: 2px solid black;
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    grid-template-areas:
    "ett2 ett2 ett2 ett2 ett2"
    "tva2 tva2 tva2 tre2 tre2"
    "fyr2 fem2 sex2 sju2 att2"
    "nio2 nio2 nio2 nio2 nio2"
}
.ett1 {
    grid-area: ett1;
    background-color: #666666;
    color: white;
    text-align: center;
    border: 2px solid black;
}
.tva1 {
    grid-area: tva1;
    background-color: #dddddd;
    border: 2px solid black;
    padding-left: 5px;
}
.tre1 {
    grid-area: tre1;
    border: 1px solid black;
    border-left: 2px solid black;
    padding-left: 5px;
}
.fyr1 {
    grid-area: fyr1;
    border: 1px solid black;
    padding-left: 5px;
}
.fem1 {
    grid-area: fem1;
    padding-left: 5px;
    border: 1px solid black;
    border-right: 2px solid black;
}
.sex1 {
    grid-area: sex1;
    background-color: #dddddd;
    border: 2px solid black;
    padding-left: 5px;
}
.sju1 {
    grid-area: sju1;
    border: 1px solid black;
    border-left: 2px solid black;
    padding-left: 5px;
}
.att1 {
    grid-area: att1;
    padding-left: 5px;
    border: 1px solid black;
    border-right: 2px solid black;
}
.nio1 {
    grid-area: nio1;
    background-color: #aaaaaa;
    text-align: center;
    border: 2px solid black;
}
.ett2 {
    grid-area: ett2;
    background-color: #666666;
    color: white;
    text-align: center;
    border: 2px solid black;
}
.tva2 {
    grid-area: tva2;
    background-color: #dddddd;
    padding-left: 5px;
    border: 2px solid black;
}
.tre2 {
    grid-area: tre2;
    background-color: #dddddd;
    padding-left: 5px;
    border: 2px solid black;
}
.fyr2 {
    grid-area: fyr2;
    padding-left: 5px;
    border: 1px solid black;
    border-left: 2px solid black;
}
.fem2 {
    grid-area: fem2;
    padding-left: 5px;
    border: 1px solid black;
}
.sex2 {
    grid-area: sex2;
    padding-left: 5px;
    border: 1px solid black;
    border-right: 2px solid black;
}
.sju2 {
    grid-area: sju2;
    padding-left: 5px;
    border: 1px solid black;
    border-left: 2px solid black;
}
.att2 {
    grid-area: att2;
    padding-left: 5px;
    border: 1px solid black;
    border-right: 2px solid black;
}
.nio2 {
    grid-area: nio2;
    background-color: #aaaaaa;
    text-align: center;
    font-size: 15px;
    border: 2px solid black;
}
.bold {
    font-weight: 600;
}
.big {
    font-size: 45px;
}
img {
    width: 140px;
    height: 100px;
}