/* ACCUEIL */
.accueil-index{ height:100vh; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; }
.accueil-index div{ position:relative; top:50%; transform:translate(0,-50%); margin-left:10vw; }
.prenom{ font-size:70px; color:#fff; letter-spacing:5px; line-height: 70px; }
.nom-famille{ color:#1D9BF0; font-size:100px; letter-spacing:5px; line-height: 80px; }
.specialite{ color:#D9D9D9; font-size:20px; letter-spacing:2px; }
@media(max-width:630px){ .prenom{ font-size:50px; } .nom-famille{ font-size:80px; } .specialite{ font-size:15px; }}
@media(max-width:460px){ .prenom{ font-size:35px;} .nom-famille{ font-size:65px;} .specialite{ margin-top:-25px; }}
@media(max-width:360px){ .prenom{ font-size:25px;} .nom-famille{ font-size:50px;} .specialite{ font-size:12px; }}

/* PROJETS */
.projets{ max-width:1300px; width:80%; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fill,300px); justify-content:center; gap:100px; margin-top:100vh; padding:18vh 0 150px; }
.card{ width:300px; height:500px; background:#1D97EA; border-radius:15px; position:relative; box-shadow:inset 0 0 8px rgba(0,0,0,0.5); cursor:pointer; }
.card .content{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; }
.card img{ width:150px; }
.nom-projet{ color:#fff; font-size:40px; }
.type-projet{ font-size:20px; line-height:30px; }
@media(max-width:768px){ .projets{ grid-template-columns:repeat(auto-fill,200px); } .card{ width:200px; height:350px; } .nom-projet{ font-size:30px;} .type-projet{ font-size:15px;} .card img{ width:125px;} }

/* CONTACT */
.contact{ height:100vh; position:relative; margin-top:-80vh; margin-bottom:-30vh; }
.contact h1{ color:#1D9BF0; font-size:70px; position:absolute; top:35%; transform:translate(0,-35%); margin-left:10vw; letter-spacing:5px; }
.contact-content{ position:absolute; top:60%; transform:translate(0,-60%); margin-left:15vw; font-size:20px; letter-spacing:1px; line-height:40px; color:#fff; }
.contact-content a{ color:#fff; text-decoration:none; }
.contact-content a:hover{ text-decoration:underline; }
@media(max-width:630px){ .contact h1{ font-size:50px; }}
@media(max-width:475px){ .contact h1{ font-size:35px; } .contact-content{ font-size:15px; }}
@media(max-width:370px){ .contact-content{	font-size:12px; margin-left:17vw; }}