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

body{
    background:#000;
    color:white;
    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    overflow:hidden;

    font-family:Inter,sans-serif;
}

.stars{
    position:fixed;
    inset:0;

    background:
        radial-gradient(circle,#00eaff 1px,transparent 1px);

    background-size:80px 80px;

    opacity:.08;

    animation:drift 120s linear infinite;
}

@keyframes drift{
    from{
        transform:translateY(0);
    }

    to{
        transform:translateY(-500px);
    }
}

.container{

    text-align:center;

    width:min(900px,90%);

    padding:60px;

    position:relative;
}

.logo-circle{

    width:90px;
    height:90px;

    margin:auto;

    border:2px solid #00eaff;

    border-radius:50%;

    display:flex;

    align-items:center;
    justify-content:center;

    color:#00eaff;

    font-family:Orbitron;

    font-size:26px;

    box-shadow:
    0 0 25px #00eaff;

    margin-bottom:35px;
}

h1{

    font-family:Orbitron;

    font-size:clamp(2.8rem,7vw,5.8rem);

    letter-spacing:12px;

    color:#00dfff;

    text-shadow:
    0 0 12px #00dfff,
    0 0 45px #00dfff;

    animation:pulse 3s infinite;
}

@keyframes pulse{

50%{
opacity:.75;
}

}

h2{

margin-top:25px;

font-size:1.5rem;

font-weight:300;

color:#d8ffff;

}

.message{

margin-top:28px;

font-size:1.15rem;

line-height:1.9;

color:#d5d5d5;

}

.small{
opacity:.75;
}

.progress-wrapper{

width:100%;
height:12px;

margin-top:55px;

background:#091018;

border-radius:40px;

overflow:hidden;

border:1px solid #00cfff;

}

.progress{

height:100%;

width:65%;

background:
linear-gradient(
90deg,
#0088aa,
#00eaff
);

box-shadow:
0 0 20px #00eaff;

animation:loading 6s infinite ease-in-out;

}

@keyframes loading{

0%{
width:15%;
}

50%{
width:82%;
}

100%{
width:45%;
}

}

#statusText{

margin-top:20px;

color:#8af7ff;

font-size:1rem;

letter-spacing:2px;

}

.buttons{

margin-top:50px;

display:flex;

gap:18px;

justify-content:center;

flex-wrap:wrap;

}

.btn{

padding:15px 30px;

text-decoration:none;

border-radius:10px;

transition:.3s;

font-weight:600;

}

.primary{

background:#00cfff;

color:black;

}

.primary:hover{

transform:translateY(-4px);

box-shadow:
0 0 30px #00eaff;

}

.secondary{

border:1px solid #00cfff;

color:#00eaff;

}

.secondary:hover{

background:#041822;

}

.verse{

margin-top:70px;

opacity:.8;

font-style:italic;

}

.verse span{

display:block;

margin-top:10px;

color:#00dfff;

}

@media(max-width:700px){

.container{
padding:40px 20px;
}

h1{
letter-spacing:5px;
}

}