body
{
    background :rgb(114, 186, 169) ;
}

.headingBar
{
    display : flex ;
    justify-content : center ;
    align-items : center ;
    /* border : 5px dashed red ; */
    background : rgb(174, 36, 72) ;
    color : rgb(213, 231, 181) ;
}

.main
{
    display : flex ;
    justify-content : space-evenly ;
    align-items : top ;
}

.gameBox
{
    display : flex ;
    flex-direction : column ;
    justify-content : center ;
    align-items : center ;
}

.row
{
    display : flex ;
    justify-content : center ;
    align-items : center ;
    margin : 5px ;
}
.box
{
    height : 150px ;
    width : 150px ;
    background : rgb(174, 36, 72) ;
    margin : 5px ;
    display : flex ;
    justify-content : center ;
    align-items : center ;
    color : white ;
    font-weight : bold ;
    font-size : 30px ;
    border-radius : 15px ;
    transition : all 0.3s ease-in-out ;
}

.box:hover{
    height : 155px ;
    width : 155px ;
    background : rgb(110, 26, 55) ;
    transition : all 0.3s ease-in-out ;
}

.buttons
{
    display : flex ;
    justify-content : center ;
    align-items : center ;
    margin-top : 20px ;
    gap : 15px ;
}

.btn
{
    height : 35px ;
    width : 120px ;
    font-weight : bold ;
    font-size : 16px ;
    transition : all 0.3s ease-in-out ;
    border-radius : 10px ;
    display : flex ;
    justify-content : center ;
    align-items : center ;
}

.btn1
{
    background : rgb(174, 36, 72) ;
    color : rgb(213, 231, 181) ;
}

.btn1:hover
{
    height : 40px ;
    width : 125px ;
    background : rgb(110, 26, 55) ;
    transition : all 0.3s ease-in-out ;
}

.btn2
{
    background : rgb(213, 231, 181) ;
    color : rgb(174, 36, 72) ;
    width : 150px ;
}

.btn2:hover
{
    height : 40px ;
    width : 155px ;
    background : rgb(212, 205, 72) ;
    transition : all 0.3s ease-in-out ;
}

.btn3
{
    background : rgb(213, 231, 181) ;
    font-weight : 900 ;
    color : rgb(76, 11, 33) ;
}

.btn3:hover{
    background : rgb(183, 228, 105) ;
    color : black ;
}

.footer
{
    display : flex ;
    justify-content : center ;
    align-items : center ;
    background : rgb(110, 26, 55) ;
    height : 30px ;
    margin-top : 20px ;
    color : rgb(213, 231, 181) ;
    font-weight : bold ;
}

.rules
{
    display : flex ;
    justify-content : center ;
    align-items : left ;
    font-weight : bold ;
    flex-direction : column ;
    margin-left : 160px ;
    margin-top : 30px ;
    margin-bottom : 20px ;
    padding : 20px 20px 20px 50px ;
    font-size : 20px ;
    font-family: "Franklin Gothic Heavy" ;
    letter-spacing : 1px ;
    word-spacing : 7px ;
    color : white ;
    background :rgba(122, 17, 53, 0.934) ;
    width : 600px ;
    border-radius : 7px ;
}

li
{
    margin-top : 20px ;
}

.playerScore
{
    margin-top : 60px ;
}
.scoreHeading
{
    background :rgb(110, 26, 55) ;
    height : 60px ;
    width : 250px ;
    display : flex ;
    justify-content : center ;
    align-items : center ;
    font-size : 20px ;
    color : white ;
    font-weight : bold ;
}

.score
{
    background : rgb(213, 231, 181) ;
    height : 180px ;
    display : flex ;
    justify-content : center ;
    align-items : center ;
    font-size : 100px ;
    color : rgb(174, 36, 72) ;
    font-weight : bold ;
}

.marker
{
    background : rgb(213, 231, 181) ;
    height : 40px ;
    border-top : 2px solid black ;
    display : flex ;
    justify-content : center ;
    align-items : center ;
    font-weight : bold ;
    font-size : 30px ;
    color : rgb(110, 26, 55) ;
}