:root {

    --color1:DarkOrange;
    --color2 : #a28486;
    --color2b :#a28486 ;
    --color3: khaki;
    --color4 : #d2cfbc;
    --color5 : PowderBlue;
    --color6 : rgb(84, 221, 125) ;
    --color6b : #69e5bc;
    --color7b : Ivory;

    --color7 : snow;
    --color8 :#f7f7d9;
    --fushia-fatigue : #a28486;
    --fushia-vieux: #774d65;
    --vert-boue: #85806d;
    --bleu-lagon: #8fada1;
    --gris-casse: #c6c3b4;
    --gris-casse-2: #d2cfbc;
    --cobalt-green:#c8ffc8;
    --vert-porcelaine: #69e5bc;
    --orange: #ff9900;
    --orange-clair: #f9b754; 
  }

  body {

  }


nav {
    display: flex;
    background-color: black;
    gap: 0.2em 2em;
    flex-wrap: wrap;
    padding:0rem 2rem;
    position: sticky;
    top: 0;
    z-index: 2000;
    padding-top: 1rem;
}


a {
    color: black;
    text-decoration: none;
}
a.active{
    text-decoration: none;
}

a:hover {
    color: black;
    text-decoration: none;
    background-color: white;
}


p {
    font-family: "UmeLoopBold";
    font-weight: 600;
    font-size: 1.6rem;
    line-height: 2.2rem;
    max-width: 900px;
    margin: 1em 0em;
}


div:hover {
  width: 300px;
}

@media only screen and (max-width: 600px){
    p {
    font-size: 1.3rem;
    line-height: 1.9rem;
    }
}


p a {
  text-decoration: none;
  border: 2px solid black;
  border-radius: 15px;
  padding: 0.05em 0.4em;
}

p a:hover {
  text-decoration: none;
  border: 2px solid black;
  border-radius: 15px;
  padding: 0.1em 0.4em;
}


h2 + p, h3 + p{
    text-indent: 0px;
} 

em {
    font-style: italic;
}


h1, h2, h3, h4 {
    font-family:"Venus";
}

#title{
 flex: 2 24vw;
  padding: 1rem 1.5em 2rem 1.5em;
  margin: 0;
 
}

h1 {
  font-size: 4em;
  font-weight: 600;
}


h2 {    
    font-size: 3rem;
    font-weight: 600;
    margin: 0;
    color: black;
}

summary h2:hover{
    -webkit-text-stroke: 3px black;
    color: transparent;

}

h3{
    font-size: 2rem;
    font-weight: 400;
    margin: 1em 0 0.5em 0;
}

h4{
    font-size: 1.8rem;
    font-weight: 400;
    margin: 0.5em 0 0.5em 0;
    color: black;
}

#glossary h4 {
  display: block;
  float: left;
  padding: 0;
  line-height: 1.2;
  margin: 0;
}
#glossary p {

line-height: 1.4;
  display: block;
  text-indent: 13px;}

h4 a{
    color: black;
    text-decoration: none;
}

h4 a:hover {
    -webkit-text-stroke: 2px black;
    background-color: transparent !important;
    letter-spacing: 0.02em; 
    text-shadow: 5px 5px 0px #000;
}
.button:hover img {
      content: url('svg/pdf-symbol-hover.svg');
}

main details#what-is h4 a:hover,
main details#how-to h4 a:hover{
    color: var(--color1);
}
main details#pause h4 a:hover{
    color: var(--color4);
}

main details#in-the-making h4 a:hover,
main details#go-further h4 a:hover{
    color: var(--color3);
}

main details#commitments h4 a:hover{
    color: var(--color6b);
    
}


h4 a:active{
    -webkit-text-stroke: 2px black;
    color: transparent !important;
}

h5 {
    font-family: "Venus";
    font-size: 2.5rem ;
    -webkit-text-stroke: 2px black;
    color: transparent !important;
    background-color: transparent !important;
}

blockquote p{
  font-family: 'UmeVertical';
  font-size: 1.5em;
}

@media only screen and (max-width: 600px){
    blockquote p {
    font-size: 1.2rem;
    line-height: 1.8rem;
    }
}


ul { list-style-type: none; }

ul li {
  font-size: 1.6rem;
  line-height: 2.2rem;
  background-image: ;
  margin-left: 1em;
  max-width: 900px;

}

ul li:before { 
    font-family: 'Publifluor';
    content:"\261B"; 
    font-size: 2.3em;
    margin-right: 0.2em;
    float: left;
    alignment-baseline: middle;
}

code, blockquote blockquote {
  font-family: 'TGL';
  font-size: 0.9em;
  line-height: 1.2em;
}
blockquote blockquote p{
    font-family: 'TGL';
    line-height: 1.2em;

}

main {
    display: flex;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
  width: 100%;
  justify-content: flex-start;
  margin-bottom: 10vh;

}
aside {
  position: fixed;
  bottom: 0;
  z-index: 100;
  background: white;
  width: 100%;
  left: 0;
  max-height: 100vh;
  overflow: scroll;
}
aside[open]{
    width: 100vw;
    height: 100vh;
}


strong {
    font-family: "Venus";
    text-transform: uppercase;
}

.button {
  border: none;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  display: inline-block;
  cursor: pointer;
  z-index: 200;
  font-size: 1.8rem;
  font-weight: 400;
  color: black;
  font-family: "Venus";
  break-inside: auto;
  text-wrap: auto;
  margin-right: 10px;
}
.button + h5 {
  display: inline-block;

}
/* /////////////////////////////////////// DETAILS */

    main details#what-is {
      order: 1;
    }
    main details#pause {
      order: 2;
    }
     main details#in-the-making {
      order: 3;
    }
    main details#commitments {
      order: 4;
    }
    main details#how-to {
      order: 5;
    }
    main details#go-further {
      order: 6;
    }

