@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Press Start 2P', cursive;
}

body {
    background: #0f0e0f;
    color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

.enlacePerfil {
	text-decoration:none;
}

.enlaceJuego{
  color: white;
  text-shadow: 0 0 15px #00ffcc;
}

.enlaceJuego:hover{
  color: white;
}

.enlaceJuego:active{
  color: white;
  text-shadow: 0 0 5px #add0ff, 0 0 30px #add0ff;
}

.header {
    width: 100%;
    text-align: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.85);
}

.login-container {
    background: rgba(0, 0, 0, 0.8);
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 0 15px #00ffcc, 0 0 30px #00ffcc;
    text-align: center;
    width: 350px;
    position: relative;
}

.form-container {
    background: rgba(0, 0, 0, 0.8);
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 0 15px #00ffcc, 0 0 30px #00ffcc;
    text-align: center;
    width: 400px;
    position: relative;
}


.input-group {
    margin: 15px 0;
    text-align: left;
}

label {
    display: block;
    font-size: 16px;
    margin-bottom: 5px;
    color: #00ffcc;
}

strong {
    font-size: 15px;
    margin-bottom: 5px;
    color: #00ffcc;
}

input {
    width: 100%;
    padding: 12px;
    border: 2px solid #00ffcc;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border-radius: 5px;
    outline: none;
    font-size: 14px;
    text-align: center;
	margin-bottom: 10px;
}

input:focus {
    border-color: #ff00ff;
    box-shadow: 0 0 10px #ff00ff;
}

.buttonDefault {
    width: 100%;
    padding: 12px;
    background: linear-gradient(45deg, #00ffcc, #ff00ff);
    border: none;
    border-radius: 5px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
}

.buttonDefault:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px #ff00ff;
}


.welcome-message {
    font-size: 10px; /* Tamaño más compacto */
    color: #ffcc00;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 8px;
    word-wrap: break-word; /* Rompe el texto largo */
    overflow: hidden;
    text-overflow: ellipsis; /* Agrega "..." si el texto es muy largo */
    max-width: 100%; /* Se ajusta al ancho del div */
}

.selector-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

.selector-buttons a {
    display: block;
    padding: 15px;
    background: linear-gradient(45deg, #00ffcc, #ff00ff);
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-size: 14px;
    text-transform: uppercase;
    transition: all 0.3s;
    box-shadow: 0 0 10px #00ffcc;
}

.selector-buttons a:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px #ff00ff;
}


/* Estilos de la tabla */
table {
    width: 90%;
    max-width: 900px;
    border-collapse: collapse;
    margin-top: 20px;
    background: rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 15px #00ffcc, 0 0 20px #ff00ff;
    border-radius: 10px;
    overflow: hidden;
	align:center;
}

