body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: rgb(52, 51, 51);
            background: radial-gradient(circle, rgb(66, 64, 64) 0%, rgb(30, 29, 29) 100%);
            margin: 0;
        }

        .container {
            text-align: center;
        }

        #board {
            padding: 10px;
            box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
            display: grid;
            grid-template-columns: repeat(3, 100px);
            margin-bottom: 20px;
            background-color: rgb(37, 37, 37);
        }

        .cell {

            font-family: play;
            color: rgb(149, 149, 149);
transform: scale(1);
transition: 0.9s ease;
            text-transform: capitalize;
            font-weight: 900;
            width: 100px;
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 5em;
            cursor: pointer;
        }

        #reset {
            padding: 10px 20px;
            font-size: 1em;
            transition: 1.5s ease;
        }
        #reset:hover{
            background-color: white;
            color: rgb(37, 37, 37);;
            transform: scale(1.1);
        }

        .x {

            font-family: play;
            color: rgb(191, 191, 191);
            text-transform: capitalize;
            font-weight: 900;
            width: 100px;
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 5em;
            cursor: pointer;
        }
        #cont{
            margin: 10px 0px;
            text-align: center;
            color: rgb(155, 155, 155);
background-color: red;
            padding: 10px;
            box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
            display: grid;
            /* grid-template-columns: repeat(3, 100px); */
            margin-bottom: 20px;
            background-color: rgb(37, 37, 37);
            /* background-color: rgb(0, 0, 0); */
            /* height: 300px; */
            /* width: 300px; */
            /* position: fixed;  */
            /* top: 15%; */
            /* display: none; */
            justify-content: center;
            flex-direction: row;
            opacity: 0.800;
            text-align: center;
            align-items: center;
            /* display: flex; */
            color: white;
            transition: 2.2s ease !important;
            font-size: 24px !important ;
        }
        .res{
            background-color: white !important;
            color: black !important;
            padding: 5px !important;
            font-size: 24px !important ;
        font-family: play !important;
            align-items: center;
            display: flex;
            /* transform: scale(1.1); */
            font-weight: bolder;
            justify-content: center;
            flex-direction: row;
        }
        
        #reset{
            background-color: rgb(36, 36, 36);
            color: white;
            padding: 10px 40px;
            border-radius: 20px;
        border: none;
        box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
        font-family: play;
        text-transform: uppercase;
        font-weight: bolder;
        letter-spacing: 1.8px;
        }
        .scale{
            /* border: none !important; */
            background-color: rgb(66, 64, 64);
            /* color: rgb(255, 255, 255) !important; */
            font-family: play;
            color: rgb(197, 197, 197);
            margin: 0px 1px;
/* transform: scale(1.1); */
transition: 0.9s ease;
animation: 0.9s fn0 linear infinite;
            text-transform: capitalize;
            font-weight: 900;
            width: 100px;
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 5em;
            cursor: pointer;
        }
        @keyframes fn0 {
            0%,100%{font-size: 5em}
        50%{font-size: 4em;}
        }
        #res{
            font-family: play;
text-align: center !important;
            text-align: center !important;
            color: lightgrey !important;
        }
        h3{
            color: white;
            text-align: center;
            position: fixed;
            top: 20px;
        }