@charset "utf-8";

/*Font*/
@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&family=Geo&display=swap');

/* CSS Main */
html{
  height: 100%;
  margin: 0;
}

body {
  width:100%;
  height: auto;
  margin: 0;
background: #171717;
background: linear-gradient(0deg, rgba(23, 23, 23, 1) 0%, rgba(59, 59, 59, 1) 100%);
}

/* Style pour mobile (écrans plus petits que 768px) */
@media screen and (max-width: 767px) {
  #content {
    width: 80vw !important;
    padding-left: 45px !important;
    padding-right: 20px !important;
  }
  #welcome {
    font-size: 26px !important;
    width: 60% !important;
  }
  #contactform input {
    width: 200px!important;
  }
  #contactform textarea {
      width: 187px!important;
  }
  #logo_welcome {
  margin-top: -210px!important;
  }
  #Donate_panel {
  width: 60vw!important;
  }
  #container_about {
    justify-content: left!important;
  }
}
/* TEXT */
#lateral_bar h1 {
font-family: "Fjalla One", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  color: #ebff00;
  text-align: center;
}

#lateral_bar h2 {
   font-family: "Geo", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  color: white;
 margin: 0;
 padding-top: 2px;
}
.acordion {
width: 17px;
  height: 18px;
  float: right;
  color: #ebff00;
  font-size: 19px;
  position: absolute;
  right: 13px;
  margin-top: -19px;
  border-radius: 4px;
 
}


#lateral_bar h3 {   
  font-family: "Geo", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  color: white;
  margin-left: 10px;
}
#lateral_bar h3 a {   
 box-shadow: inset 0 0 0 0 #000000;
  color: #ffffff;
	padding: 3px .25rem;
	margin: 0 -.25rem;
  transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
#lateral_bar h3 a:hover { 
 color: #000000;
  box-shadow: inset 200px 0 0 0 #ffffff;
}

#lateral_bar h4 {   
font-family: "Geo", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  color: #ebff00;
margin: 8px;
  text-align: center;

}

#lateral_bar a {
  color: #ffffff;
  text-decoration: none;
}
#lateral_bar hr {
border: 1px solid #2b2b2b;
}

/*Structure*/
#top_lateral_bar {
  width: 100%;
  background-color: #ebff00;
  float: left;
  margin-bottom: 15px;
  border-bottom: 3px solid #000;
}
#tick_menu {
  float: right;
  padding: 5px;
  cursor: pointer;
  color: black;
}
#lateral_bar {
  position: fixed;
  
 width: 230px;
height: 100vh;
 top: 0;
    left: 0;
background: #000000;
background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(38, 38, 38, 1) 100%);
  border-right: 1px #2b2b2b solid;
   transform: translateX(0);
  transition: transform 0.3s ease;
  z-index: 10;
  box-shadow: 12px 2px 32px 0px rgba(0,0,0,1);
  z-index: 60;
}
/* état caché */
#lateral_bar.closed {
  transform: translateX(-87%);
}
#arbor {
  height: 40vh;
  width: 100%;
  z-index: 10; 
  position: relative;


}
.arbor_index {
background: #000;
  padding: 5px;
  border-radius: 7px;
  width: 94%;
  float: left;
  height: 23px;
  margin-top: 15px;
  cursor: pointer;
  border: 1px solid #292929;
}

.section {
  display: none;
  overflow: hidden;
  width: 100% ;
  float: left;

}
.active, .section:hover{
  display: block;
   
}

.arbor_tick {
background: #000;
  padding: 5px;
  border-radius: 7px;
  width: 94%;
  float: left;
  height: 23px;
  margin-top: 7px;
  cursor: pointer;
  border: 1px solid #292929;
}

#txt_menu_global {
  padding: 10px;
}
#contact {

  position: absolute;
  bottom: 15px;
  background-color: #212121;
  font-family: "Geo", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  color: #ebff00;
  text-align: center;
  padding: 15px;
  margin-left: 50px;
  border-radius: 8px;
    transition: 0.3s;
     z-index: 0; 
}
#contact:hover {
    background-color: #ebff00;
    color: #212121;
}