thead {
    background: linear-gradient(45deg, #00ffcc, #ff00ff);
}

th, td {
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

th {
    color: #000;
    font-weight: bold;
    text-transform: uppercase;
}

tr {
    transition: background 0.3s;
}

tr:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Botón de eliminar */

.boton-eliminar {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background: #cc1e1e;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: 0.3s;
	height: 100%;
	
}

.boton-eliminar:hover {
    background: #e91111;
	transform: scale(1.05);
}


/* Botón de modificar */
.modificar {
    display: inline-block;
    padding: 8px 12px;
    background: #03dfb3;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 12px;
    text-transform: uppercase;
    transition: all 0.3s;	
}

.modificar:hover {
    background: #02c19b;
    transform: scale(1.1);
}

/*
Check box
*/
.checkbox-wrapper-10 .tgl {
  display: none;
}

.checkbox-wrapper-10 .tgl,
  .checkbox-wrapper-10 .tgl:after,
  .checkbox-wrapper-10 .tgl:before,
  .checkbox-wrapper-10 .tgl *,
  .checkbox-wrapper-10 .tgl *:after,
  .checkbox-wrapper-10 .tgl *:before,
  .checkbox-wrapper-10 .tgl + .tgl-btn {
  box-sizing: border-box;
}

.checkbox-wrapper-10 .tgl::-moz-selection,
  .checkbox-wrapper-10 .tgl:after::-moz-selection,
  .checkbox-wrapper-10 .tgl:before::-moz-selection,
  .checkbox-wrapper-10 .tgl *::-moz-selection,
  .checkbox-wrapper-10 .tgl *:after::-moz-selection,
  .checkbox-wrapper-10 .tgl *:before::-moz-selection,
  .checkbox-wrapper-10 .tgl + .tgl-btn::-moz-selection,
  .checkbox-wrapper-10 .tgl::selection,
  .checkbox-wrapper-10 .tgl:after::selection,
  .checkbox-wrapper-10 .tgl:before::selection,
  .checkbox-wrapper-10 .tgl *::selection,
  .checkbox-wrapper-10 .tgl *:after::selection,
  .checkbox-wrapper-10 .tgl *:before::selection,
  .checkbox-wrapper-10 .tgl + .tgl-btn::selection {
  background: none;
}

.checkbox-wrapper-10 .tgl + .tgl-btn {
  outline: 0;
  display: block;
  width: 4em;
  height: 2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkbox-wrapper-10 .tgl + .tgl-btn:after,
  .checkbox-wrapper-10 .tgl + .tgl-btn:before {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
}

.checkbox-wrapper-10 .tgl + .tgl-btn:after {
  left: 0;
}

.checkbox-wrapper-10 .tgl + .tgl-btn:before {
  display: none;
}

.checkbox-wrapper-10 .tgl:checked + .tgl-btn:after {
  left: 50%;
}

.checkbox-wrapper-10 .tgl-flip + .tgl-btn {
  padding: 2px;
  transition: all 0.2s ease;
  font-family: sans-serif;
  perspective: 100px;
}

.checkbox-wrapper-10 .tgl-flip + .tgl-btn:after,
  .checkbox-wrapper-10 .tgl-flip + .tgl-btn:before {
  display: inline-block;
  transition: all 0.4s ease;
  width: 100%;
  text-align: center;
  position: absolute;
  line-height: 2em;
  font-weight: bold;
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 4px;
}

.checkbox-wrapper-10 .tgl-flip + .tgl-btn:after {
  content: attr(data-tg-on);
  background: #02C66F;
  transform: rotateY(-180deg);
}

.checkbox-wrapper-10 .tgl-flip + .tgl-btn:before {
  background: #FF3A19;
  content: attr(data-tg-off);
}

.checkbox-wrapper-10 .tgl-flip + .tgl-btn:active:before {
  transform: rotateY(-20deg);
}

.checkbox-wrapper-10 .tgl-flip:checked + .tgl-btn:before {
  transform: rotateY(180deg);
}

.checkbox-wrapper-10 .tgl-flip:checked + .tgl-btn:after {
  transform: rotateY(0);
  left: 0;
  background: #7FC6A6;
}

.checkbox-wrapper-10 .tgl-flip:checked + .tgl-btn:active:after {
  transform: rotateY(20deg);
}

.rating {
  display: inline-block;
}

.rating input {
  display: none;
}

.rating label {
  float: right;
  cursor: pointer;
  color: #ccc;
  transition: color 0.3s;
}

.rating label:before {
  content: '\2605';
  font-size: 30px;
}

.rating input:checked ~ label,
.rating label:hover,
.rating label:hover ~ label {
  color: #6f00ff;
  transition: color 0.3s;
}

.checkbox {
  display: inline-block;
  position: relative;
  cursor: pointer;
}

.checkbox__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.checkbox__label {
  display: inline-block;
  padding-left: 30px;
  margin-bottom: 10px;
  position: relative;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.checkbox__custom {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background: linear-gradient(#212121, #212121) padding-box,
              linear-gradient(145deg,#e81cff, #40c9ff) border-box;
  border: 2px solid transparent;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.checkbox__input:checked + .checkbox__label .checkbox__custom {
  background-image: linear-gradient(145deg,#e81cff, #40c9ff);
  transform: rotate(45deg) scale(0.8);
}

.checkbox__label:hover .checkbox__custom {
  transform: scale(1.2);
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(45deg, #1a1a2e, #16213e);
    padding: 10px 30px;
    border-bottom: 4px solid #ff007f;
    box-shadow: 0 4px 8px rgba(255, 0, 127, 0.2);
}

.logo {
    font-size: 24px;
    font-weight: bold;
    color: #ff007f;
    text-shadow: 0 0 10px #ff007f;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    color: white;
    padding: 10px 20px;
    position: relative;
	z-index: 1000;
}

/* Estilo del menú */
.nav-menu {
    display: flex;
    gap: 15px;
}

/* Estilo de los enlaces */
.nav-menu ul {
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0;
}

.nav-menu ul li {
    margin: 0;
}

.nav-menu ul li a {
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 5px;
    transition: background 0.3s;
}

.nav-menu ul li a:hover {
    background: #283056;
}

.botonLogOut {
    width: 100%;
    padding: 12px;
    background: linear-gradient(45deg, #ec0868, #ff5714);
    border: none;
    border-radius: 5px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
}

.botonLogOut:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px #e91111;
}

/* Botón del menú hamburguesa */
.menu-toggle {
    display: none;
    font-size: 24px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
}

.acciones {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Divide la fila en 2 columnas iguales */
    gap: 5px; /* Espaciado entre los botones */
    width: 100%; /* Asegura que la celda los contenga completamente */
}

.acciones a {
    text-align: center; /* Centra el texto en los botones */
    padding: 10px; /* Espaciado interno */
    box-sizing: border-box; /* Evita que el padding altere el tamaño */
    font-size: 14px; /* Ajuste del tamaño del texto */
    width: 100%; /* Asegura que los botones se expandan */
}


/*  Estilos responsive  */
@media (max-width: 750px) {
	
	
    /* Ocultar menú por defecto */
    .nav-menu {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: #555;
        position: absolute;
        top: 60px;
        left: 0;
		z-index: 1000; /* Lo pone por encima del contenido */
    }
	
    .nav-menu ul {
        flex-direction: column;
        width: 100%;
    }

    .nav-menu ul li {
        text-align: center;
        width: 100%;
    }

    .nav-menu ul li a {
        display: block;
        width: 100%;
        padding: 15px;
    }

    /* Mostrar botón hamburguesa */
    .menu-toggle {
        display: block;
    }

    /* Mostrar menú cuando está activo */
    .nav-menu.active {
        display: flex;
    }
	
	.botonMovil {
    width: 100%;
    padding: 12px;
    background: #171f39;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
	}

	.botonMovil:hover {
	transform: scale(1.05);
    box-shadow: 0 0 15px #ff9300;
	}
	
	
	table, thead, tbody, th, td, tr {
        display: block;
		overflow-x: auto;
		overflow-wrap: break-word;
		width: 100%;
		width: 100%;
		table-layout: fixed;
		word-wrap: break-word; /* Permite que las palabras largas se dividan */
        white-space: normal; /* Permite que el texto se divida en varias líneas */
        overflow-wrap: break-word; /* Para compatibilidad extra */
    }

    thead {
        display: none; /* Oculta la cabecera */
    }

    tr {
        margin-bottom: 10px;
        border: 1px solid #ccc;
        padding: 10px;
    }

    td {
        text-align: right;
        padding-left: 10%;
        position: relative;
    }

    td::before {
        content: attr(data-label);
		color:00ffcc;
        position: absolute;
        left: 5px;
        text-align: left;
        font-weight: bold;
    }
	
	
}

/* 1. Regla específica para el SELECT de Plataforma */
.form-container form #plataforma {
    /* Dar un ancho para que margin: auto funcione */
    width: 90%; 
    max-width: 300px;
    
    /* Centrado del ELEMENTO (caja) */
    display: block; 
    margin-left: auto;
    margin-right: auto;
    
    /* CLAVE: Centrado del TEXTO DENTRO DE LA CAJA VISIBLE */
    text-align: center; 
    
    /* Importante para Edge y Firefox: Centrar las opciones internas */
    /* Aunque el soporte es limitado, se suele aplicar a las opciones. */
    text-align-last: center; 
}

/* 2. Asegúrate de que las etiquetas sigan centradas (si el estilo anterior las rompió) */
.form-container form label {
    text-align: center;
    display: block;
}

/* INFO USUARIO Y BOTONES */
.user-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.user-info span {
	color: #ff007f;
    font-size: 16px;
    font-weight: bold;
}


.login-btn {
    background-color: #03e8e2;
    color: white;
    padding: 8px 15px;
    text-decoration: none;
    border-radius: 5px;
    transition: 0.3s;
}


.imagen-juego {
    width: 100%;
    max-width: 400px;
    border-radius: 10px;
    margin-top: 15px;
}

.boton-volver {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background: #f300ff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: 0.3s;
}

.boton-volver:hover {
    background: #ff00ff;
	transform: scale(1.05);
}

.estrella {
    font-size: 24px;
    color: #ffcc00;
}

.estrella.vacia {
    color: #555; /* Color gris para estrellas vacías */
}



/*Estilos para stats.php*/
.chart-container {
    /* ... (resto de estilos de background y sombra) ... */
    
    display: flex;
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 20px; 
    
    /* Le damos espacio en la página */
    width: 95%; 
    max-width: 1400px; 
    margin: 20px auto; 
    position: relative;
    box-sizing: border-box; 
}

/* 2. CHART CARD: Contenedor individual para cada gráfica */
.chart-card {
    /* Anchura base: Intentamos 3 o 4 por fila, permitiendo encoger/crecer */
    flex: 1 1 350px; /* Base de 350px, Intenta poner 3 o 4 por fila */
    min-width: 300px; 

    /* Altura fija para dar espacio al canvas */
    height: 480px; 
    
    /* HACEMOS LA TARJETA FLEXIBLE PARA QUE EL CANVAS CREZCA */
    display: flex;
    flex-direction: column; 
    
    /* Estilos internos: */
    padding: 15px; 
    box-sizing: border-box; 
    align-items: center;
    text-align: center;
    
    /* Si tenías 'overflow: hidden' quítalo para ver si algo se desborda */
}

/* 3. CHART WRAPPER: Contenedor que aísla el canvas para que ocupe el espacio sobrante */
.chart-canvas-wrapper {
    flex-grow: 1; /* CLAVE: Ocupa todo el espacio vertical disponible en el chart-card */
    width: 100%;
    
    /* Evita el colapso por flexbox */
    min-height: 0; 
    
    /* Asegura que el canvas no se pegue a los títulos */
    padding-top: 10px; 
}

/* 4. CANVAS: Rellena el wrapper (Regla final para todos los canvas) */
.chart-canvas-wrapper canvas {
    width: 100% !important; 
    height: 100% !important;
}

.top-plataformas {
    width: 100%;
    font-size: 1em;
}

.top-plataformas ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

.top-plataformas li {
    font-weight: bold;
    padding: 5px;
    margin: 5px auto;
    display: block;
    border-radius: 5px;
    max-width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

h3{
	color: #00ffcc;
}


h1, h2 {
	color: #00ffcc;
    text-shadow: 0 0 8px #FF00FF;
    margin-bottom: 20px;
	margin-top: 5px;
}

.ranking {
	width:12%; 
	height:auto;
}

.imagen-perfil {
    width: 150px;
	height: auto;
    border-radius: 20px;
    margin-top: 1px;
	margin-bottom: 1px;
}
/* Estilos ficha plataformas*/
.plataformas {
    margin: 10px 0;
}

.plataforma {
    padding: 5px 10px;
    margin: 4px;
    border: 1px solid #777;
    display: inline-block;
    cursor: default;
    background-color: #333; /* Fondo base para las que NO tienes */
    color: #fff;
    border-radius: 5px;
}

.plataforma.primera-plataforma {
    text-decoration: underline;
    /* Opcional: Puedes hacer el subrayado más grueso o cambiar el color si lo deseas */
    text-decoration-thickness: 2px; 
}
.plataforma.primera-anadida {
    text-decoration: underline;
    /* Puedes ajustar el color si el color de la plataforma no resalta el subrayado */
    /* text-decoration-color: yellow; */ 
    text-decoration-thickness: 2px; 
}
/* Clases para los formatos que TÚ tienes */

.plataforma.formato-Digital {
    background-color: #8DBAB8; /* Azul vibrante */
    border-color: #007bff;
    font-weight: bold;
}

.plataforma.formato-Fisico {
    background-color: #C55CFF; /* Verde para físico */
    border-color: #28a745;
    font-weight: bold;
}

/* Añade tantos formatos como necesites */
.plataforma.formato-CIAB {
    background-color: #FFA342; /* Amarillo para web/navegador */
    border-color: #ffc107;
    font-weight: bold;
    color: #000;
}



.brillo-texto {
    font-size: 16px;
    font-weight: bold;
	margin-bottom:10px;
    color: linear-gradient(45deg, #00ffcc, #ff00ff);
    text-align: center;
    position: relative;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.8),
                 0 0 10px rgba(255, 255, 255, 0.6),
                 0 0 20px rgba(255, 255, 255, 0.4);

    /* Efecto de brillo animado */
    animation: brillo 1.5s infinite alternate;
}

/* Animación de brillo */
@keyframes brillo {
    0% {
        text-shadow: 0 0 5px rgba(0, 255, 255, 0.8),
                     0 0 10px rgba(0, 255, 255, 0.6),
                     0 0 20px rgba(0, 255, 255, 0.4);
    }
    100% {
        text-shadow: 0 0 10px rgba(15, 14, 15, 1),
                     0 0 20px rgba(15, 14, 15, 0.8),
                     0 0 30px rgba(15, 14, 15, 0.6);
    }
}
/*ESTILOS PARA RESUMEN AÑO*/
.resumen-adquisicion-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centra los bloques de estado */
    gap: 20px; /* Espacio entre los bloques */
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

.estado-bloque {
    background-color: #0d0d1a; /* Un fondo oscuro para el bloque */
    border: 2px solid #00ffff; /* Borde neón */
    padding: 15px;
    border-radius: 8px;
    width: 100%; /* Por defecto a 100% para móviles */
    max-width: 300px; /* Ancho máximo en escritorio */
    box-shadow: 0 0 10px #00ffff50;
}

.estado-bloque .estado-titulo {
    font-size: 1.2em;
    color: #ff00ff; /* Color para el título de estado */
    text-align: center;
    margin-top: 0;
    margin-bottom: 10px;
}

.estado-bloque ul {
    list-style: none; /* Quitar viñetas por defecto */
    padding: 0;
    margin: 0;
}

.estado-bloque li {
    color: #00ffff; /* Color para los nombres de los juegos */
    margin-bottom: 5px;
    font-size: 0.95em;
    padding-left: 10px;
    border-left: 2px solid #00ffff; /* Pequeña línea para diferenciar */
}

.copiable-box {
    cursor: copy; /* Cambia el cursor para indicar que es clickeable */
    /* Estilos estéticos para la caja del resumen, ajusta según tu diseño */
    border: 2px solid #00ffcc; 
    padding: 15px;
    border-radius: 10px;
    transition: transform 0.1s;
}

/* Efecto al pasar el ratón (o al tocar) */
.copiable-box:hover {
    box-shadow: 0 0 15px #00ffcc;
    border-color: #ff00ff;
}

/* Si la imagen que enviaste era el contenedor interno, puedes usar esta clase */
.estado-bloque {
    /* Mantén tus estilos para los bloques internos aquí */
    cursor: copy; /* Asegura que cada bloque de estado también muestre el cursor de copia */
}

/* estilos ficha carrusel */

.carousel {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
    overflow: hidden;
    border-radius: 10px;
}

.carousel-container {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel-item {
    min-width: 100%;
    max-height: 400px;
    object-fit: cover;
    display: block;
}

/* Estilos mejorados para los botones */
.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.1); /* Casi transparente */
    color: white;
    border: none;
    padding: 20px;
    cursor: pointer;
    font-size: 24px;
    border-radius: 50%;
    z-index: 10;
    width: 50px; /* Más anchos para que sean fáciles de pulsar */
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s, opacity 0.3s;
    opacity: 0; /* Ocultos por defecto */
}

/* Posicionamiento en los lados */
.prev { left: 10px; }
.next { right: 10px; }

/* Hacerlos visibles al pasar el mouse */
.carousel:hover .prev,
.carousel:hover .next {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.3); /* Más visibles al pasar el mouse */
}

.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.5);
}


/* Efecto de glitch */
/*para llamarlo= animation: glitch 0.7s infinite;*/
@keyframes glitch {
    0% { text-shadow: 2px 2px #ff00ff; }
    25% { text-shadow: -2px -2px #00ffcc; }
    50% { text-shadow: 2px -2px #ff00ff; }
    75% { text-shadow: -2px 2px #00ffcc; }
    100% { text-shadow: 2px 2px #ff00ff; }
}



.rotate {
    font-size: 24px;
    color: #00ffcc;
    display: inline-flex;
    animation: rotate 5s infinite;
	margin-bottom:20px;
}
@keyframes rotate {
    0%,75% {
        transform: rotateY(360deg);
    }
}


/* efecto error*/

.glitch {
    color: #65ffe0;
    font-size: 150%;
    position: relative;
	text-shadow: -1px 0 black;
    width: 100%;
    margin: 0 auto;
	margin-bottom: 25px;
 }

.glitch:after {
    content: attr(data-text);
    position: absolute;
    left: 10%;
    text-shadow: -1px 0 #ff00ff;
    top: 0;
    color: white;
    background: black;
    overflow: hidden;
    clip: rect(0, 100%, 0, 0);
    animation: noise-anim 4s infinite linear alternate-reverse;
}

.glitch:before {
    content: attr(data-text);
    position: absolute;
    left: 7%;
    text-shadow: 1px 0 #9700ff;
    top: 0;
    color: white;
    background: black;
    overflow: hidden;
    clip: rect(0, 100%, 0, 0);
    animation: noise-anim-2 7s infinite linear alternate-reverse;
}

 @keyframes noise-anim {
    0% {
      clip: rect(51px, 9999px, 28px, 0);
    }
    5% {
      clip: rect(70px, 9999px, 19px, 0);
    }
    10% {
      clip: rect(92px, 9999px, 13px, 0);
    }
    15% {
      clip: rect(85px, 9999px, 49px, 0);
    }
    20% {
      clip: rect(45px, 9999px, 56px, 0);
    }
    25% {
      clip: rect(26px, 9999px, 31px, 0);
    }
    30% {
      clip: rect(62px, 9999px, 73px, 0);
    }
    35% {
      clip: rect(34px, 9999px, 11px, 0);
    }
    40% {
      clip: rect(26px, 9999px, 61px, 0);
    }
    45% {
      clip: rect(34px, 9999px, 71px, 0);
    }
    50% {
      clip: rect(35px, 9999px, 69px, 0);
    }
    55% {
      clip: rect(92px, 9999px, 81px, 0);
    }
    60% {
      clip: rect(26px, 9999px, 85px, 0);
    }
    65% {
      clip: rect(2px, 9999px, 68px, 0);
    }
    70% {
      clip: rect(54px, 9999px, 79px, 0);
    }
    75% {
      clip: rect(35px, 9999px, 85px, 0);
    }
    80% {
      clip: rect(70px, 9999px, 60px, 0);
    }
    85% {
      clip: rect(32px, 9999px, 26px, 0);
    }
    90% {
      clip: rect(94px, 9999px, 53px, 0);
    }
    95% {
      clip: rect(99px, 9999px, 92px, 0);
    }
    100% {
      clip: rect(42px, 9999px, 27px, 0);
    }
  }

  @keyframes noise-anim-2 {
    0% {
      clip: rect(21px, 9999px, 49px, 0);
    }
    5% {
      clip: rect(27px, 9999px, 52px, 0);
    }
    10% {
      clip: rect(21px, 9999px, 70px, 0);
    }
    15% {
      clip: rect(65px, 9999px, 25px, 0);
    }
    20% {
      clip: rect(24px, 9999px, 10px, 0);
    }
    25% {
      clip: rect(61px, 9999px, 64px, 0);
    }
    30% {
      clip: rect(34px, 9999px, 47px, 0);
    }
    35% {
      clip: rect(46px, 9999px, 93px, 0);
    }
    40% {
      clip: rect(46px, 9999px, 9px, 0);
    }
    45% {
      clip: rect(67px, 9999px, 36px, 0);
    }
    50% {
      clip: rect(72px, 9999px, 20px, 0);
    }
    55% {
      clip: rect(79px, 9999px, 26px, 0);
    }
    60% {
      clip: rect(13px, 9999px, 87px, 0);
    }
    65% {
      clip: rect(10px, 9999px, 25px, 0);
    }
    70% {
      clip: rect(85px, 9999px, 11px, 0);
    }
    75% {
      clip: rect(94px, 9999px, 35px, 0);
    }
    80% {
      clip: rect(50px, 9999px, 86px, 0);
    }
    85% {
      clip: rect(74px, 9999px, 67px, 0);
    }
    90% {
      clip: rect(1px, 9999px, 40px, 0);
    }
    95% {
      clip: rect(3px, 9999px, 48px, 0);
    }
    100% {
      clip: rect(90px, 9999px, 23px, 0);
    }
  }