*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
color:white;
background:#0f2027;
overflow:hidden;
}

/* PARTICULAS */

#particles{
position:fixed;
width:100%;
height:100%;
background:linear-gradient(120deg,#0f2027,#203a43,#2c5364);
z-index:-1;
}

/* CONTENEDOR */

.container{
max-width:700px;
padding:40px;
background:rgba(0,0,0,0.4);
border-radius:15px;
backdrop-filter:blur(10px);
box-shadow:0 15px 40px rgba(0,0,0,0.4);
}

/* TITULO */

h1{
font-size:2.8rem;
margin-bottom:10px;
}

p{
opacity:0.85;
margin-bottom:30px;
}

/* ANIMACION */

.build svg{
width:90px;
animation:rotate 6s linear infinite;
}

@keyframes rotate{
from{transform:rotate(0deg)}
to{transform:rotate(360deg)}
}

/* BARRA PROGRESO */

.progress-container{
background:rgba(255,255,255,0.15);
border-radius:20px;
overflow:hidden;
margin-bottom:30px;
}

.progress-bar{
height:15px;
width:65%;
background:linear-gradient(90deg,#1c92d2,#00c6ff);
animation:progress 3s ease-in-out infinite alternate;
}

@keyframes progress{
from{width:55%}
to{width:75%}
}

/* REDES */

.social{
margin-top:25px;
}

.social a{
margin:0 10px;
font-size:22px;
color:white;
text-decoration:none;
transition:0.3s;
}

.social a:hover{
color:#00c6ff;
transform:scale(1.2);
}

footer{
margin-top:20px;
font-size:0.85rem;
opacity:0.6;
}