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


html{
    scroll-behavior:smooth;
}


body{

    background:
    linear-gradient(
        rgba(0,0,0,0.82),
        rgba(0,0,0,0.95)
    ),
    url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQOKj532LZlmxwd26H__oBbNmg_I7RhHKcmQ-guHO2xBmM3yi_xAhygWv_y&s=10");

    background-size:cover;
    background-position:center;
    background-attachment:fixed;

    color:white;

}



/* =================
LOADING SCREEN
================= */


#loading{

position:fixed;

width:100%;
height:100%;

background:#030303;

display:flex;

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

z-index:9999;


animation:loadingOut 4s forwards;


}



.loader{

text-align:center;

}



.loader img{

width:190px;
height:190px;

object-fit:contain;

filter:
drop-shadow(0 0 30px #008cff);


animation:logoPulse 2s infinite;

}



.loader h1{

margin-top:20px;

font-size:45px;

letter-spacing:8px;

color:#008cff;

text-shadow:
0 0 20px #008cff;


}



.loader p{

font-size:18px;

letter-spacing:5px;

}



.loader span{

display:block;

margin-top:20px;

color:#aaa;

}



.loadbar{

width:300px;

height:6px;

background:#222;

margin:30px auto;

border-radius:20px;

overflow:hidden;

}



.loadbar div{

height:100%;

width:0%;

background:#008cff;

animation:load 3s forwards;


}




@keyframes load{

to{
width:100%;
}

}



@keyframes logoPulse{

50%{
transform:scale(1.1);
}

}



@keyframes loadingOut{

0%,85%{

opacity:1;

}

100%{

opacity:0;
visibility:hidden;

}

}







/* =================
HEADER
================= */


header{

text-align:center;

padding:70px 20px;

background:
rgba(0,0,0,.65);

border-bottom:

2px solid #008cff;


}



.badge img{

width:150px;

filter:
drop-shadow(0 0 20px #008cff);


}



header h1{

font-size:60px;

letter-spacing:10px;

color:#008cff;


text-shadow:

0 0 25px #008cff;


}



header h2{

font-size:30px;

margin:15px;


}



header p{

font-size:20px;

color:#aaa;

}





nav{

margin-top:40px;

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:15px;


}



nav a{

text-decoration:none;

color:white;

padding:15px 25px;

border:1px solid #008cff;

border-radius:15px;

transition:.3s;

background:
rgba(0,0,0,.5);


}



nav a:hover{

background:#008cff;

color:black;

box-shadow:
0 0 25px #008cff;


}







/* =================
SECTIONS
================= */


section{

padding:70px 10%;

}



section h2{

font-size:35px;

color:#008cff;

margin-bottom:30px;

text-shadow:

0 0 15px #008cff;


}




.card{

background:

rgba(0,0,0,.75);


border:

1px solid #008cff;


border-radius:25px;

padding:35px;

line-height:1.8;


box-shadow:

0 0 25px rgba(0,140,255,.2);


transition:.4s;


}



.card:hover{

transform:translateY(-8px);

box-shadow:

0 0 40px rgba(0,140,255,.5);


}





.profile h3{

font-size:35px;

color:#008cff;


}





li{

margin:20px;

}








/* =================
TIMELINE
================= */


.timeline{

display:flex;

flex-direction:column;

gap:20px;

}



.timeline div{

background:

rgba(0,0,0,.7);


border-left:

5px solid #008cff;


padding:25px;

border-radius:15px;


font-size:20px;


}







/* =================
RÄNGE
================= */


.ranks{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(250px,1fr));


gap:20px;


}



.ranks div{

background:

rgba(0,0,0,.8);


border:

1px solid #008cff;


padding:25px;

border-radius:20px;


text-align:center;

font-size:20px;


transition:.3s;


}



.ranks div:hover{

transform:scale(1.05);

background:#008cff;

color:black;

box-shadow:

0 0 30px #008cff;


}



small{

color:#aaa;

}







/* =================
FOOTER
================= */


footer{

padding:70px 15%;

text-align:center;

background:

rgba(0,0,0,.8);


border-top:

2px solid #008cff;


}



footer h2{

color:#008cff;

font-size:35px;


}



footer b{

font-size:25px;

color:#008cff;


}
/* =====================
BLUE SMOKE EFFECT
===================== */


.smoke{

position:fixed;

width:500px;
height:500px;

background:
radial-gradient(
circle,
rgba(0,140,255,0.25),
transparent 70%
);


filter:blur(40px);

border-radius:50%;

top:20%;
left:-10%;

z-index:-1;

animation:smokeMove 12s infinite alternate;

}



.smoke2{

width:400px;
height:400px;

top:60%;
left:70%;

animation-duration:15s;

}



.smoke3{

width:600px;
height:600px;

top:40%;
left:40%;

animation-duration:20s;

}




@keyframes smokeMove{


0%{

transform:
translate(0,0)
scale(1);

opacity:.4;

}



50%{

transform:
translate(100px,-80px)
scale(1.3);

opacity:.7;

}



100%{

transform:
translate(-50px,100px)
scale(1);

opacity:.4;

}


}