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

html{
scroll-behavior:smooth;
}

body{
font-family:Segoe UI;
color:white;
background:linear-gradient(-45deg,#4e54c8,#8f94fb,#ff758c,#ff7eb3);
background-size:400% 400%;
animation:bg 15s ease infinite;
}

@keyframes bg{
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}

/* MENU */
header{
position:sticky;
top:0;
background:rgba(0,0,0,0.5);
padding:20px;
z-index:1000;
}

nav ul{
display:flex;
justify-content:center;
gap:30px;
list-style:none;
}

nav a{
color:white;
text-decoration:none;
font-weight:bold;
}

nav a:hover{
color:#ffdd59;
}

/* SECTIONS */
.section{
max-width:1000px;
margin:60px auto;
padding:100px 20px;
background:rgba(0,0,0,0.4);
border-radius:20px;
text-align:center;
opacity:0;
transform:translateY(50px);
transition:1s;
scroll-margin-top:100px;
}

.section.active{
opacity:1;
transform:translateY(0);
}

/* MACHINE A ECRIRE */
#presentation h1{
overflow:hidden;
white-space:nowrap;
border-right:3px solid white;
animation:typing 3s steps(30),blink .7s infinite;
}

@keyframes typing{
from{width:0}
to{width:100%}
}

@keyframes blink{
50%{border-color:transparent}
}

/* PROJETS */
.projects-container{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:25px;
margin-top:30px;
}

.project-card{
width:280px;
background:rgba(255,255,255,0.1);
border-radius:15px;
overflow:hidden;
transition:.4s;
box-shadow:0 5px 15px rgba(0,0,0,.3);
}

.project-card:hover{
transform:translateY(-15px) scale(1.05);
}

.project-card img{
width:100%;
height:180px;
object-fit:cover;
}

.project-card h3{
margin:15px 0;
}

.project-card p{
padding:0 15px 20px;
}

/* lien description */
.project-card a{
color:#ffdd59;
font-weight:bold;
text-decoration:none;
}

.project-card a:hover{
color:white;
text-shadow:0 0 10px white;
}

/* RESEAUX */
.social-links{
display:flex;
justify-content:center;
gap:30px;
margin-top:30px;
}

.social-icon{
width:60px;
height:60px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
font-size:26px;
color:white;
transition:.3s;
}

.social-icon:hover{
transform:translateY(-10px) scale(1.2);
}

.insta{background:#E1306C;}
.discord{background:#7289DA;}
.twitch{background:#9146FF;}

footer{
text-align:center;
padding:20px;
background:rgba(0,0,0,.6);
margin-top:40px;
}