:root{
    --background: #9F0622;
    --foreground: #FFEECE;
}

html{
    background-color:var(--background);
    font-family: "AdelpheTrouble";
    color: var(--foreground);
}

body{
    padding:0%;
    margin:0px;
}

a {
  color: inherit; /* blue colors for links too */
  text-decoration-style: wavy; /* no underline */
}

a:hover{

font-weight:bold;
text-decoration-style: wavy;

}

.profile{
  width: 100%;
  max-width: 540px;
  object-fit: cover;
  vertical-align: middle;
  padding: 15px;
}

.wrapper{
  padding: 0 15px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  gap:5rem;
}

.intro{
  flex: 1;
}

hr{
  border-top: 5px dotted #760C00;
  border-bottom: 0px;
}

ul {
}

.sousliste{
  columns:2;

}

li::marker{
  content:none;
}


img{
    max-height: 100vh;
    /* height: 100%; */
    object-fit: cover;
    max-width: 100%;
    width: 100%;
    height: 100%;
}

:has(.shifumi, .hsip, .sante) img{
    height:auto;
    width:auto;
}

video{
  max-height: 100vh;
}



.projets{
    position: absolute;
    height:100%;
    width:20%;
    background-color: var(--background);
    left:0%;
    top:0%;
    padding: 1%;
    margin:0px;
    overflow-y: scroll;
}



.projets details summary::marker{content:"";}

.projets details summary::-webkit-details-marker {   display:none; }

.projets details summary{ line-height: 110%;}

.projets details{ /* Ici tu modifies TOUS les details */
    margin-top: 7.5%;
}

.projets details:first-of-type{ /* ici tu modifies "HANNAH BEAUDEUX" */
    margin-top:0%;
}


.projets details .images, .projets details .droite{
    position: fixed;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;        
    gap: 0.5%;
    height: 100%;
    width: 80%;
    top: 0%;
    left: 20%;
    padding:1%;
    overflow-y: auto;
    background-color: var(--background);
}

.deuxcol{
    grid-template-columns: repeat(2, calc(100% /  2))!important;
}


.image{ /*NEW fond*/
  position: fixed;
  margin: 2%;
  max-width: 35%;
  height: auto;
  left: 40%;
  overflow-y:hidden;
}


#tableau { /*headinthestars*/
width:70%;
}
#tableau img{
height:auto;
}


b{ /* catégorie de projet genre identité  visuelle */
  border-radius: 0;
  padding: 0;
  margin: 0;
  font-family: 'AdelpheTrouble';
  font-weight: bold;
  font-size: 1.95vh;
}

h1{ /*NEW littéralement juste pour le Hannah Beaudeux */
font-size: 5.50vmin;
color: var(--foreground);
font-family: "Insolente";
font-weight:normal;
line-height: 100%;
}

span{ /* titre de projet */
    color: var(--foreground);
    font-family: "Insolente";
    font-size: 3vh;
    font-style: normal;
    display: block;
    margin-bottom: 2%;
}


footer {
  text-align: center;
  padding: 5px;
  grid-column: 1 / -1 ;
}

summary b{
  line-height: 125%;
  display: block;
}

summary br{
  display: none;
}
/*------------NEW Caractéristiques de typos hors couleur ------------*/
details > summary {
  color: var(--foreground);
  font-family: "Insolente";
  font-size: 3vh;
  font-style: normal;
      /*---pas de flèche aux details---*/
  cursor:pointer;
  list-style: none;
}

details > h1 {
  border-radius: 10px 10px 10px 10px;
  padding: 16px 16px;
  margin: 2%;
  font-family: "Insolente";
  font-weight:normal;
  font-size: 10vmin;
  color: #ff5906;
  word-wrap: break-word;
}


details > p {
  border-radius: 0 0 10px 10px;

  margin-top: 4%;
  font: 16px 'AdelpheTrouble',
  Calibri,
  sans-serif;
  line-height: 125%;
}

