@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&family=Kanit:ital,wght@1,600&display=swap');
html{
  scroll-behavior: smooth;
  background-color:#000000;
  font-family: 'Kanit', sans-serif;
}
 /* Navbar container */
 .navbar {
   
   display: flex;
   position: fixed;
   background-color: rgba(7, 5, 134, 0.425);
   font-family: 'Kanit', sans-serif;
   border-radius: 20px;
   z-index: 3;
}

/* Links inside the navbar */
.navbar a {
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 /* Navbar container */
 .navbarr {
   
  display: flex;
  position: fixed;
  bottom: 0;
   margin-bottom: 1em;
  background-color: rgba(7, 5, 134, 0.425);
  font-family: 'Kanit', sans-serif;
  border-radius: 20px;
  z-index: 3;
}

/* Links inside the navbar */
.navbarr a {
 font-size: 16px;
 color: white;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.navbar a:hover {
  background-color: rgba(255,41,117,0.7);
  border-radius: 20px;
}
.navbarr a:hover{
  background-color: rgba(255,41,117,0.7);
  border-radius: 20px;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: fixed;
  background-color: rgba(7, 5, 134, 0.425);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: rgba(255,41,117,0.45);
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
} 
.burger{
    display: none;
  }
.logo{
display: grid;
place-items: center;
grid-column: 1/-1;
grid-row: 1/-1;
grid-gap: 10px;
width: 100%;
height: 100vh;
  
}
#logo{
  width: 60%;
}

section{
  display: grid;
  place-items: center;
  gap: 5rem;

}
section .area{
  display: grid;
  place-items:  center;
  background-color: rgba(7, 5, 134, 0.425);
  border-radius: 30px;
  width: 80%;
  backdrop-filter: blur(10px);
}

section h2{
  color:rgb(248, 30, 255); 
  font-size: 2em;
  text-shadow: 1px 1px 3px rgb(0, 0, 0);
  font-family: 'Fjalla One', sans-serif;
}
section p{
  color:white;
  font-family: 'Kanit', sans-serif;
  text-shadow: 1px 1px 3px rgb(255, 0, 212);
  font-size: 2em;
  width: 90%;
}
.loisirs{
  margin-top: 2em;
  display: flex;
   align-items: center;
  flex-direction: row;
  width: 90%
  
}
.loisirs div{
  display: flex;
  flex-direction: column;  
  width: 100%;
  align-items: center;
  text-align: center;
}
.loisirs p{
  color: #ff901f;
}
.loisirs a{
  text-decoration: none;
  color: white;
  font-size: 10px;
}
.loisirs div img{
  background-color: rgba(93, 5, 134, 0.425);
  border: solid 8px rgba(93, 5, 134);
  border-radius: 20px;
  width: 50%;
  aspect-ratio: 1/1;
  scale: 1.2
}
.container{
    display: grid;
    grid-template-columns: repeat(2,auto);
    gap: 5%;
    width: 95%;
    margin-bottom: 2em;
}
.progressbar-wrapper {
  background-color: rgba(7, 5, 134, 0.425);
  color: white;
  border-radius: 15px;
  font-family: 'Kanit', sans-serif;
  text-shadow: 1px 1px 3px rgb(7, 5, 134);
  margin-bottom: 2em;
}

.progressbar {
  background: linear-gradient(236deg, rgba(242,34,255,0.8) 23%, rgba(140,30,255,0.8) 100%);
  color: white;
  padding: 1rem;
  text-align: right;
  font-size: 20px;
  border-radius: 15px;
}
.container-parcours{
    display: grid;
    grid-template-columns: repeat(2,auto);
    gap: 5%;
    width: 95%;
}
.container-parcours hr{
  color: #0081ff
}

.container-parcours em{
  color:white;
  font-family: 'Kanit', sans-serif;
  text-shadow: 1px 1px 3px rgb(255, 0, 212);
  font-size: 1em;
}
.container-parcours h4{
  color:#ff901f; 
  font-family: 'Kanit', sans-serif;
  text-shadow: 1px 1px 3px #035ee8;
  font-size: 1.5em;
  padding : 0;
  margin : 0;
}
.container-parcours h6{
  color: #ffd319;
  font-family: 'Kanit', sans-serif;
  text-shadow: 1px 1px 3px #035ee8;
  font-size: 1.3em;
  padding : 0;
  margin : 0;
}
.container-parcours ul{
  text-shadow: 1px 1px 3px rgb(255, 0, 212);
  color:white;
  font-family: 'Kanit', sans-serif;
  font-size: 1.6em;
  width: 90%;
}
.container-parcours  .from-cont p{
  font-size: 1.6em;
}
.container-parcours .pro-cont p{
  font-size: 1.6em;
}

.container-doc{
    display: grid;
    grid-template-columns: repeat(2,auto);
    gap: 5%;
    width: 95%;
  margin-bottom: 2em;
}
.container-doc div{
    display: grid;
  text-align: center;
}
.container-doc a{
  color: white;
  font-family: 'Kanit', sans-serif;
  text-shadow: 1px 1px 3px rgb(255, 0, 212);
  font-size: 2em;
  text-decoration: none;
  background-color: #ff901f;
  border: 0;
  border-radius: 30px;
}
.container-doc a:hover{

  background-color: #ff2975;
}
.container a{
  color:#ff901f;
  text-decoration: none;
  font-family: 'Kanit', sans-serif;
  text-shadow: 1px 1px 3px rgb(255, 0, 212);
  font-size: 2em;
  width: 90%;
}
.container a:hover{

 color: #ff2975;
}
.btssio{
  display: grid;
  width: 95%;
    place-items: center;
  grid-template-columns: repeat(2,auto);
  margin-bottom: 2em;
}
.projetBts{
  display: grid;
  width: 95%;
  place-items: center;
  gap: 2em;
  grid-template-columns: repeat(3,auto);
  margin-bottom: 2em;
}

.projetBts img{
   max-width: 100%;
 border-style: solid;
 border-image: linear-gradient(to right, #ff901f, rgb(248, 30, 255)) 1;
}

.stage-titre{
  color:#ff901f; 
}
#logo-win{
  min-width: 300px;
}
.btssio .left{
  display: grid;
  place-items: center;
  font-size: 0.5em;
    border-radius: 30px;
  background-color: rgba(157, 98, 185, 0.3);
}
.btssio .left img{
  max-width: 500px;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 2em;
  border-radius: 20px;
}
.contact{
  display: grid;
  width: 95%;
  grid-template-columns: repeat(2,auto);
  margin-bottom: 2em;
}

.contact .left{
  display: grid;
  place-items: center;
  grid-gap: 2px;
}
.contact .left img{
  max-width:700px;
}
.contact .left a{
  text-decoration: none;
  text-shadow: 1px 1px 3px rgb(255, 0, 212);
  color: white;
  font-family: 'Kanit', sans-serif;
}

.contact-form{
  display: grid;
  gap: 1em;
  color:white;
  font-family: 'Kanit', sans-serif;
  text-shadow: 1px 1px 3px rgb(255, 0, 212);
  font-size: 2em;
}
.contact-form button{
  color: white;
  font-family: 'Kanit', sans-serif;
  text-shadow: 1px 1px 3px rgb(255, 0, 212);
  font-size: 1em;
  background-color: #ff901f;
  border: 0;
  border-radius: 30px;
}
.contact-form button:hover{

  background-color: #ff2975;
}
.contact-form input{
  color: white;
  font-size: 0.5em;
  font-family: 'Kanit', sans-serif;
  background-color: rgba(140,30,255,0.6);
  border: 0;
  border-radius: 30px;
}
.contact-form textarea{
  color: white;
  font-family: 'Kanit', sans-serif;
  background-color: rgba(140,30,255,0.6);
  border: 0;
  border-radius: 20px;
}
.test{
  background-color:none;
  text-shadow: 1px 1px 3px rgb(255, 0, 212);
  color:white;
  font-family: 'Kanit', sans-serif;
  font-size: 2em;
  width: 90%;
}


#video-container video{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
#video-container{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
#PDF{
  display: block;
}
#error{
  display: none;
}

