/*Funetes personalizadas**/

@font-face {
    font-family: 'fuente1';
    src: url('../font/naruto.ttf');
}
@font-face {
    font-family: 'fuente2';
    src: url('../font/pixel.ttf');
}
@font-face {
    font-family: 'fuente3';
    src: url('../font/surfing.ttf');
}
@font-face {
    font-family: 'fuente4';
    src: url('../font/tech.ttf');
}

#registroX{

display: none;

}

.fuente1{

    font-family: 'fuente1';
}

.fuente2{

    font-family: 'fuente2';
}
.fuente3{

    font-family: 'fuente3';
}
.fuente4{

    font-family: 'fuente4';
}

p {
text-align: center;
color: #0aa512;
font-family: fantasy;
font-size: 50px;
}

.sombra{

box-shadow:  7px 8px 9px 10px rgba(0, 0, 0, 0.562);

}
.borde{

border-style: outset;
border-color: black;
border-width: 2px;


}
.sombra-fuente{

text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);

}

.animation{

    transition: transform 0.4s;
}

.animation:hover{

transform: rotate3d(0, 1, 0, 360deg) scale(2);
}

.botonGrande{

padding: 10px;

}

.botonRedondo{

    border-radius: 20px 30px 10px;
}

.base{

height: fit-content;



}

#container{

height: 120vh;

}

#boton2{


background-color: #f72020;
color: #fff;
border-radius: 60px;
transition: font-size 2s, transform 0.2s, background 2s;
padding: 10px;
}

#boton2:active{


font-size: 25px;
transform: rotate(360deg);

}
#boton2:hover{

background: linear-gradient(30deg, rgb(17, 0, 255),rgb(0, 217, 255));

}

.X{


font-size: 100px;
text-align: center;
}


.tablaX{

box-shadow: 3px 4px 6px red;
width: fit-content;
max-width: 500px;

}

td{

font-size: 20px;

}

.a100{

width: 150px;

}

.a220{

    width: 220px;
    
    }

.h80{

    height: 80px;
}    

#titulo {

font-size: 20px;
font-family: fantasy;
text-shadow:  blue;
text-align: center;

}


.fondoStyle{

background: linear-gradient(40deg, red, yellow, orange, green);


}

.fondoStyle2{

background: repeating-linear-gradient(30deg, #086d197c 100px,#fbff0085 50px,#00ff2256 150px,#0000002f 60px),
repeating-linear-gradient(-70deg, #7700ffb0 150px,#f70015e7 150px,#00f8d7ce 150px,#ff00f294 250px);

}
.fondoStyleII{

    background: repeating-linear-gradient(20deg, #086d197c 100px,#00d9ffbe 50px,#77777756 150px,#0000002f 60px),
    repeating-linear-gradient(-10deg, #02ad43b0 150px,#000000e7 150px,rgba(50, 248, 0, 0.603) 150px,#505e4b70 250px);
    
    }

.fondoStyle3{

background: repeating-radial-gradient(ellipse at 40% 50%,rgb(0, 0, 0), #81ff0caf 15px, #00e1ff 17px, #166d00fb 23px);

}

.fondoStyleN{


    box-shadow: 10px 14px 6px rgba(179, 179, 179, 0.336);
    border-radius: 25px;
    background: linear-gradient(-100deg,rgba(0, 0, 0, 0.788)000,#15ff0088);
    height: 35vh;

}

.fondo{


background-image: url("/crud/img/fondo5.jpg");
background-attachment: fixed;
background-size: cover;
height: 200vh;
}

.blanco{

    color: #FFF;
}


.negro{

    color: #000000;
}


.rojo{

    color: #ff0000;
}


.verde{

    color: #91ff00;
}
.amarillo{

    color: #fffb00;
}

.redondo{

border-radius: 30px;

}

/*
Boton con estilo
**/

.game{

background: #000000;
cursor: pointer;
border: none;
padding: 16px 32px;
color: #fff;
font-size: 20px;
transition: background 1s, color 0.5s;
}

.game:hover{

background: #FFF;
color: #000;
font-family: "fuente2";
}

.game::before{

content: "";
position: absolute;
/*top: 0;
left: 0;
*/
z-index: -1;
width: 10%;
height: 10%;
background: linear-gradient(60deg,#2500fa8a,#e0f804,#e60a0aa9);
background-size: 50%;
border-radius: 70px;
filter: blur(10px);
animation: efecto 5s linear infinite;
}

@keyframes efecto{

0% {

    background-position: 0 0;

}
50% {

    background-position: 400% 0;
}
100%{
    background-position: 0 0;

}
}