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


body{

    height:100vh;
    overflow:hidden;
    color:white;

}



/* VIDEO */

#background{

    position:fixed;

    width:100%;
    height:100%;

    object-fit:cover;

    z-index:-2;

}



.overlay{

    position:fixed;

    width:100%;
    height:100%;

    background:
    linear-gradient(
    rgba(10,0,25,.75),
    rgba(20,0,40,.85)
    );

    z-index:-1;

}







/* HEADER */


header{

    height:80px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 50px;

}



.logo{

    font-family:'Cinzel Decorative';

    font-size:32px;

    color:#e9d5ff;

    text-shadow:
    0 0 25px purple;

}







nav{

    display:flex;

    gap:15px;

}



nav button{

    background:#180024cc;

    color:white;

    border:1px solid #c084fc;

    padding:10px 22px;

    border-radius:25px;

    cursor:pointer;

    transition:.3s;

}



nav button:hover{

    background:#c084fc;

    color:#180024;

    transform:translateY(-3px);

}









/* PAGE */


main{

    height:calc(100vh - 80px);

    display:flex;

    justify-content:center;

    align-items:center;

}



.page{

    display:none;

    animation:fade .5s ease;

}



.page.active{

    display:block;

}









/* ACCUEIL */


.home{

    text-align:center;

}



.home h1{

    font-family:'Cinzel Decorative';

    font-size:50px;

    color:#f3e8ff;

    text-shadow:

    0 0 30px purple;

}



.home p{

    margin-top:15px;

    font-size:20px;

    color:#ddd;

}









/* EXPERIENCE */


.container{

    width:700px;

    display:flex;

    flex-direction:column;

    gap:15px;

}



.card{

    background:rgba(20,5,35,.85);

    border:1px solid #c084fc;

    border-radius:20px;

    padding:20px;

    box-shadow:

    0 0 25px rgba(168,85,247,.3);

}



.card h2{

    color:#e9d5ff;

    font-size:25px;

    margin-bottom:10px;

}



.card h3{

    color:#e9d5ff;

    margin-bottom:10px;

}



.card p{

    font-size:15px;

    line-height:1.5;

}









/* TAGS */


.tags{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}



.tags span{

    background:#2a0b45;

    border:1px solid #c084fc;

    padding:7px 15px;

    border-radius:20px;

    font-size:14px;

}









/* COMPETENCES */


.skills-grid{


    width:650px;

    display:grid;

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

    gap:20px;

}



.skill-card{


    background:rgba(20,5,35,.85);

    border:1px solid #c084fc;

    border-radius:22px;

    padding:25px;


    text-align:center;


    min-height:180px;


    transition:.3s;


}



.skill-card:hover{


    transform:translateY(-8px);

    box-shadow:0 0 35px purple;


}



.skill-card h2{


    color:#e9d5ff;

    font-size:20px;

    margin-bottom:15px;

}



.skill-card p{

    font-size:14px;

    line-height:1.6;

}



.skill-card span{

    color:#c084fc;

}









/* CONTACT */


.contact{


    width:350px;


    background:rgba(20,5,35,.85);


    border:1px solid #c084fc;


    border-radius:25px;


    padding:35px;


    text-align:center;


}



.narsou-font{


    font-family:'Cinzel Decorative',cursive;


    font-size:40px;


    color:#e9d5ff;


    text-shadow:

    0 0 25px purple;


}



.discord{


    margin-top:30px;


    padding:20px;


    border-radius:20px;


    background:#100020;


    border:1px solid #c084fc;


    font-size:18px;


}







/* MUSIQUE */


.music-player{


    position:fixed;


    bottom:20px;


    left:20px;


    display:flex;


    align-items:center;


    gap:10px;


    background:#160022dd;


    padding:10px 15px;


    border-radius:25px;


    border:1px solid #c084fc;


}



.music-player button{


    background:#c084fc;


    border:none;


    width:35px;


    height:35px;


    border-radius:50%;


    cursor:pointer;


}



.music-player input{


    width:100px;


}







@keyframes fade{


from{

    opacity:0;

    transform:translateY(15px);

}


to{

    opacity:1;

    transform:translateY(0);

}


}