details {
    flex: 1 0;
    padding: 1.5em;
    border-radius: 15px;
}
main details {
  flex: 1 24vw;
  flex-wrap: wrap;
}


main details#commitments,
main details#how-to  {
  flex: 1 67vw;
  flex-wrap: wrap ; 
}
main details#pause {
  flex: 1 24vw;

}
main details#what-is {
      flex: 1 41vw;
  flex-wrap: wrap ; 
}

main details[open] {
    flex: 0 100vw !important;
}



main details[open] summary {
  margin-bottom: 0.5em;
  border-bottom: solid 3px black ;
  padding: 0em;
}
main details#what-is,
main details#how-to{
    background-color: var(--color1);
}
main details#pause {
    background-color: var(--color4);
}

main details#in-the-making,
main details#go-further{
    background-color: var(--color3);
}

main details#commitments{
    background-color: var(--color6b);
}
aside details {
    background-color: var(--color2);
    border-top: 2px solid black;
    border-radius: 0px;
}

main aside{
    background-color: var(--color7);
}

details summary{
    cursor: pointer;
    list-style: none;
    position: sticky;
    top: 0rem;
}

main details#commitments summary,
main details#how-to summary,
main details#what-is summary{
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
}

main details#commitments summary h2,
main details#how-to summary h2,
main details#what-is summary h2 {
  flex: 1 100%;

}
main details#commitments summary h4,
main details#how-to summary h4,
main details#what-is summary h4 {
  flex: 1 25%;

}

/* colors */
main details#what-is summary,
main details#how-to summary {
    background-color: var(--color1);
}
main details#pause summary {
    background-color: var(--color4);
}

main details#in-the-making summary,
main details#go-further summary{
    background-color: var(--color3);
}


main details#commitments summary{
    background-color: var(--color6b);
}


details summary::-webkit-details-marker,
details summary::marker {
    display: none ;
}


#why, #decolonial-practices, #commitment1, #commitment2, #commitment3, #reusing, #referencing, #legality, #invitation{
  scroll-margin-top: 300px;
}



/* PRINT ZONE */

@media print {

  h1 {
    font-size: 60pt;
    line-height: 55pt;
  }  
  h2 {
   font-size: 35pt;
   line-height: 35pt;
   margin-right: 2em;
  }  
  h3{
    margin-right: 1em;
  }
  h4 {
    display: none !important;
  }
  #glossary h4 {
    display: inline-block !important;
    float: left;
    font-size: 12pt !important;
    line-height: 10pt !important;
    padding: 0;
    margin: 0;
  }

  #glossary p:first-of-type{
    margin-top:18px;
  }
  #glossary h4:first-of-type{
    margin-top:18px;
  }

  #glossary p {
  line-height: 1.2;
  display: block;
  text-indent: 6px;
}
  aside {
    position: relative;
    max-height: none;

  }

  p {
    font-size: 12pt;
    line-height: 16pt;
    margin: 1em 4em 1em 0em;
    page-break-inside: avoid; 
    }

    p a {
  border: 1.5px solid black;
}

  p:nth-of-type(11) {
    break-inside: auto; 
    }

   aside p {
    font-size: 9pt;
    line-height: 12pt;
   }

   blockquote {
    font-size: 8pt;
    line-height: 11pt;
   }

  main {
    display: block;
  }

  main details {
    break-inside: avoid; 
  }

  main details:first-of-type,
  main details:nth-of-type(4){
    break-inside: auto;
  }
  aside #glossary { 
    page-break-inside: avoid; 
    column-count: 2;
     -webkit-column-count: 2;
     -moz-column-count: 2
  }

  #commitments ul li{
   page-break-inside: avoid; 
  }

  aside #glossary p { 
      margin-right: 0;
   }

   a::after{
   font-family: 'TGL';
   content: " → " attr(href) " ";
   color : purple;
   font-size: 9pt;
   }

   #what-is p:nth-of-type(4)  a::after,
   #pause p:first-of-type a::after,
   #invitation p:first-of-type a::after{
   font-family: 'TGL';
   color : purple;
   font-size: 9pt;
   }

  #what-is p:nth-of-type(4)  a::after{
      content: " see What is CC2r?";
  }

  /* #pause p:first-of-type a::after{
      content: " see Pause: Reflecting on Reuse";
  } */

 #invitation p:first-of-type a::after{
      content: " see CC2r as an invitation";
  }


a[href="#pause"]::after{
    content: " see Pause: Reflecting on Reuse";
}
a[href="#extractivism"]::after{
    content: " see Glossary";
}

a[href="#glossary"]::after{
    content: " see Glossary";
}



  #title h5 {
      position: initial;
    }
  .button {
    display: none;
  }



}

/* //////////// Mobile //////////////*/

@media only screen and (max-width: 600px){

    #title {
     flex: 1 100%;
     padding: 0.5rem 2rem 2rem 2rem;
    }

    h1 {
    font-size: 3rem !important;
    }
    #title h5 {
      position: absolute;
    }
    h2 {
    font-size: 2.5rem !important;
    }
    h4 + h4 {
        margin-top: 0;
    }
  
    main details {
        flex: 1 100% !important;
    }
    main details#commitments summary h4, 
    main details#how-to summary h4, 
    main details#what-is summary h4 {
    flex: 1 100vw;
    }

}