body {
    color: #fff;
    background: repeating-linear-gradient(
        0deg,
        #0E0D0E 25%,
        #0E0D0E 50%,
        #171819 50%,
        #171819 75%
        );
    background-size: 10px 10px;
    height: 100vh;
    overflow: hidden;
    font-family: sans-serif;
    justify-content: center;
    align-items: center;
}

.container {
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}

.glitch {
margin: 1rem;
font-size: 3rem;
text-transform: uppercase;
position: relative;
text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff,
0.025em 0.04em 0 #fffc00;
animation: glitch 725ms infinite;
display: block;
font-family: "Press Start 2P", system-ui;
    font-weight: 400;
    font-style: normal;
}

.glitch span {
position: absolute;
top: 0;
left: 0;
}

.glitch span:first-child {
animation: glitch 500ms infinite;
clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
transform: translate(-0.04em, -0.03em);
opacity: 0.75;
}

.glitch span:last-child {
animation: glitch 375ms infinite;
clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
transform: translate(0.04em, 0.03em);
opacity: 0.75;
}

@keyframes glitch {
0% {
text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff,
  0.025em 0.04em 0 #fffc00;
}
15% {
text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff,
  0.025em 0.04em 0 #fffc00;
}
16% {
text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.035em 0 #fc00ff,
  -0.05em -0.05em 0 #fffc00;
}
49% {
text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.035em 0 #fc00ff,
  -0.05em -0.05em 0 #fffc00;
}
50% {
text-shadow: 0.05em 0.035em 0 #00fffc, 0.03em 0 0 #fc00ff,
  0 -0.04em 0 #fffc00;
}
99% {
text-shadow: 0.05em 0.035em 0 #00fffc, 0.03em 0 0 #fc00ff,
  0 -0.04em 0 #fffc00;
}
100% {
text-shadow: -0.05em 0 0 #00fffc, -0.025em -0.04em 0 #fc00ff,
  -0.04em -0.025em 0 #fffc00;
}
}



/* Estilos CSS para el modal y el overlay */
.modal {
    display: none; /* Por defecto, ocultamos el modal */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4); /* Overlay oscuro */
}

.modal-content {
    background-color: #fefefe;
    color: #000;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    text-align: center;
}

.close {
    color: #000;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.validation {
    margin-top: 10px;
}

.validation.error {
    color: red;
}

.validation.success {
    color: green;
}

.hidden {
    display: none;
}