#coffee {
  position: absolute;
  bottom: 75px;
  left: 53px;
  border: 2px solid #292929;
  font-family: "Geo", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  color: #ebff00;
  padding: 10px;
  transition: 0.3s;
  z-index: 0; 
  text-align: center;
}
#coffee:hover {
  border: 2px solid #ebff00;
}

#contactform {
   width: 100%;
  height: 100vh;
  margin: 0 auto;
  position: relative;
display: none;
justify-content: center;
  align-items: center;
  text-align: center;
  font-family: "Fjalla One", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  color: #9f9f9f;
  text-align: right;
  
}

#contactform input {
 border-bottom: 1px solid white;
  background: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  padding: 5px;
   font-family: "Fjalla One", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  color: white;
  max-width: 400px;
  width: 400px;
}
#contactform textarea {
 font-family: "Fjalla One", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  color: white;
   border: 1px solid #ffffff;
     background: transparent;
      width: 386px;
       padding: 10px;
       resize: none;
}
#contactform input:focus, #contactform textarea:focus {
    outline: none; /* supprime le liseré */
    box-shadow: none; /* au cas où il y aurait une ombre ajoutée */
}
#contactform label {
  margin-top: 8px;
  margin-bottom: 0px;
}

#sendemail {
 padding: 10px;
  background: #ffffff;
  color: rgb(0, 0, 0);
  border: none;
  border-radius: 8px;
  margin-top: 14px;
   font-family: "Fjalla One", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
 transition: 0.3s;
}
#sendemail:hover {
 background: #ebff00;
  color: black;
}

#contactform button {
 cursor:pointer;
}

#result {

  
  position: absolute;
  height: 70px;
  width: 70px;
  margin: 0 auto;
  color: #ebff00;
  font-size: 60px;
}

/* Donate */
#donate {
   width: 100%;
  height: 100vh;
  margin: 0 auto;
  position: relative;
display: none;
justify-content: center;
  align-items: center;
  text-align: center;

  
}
#Donate_panel {
font-family: "Fjalla One", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 23px;
  color: #9f9f9f;
  text-align: justify;
  width: 20vw;
}

#donate_btn {
padding: 10px;
  font-family: "Fjalla One", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  color: #000000;
  background: #ebff00;
  width: fit-content;
  border-radius: 8px;
  margin: 0 auto;
    margin-top: 0px;
  margin-top: 13px;
  box-shadow: -1px -1px 20px 1px rgba(0,0,0,0.75);
  text-align: center;
}


 /* Content */
  #content {
height: 88vh;
  overflow-y: auto;
  width: 50vw;
  margin: 0 auto;
  margin-bottom: 35px;
   margin-top: 35px;
  font-family: "Fjalla One", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #939393;
 /*background-color: black; */
  padding: 10px;
  position: relative;
  padding-right: 20px;
  
  }

  #content h1 {
font-family: "Fjalla One", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 26px;
  color: #ffffff;
  text-align: left;
  }
    #content .gotext {
font-family: "Fjalla One", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 26px;
  color: #ffffff;
  text-align: center;
  }
   #content .gotext a {
color: #ebff00;
text-decoration: none;
   }

    #content h2 {
font-family: "Fjalla One", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  color: #ffffff;
  text-align: left;
  }
 #content table, td {
  border: 1px solid #939393;
 }
  #content hr {
 border: 1px solid #939393;
 }

 #go_github {
  width: 100px;        
  height: 100px;      
   color: #000000;
  background-color: #ebff00; 
  border-radius: 50%;  
font-size: 81px;
  line-height: 99px;
margin: 0 auto;
  
  margin-top: 30px;
 }
#top_github_banner {
font-family: "Fjalla One", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  background: #ebff00;
  color: #000000;
  position: fixed;
  top: 15px;
  padding: 5px;
  border-radius: 4px;
}



  #content h1 a {
    font-family: "Fjalla One", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 26px;
  color: #ebff00;
  text-align: center;
  text-decoration: none;
  }

