project.css

/*Create Grid !*/
.container{
    display: grid;
    grid-template-areas:
                "header header header"
                "section nav article"
                "aside instrument color"
                ". footer .";
    grid-template-columns: 1fr 1fr 1fr;
    border: 1px solid black;
}

header{
    grid-area: header;
    text-align: center;
}

section{
    grid-area: section;
    /*border: 1px solid black;*/
    border-top: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    text-align: center;
    padding-bottom: 10px;
}

nav{
    grid-area: nav;
    border-top: 1px solid black;
    /*border : 1px solid black;*/
    text-align: center;
}

article{
    grid-area: article;
    /*border: 1px solid black;*/
    border-top: 1px solid black;
    border-left: 1px solid black;
    text-align: center;
}
aside{
    grid-area: aside;
    text-align: right;
    padding-right: 20px;
    padding-top: 20px;
}
#instrument{
    grid-area: instrument;
    border: 1px solid black;
    text-align: center;
}
#color{
    grid-area: color;
    /*border: 1px solid black;*/
    border-bottom: 1px solid black;
    border-top: 1px solid black;
    text-align: center;
}

footer{
    grid-area: footer;
    text-align: center;
}
/*sets background color*/
.bgCol1{
    background: red ;
}
.bgCol2{
    background: blue;
}
.bgCol3{
    background: yellow;
}

.winning{
    text-align: center;
    color: white;
}
/*player 1 score display*/
.display{
    text-align: center;
    font-size:800%;
}
/*player2 score display*/
.display2{
    text-align: center;
    font-size: 800%;
}

.p1Btn{

}