@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&family=Nunito:ital,wght@1,200&family=Oxygen&display=swap');
            *{
                margin: 0;
                padding: 0;
            }
            body{
                background: rgb(2,0,36);
                background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(12,150,10,1) 0%, rgba(0,212,255,1) 84%);
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                transition: 0.6s;
                -webkit-transition: 0.6s;
                overflow: -moz-hidden-unscrollable;
            }

            .select{
                position:fixed;
                top:0;
                left:0;
                right:0;    
                bottom:0;
                z-index:99;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                background: rgb(10 61 43 / 52%);
                backdrop-filter: blur(10px);
            
            }
            .select h1{
                color: #fff;
                font-size: 35px;
                text-shadow: 3px 3px 1px #000401;
                opacity: 0.8;
                z-index: 100;

            }
            .btn1,.btn2{
                font-size: 22px;
                width: 117px;
                height: 52px;
                margin-top: 12px;
                color: #fff;
                font-weight: bold;
                margin-left: 10px;
                border-radius: 54px;
                background-color: rgb(0 153 255);
                border: 1.7px solid white;
                box-shadow: 1px 0px 13px -7px #000000;
            }
            .btn1:hover,.btn2:hover{
                transition: 140ms ease-in;
                font-size: 26px;
                border: none;
                box-shadow: 0 0 10px 4px #231914d6;
            
            }

            .start{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-radius: 32px;
            padding: 8px;
            background: #ffffff;
            height: 182px;
            width: 350px;
            box-shadow: 0 0 20px 0px #1d13133d;
            background: linear-gradient(321deg, rgba(2,0,36,1) 0%, rgb(28 199 25) 0%, rgb(30 153 224) 84%);

            }
                
            .head{
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;
            }
            .head h1{
                text-shadow: 1px 1px 10px #13510a;
                font-size: 55px;
                margin: 10px;
                font-family: 'Montserrat', sans-serif;
                font-family: 'Nunito', sans-serif;
                font-family: 'Oxygen', sans-serif;
            }


            .player{
                display: flex;
                background-color: rgb(12, 186, 255);
                width: 307px;
                height: 92px;
                border-radius: 22px;
                margin-top: 20px;
                justify-content: space-around;
                align-items: center;
                font-size: 30px;
                box-shadow: 0 0 14px -2px black;
            }
            .active{
                background-color: rgb(0 36 255);
                height: 73px;
                width: 141px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 20px;
                margin: -31px;
                padding: 0;
                color: white;
                box-shadow: 0 0 5px 0px black;

            }

            .game{
                width: 100vw;
                height: 100vh;
                display: grid;
                justify-content: center;
                align-content: center;
                justify-items: center;
                align-items: center;
                grid-template-columns: repeat(3, auto);
                font-size: 62px;
                margin-top: -118px;
            }
           
            .cell{
                width: 6.5rem;
                height: 6.5rem;
                border: 3px solid black;
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;
                cursor: pointer;
                font-family: 'Oxygen', sans-serif
            
            }

            .cell:first-child, .cell:nth-child(2),.cell:nth-child(3){
                border-top: none;
            }
            .cell:nth-child(7), .cell:nth-child(8),.cell:nth-child(9){
                border-bottom: none;
            }

            .cell:nth-child(3n+1){
                border-left: none;
            }
            .cell:nth-child(3n+3){
                border-right: none;
            }

            .result{
                position:fixed;
                top:0;
                left:0;
                right:0;
                bottom:0;
                z-index:99;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                background: rgb(118 42 2 / 55%);
                backdrop-filter: blur(10px);
            }
            .result h1{
                color:#fff;
                font-size:42px;
                text-shadow: -2px 5px 3px black;
                font-family: 'Oxygen', sans-serif;
            }
            .btn{
                border-radius: 20px;
                height: 51px;
                width: 121px;
                font-size: 20px;
                font-weight: 600;   
                border: none;
                margin-top: 15px;
                background-color: rgb(53, 148, 225);
            }
            .btn:hover{
                box-shadow: 0 0 13px 4px #231914d6;
                color: white;
                background:rgb(52, 8, 230);
            }

            .inactive{
                display: none;
            }

            .disable{
                pointer-events: none;
            }


            .end{
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: 12px;
            
            }
            .endlogo{
                width: 40px;
                height: 40px;
                margin: 3px;
                box-shadow: 0 0 6px 0px #ffffffad;
                border-radius: 50%;
            }
            .endlogo:hover{

                width: 43px;
                height: 43px;
                margin: 3.5px;
                transition: 140ms ease-in;
                box-shadow: 0 0 8px 0px #ffffff;
            }