figure{
    margin-bottom:2%;
}


.intro p {
  font-size: 4.5vh;
  line-height: 120%;
  font-weight:bold;

}
/*------------FIN Caractéristiques de typos hors couleur ------------*/





/*------------COULEURS hover, details ouvert, textes et figcaption------------*/

          /*--- quand on fait une déclaration, on peut séparer les éléments par une virgule
         exemple
          .truc, .bidule, #machin{
          couleur: rouge;
        }

        va appliquer la couleur rouge aux éléments de classe truc ET à bidule ET à machin etc...-----*/

         summary:hover *, details[open] summary *, details p, details figcaption {
          color: var(--foreground);
        }

        .propos summary:hover *{
          color: #fcba3;
        }


        .tendresse summary:hover *{
          color:#D7A94D;
        }

        .tissage summary:hover *{
          color:#F1F1F8;
        }


        .herbes summary:hover *{
          color:#4EACBA;
        }


        .manon summary:hover *{
          color: #FF2584;
        }

        .caracole summary:hover *{
          color: #D0344A;
        }

        .sante summary:hover *{
          color: #079961 ;
        }

        .musee summary:hover *{
          color: #EE3E21;
        }

        .colere summary:hover *{
          color: #ff2683;
        }

        .foster summary:hover *{
          color: #D5393A;
        }

        .imprimeuse summary:hover *{
          color: #F17F2B;
        }

        .hsip summary:hover *{
          color: #1ACC66;
        }

        .cinematheque summary:hover *{
          color: #005A75;
        }

        .misty summary:hover *{
          color: #1e0137;
        }
        .misty figcaption {
          color: #A59FA2;
        }

        .risometrododo summary:hover * {
          color: #0111C1;
        }

        .famillebois summary:hover *{
          color: #0ED561 ;
        }

        .obvi summary:hover *{
          color: #332317;
        }

        .interstices summary:hover *{
          color: #4779FF;
        }

        .wrest summary:hover *{
          color: #743F89;
        }

        .soleil summary:hover *{
          color: #F60927;
        }

        .osources summary:hover * {
          color: #87075F;
        }

        .painboy summary:hover * {
          color: #E73B75;
        }

        .shifumi summary:hover * {
          color: #D5221D;
        }

        .stars summary:hover * {
          color: #03038B;
        }

        .illus summary:hover * {
          color: #90b796;
        }

