body{
    margin:0;
    padding: 0;
    /* background-color: aqua; */
}
#messageArea{ 
    display: flex;
    justify-content: center;
    align-items: center;
    /* width: 100%; */
    height: 100px;
    border-image: linear-gradient(45deg, red, blue) 1;
    border-width: 5px;
    border-style: solid; 
    background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
#resultArea{ 
    display: flex;
    justify-content: center;
    align-items: center;
    /* width: 100%; */
    height: 100px;
    border-image: linear-gradient(45deg, rgb(137, 210, 95), rgb(169, 169, 235)) 1;
    border-width: 2px;
    border-style: solid; 
    background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
#gamePlayArea > div{
    display: flex;
    padding: 10px;
    justify-content: center;
    font-size: 70px;
}
#gamePlayArea{
    margin: 100px auto;
    width:fit-content;
    border-radius: 80px;
    display: grid;
    justify-content: center;
    border: 10px solid rgb(51, 133, 133);
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    grid-template-areas: 
    "area1 area2 area3"
    "area4 area5 area6"
    "area7 area8 area9";
}
#area1{
    grid-area: area1;
    border-top-left-radius: 70px;
    border-bottom: 5px solid rgb(51, 133, 133);
    border-right: 5px solid rgb(51, 133, 133);
    /* background-color: brown; */
} 
#area2{
    grid-area: area2;
    border-bottom: 5px solid rgb(51, 133, 133);
    border-right: 5px solid rgb(51, 133, 133);
    /* background-color: rgb(218, 17, 17); */

}
#area3{
    grid-area: area3;
    border-top-right-radius: 70px;
    border-bottom: 5px solid rgb(51, 133, 133);
    /* border-right: 5px solid rgb(51, 133, 133); */
    /* background-color: rgb(54, 42, 165); */

}
#area4{
    grid-area: area4;
    border-bottom: 5px solid rgb(51, 133, 133);
    border-right: 5px solid rgb(51, 133, 133);
    /* background-color: rgb(81, 165, 42); */

}
#area5{
    grid-area: area5;
    border-bottom: 5px solid rgb(51, 133, 133);
    border-right: 5px solid rgb(51, 133, 133);
    /* background-color: rgb(214, 204, 67); */

}
#area6{
    grid-area: area6;
    border-bottom: 5px solid rgb(51, 133, 133);
    /* border-right: 5px solid rgb(51, 133, 133); */
    /* background-color: rgb(165, 42, 138); */

}
#area7{
    grid-area: area7;
    border-bottom-left-radius: 70px;
    /* border-bottom: 5px solid rgb(51, 133, 133); */
    border-right: 5px solid rgb(51, 133, 133);
    /* background-color: rgb(154, 214, 126); */

}
#area8{
    grid-area: area8;
    /* border-bottom: 5px solid rgb(51, 133, 133); */
    border-right: 5px solid rgb(51, 133, 133);
    /* background-color: rgba(81, 165, 42, 0.418); */

}
#area9{
    grid-area: area9;
    border-bottom-right-radius: 70px;
    /* background-color: rgb(42, 161, 165); */
}
#buttonArea{
    display: flex;
    justify-content: center;
    margin: 10px;
    background-color: rgb(74, 89, 226);
    /* width: fit-content; */
    text-align: center;
}
#playButtonArea{
    display: flex;
    justify-content: center;
    border-radius: 50%;
    padding: 20px;
    width: 150px;
    height: 50px;
}
#resetButtonArea{
    display: flex;
    justify-content: center;
    border-radius: 50%;
    padding: 20px;
    width: 150px;
    height: 50px;
}
#playBtn{
    border-radius: 15%;
    background-color: rgb(56, 202, 141);
    width: 50%;
    border: 5px outset rgb(17, 151, 51);
}
#resetBtn{
    border-radius: 15%;
    background-color: rgb(234, 20, 20);
    border: 5px outset rgb(108, 209, 186);
    width: 50%;

}
.activeArea{
    pointer-events: none;
}
.deactivateArea{
    pointer-events: none;
}
.clearArea{
    background-color: none;
}