/*container
    https://laconsole.dev/blog/guide-creer-conteneurs-css/*/

    /*Nav*/
    /*header {background-color: white;color: rgb(190, 40, 40);padding: 20px;font-family: 'Courier New';
      font-style: italic;font-weight: lighter;
      position: absolute;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;}
            */

    /*Body*/
    body {font-family:'Instrument Sans', sans-serif;display: flex; flex-direction: column; min-height: 100vh; margin: 0; }
    h2 {font-family:'Bricolage+Grotesque';margin-bottom: 50px;text-align:left;margin-top:30px;}
    p {margin-bottom: 3px;font-weight: lighter;} /*font-style: italic;*/
    a {color: rgb(7, 7, 7);font-weight: lighter;text-decoration: none;}
    a:hover {color: rgb(47, 12, 245);}

    /*Footer*/
    footer {
      background:#eee ;
      padding: 20px;
      text-align: center;
    }

    /*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}
    
    /*projects*/
    .container {display: grid;grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)) ;justify-content: center;align-items: center;grid-gap:20px;
      margin: 0 auto;padding:20px;margin-top:20px;box-sizing: border-box;} 
    .text-container {flex: 1;padding: 10px;text-align:left;}
    .image-container {display: flex;justify-content: left;text-align:left;padding: 10px}

    .box {border: 1px #0c0c0c; background-color: #478aa4; padding: 20px; border-radius: 5px; min-height: 250px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3)} /*#d5d1d1 form grey  #1792c3 blue #428ba8*/

    /*publications and presentations containers*/  
    .publications_container{justify-content: center;align-items: center;max-width: 1300px;margin:0 auto;padding:30px; }

    /* apply to all sections to deals with margins*/
    .section_container{margin-block:30px 30px ;padding-top: 40px;}

 
  /* Responsive section for adjustments */
  /* use : https://hacks.mozilla.org/ for displaying controlling */

  /* Style for smaller screens : mobile */
  @media (max-width: 767px) {

    /* Whole sections */
    p {font-size: 0.85em}
    h2 {font-size: 1.3em; margin-bottom: 20px;}
    h3 {font-size: 1.1em;} 


    /* Everything is in a single column layout */
    body, .container, header nav, header nav ul, header nav li, .section_container {
    flex-direction: column; /* Stack elements vertically */
    align-items: center; /* Center horizontally */
    width: 100%; /* Ensure elements take full width */
    box-sizing: border-box; /* Include padding/border in width */
    }

    /* header */
    header nav {display: none;}
    /*.menu-toggle {display: None;} if menu btn */
    
  
    /*Intro container */
    .intro_container {padding-top: 10px;padding-bottom: 80px;}
    .intro_image-container {display: flex;justify-content: center;text-align:center;}
    .intro_image-container img {padding:10px;margin : 10px 0;max-width: 100%;height: auto;box-sizing: border-box;object-fit: contain;}    
    .intro_text-container {max-width: 20em}
    

    /*container*/
    .text-container {font-size: 0.85em}
    .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;}
    .box {min-height: 260px;} 

  }

  /* Style for tablets*/
  @media (min-width: 768px) and (max-width: 1023px) {
    
     /* Whole sections */
     h3 {font-size: 1.1em;} 

    
    /*.menu-toggle {display: None;}*/
    nav ul { display: flex; }

    /*Intro container */
    .intro_text-container {max-width: 40em}

    /*container*/
    .text-container {font-size: 0.9em}
    .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;}



  }    
  /* Style for desktops */
  @media (min-width: 1024px) {

    /*.menu-toggle {display: None;}*/
    .container {max-width: 88em;}
    .box {min-height: 400px; flex: 1}   
}