@font-face{
    font-family: "cirruscumulus";
    src: url("cirruscumulus/CirrusCumulus.woff") format("woff");
   font-weight: 900;
    font-style: normal;
}
@font-face{
    font-family: "clt absans";
    src: url("clt absans/Absans-Regular.woff") format("woff");
    src: url("clt absans/Absans-Regular.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
  }

  @font-face{
    font-family: "terminal grotesque";
    src: url("terminal grotesque/terminal-grotesque-webfont.woff") format("woff");
    src: url("terminal grotesque/terminal-grotesque-webfont.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'VG5000';
    src: url("vg5000/VG5000-Regular_web.woff") format("woff");
    src: url("vg5000/VG5000-Regular_web.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

.intention{
  text-align: center;
}

.explication1 {
  text-align: center;
 
}

.svg{
  position: absolute;
  left: 18em;
}

.semestre{
  position:relative;
  left: 27em;
}

.phrase3{
  text-align: center;
}

.basdepage{
text-align: center;

}

header {
    background-color: black;
    color: rgb(0, 255, 0) ;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    }
  
    .intro {
    font-family: "clt absans" ;
      font-style: italic;
      font-size: 1.50em;
  }

  h1{
    line-height: 1.1;
    text-align: center;

    font-family:"VG5000" ;
    font-size: 8vw;
    text-wrap: balance; 
  }

  a{
    text-align: center;
  }

.liste{
  position: absolute;
  right: 8em;
  top: 435em;
}

h2{
  font-size: 5em;
  font-family: "VG5000";
  grid-column:2fr;
  color: blue;
  text-align: center;
}

body{
  background-color:   black; 
}
 article{
  
  color: red ;
  color: 672ec8;
font-family: "clt absans";
max-width: 70em;
padding: 2em;
hyphens: auto;
margin: 0 auto;


 }

 .phrase{
  text-align: center;
  
 }




 .lignePerso{
  filter: drop-shadow( 10px 10px 10px rgb(255, 255, 255));
  stroke-width: 5px;
  stroke: white;
 }

 #duree1, #rduree1{
  background-color: red;
}

#duree2, #rduree2{
  background-color:red;
}

#duree3, #rduree3{
  background-color:red;
}

#duree4, #rduree4{
  background-color:red;
}

#duree5, #rduree5{
  background-color: red;
}

#duree6, #rduree6{
  background-color:red;
}

#duree7, #rduree7{
  background-color: red;
}

  img {
    
    max-width: 60%;
    
}


ul {
  
  display: grid;
 grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 15px;

  list-style: none;
  padding: 0;
  grid-column: 1 / span 6;}


.intention {
  padding: 2em;
  font-size: 1.7em;
  max-width: 45em;
hyphens: auto;
margin: 0 auto;
}

.paragraphe{
  max-width: 45em;

}


.semestre {
  max-width: 30%;
    
}

.montagne{
  position: relative;  
}

.montagne img{
  position: absolute;
  pointer-events: none;
  left: 0;
  filter: grayscale(100%);
}

.montagne svg{
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  height: 100%;
  width: auto;
  position:absolute;
  top: 0;
  left: 0;
}

.montagne svg {
  pointer-events: none;
}

.montagne svg #Calque_2{
  pointer-events: none;
}
.montagne svg #Calque_1{
  pointer-events: all;
}

#montagne1{
  position: relative;
}
#tache{
  position: absolute;
left: 0;
}

#neige{
  position: absolute;
left: 0;  

}#crete{
  position: absolute;
left: 0;  

}
#lac{
  position: absolute;
left: 0;  

}
#grotte{
  position: absolute;
left: 0;  

}
#foret{
  position: absolute;
left: 0;  

}
p{
  max-width: 70em;
}
.hebdomadaire{
  display: flex;
  flex-direction: column;

}

;.hebdomadaire svg{
  font-family: "clt absans";
}
 #crete1 {
  color: rgb(255, 0 ,0);
}

.foret1{
  color: rgb(0, 0, 255);
}

.grotte1{
  color: rgb(0, 255, 0);
}

.lac1{
  color: rgb(255, 255, 0);
}

.tache1{
  color: rgb(255, 153, 0);
}

.neige1{
  color: rgb(0, 255, 255);
}