#welcome {
  width: 400px;
  height: 100vh;
  margin: 0 auto;
  position: relative;
  display: none;
  font-family: "Fjalla One", sans-serif;
  font-weight: 400;
  font-style: normal;
 font-size: 36px;
  
background: #F6F8F9;
background: radial-gradient(circle farthest-corner at center center, #FFF 0%, #9b9b9b 34%, #252525 79%, #4A4A4A 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
  /* centrage */
  display: none;  
  justify-content: center; /* horizontal */
  align-items: center;     /* vertical */

  text-align: center;
}
#logo_welcome {
  width: 100%;
  position: absolute;
  text-align: center;
  margin-top: -245px;
}

#container_about {

  height: 88vh;
  /*background: #000;*/
  display: flex;
  align-items: center;
  /*justify-content: center;*/
   justify-content: flex-start;
  font-family: "Fjalla One", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  color: #aaa;
  text-align: justify;
 flex-direction: column;

}

#container_about p:first-of-type::first-letter {
  font-size: 3em;
  font-weight: bold;
  float: left;
  line-height: 1;
  margin-right: 8px;
    color: #ebff00;
}
#container_about hr {
border: 1px solid #2d2d2d;
width: 100%;
}


#translateSelect {
  padding: 8px 12px;
  border-radius: 8px;
  border: none;
 background: #272727;
  color: #ebff00;
  font-family: "Fjalla One", sans-serif;
  font-size: 14px;
  cursor: pointer;
  float: right;
  width: 100px;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  position: relative;
  z-index: 50;
}
#translateSelect_global {
width: 130px;
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 50;
  font-size: 20px;
  color: #ebff00;
  
  line-height: 1.8;
 
  text-align: left;
}

/*BAckground effect*/

@keyframes move {
    100% {
        transform: translate3d(0, 0, 1px) rotate(360deg);
    }
}

.background {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: #1d1d1d;
    overflow: hidden;
}

.background span {
    width: 50vmin;
    height: 50vmin;
    border-radius: 50vmin;
    backface-visibility: hidden;
    position: absolute;
    animation: move;
    animation-duration: 23;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}