.loader-wrapper {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #000000;
  display:flex;
  z-index: 5;
}
.circles {
  z-index: 6;
  width:300px;
  height:300px;
  position:relative;
  margin:auto;
}
.circles > * {
  background-color:transparent;
  box-sizing:border-box;
  border:5px solid rgb(184, 95, 236);
  border-top: 0 solid transparent;
  border-left: 0 solid transparent;
  border-radius: 50%;
  position:absolute;
  animation: spin 4s infinite linear alternate;
}
      
.circle1 {
  width: 300px; height: 300px;
  animation-delay:-5s;    
  border-color:rgb(200, 111, 235);
}
.circle2 {
  width: 280px; height: 280px;
  top:10px;left:10px;
  animation-delay:-4.9s;
  border-color:rgba(200, 111, 235, .95);
}
.circle3 {
  width: 260px; height: 260px;
  top:20px;left:20px;
  animation-delay:-4.8s;
  border-color:rgba(200, 111, 235, .9);
}
.circle4 {
  width: 240px; height: 240px;
  top:30px;left:30px;
  animation-delay:-4.7s;
  border-color:rgba(200, 111, 235, .85);
}
.circle5 {
  width: 220px; height: 220px;
  top:40px;left:40px;
  animation-delay:-4.6s;
  border-color:rgba(200, 111, 235, .8);
}
.circle6 {
  width: 200px; height: 200px;
  top:50px;left:50px;
  animation-delay:-4.5s;
  border-color:rgba(200, 111, 235, .75);
}
.circle7 {
  width: 180px; height: 180px;
  top:60px;left:60px;
  animation-delay:-4.4s;
  border-color:rgba(200, 111, 235, .7);
}
.circle8 {
  width: 160px; height: 160px;
  top:70px;left:70px;
  animation-delay:-4.3s;
  border-color:rgba(200, 111, 235, .65);
}
.circle9 {
  width: 140px; height: 140px;
  top:80px;left:80px;
  animation-delay:-4.2s;
  border-color:rgba(200, 111, 235, .6);
}
.circle10 {
  width: 120px; height: 120px;
  top:90px;left:90px;
  animation-delay:-4.1s;
  border-color:rgba(200, 111, 235, .55);
}
.circle11 {
  width: 100px; height: 100px;
  top:100px;left:100px;
  animation-delay:-4s;
  border-color:rgba(200, 111, 235, .5);
}
.circle12 {
  width: 80px; height: 80px;
  top:110px;left:110px;
  animation-delay:-3.9s;
  border-color:rgba(200, 111, 235, .45);
}
.circle13 {
  width: 60px; height: 60px;
  top:120px;left:120px;
  animation-delay:-3.8s;
  border-color:rgba(200, 111, 235, .4);
}
.circle14 {
  width: 40px; height: 40px;
  top:130px;left:130px;
  animation-delay:-3.7s;
  border-color:rgba(200, 111, 235, .35);
}
.circle15 {
  width: 20px; height: 20px;
  top:140px;left:140px;
  animation-delay:-3.6s;
  border-color:rgba(200, 111, 235, .3);
}
      
