@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Fira+Code:wght@400;500&display=swap');

:root{

--primary:#5865F2;
--secondary:#8b5cf6;

--bg:#0d1117;
--card:rgba(255,255,255,.04);

--border:
rgba(255,255,255,.08);

--text:#fff;

--sub:#9ca3af;

--blur:blur(15px);

}



*{

margin:0;
padding:0;
box-sizing:border-box;

font-family:
'Poppins',
sans-serif;

}



html{

scroll-behavior:smooth;

}



body {
  background:
    linear-gradient(
      rgba(0,0,0,.6),
      rgba(0,0,0,.6)
    ),
    url('./assets/background.gif');

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

center/cover fixed;

background-color:
var(--bg);

color:
var(--text);

overflow-x:hidden;

}



body::before{

content:"";

position:fixed;

inset:0;

background:

radial-gradient(

circle at top left,

#5865f222,

transparent 30%

),

radial-gradient(

circle at bottom right,

#8b5cf622,

transparent 30%

);

z-index:-1;

}



/* LOADING SCREEN */



#boot-screen{

position:fixed;

inset:0;

z-index:999999;

display:flex;

justify-content:center;
align-items:center;
flex-direction:column;

background:

linear-gradient(
135deg,
#0d1117,
#111827,
#1f2937
);

transition:1s;

}



.loader-box{

position:relative;

display:flex;

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

width:180px;
height:180px;

}



.loader-ring{

position:absolute;

width:180px;
height:180px;

border-radius:50%;

border:
4px solid transparent;

border-top:
4px solid var(--primary);

border-right:
4px solid #00ffff;

animation:
loaderSpin 1s linear infinite;

filter:
drop-shadow(
0 0 15px
var(--primary)
);

}



.loader-ring:nth-child(2){

width:140px;
height:140px;

border-top:
4px solid #ff6b81;

border-right:
4px solid var(--secondary);

animation:
loaderSpinReverse
1.5s linear infinite;

opacity:.8;

}



.loader-avatar{

width:90px;
height:90px;

border-radius:50%;

object-fit:cover;

z-index:5;

border:
3px solid rgba(
255,
255,
255,
.2
);

box-shadow:
0 0 30px
rgba(
88,
101,
242,
.4
);

animation:
pulse 2s infinite;

}



.loading-text{

margin-top:25px;

font-size:1rem;

letter-spacing:4px;

animation:
blink 1.5s infinite;

}



.loading-bar{

width:240px;

height:6px;

margin-top:20px;

border-radius:30px;

overflow:hidden;

background:
rgba(
255,
255,
255,
.05
);

}



.loading-progress{

height:100%;

width:0%;

background:

linear-gradient(
90deg,
var(--primary),
var(--secondary)
);

animation:
loadingProgress
2.5s linear forwards;

}



/* HEADER */



header{

position:sticky;

top:0;

z-index:999;

display:flex;

justify-content:
space-between;

align-items:center;

padding:15px 20px;

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

backdrop-filter:
blur(10px);

border-bottom:
1px solid var(--border);

}



.logo{

font-size:1.2rem;

font-weight:700;

display:flex;

align-items:center;

gap:10px;

}



.logo i{

color:
var(--primary);

}



.menu-btn{

background:none;

border:none;

color:white;

font-size:1.4rem;

cursor:pointer;

}



/* MENU */



#mobile-menu{

position:fixed;

top:65px;

right:-100%;

width:250px;

height:100vh;

padding:20px;

display:flex;

flex-direction:column;

gap:20px;

background:
rgba(
20,
20,
20,
.95
);

backdrop-filter:
blur(20px);

transition:.3s;

z-index:999;

}



#mobile-menu.active{

right:0;

}



#mobile-menu a{

text-decoration:none;

color:white;

padding-bottom:10px;

border-bottom:

1px solid
rgba(
255,
255,
255,
.05
);

}



/* CONTAINER */



.container{

max-width:1200px;

margin:auto;

padding:20px;

}



/* CARD */



.glass-card{

background:
var(--card);

border:
1px solid var(--border);

backdrop-filter:
var(--blur);

padding:20px;

border-radius:25px;

margin-bottom:20px;

box-shadow:

0 8px 32px

rgba(
0,
0,
0,
.3
);

transition:.3s;

}



.glass-card:hover{

transform:
translateY(-5px);

}



/* HERO */



.hero-title{

font-size:4rem;

font-weight:700;

background:

linear-gradient(

90deg,

white,

var(--primary)

);

-webkit-background-clip:text;

-webkit-text-fill-color:
transparent;

}



.typewriter{

height:30px;

font-size:1.1rem;

margin-top:10px;

color:#b794f4;

}



.stats{

display:flex;

gap:15px;

margin-top:25px;

flex-wrap:wrap;

}



.stats-item{

background:
rgba(
255,
255,
255,
.03
);

padding:15px;

border-radius:15px;

text-align:center;

flex:1;

min-width:120px;

}



.stats-item strong{

display:block;

font-size:1.4rem;

color:
var(--primary);

}



/* BUTTON */



.buttons{

display:flex;

gap:15px;

margin-top:25px;

}



.btn{

padding:12px 20px;

border:none;

border-radius:15px;

cursor:pointer;

text-decoration:none;

font-weight:600;

}



.btn-primary{

background:

linear-gradient(
90deg,
var(--primary),
var(--secondary)
);

color:white;

}



.btn-icon{

background:
rgba(
255,
255,
255,
.05
);

color:white;

}



/* SKILL */



.skill-bar{

margin-bottom:20px;

}



.skill-info{

display:flex;

justify-content:
space-between;

margin-bottom:5px;

color:var(--sub);

}



.progress-bar{

height:8px;

background:#222;

border-radius:20px;

overflow:hidden;

}



.progress{

height:100%;

background:

linear-gradient(

90deg,

var(--primary),

var(--secondary)

);

}



/* TOOL GRID */



.grid-tools{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:15px;

}



.tool-item{

padding:15px;

text-align:center;

border-radius:15px;

background:
rgba(
255,
255,
255,
.03
);

}



.tool-item i{

font-size:2rem;

margin-bottom:10px;

}



/* SOCIAL */



.social-link{

display:flex;

justify-content:
space-between;

align-items:center;

gap:20px;

}



.icon-box{

font-size:2rem;

}



/* BADGE */



#discord-badges img{

transition:.3s;

cursor:pointer;

}



#discord-badges img:hover{

transform:
scale(1.2)
rotate(
10deg
);

}



/* ANIMATION */



@keyframes loaderSpin{

100%{

transform:
rotate(
360deg
)

}

}



@keyframes loaderSpinReverse{

100%{

transform:
rotate(
-360deg
)

}

}



@keyframes pulse{

50%{

transform:
scale(
1.07
)

}

}



@keyframes blink{

50%{

opacity:.5

}

}



@keyframes loadingProgress{

100%{

width:100%

}

}



@media(max-width:768px){

.hero-title{

font-size:3rem;

}

.grid-tools{

grid-template-columns:
repeat(2,1fr);

}

}