.background span:nth-child(0) {
    color: #0e0e0e;
    top: 6%;
    left: 91%;
    animation-duration: 99s;
    animation-delay: -263s;
    transform-origin: -24vw -15vh;
    box-shadow: -100vmin 0 13.309358547244267vmin currentColor;
}
.background span:nth-child(1) {
    color: #0e0e0e;
    top: 17%;
    left: 93%;
    animation-duration: 101s;
    animation-delay: -44s;
    transform-origin: 7vw -22vh;
    box-shadow: -100vmin 0 12.967086738371144vmin currentColor;
}
.background span:nth-child(2) {
    color: #717171;
    top: 9%;
    left: 58%;
    animation-duration: 17s;
    animation-delay: -180s;
    transform-origin: 6vw 5vh;
    box-shadow: 100vmin 0 13.010517083589919vmin currentColor;
}
.background span:nth-child(3) {
    color: #0e0e0e;
    top: 50%;
    left: 67%;
    animation-duration: 274s;
    animation-delay: -64s;
    transform-origin: 6vw 8vh;
    box-shadow: -100vmin 0 12.86694500659975vmin currentColor;
}
.background span:nth-child(4) {
    color: #717171;
    top: 49%;
    left: 31%;
    animation-duration: 188s;
    animation-delay: -40s;
    transform-origin: 9vw -1vh;
    box-shadow: -100vmin 0 13.001175375189408vmin currentColor;
}
.background span:nth-child(5) {
    color: #0e0e0e;
    top: 89%;
    left: 14%;
    animation-duration: 180s;
    animation-delay: -56s;
    transform-origin: -10vw 0vh;
    box-shadow: 100vmin 0 12.857395927778516vmin currentColor;
}
.background span:nth-child(6) {
    color: #717171;
    top: 57%;
    left: 84%;
    animation-duration: 131s;
    animation-delay: -264s;
    transform-origin: 19vw 15vh;
    box-shadow: -100vmin 0 12.652042674474936vmin currentColor;
}
.background span:nth-child(7) {
    color: #717171;
    top: 4%;
    left: 23%;
    animation-duration: 184s;
    animation-delay: -10s;
    transform-origin: -11vw -18vh;
    box-shadow: 100vmin 0 12.979254092858943vmin currentColor;
}
.background span:nth-child(8) {
    color: #0e0e0e;
    top: 66%;
    left: 6%;
    animation-duration: 137s;
    animation-delay: -46s;
    transform-origin: 22vw 10vh;
    box-shadow: -100vmin 0 12.777790925050294vmin currentColor;
}
.background span:nth-child(9) {
    color: #0e0e0e;
    top: 83%;
    left: 65%;
    animation-duration: 113s;
    animation-delay: -45s;
    transform-origin: -21vw 4vh;
    box-shadow: 100vmin 0 13.431612630074905vmin currentColor;
}
.background span:nth-child(10) {
    color: #0e0e0e;
    top: 98%;
    left: 22%;
    animation-duration: 144s;
    animation-delay: -228s;
    transform-origin: 22vw 23vh;
    box-shadow: 100vmin 0 13.3363368519658vmin currentColor;
}
.background span:nth-child(11) {
    color: #717171;
    top: 75%;
    left: 62%;
    animation-duration: 249s;
    animation-delay: -136s;
    transform-origin: 13vw -23vh;
    box-shadow: 100vmin 0 13.284275110278088vmin currentColor;
}
.background span:nth-child(12) {
    color: #717171;
    top: 94%;
    left: 93%;
    animation-duration: 143s;
    animation-delay: -105s;
    transform-origin: -2vw 24vh;
    box-shadow: -100vmin 0 12.715660637284222vmin currentColor;
}
.background span:nth-child(13) {
    color: #717171;
    top: 92%;
    left: 75%;
    animation-duration: 118s;
    animation-delay: -256s;
    transform-origin: -21vw -2vh;
    box-shadow: -100vmin 0 13.100903514038036vmin currentColor;
}
.background span:nth-child(14) {
    color: #717171;
    top: 91%;
    left: 53%;
    animation-duration: 86s;
    animation-delay: -67s;
    transform-origin: -14vw 6vh;
    box-shadow: -100vmin 0 12.839913921795553vmin currentColor;
}
.background span:nth-child(15) {
    color: #0e0e0e;
    top: 27%;
    left: 41%;
    animation-duration: 55s;
    animation-delay: -219s;
    transform-origin: 4vw 14vh;
    box-shadow: -100vmin 0 12.67030184038237vmin currentColor;
}
.background span:nth-child(16) {
    color: #717171;
    top: 56%;
    left: 63%;
    animation-duration: 208s;
    animation-delay: -105s;
    transform-origin: 17vw 24vh;
    box-shadow: -100vmin 0 12.583885757493075vmin currentColor;
}
.background span:nth-child(17) {
    color: #0e0e0e;
    top: 60%;
    left: 45%;
    animation-duration: 266s;
    animation-delay: -63s;
    transform-origin: -17vw -2vh;
    box-shadow: -100vmin 0 12.527923302164918vmin currentColor;
}
.background span:nth-child(18) {
    color: #717171;
    top: 32%;
    left: 65%;
    animation-duration: 83s;
    animation-delay: -123s;
    transform-origin: -10vw 13vh;
    box-shadow: 100vmin 0 12.553702061025609vmin currentColor;
}
.background span:nth-child(19) {
    color: #0e0e0e;
    top: 83%;
    left: 92%;
    animation-duration: 106s;
    animation-delay: -74s;
    transform-origin: 19vw 18vh;
    box-shadow: -100vmin 0 12.676505749625322vmin currentColor;
}

.glitch img {
  animation: breathe 5s ease-in-out infinite;
  filter: drop-shadow(0 1px 8px rgb(121, 125, 73));
}

@keyframes breathe {
  0% {
    opacity: 0.2;

  }
    30% {
    opacity: 0.2;
    }
  50% {
    opacity: 0.4;

  }

   80% {
    opacity: 0.4;

  }
  100% {
    opacity: 0.2;

  }
}