/* style.css - style simple pour le portfolio */
:root {
  --accent: #0366d6;
  --muted: #666;
}
html{
  font-size: 62.5%;
}
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  border: 0;
  margin: 0;
  padding: 0;
  width: 150rem;
  height: 150rem;
  line-height: 1.5;
  background: linear-gradient(135deg,#f9f8fa 0%, #2d545c86 50%, #070e3bd0 90%);
  background-repeat: no-repeat;
  background-attachment: fixed;  
  background-size: cover;     
 
}
header {
  border: 0%;
  margin: 0%;
  padding: 1rem;
  background: linear-gradient(90deg, rgb(15, 43, 66) 10%, rgb(0, 0, 0) 90%);
  max-width: 150rem;
  min-width: 150rem;
  height: 25rem;
  text-align: center;
  font-size: xx-large;

}

h1 { margin: 0 0 0.25rem 0; 
}
.headd {
   background: linear-gradient(99deg, rgb(189, 186, 186) 30%, rgb(178, 178, 188) 40%, rgb(236, 236, 236) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.headd p {
  font-size: 2.4rem;
}
.bande{min-width: 152rem; height: 5rem; 
  background: linear-gradient(90deg, rgb(253, 253, 255) 4%, rgba(6, 13, 44, 0.681) 80%); margin: 0 auto;}
h3 { margin-top: 1rem; color: whitesmoke;
background-color: #1a6aa3ad;
padding: 0.5rem; border-radius: 8px;
width: fit-content; font-size: 1.8rem;}
  p{ font-size: 1.6rem; color: black; }
  a{ color: var(--accent); font-size: 1.6rem;}
nav a { color: var(--accent); text-decoration: none;font-size:1.6rem; margin: 0 1rem; }
li{ font-size: 1.6rem; color: black; margin-bottom: 0.5rem; }

h2 { margin-top: 1.25rem;  color: whitesmoke;
background-color: #051d3ead;
padding: 0.5rem; border-radius: 8px;
width: fit-content;  font-size: 2rem; }
section { margin: 1rem auto; max-width: 90rem; padding: 0 1rem;
}
footer { margin-top: 2rem; color: var(--muted); font-size: 0.9rem; }
a:hover { text-decoration: underline; }


      @media screen  and (max-width:62.5rem) {
      html{
        font-size: 50%;
        height: fit-content;
      }
      header {
        font-size: 75%;
        width: 60rem;
        text-align:left ;
        padding-left: 4rem;
        padding-top: 4rem;
        padding-right: 4rem;
        height: fit-content;
    
      }

      .bande{
        min-width: 60rem;
      }
      section{
        font-size: 60%;
        width: 60rem;
        padding: 0 1rem;
        height: max-content;  
        }
      main{
        height: fit-content;
        width: 60rem ;
      }
  }
 @media screen  and (max-width:31.25rem) {
      html{
        font-size: 25.5%;
        
      height: fit-content;

      }
      header {
        font-size: 35%;
        width: 35rem;
        text-align:left ;
        height: fit-content;

      }
      .bande{
        min-width: 35rem;
      }
      section{
        padding: 0 0.5rem;
        font-size: 30%;
        height: max-content;
        max-width: 35rem ;
        height: fit-content;
      }
      main{
        height: fit-content;
        width: 35rem ;
      }
      

  }