/*
.propos p, .propos figcaption{
  color: #760C00;
}
details.propos[open] summary *, .propos summary:hover *{
  color: #BA7E7E;
}

.tendresse summary:hover *, details.tendresse[open] summary *, .tendresse p, .tendresse figcaption{
  color: #D7A94D;
}

.tissage summary:hover *, details.tissage[open] summary *, .tissage p, .tissage figcaption{
  color: #F1F1F8;
}

.herbes summary:hover *, details.herbes[open] summary *, .herbes p, .herbes figcaption{
  color:#4EACBA;
}

.manon summary:hover *, details.manon[open] summary *, .manon p, .manon figcaption{
  color: #FF2584;
}

.caracole summary:hover *, details.caracole[open] summary *, .caracole p, .caracole figcaption {
  color: #D0344A;
}

.sante summary:hover *, details.sante[open] summary *, .sante p, .sante figcaption {
  color: #079961 ;
}

.musee summary:hover *, details.musee[open] summary *, .musee p, .musee figcaption {
  color: #EE3E21;
}

.colere summary:hover *, details.colere[open] summary *, .colere p, .colere figcaption {
  color: #ff2683;
}

.foster summary:hover *, details.foster[open] summary *, .foster p, .foster figcaption {
  color: #D5393A;
}

.imprimeuse summary:hover *, details.imprimeuse[open] summary *, .imprimeuse p, .imprimeuse figcaption {
  color: #F17F2B;
}

.hsip summary:hover *, details.hsip[open] summary *, .hsip p {
  color: #1ACC66;
}

.cinematheque summary:hover *, details.cinematheque[open] summary *, .cinematheque p, .cinematheque figcaption {
  color: #005A75;
}

.misty summary:hover *, details.misty[open] summary *, .misty p {
  color: #1e0137;
}
.misty figcaption {
  color: #A59FA2;
}

.risometrododo summary:hover *, details.risometrododo[open] summary *, .risometrododo p, .risometrododo figcaption {
  color: #0111C1;
}

.famillebois summary:hover *, details.famillebois[open] summary *, .famillebois p, .famillebois figcaption {
  color: #0ED561 ;
}

.obvi summary:hover *, details.obvi[open] summary *, .obvi p, .obvi figcaption {
  color: #332317;
}

.interstices summary:hover *, details.interstices[open] summary *, .interstices p, .interstices figcaption {
  color: #4779FF;
}

.wrest summary:hover *, details.wrest[open] summary *, .wrest p, .wrest figcaption {
  color: #743F89;
}

.soleil summary:hover *, details.soleil[open] summary *, .soleil p, .soleil figcaption {
  color: #F60927;
}

.osources summary:hover *, details.osources[open] summary *, .osources p, .osources figcaption {
  color: #87075F;
}

.painboy summary:hover *, details.painboy[open] summary *, .painboy p, .painboy figcaption {
  color: #E73B75;
}

.shifumi summary:hover *, details.shifumi[open] summary *, .shifumi p, .shifumi figcaption {
  color: #D5221D;
}

.stars summary:hover *, details.stars[open] summary *, .stars p, .stars figcaption {
  color: #03038B;
}

.illus summary:hover *, details.illus[open] summary *, .illus p, .illus figcaption {
  color: #90b796;
}
*/

/*------------FIN COULEURS hover, details ouvert, textes et figcaption ------------*/






     /*------- grid -------*/
     #hf1{
        grid-column: 1/4; /* colonnes 1 et 2 donc en maths : [1,3[ */
        grid-row: auto;

    }

    #hf2{
        grid-column: 3; /* colonnes 1 et 2 donc en maths : [1,3[ */
        grid-row: 2;

    }

    /*------- FIN grid -------*/








   /*------------NEW TABLEAU A PROPOS------------*/
   table {
     border-collapse: collapse;
     border: 2px solid rgb(200,200,200);
     letter-spacing: 1px;
     font-size: 0.8rem;
   }

   td, th {
     border: 1px solid rgb(190,190,190);
     padding: 10px 20px;
   }

   th {
     background-color: rgb(235,235,235);
   }

   td {
     text-align: center;
   }

   tr:nth-child(even) td {
     background-color: rgb(250,250,250);
   }

   tr:nth-child(odd) td {
     background-color: rgb(245,245,245);
   }

   caption {
     padding: 10px;
   }
   /*------------FIN TABLEAU A PROPOS------------*/








   /*------------NEW SCROLLBAR------------*/

   .projets::-webkit-scrollbar {
     width: 15px;
     background-color: var(--background); /* or add it to the track */
     filter: hue-rotate(222deg);
   }
   .projets::-webkit-scrollbar-thumb {
       background: var(--foreground);
     }




   details .images::-webkit-scrollbar { /* WebKit */
       width: 25px;
       background: var(--foreground);
     }
   details .images::-webkit-scrollbar-thumb {
     background-color: var(--background); /* or add it to the track */
     }




       details .droite::-webkit-scrollbar { /* WebKit */
           width: 15px;
           background-color: var(--foreground);
         }
       details .droite::-webkit-scrollbar-thumb {
           background: var(--background);
           filter: hue-rotate(222deg);
         }
/*
         details .droite::-webkit-scrollbar-thumb {
             background: #BA7E7E;
           }*/

   /*------------FIN SCROLLBAR------------*/

nav {
margin-top: 1vh;
}