/* ============================= */
/* RESET */
/* ============================= */

*{
box-sizing:border-box;
margin:0;
padding:0;
}

/* ============================= */
/* FONDO GENERAL */
/* ============================= */

body{
background:#0a0a0f;
font-family:"Segoe UI", sans-serif;
color:#00ffff;
text-align:center;
padding:20px;
}

/* CONTENEDOR CENTRAL */

.container{
max-width:900px;
margin:auto;
}

/* ============================= */
/* TITULOS */
/* ============================= */

h1{
font-size:36px;
color:#00ffff;
text-shadow:
0 0 5px #00ffff,
0 0 10px #00ffff,
0 0 20px #00ffff,
0 0 40px #00ffff;
margin-bottom:30px;
}

h2,h3{
margin-top:20px;
margin-bottom:10px;

color:#ff00ff;

text-shadow:
0 0 5px #ff00ff,
0 0 10px #ff00ff,
0 0 20px #ff00ff;
}

/* ============================= */
/* FORMULARIOS */
/* ============================= */

input{
width:100%;
max-width:400px;

background:#111;
border:1px solid #00ffff;
color:#00ffff;

padding:10px;
margin:8px auto;

border-radius:6px;

outline:none;

box-shadow:0 0 5px #00ffff;
}

input:focus{

box-shadow:
0 0 10px #00ffff,
0 0 20px #00ffff;

}

/* ============================= */
/* BOTONES */
/* ============================= */

button{

background:#111;
border:1px solid #00ffff;
color:#00ffff;

padding:10px 16px;
margin:8px;

border-radius:8px;

cursor:pointer;

transition:0.3s;

box-shadow:
0 0 5px #00ffff,
0 0 10px #00ffff;

}

button:hover{

background:#00ffff;
color:#000;

box-shadow:
0 0 10px #00ffff,
0 0 20px #00ffff,
0 0 40px #00ffff;

transform:scale(1.05);

}

/* ============================= */
/* RESULTADOS */
/* ============================= */

ul{
list-style:none;
padding:0;
margin-top:20px;
}

li{

background:#111;
border:1px solid #ff00ff;

margin:12px auto;
padding:15px;

max-width:600px;

border-radius:10px;

box-shadow:
0 0 5px #ff00ff,
0 0 15px #ff00ff;

}

/* ============================= */
/* MENSAJES */
/* ============================= */

#mensaje{

margin-top:15px;
font-weight:bold;

color:#00ff9c;

text-shadow:
0 0 5px #00ff9c,
0 0 10px #00ff9c;

}

/* ============================= */
/* SECCIONES */
/* ============================= */

section{

background:#05050a;

padding:20px;
margin-bottom:20px;

border-radius:12px;

box-shadow:
0 0 10px #00ffff,
0 0 20px #ff00ff inset;

}

/* ============================= */
/* LINEA */
/* ============================= */

hr{

border:1px solid #00ffff;

box-shadow:
0 0 10px #00ffff;

margin:25px 0;

}

/* ============================= */
/* ANIMACION NEON */
/* ============================= */

@keyframes neonPulse{

0%{
text-shadow:
0 0 5px #00ffff,
0 0 10px #00ffff;
}

50%{
text-shadow:
0 0 10px #00ffff,
0 0 20px #00ffff,
0 0 40px #00ffff;
}

100%{
text-shadow:
0 0 5px #00ffff,
0 0 10px #00ffff;
}

}

h1{
animation:neonPulse 2s infinite;
}

/* ============================= */
/* RESPONSIVE */
/* ============================= */

/* TABLET */

@media (max-width:768px){

h1{
font-size:28px;
}

button{
width:90%;
max-width:300px;
}

}

/* CELULAR */

@media (max-width:480px){

body{
padding:10px;
}

h1{
font-size:24px;
}

input{
width:95%;
}

button{
width:95%;
}

li{
font-size:14px;
}

}
@keyframes parpadeo{

0%{opacity:1}
50%{opacity:0.4}
100%{opacity:1}

}