body{

margin:0;
font-family:'Cinzel', serif;
color:white;

background-image:linear-gradient(rgba(0,0,0,0.85),rgba(0,0,0,0.95)), url("img/bg.jpg");
background-size:cover;
background-attachment:fixed;
background-position:center;

cursor: url("img/cursor.png") 16 16, auto;

}

header{

text-align:center;
background:rgba(10,10,20,0.9);
padding:30px;

}

.game-menu{

display:flex;
justify-content:center;
gap:25px;
padding:15px;

border-top:2px solid #577ae4;
border-bottom:2px solid #577ae4;

}

.game-menu a{

color:#577ae4;
text-decoration:none;
font-weight:bold;
padding:10px;
letter-spacing:1px;

transition:0.3s;

}

.game-menu a:hover{

color:white;
box-shadow:0 0 10px #577ae4;

}

.hero{

text-align:center;
padding:80px;

}

.hero h2{

font-size:60px;

letter-spacing:4px;

text-shadow:
0 0 10px #577ae4,
0 0 25px #577ae4,
0 0 40px rgba(87,122,228,0.7);

animation:pulseTitle 3s infinite;

}

@keyframes pulseTitle{

0%{text-shadow:0 0 10px #577ae4;}
50%{text-shadow:0 0 30px #577ae4;}
100%{text-shadow:0 0 10px #577ae4;}

}

#formacao h2{

font-size:42px;
letter-spacing:3px;

text-shadow:
0 0 10px #577ae4,
0 0 25px rgba(87,122,228,0.6);

margin-bottom:30px;

}

.knight{

width:300px;
animation:float 4s infinite ease-in-out;

}

@keyframes float{

0%{transform:translateY(0)}
50%{transform:translateY(-20px)}
100%{transform:translateY(0)}

}

section{

text-align:center;
padding:30px;

}


.timeline{

max-width:700px;
margin:40px auto;

display:flex;
flex-direction:column;
gap:20px;

}

.timeline-item{

background:rgba(15,15,30,0.9);

padding:20px;

border-left:4px solid #577ae4;

border-radius:8px;

box-shadow:0 0 10px rgba(87,122,228,0.3);

transition:0.3s;

}

.timeline-item:hover{

transform:translateX(5px);

box-shadow:
0 0 15px #577ae4,
0 0 30px rgba(87,122,228,0.5);

}

.github-stats{

display:flex;
justify-content:center;
gap:30px;
flex-wrap:wrap;

}

#particles{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;

z-index:1;

}

.fog{

position:fixed;
top:0;
left:-50%;

width:200%;
height:100%;

background:url("https://static.vecteezy.com/system/resources/thumbnails/016/017/463/small/white-cloud-cutout-illustration-free-png.png") repeat-x;

opacity:0.15;

animation:fogMove 90s linear infinite;

pointer-events:none;

z-index:0;

}

.fog2{

opacity:0.08;
animation-duration:120s;

}

@keyframes fogMove{

0%{
transform:translateX(0);
}

100%{
transform:translateX(50%);
}

}

header, section{

position:relative;
z-index:2;

}


.mob-run,
.mob-stats{

width:100%;
display:flex;
flex-direction:column;
align-items:center;
gap:15px;
margin:40px 0;

}

.mob-run::before,
.mob-run::after,
.mob-stats::before,
.mob-stats::after{

content:"✧";
width:60%;
height:1px;

background:linear-gradient(
to right,
transparent,
#577ae4,
transparent
);

opacity:0.7;

}


.mob-run::before,
.mob-stats::before{

content:"✧";
color:#577ae4;
font-size:18px;

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

width:100%;

background:none;

}


.mob-run img,
.mob-stats img{

width:120px;

filter:drop-shadow(0 0 8px #577ae4);

}

.projetos-header{

display:flex;
flex-direction:column;
align-items:center;
gap:10px;
margin-bottom:10px;

}

.projetos-header img{

width:180px;

animation:floatMob 3s ease-in-out infinite;

}

@keyframes floatMob{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-10px);
}

100%{
transform:translateY(0px);
}

}

.mob-stats{

width:100%;
overflow:hidden;
margin:40px 0;
position:relative;

}

.skills,
.soft-skills{

display:flex;
flex-wrap:wrap;
justify-content:center;

gap:15px;

max-width:800px;
margin:30px auto;

}

.skills span,
.soft-skills span{

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

min-width:140px;
height:50px;

padding:0 10px;

border-radius:12px;

font-size:14px;
font-weight:bold;

position:relative;
overflow:hidden;

background:#0f0f1a;
color:white;

border:1px solid rgba(87,122,228,0.4);

transition:0.3s;

}

