*{margin:0;box-sizing:border-box}*,body{padding:0}body{font-family:sans-serif;font-size:16px;line-height:1.5;background-color:#f8f8f8;color:dimgray;width:1100px;margin:0 auto}@media screen and (max-width:768px){body{width:100%;padding:0 2rem}}a{text-decoration:none;color:#dadadb}li{list-style:none}.nav-container{display:flex;justify-content:space-between;align-items:center;padding:1rem 0;background-color:#f8f8f8}.nav-container .logo{font-size:2.5rem;font-weight:700;text-decoration:none;transition:all .5s ease-in-out}.nav-container .logo a{color:#2c2d2f}.nav-container .logo:hover{-webkit-text-decoration-color:#ffcc1a;text-decoration-color:#ffcc1a;text-decoration:underline;-webkit-text-decoration-style:dotted;text-decoration-style:dotted;text-underline-offset:.4em}.cta-link{color:#3d3d3f;padding:.5rem 1rem;font-size:1rem;font-weight:600;border-radius:5px;transition:all .5s ease-in-out;cursor:pointer;display:inline-block}.btn-blog:hover{background-color:#a9a9a9;box-shadow:0 0 10px rgba(0,0,0,.2);color:#212f3c}.btn-blog{background-color:#dcdcdc;border:1px solid gray;border-radius:2px}.btn-blog,.cta-btn{color:#1d1e20;padding:.5rem 1rem;font-size:1rem;font-weight:600;transition:all .5s ease-in-out;cursor:pointer;display:inline-block}.cta-btn{background-color:#ffcc1a;border-radius:5px}.cta-btn:hover,.cta-link:hover{background-color:#dadadb}hr{border:none;background-color:#f5f5f5;height:1px;width:80%;margin:0 auto}@media screen and (max-width:768px){hr{width:100%}}.footer-container{display:flex;justify-content:space-around;align-items:center;padding:2rem 0;background-color:#f5f5f5}.footer-container p{font-size:.8rem;color:dimgray}.footer-container .social_icons{display:flex;justify-content:space-between;align-items:center;gap:0 1rem}.footer-container .social_icons a{color:dimgray;font-size:1.5rem;transition:all .5s ease-in-out}.footer-container .social_icons a:hover{color:gray}.hero-container{height:90vh;display:flex;justify-content:center;align-items:center;flex-direction:column;padding:2rem 0}.hero-container .profile-img{width:200px;height:200px;border-radius:50%;margin:0 auto;object-fit:cover}.hero-container .hero-text{text-align:center;margin:1rem 0;width:80%}@media screen and (max-width:768px){.hero-container .hero-text{width:100%}}.hero-container .hero-text h1{font-size:2.7rem;font-weight:400;margin-bottom:1rem;color:#212f3c}.hero-container .hero-text p{font-size:1.1rem;font-weight:400;margin-bottom:1rem;color:#212f3c}.hero-container .social-icons{display:flex;justify-content:center;align-items:center;gap:0 1rem}.hero-container .social-icons a{color:#9b9c9d;font-size:2rem;transition:all .5s ease-in-out}.hero-container .social-icons a:hover{color:#dadadb}.about-container{padding:2rem 0}.about-container h2{font-size:2.4rem;font-weight:430;margin-bottom:1rem;color:#212f3c}.about-container .flex-about{align-items:center}.about-container .flex-about .about-text{width:100%}.about-container .flex-about .about-text p{font-size:1.2rem;font-weight:500;margin-bottom:1rem;color:#212f3c}.about-container .flex-about .about-img{width:100%;padding:.5em;box-shadow:0 0 .4 gray}.about-container .flex-about .about-img .profile-img{overflow:hidden;width:100%;height:440px;object-fit:cover;border:2px solid #f8f8f8;filter:grayscale(100%);transition:all .5s ease-in-out;cursor:cell}.about-container .flex-about .about-img .profile-img:hover{filter:grayscale(0);transform:scale(1.02)}@media screen and (max-width:768px){.about-container .flex-about{flex-direction:column}.about-container .flex-about .about-text{width:100%;line-height:1.7}.about-container .flex-about .about-img{width:100%}}.skills-container{padding:2rem 0;color:#212f3c}.skills-container h2{font-size:2.4rem;font-weight:500;margin-bottom:1rem}.skills-container .grid-skills{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:2rem;gap:2rem}@media screen and (max-width:768px){.skills-container .grid-skills{grid-template-columns:repeat(2,1fr)}}.skills-container .grid-skills .skill-card{background-color:#dadadb;color:#1d1e20;display:flex;justify-content:center;align-items:center;gap:0 1rem;padding:1rem;border-radius:10px;border:1px solid dimgray;box-shadow:0 0 10px rgba(0,0,0,.2);transition:all .5s ease-in-out;cursor:context-menu}.skills-container .grid-skills i{font-size:1.5rem}.projects-grid .Todo-List-App:hover,.skills-container .grid-skills .html:hover{background-color:gray;color:#1d1e20}.projects-grid .Photou:hover,.skills-container .grid-skills .css:hover{background-color:#e34f26;color:#1d1e20}.projects-grid .E-djandai:hover,.skills-container .grid-skills .js:hover{background-color:#1e90ff}.projects-grid .Site-Ecole-doctorale:hover,.skills-container .grid-skills .react:hover{background-color:#61dafb}.projects-grid .Codenakry:hover,.skills-container .grid-skills .node:hover{background-color:#00008b}.skills-container .grid-skills .python:hover{background-color:#3776ab}.projects-container{padding:2rem 0}.projects-container h2{font-size:2rem;font-weight:600;margin-bottom:1rem}.projects-grid .project-blog-button{padding:5em}.projects-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:2.4rem;gap:2.4rem}@media screen and (max-width:768px){.projects-grid{grid-template-columns:repeat(1,1fr)}}.project-card{border:1px solid dimgray;border-radius:15px;transition:all .5s ease-in-out}.project-card:hover{border-color:#212f3c;background-color:#dcdcdc;box-shadow:0 0 10px rgba(0,0,0,.2)}.project-card .project-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;border-bottom:1px solid dimgray;padding:11px}.project-body .project-technologies{display:flex;flex-direction:column;gap:.5rem;margin-top:10px}.project-card .project-body{padding:10px}.project-card .folder-icon{font-size:3em;color:#ffcc17}.project-header .small-icons{display:flex;gap:0 5px}.project-card .small-icons a{margin-right:5px;cursor:pointer;transition:all .5s ease;color:#e34f26}.project-card .small-icons a:hover{color:#ffcc17}.project-card .project-body img{overflow:hidden;border-radius:10px}.project-card .project-body h2{font-size:1.5em;margin-bottom:10px;font-weight:700}.project-card .project p{font-size:16px;margin-bottom:10px;color:#b3b3b3}.contact-container{padding:2rem 0 4rem;display:flex;justify-content:center;align-items:center;flex-direction:column;width:80%;margin:0 auto;color:#212f3c}@media screen and (max-width:768px){.contact-container{width:100%}}.contact-container h2{font-size:2.5rem;font-weight:500;margin-bottom:1rem}.contact-container p{font-size:1.2rem;font-weight:400;margin-bottom:1rem;text-align:center}