* {
   box-sizing: border-box;
}

/* CSS for Heading  */
.top-margin {
   padding-top: 80px;
}

.my-heading-game {
   padding: 5px;
   text-align: center;
   font-weight: bolder;
   font-size: 3em;
}

.my-game-desc {
   font-size: 18px;
   padding: 10px;
   text-align: justify;
}

/* For TicTacToe */
.my-game-board {
   width: 300px;
   height: 300px;
   margin: 20px auto;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
}

.box {
   width: 100px;
   height: 100px;
   color: rgb(77, 5, 49);
   background-color: transparent;
   border: 2px solid rgb(255, 72, 0);
   font-size: 4em;
   font-weight: bolder;
   text-align: center;
   vertical-align: center;
}

#playText {
   color: rgb(77, 5, 49);
   font-size: 32px;
   justify-content: center;
   text-align: center;
}

.align-botton {
   text-align: center;
   padding: 10px;
}

.my-reset-btn:hover {
   background-color: blue;
   transform: translateY(-1px) translateX(1px);
}

#result {
   color: rgb(77, 5, 49);
   font-size: 24px;
   justify-content: center;
   text-align: center;
   margin-bottom: 40px;
}