.skills span:nth-child(3n){
background:#ffffff;
color:#000;
}

.skills span:nth-child(3n+1){
background:#577ae4;
color:white;
}

.skills span:nth-child(3n+2){
background:#1c1c2e;
color:white;
}

.skills span,
.soft-skills span{
box-shadow:0 0 5px rgba(87,122,228,0.3);
}

.skills span::before,
.soft-skills span::before{

content:"";
position:absolute;

top:0;
left:-120%;

width:120%;
height:100%;

background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.5),
transparent
);

transform:skewX(-20deg);

}

.skills span,
.soft-skills span{
animation:hudGlow 4s linear infinite;
}

@keyframes hudGlow{

0%{
box-shadow:0 0 5px rgba(87,122,228,0.3);
}

50%{
box-shadow:
0 0 10px #577ae4,
0 0 20px rgba(87,122,228,0.5);
}

100%{
box-shadow:0 0 5px rgba(87,122,228,0.3);
}

}

.skills span:hover::before,
.soft-skills span:hover::before{
left:120%;
transition:0.6s;
}

.skills span:hover,
.soft-skills span:hover{

transform:translateY(-6px) scale(1.08);

box-shadow:
0 0 15px #577ae4,
0 0 30px rgba(87,122,228,0.6);

}

.card{

background:rgba(20,20,40,0.9);
padding:25px;

max-width:800px;
width:100%;

margin:20px auto;

border-radius:15px;

border:1px solid rgba(87,122,228,0.4);

box-shadow:0 0 10px rgba(87,122,228,0.3);

transition:0.3s;

position:relative;
overflow:hidden;

}

.cards{

display:flex;
justify-content:center;
gap:30px;
flex-wrap:wrap;

}

.card::before{

content:"";
position:absolute;

top:0;
left:-100%;

width:100%;
height:100%;

background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.3),
transparent
);

transition:0.6s;

}

.card:hover::before{
left:100%;
}

.card:hover{

transform:translateY(-8px) scale(1.05);

box-shadow:
0 0 20px #577ae4,
0 0 40px rgba(87,122,228,0.6);

}

.card a{

display:inline-block;
margin-top:10px;

padding:8px 15px;

border-radius:8px;

text-decoration:none;

color:white;

background:#577ae4;

transition:0.3s;

}

.card a:hover{

background:white;
color:#000;

box-shadow:0 0 10px #577ae4;

}

.card::before{

content:"";
position:absolute;

top:0;
left:-100%;

width:100%;
height:100%;

background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.3),
transparent
);

transition:0.6s;

}

.card:hover::before{
left:100%;
}

.card:hover{

transform:translateY(-8px) scale(1.05);

box-shadow:
0 0 20px #577ae4,
0 0 40px rgba(87,122,228,0.6);

}

.card a{

display:inline-block;
margin-top:10px;

padding:8px 15px;

border-radius:8px;

text-decoration:none;

color:white;

background:#577ae4;

transition:0.3s;

}

.card a:hover{

background:white;
color:#000;

box-shadow:0 0 10px #577ae4;

}

.titulo-icon{

display:flex;
align-items:center;
justify-content:center;
gap:10px;

}

.icon-title{

width:70px;
height:70px;

filter:drop-shadow(0 0 5px #577ae4);

}

.skill-item{

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

gap:8px;

min-width:150px;
height:55px;

padding:5px 10px;

border-radius:12px;

font-weight:bold;

background:#0f0f1a;

border:1px solid rgba(87,122,228,0.4);

box-shadow:0 0 8px rgba(87,122,228,0.3);

transition:0.3s;

}

.skill-icon{

width:50px;
height:50px;

object-fit:contain;

vertical-align:middle;

filter:drop-shadow(0 0 3px #577ae4);

}

.skill-item{

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

gap:6px;

min-width:110px;
height:45px;     

padding:5px 10px;

border-radius:10px;

font-size:13px;

background:#0f0f1a;

border:1px solid rgba(87,122,228,0.4);

transition:0.3s;

}

.fade-in {
    animation: fadeInPage 1.5s ease;
}

@keyframes fadeInPage {
    from {
        opacity: 0;
        transform: translateY(25px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.projeto-card {
    background: rgba(20,20,40,0.55);
    backdrop-filter: blur(6px);
}

.projeto-card:hover {
    transform: translateY(-10px) scale(1.04);
    box-shadow:
        0 0 20px #577ae4,
        0 0 40px rgba(87,122,228,0.4);
}