/* Nav */
header{background-color:white;color:rgb(190,40,40);padding:20px;font-family:'Courier New';font-style:italic;font-weight:lighter;position:relative;top:0;right:0;z-index:100}
header nav{float:right}
header nav ul{list-style-type:none;margin:0;padding:0}
header nav li{float:left}
header nav li a{display:block;color:black;text-align:center;padding:14px 16px;text-decoration:none}

/* Menu toggle */
.menu-toggle{display:none;cursor:pointer;font-size:28px;padding:10px;background-color:transparent;color:black;border:none;font-style:normal}

/* Titre */
.title{font-weight:600;text-align:center}.separator{padding:0 6px}

/* Body */
body{font-family:'Courier New';display:flex;flex-direction:column;min-height:100vh;margin:0}
h2{text-align:center}
a{color:rgb(7,7,7);font-weight:bold}
a:hover{color:rgb(47,12,245)}

/* Intro */
.intro_container{height:auto;min-height:100svh;display:flex;justify-content:center;align-items:center;flex-direction:column}
.intro_image-container{display:flex;justify-content:center;text-align:center}
.intro_text-container{display:flex;justify-content:center;text-align:center;overflow-wrap:anywhere;max-width:60em}
#about { scroll-margin-top: 80px;}

/* Projets */
.container-subtitle{grid-column:span 1 /-1;text-align:center;font-size:1.3rem;font-weight:600;margin-bottom:10px}
.container{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:15px;margin:0 auto;padding:20px;margin-top:20px}
.card{display:flex;flex-direction:column;background-color:#E5E5E5;border:1px solid rgba(0,0,0,0.12);padding:15px 15px 20px 15px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.06)}
.logo-project{flex-shrink: 0;display:flex;justify-content:center;text-align:center;padding:10px}
.cardhobbies{border:0;background-color:white;padding:20px;border-radius:5px;box-shadow:0 2px 5px rgba(0,0,0,0)}
.tools{font-size:0.85rem;margin-top:6px;margin-bottom:10px;font-weight:400}
.project-link{text-decoration:underline;font-weight:500}
.project-link:hover{text-decoration:none;color:rgb(47,12,245)}
.card .project-link{margin-top:auto}
.card p.tools{margin-bottom:1rem}

/* Conteneurs de publications et présentations */
.publications_container{justify-content:center;align-items:center;max-width:1300px;margin:0 auto;padding:30px}

/* Marges des sections */
.section_container{margin-block:30px 30px;padding-top:40px}

/* Lien "top" */
.top{text-align:center;font-size:0.85em}

/* Mobile */
@media (max-width:767px){
.separator{display:none}
.title{display:flex;flex-direction:column}
body,.section_container{flex-direction:column;align-items:center;width:100%;box-sizing:border-box}
header nav{display:block}
.menu-toggle{display:block}
nav ul{display:none;flex-direction:column;background-color:none;padding:5px}
nav ul.active{display:flex}
.intro_container{padding-top:10px;padding-bottom:80px}
.intro_image-container img{padding:10px;margin:10px 0;max-width:100%;height:auto;object-fit:contain}
.intro_text-container{max-width:20em}
.social-links{display:flex;gap:10px;align-items:center}
.image-container img{padding:6px 0;margin:5px 0;width:60px;height:60px}
.card,.cardhobbies{min-height:auto;padding:15px 15px 30px 15px}
.publications_container{font-size:0.85em}
}

/* Tablettes */
@media (min-width:768px) and (max-width:1023px){
.menu-toggle{display:none}
nav ul{display:flex}
.intro_text-container{max-width:40em}
.image-container img{padding:10px;margin:5px 0;max-width:100%;height:auto;box-sizing:border-box;object-fit:contain}
.publications_container{font-size:0.85em}
}

/* Desktops */
@media (min-width:1024px){
.menu-toggle{display:none}
.container{max-width:88em}
}