*{
    padding: 0;
    margin: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.game-container{
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);
    
}
.game-container-dk{
    background: radial-gradient(circle, rgba(161,0,33,1) 0%, rgba(1,16,91,1) 100%);
}
.game-container-box{
    display: block;
}
.form{
    display: block;
}
.game-title{
    color: #05E4FA;
    text-align: center;
}
.form-title{
    font-size: 15px;
    margin: 12px 0;
    color: #ccc;
}
.form-imputs-container input{
    display: block;
    width: 96%;
    height: 35px;
    margin-left: 1%;
    margin: 10px 0 10px 1%;
}
.input-text{
    border: none;
    border-bottom: 3px solid #002758;
    background: transparent;
    color: #0798F0;
}
.input-text::placeholder{
    padding-left: 15px;
    color: #E1E1E1;
}
.input-text:focus{
    outline: none;
    border-bottom: 3px solid#0798F0;
}

/*Modo claro y oscuro*/
.light-mode{
    width: 65px;
    height: 30px;
    background: #fc466b;
    border-radius: 25px;
    margin: 22px 5px;
    transition: 1s;
}
.mode-button-lg{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 34px;
    height: 34px;
    border-radius: 100%;
    background: #620062;
    transform: translate(0, -2px);
    color: #fff;
    transition: 1s;
}
.dark-mode{
    background: #620062;
}
.mode-button-dk{
    background: #fc466b;
    transform: translate(33px, -2px);
}

.button-Off{
    display: none;
}

.input-submit{
    background: #fc466b;
    border: none;
    font-size: 16px;
}
.input-submit:hover{
    background: #FF2BAE;
}
.input-submit:focus{
    outline: none;
}
.tablero-container{
    display: grid;
    grid-template-columns: repeat(3, 150px);
    grid-template-rows: repeat(3, 150px);
    grid-gap: 5px;
    margin: 20px 0;
}
.tablero-input{
    border: none;
    font-size: 85px;
    background: #fff;
    color: #0798F0;
}
.tablero-input-dk{
    border: none;
    font-size: 85px;
    background: #fff;
    background: #000;
    color: #fff;
}
.tablero-input-dk:hover{
    background: #343434;
}
.tablero-input-dk:focus{
    outline: none;
}
.tablero-input:hover{
    background: #D6D5D6;
}
.tablero-input:focus{
    outline: none;
}
.input-reiniciar{
    background: #fc466b;
    width: 100%;
    height: 40px;
    border: none;
    font-size: 17px;
    margin-bottom: 18px;
}
.input-reiniciar:hover{
    background: #FF2BAE;
}
.input-reiniciar:focus{
    outline: none;
}
.ganadorJuego{
    background: #4B057C;
}
.ganadorJuego:hover{
    background: #4B057C;
}
.infoTurno{
    color: #0798F0;
    font-size: 25px;
}