@keyframes spin {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);};
}
      

@media (max-width : 820px){
  #PDF{
    display: none;
  }
  #error{
    display: block;
    position: relative;
    top:10%;
  }
  #logo{
    width: 100%;
  }
section {
  display: flex;
  flex-direction:  column;
 font-size: 10px;
  width:  100%;
}
  section .area{

  width: 100%;

}
.loisirs{
  display: flex;
   align-items: center;
  flex-direction: row;
  width: 90%
  
}
.loisirs div{
  display: flex;
  flex-direction: column;  
  width: 90%;
  align-items: center;
  text-align: center;
}
.loisirs p{
  color: #ff901f;
  font-size: 1.9em;
}
.loisirs a{
  text-decoration: none;
  color: white;
  font-size: 5px;
}
.loisirs div img{
  background-color: rgba(93, 5, 134, 0.425);
  border: solid 5px rgba(93, 5, 134);
  border-radius: 20px;
  width: 60%;
  aspect-ratio: 1/1;
}
.btssio{
  display: flex;
  flex-direction:  column;

}
  .contact{
  display: flex;
  flex-direction:  column;
  margin-bottom: 5em;
}
  .contact .left{
  display: flex;
  flex-direction:  column;
    justify-content: center;
    margin-bottom: 5em;
}

.contact-form{
  display: flex;
  flex-direction:  column;
  font-size: 20px;
}
  .contact-form input{
  color: white;
  font-size: 15px;

}
.contact-form textarea{
  color: white;
  width: 500px;
  font-family: 'Kanit', sans-serif;
  background-color: rgba(140,30,255,0.6);
  border: 0;
  border-radius: 20px;
}
}

@media (max-width : 430px){

  #CV{
    display: none;
  }
  #error{
    display: block;
    position: relative;
    top:10%;
  }
  #logo{
    width: 100%;
  }
section {
  display: flex;
  flex-direction:  column;
 font-size: 10px;
  width:  100%;
}
  section .area{

  width: 100%;

}
  
  .loisirs{
  display: flex;
   align-items: center;
  flex-direction: column;
  width: 90%
  
}
.loisirs div{
  display: flex;
  flex-direction: column;  
  width: 90%;
  align-items: center;
  text-align: center;
}
.loisirs p{
  color: #ff901f;
  font-size: 1.9em;
}
.loisirs a{
  text-decoration: none;
  color: white;
  font-size: 10px;
}
.loisirs div img{
  background-color: rgba(93, 5, 134, 0.425);
  border: solid 5px rgba(93, 5, 134);
  border-radius: 20px;
  width: 60%;
  aspect-ratio: 1/1;
}
.btssio{
  display: flex;
  flex-direction:  column;

}
  .btssio .left img{
  width: 200px;
}
  .contact{
  display: flex;
  flex-direction:  column;
  margin-bottom: 5em;
}
  .contact .left{
  display: flex;
  flex-direction:  column;
    justify-content: center;
    margin-bottom: 5em;
}
  .contact .left img{
    max-width: 100%;
  }
.contact-form{
  display: flex;
  flex-direction:  column;
  font-size: 20px;
}
  .contact-form input{
  color: white;
  font-size: 10px;
  width: 100%;
    height: 2em;

}
.contact-form textarea{
  color: white;
  width: 200px;
  font-family: 'Kanit', sans-serif;
  background-color: rgba(140,30,255,0.6);
  border: 0;
  width: 100%;
  border-radius: 20px;
}
  .container-doc{
    display: flex;
    flex-direction:column;
    justify-content: center;
    width:  90%;
  margin-bottom: 2em;
}
  .container .progressbar-wrapper{
    display: flex;
  }
  
  .burger{
    position: fixed;
    display: block;
    width: 35px;
    z-index: 4;
  }

  .navbar{
    display: none;
    text-align: center;
    flex-direction: column;
    background-color: rgba(140,30,255,0.8);
    height: 50vh;
    margin-top: 2.5em;
    border-radius: 30px;
  }
  .navbar[style*="display: block"] {
  display: flex !important;
}
    .container-parcours {
    display: flex;
    flex-direction: column;
  }

}