.gridcontainer {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    grid-template-rows: 35px 25px 100px 25px 100px 45px;
    width: 800px;
    margin: auto;
    font-family: Arial, Helvetica, sans-serif;
    grid-template-areas: 
    "one one one one one one"
    "two two two two two two"
    "three three four four five five"
    "six six six six six six"
    "seven seven seven eight eight eight"
    "nine nine nine nine nine nine";}
.one {
    grid-area: one;
    background-color: darkblue;
    color: white;
    text-align: center;
    padding-top: 4px;
    font-size: 20px;
    border: 1px black solid;
    font-weight: bold;}
.two {
    grid-area: two;
    background-color: rgb(111, 111, 199);
    padding-left: 10px;
    border: 1px black solid;
    padding-top: 3px;
    font-weight: bold;}
.three {
    grid-area: three;
    background-color: rgb(169, 188, 240);
    padding-left: 10px;
    padding-top: 3px;
    border: 1px black solid;
    font-size: 12px;}
.four {
    grid-area: four;
    background-color: rgb(169, 188, 240);
    padding-left: 10px;
    padding-top: 3px;
    border: 1px black solid;
    font-size: 12px;}
.five {
    grid-area: five;
    background-color: rgb(169, 188, 240);
    padding-left: 10px;
    padding-top: 3px;
    border: 1px black solid;
    font-size: 12px;}
.six {
    grid-area: six;
    background-color: rgb(111, 111, 199);
    padding-left: 10px;
    border: 1px black solid;
    padding-top: 3px;
    font-weight: bold;}
.seven {
    grid-area: seven;
    background-color: rgb(169, 188, 240);
    padding-left: 10px;
    padding-top: 3px;
    border: 1px black solid;
    font-size: 12px;}
.eight {
    grid-area: eight;
    background-color: rgb(169, 188, 240);
    padding-left: 10px;
    padding-top: 3px;
    border: 1px black solid;
    font-size: 12px;}
.nine {
    grid-area: nine;
    background-color: rgb(51, 51, 150);
    border: 1px black solid;
    color: white;
    font-size:10px;
    padding-top: 3px ;
    text-align: center;}
.bigletter {
    grid-area: nine;
    background-color: rgb(51, 51, 150);
    color: white;
    font-size: 30px;
    padding-top: 3px ;
    text-align: center;}

    .gridcontainerb {
        display: grid;
        grid-template-columns: auto auto auto auto auto;
        grid-template-rows: 35px 25px 120px 45px;
        width: 800px;
        margin: auto;
        font-family: Arial, Helvetica, sans-serif;
        grid-template-areas: 
        "oneb oneb oneb oneb oneb"
        "twob twob twob sixb sixb"
        "threeb fourb fiveb sevenb eightb"
        "nineb nineb nineb nineb nineb";}
    .oneb {
        grid-area: oneb;
        background-color: darkblue;
        color: white;
        text-align: center;
        padding-top: 4px;
        font-size: 20px;
        border: 1px black solid;
        font-weight: bold;}
    .twob {
        grid-area: twob;
        background-color: rgb(111, 111, 199);
        padding-left: 10px;
        border: 1px black solid;
        padding-top: 3px;
        font-weight: bold;}
    .threeb {
        grid-area: threeb;
        background-color: rgb(169, 188, 240);
        padding-left: 10px;
        padding-top: 3px;
        border: 1px black solid;
        font-size: 12px;}
    .fourb {
        grid-area: fourb;
        background-color: rgb(169, 188, 240);
        padding-left: 10px;
        padding-top: 3px;
        border: 1px black solid;
        font-size: 12px;}
    .fiveb {
        grid-area: fiveb;
        background-color: rgb(169, 188, 240);
        padding-left: 10px;
        padding-top: 3px;
        border: 1px black solid;
        font-size: 12px;}
    .sixb {
        grid-area: sixb;
        background-color: rgb(111, 111, 199);
        padding-left: 10px;
        border: 1px black solid;
        padding-top: 3px;
        font-weight: bold;}
    .sevenb {
        grid-area: sevenb;
        background-color: rgb(169, 188, 240);
        padding-left: 10px;
        padding-top: 3px;
        border: 1px black solid;
        font-size: 12px;}
    .eightb {
        grid-area: eightb;
        background-color: rgb(169, 188, 240);
        padding-left: 10px;
        padding-top: 3px;
        border: 1px black solid;
        font-size: 12px;}
    .nineb {
        grid-area: nineb;
        background-color: rgb(51, 51, 150);
        border: 1px black solid;
        color: white;
        font-size:10px;
        padding-top: 3px ;
        text-align: center;}
    .bigletterb {
        grid-area: nineb;
        background-color: rgb(51, 51, 150);
        color: white;
        font-size: 30px;
        padding-top: 3px ;
        text-align: center;}