*{
    margin:0;
    padding:0;
    text-decoration: none;
    list-style: none;
}
canvas{
  position: absolute;
}
#outdatedA{color:crimson; font-size: 20px;}
#alert-outdated{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px;
  background: rgb(3, 19, 45);
  color: white;
  z-index: 2000;
}
#contact{
  margin-bottom: 30px;
}
#alert-outdated span{
  color: crimson;
  font-weight: bold;
}
/*loader*/
#loader-div{
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgb(3, 19, 45);
  z-index: 2000;
  text-align: center;
  transition: 1s;
}
#loader-content{
  position: absolute;
  z-index: 2001;
  width: 100%;
  height: 100%;
}
.spanloader{
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 50vh 10px 0 10px;
  transform: translateY(-50%);
  border-radius: 5px;
  background-color: rgb(254, 254, 224);
  animation: loaderAnim 1s infinite;
  animation-direction: alternate;
}
.spanloader:nth-child(2){
  animation-delay: 0.5s;
}
.spanloader:nth-child(3){
  animation-delay: 1s;
}
@keyframes loaderAnim{
  0%{

  }
  100%{
    transform: translateY(-40px);
  }
}
.loaderOut{
  opacity: 0;
}
.unscrollable{
  overflow-y: hidden;
}
.loader-text
{
  color: rgba(255,255,255,0.5);
}
.loader-text a
{
  color: rgba(255,255,255,0.8);
}
/**/
body {
  background:linear-gradient(rgb(3, 19, 45),rgb(103, 99, 125));
}
html {
  scroll-behavior: smooth;
}
a,.cursorPointer{
    cursor: pointer;
}

.mailto{
  text-decoration: none;
  color: rgb(254, 254, 224);
}
@font-face{
  font-family: "Lobster";
  src:url("../polices/Lobster-Regular.ttf");
}
 
.screen{
  min-height: 100vh;
  border-bottom: solid 2px rgba(0,0,0,0.2) ;
  background: transparent;
  transition: 0.5s;
}
.center_content{
 text-align: center;
}

.hidden{
  display: none;
}
.white{
  color : rgba(254, 254, 224);
  font-size: 2em;
  text-align: center;
  padding: 10px;
  font-family: "Lobster";
  letter-spacing: 5px;
}
@media(min-width: 580px)
{
  .white{
    padding-top: 50px;
  }
  
}
.style_box{
  background-color: rgba(0,0,0,0.2);
  box-shadow: 0 0 10px 10px rgba(0,0,0,0.2);
}
/****************/
/*Navigation bar*/
/****************/
.nav_btn{
  display: none;
}
nav ul li{
  display: inline-block;
  font-family: "Lobster";
  letter-spacing: 2px;
  font-size: 1.2em;
  margin: 0 5px 0 5px;
  padding: 2px;
}
nav ul li a{
  color: rgb(200,0,40);
}
nav ul{
  text-align: center;
}
nav{
  position: fixed;
  padding: 10px;
  background-color: rgba(0,0,50,0.2);
  width: 100%;
  z-index: 1000; 
  transition: 0.1s 
}
nav li{
  transition: 0.3s
}
nav li:hover{
  border-bottom: solid 2px white;
}

@media(max-width: 750px)
{
  nav ul li{
   display: block;
   width: max-content;
   margin: 15px auto 15px auto;
  }
  nav li:hover{
    font-size: x-large;
  }
  nav ul{
    text-align: center;
  }
  nav{
    height: 100vh;
    background-color: rgba(0,0,50,0.95);
  }
  .nav_btn span {
    display: block;
    width: 100%;
    box-shadow: 0 2px 10px 0 rgba(0,0,0,0.3);
    border-radius: 3px;
    height: 8px;
    background: white;
    transition: 0.3s;
    position: relative;
    margin: 3px;
  }
  .btn {
    position: fixed;
    top:10px;
    left: 10px;
    width: 5vw;
    z-index: 1001;
  }
  .nav_btn{
    display: block;
  }
}


/************************/
/*presentation_container*/
/************************/

#presentation_container{
     background:url("../images/fond-1.jpg");
     background-size: cover;
     background-position:top center;
     transition:0.1s;
}

#presentation_me{
    display: inline-block;
    border:solid 2px rgb(0,0,0,0.5);
    margin: 0 5px 0 5px;
}
#my_profile{
    background-color: rgba(254, 254, 224,0.5);
    padding : 10px;
    margin : 10px;
    font-size: 2em;
    font-family: "Lobster";
    letter-spacing: 2px;
}
#actual_info{
    display: inline-block;
    background-color: rgba(254, 254, 224,0.5);  
    margin-top: 50px;
    padding : 10px;
    border-radius: 25px;
    transition:0.5s;
    margin-left: 5px;
    margin-right: 5px;
    font-size: 1.5em;
    color: black;
}

#actual_info:hover{
    background-color: rgba(1, 1, 31,0.5);
    color: rgb(254, 254, 224);
}

#presentation{
    margin-top: 50vh;
    transform: translateY(-50%);
    position: absolute;
    width: 100%;
    text-align: center;
    margin-left:auto;
    margin-right:auto;    
}


/************/
/***Skills***/
/************/
#skills{

}
.skill_part_border
{
  margin: 0 2vw 0 2vw;
  background-color: transparent;
  display: inline-block;
  border:solid 2px lightgrey;
  border-radius: 25px 0 25px 0;

}
.skill_part
{
  transition: 0.5s;
  padding: 10px;
  background-color: rgb(254, 254, 224);
  margin:5px;
  width: 15vw;
  min-width: max-content;
  border-radius: 25px 0 25px 0;
}
.selected{
  position: relative;
  background: linear-gradient(45deg, transparent,white,transparent);
  background-size: 80%;
  background-repeat: round;
  animation: animBtnSkill 6s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes animBtnSkill
{
  0%
  {
    background-position: -500%;
  }
  100%
  {
    background-position: 500%;
  }
}
#skill_display_content{

  position: relative;
  width: 100%;
}


@media (min-width: 593px)
{
  #skill_display_content{
    margin-top: 50vh;
    transform: translateY(-100%);
  }
}

#skill_display_content>div{
  margin-left: auto;
  margin-right: auto;
}

svg{
  width: 150px;
  height: 150px;
}
svg circle{
  fill: none;
  stroke: transparent;
  stroke-width: 10;
  stroke-linecap: round;
  transform: translate(5px,5px);
}
svg circle:nth-child(2)/*2nd circle*/
{
  stroke-dasharray: 440;
  stroke-dashoffset: 440;
  stroke: rgb(254, 254, 224);
}
.box{
  position: relative;
  display: inline-block;
  background-color: transparent;
  transition: 0.5s;
  margin:20px;
}
.box:hover{
  transform: translateY(-15px);
  margin: 25px;
}
.circle{
  width: 150px;
  height: 150px;

}
.circle_title{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #888888;
  font-size: larger;
}
.percentage{
  font-size: xx-large;
}

/**********/
/*About me*/
/**********/
#profil_pic img{
  height: 300px;
  width: 200px;
  object-fit: cover;
  border-radius: 5px;
  margin-left: auto;
  margin-right: auto;

}


#about_content{
  margin:0 5% 0 5%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 50vh;
  transform: translateY(-75%);

}
#about_text_content h2{
  margin-bottom: 15px;
  border-bottom: solid 2px rgb(200,0,40);
  display: inline-block;
  padding: 0 5px 5px 2px;
}
#about_text_content{
  width: 70%;
  font-size: larger;
  text-align: justify;
  color: rgba(254, 254, 224);
  margin-bottom:10px;
}

@media(max-width: 930px){
  #about_text_content{
    width: 60%;
  }
}

@media(max-width: 670px){
  #about_text_content,#profil_pic{
    width: 100%;
  }
  #about_content{
    margin-top: 5vh;
    transform: translateY(0%);
  }
  #profil_pic{
    width: 100%;
    text-align: center;
  }
  #profil_pic img{
    height: 200px;
    width: 150px;
    border-radius: 5px;
    margin-bottom: 10px;
  }
}


#select_about span{
  display: inline-block;
  width: 15px;
  border-radius: 50%;
  height: 15px;
  background: darkgrey;
  transition: 0.3s;
  position: relative;
  margin: 3px;
}
.about_selected{
  border: solid 2px lightgrey;
}
#select_about{
  padding: 10px;
}


/****************/
/*Qualifications*/
/****************/
#qualif_content div p{
  margin: 20px 5px 20px 5px;
}
#qualif_content{
  text-align: center;
}
#qualif_content>div{
  display: inline-block;
  margin:  50vh 5% 0 5%;
  transform: translateY(calc(-50% - 20px));
  width: 30%;
  padding: 5px;
  vertical-align:middle;
  min-height: max-content;
  color: rgba(0,0,80);
  font-size: larger;
  background-color: rgb(254, 254, 224);
  border-radius: 10px;
}
@media(max-width: 775px)
{
  #qualif_content>div{
    display: block;
    position: relative;
    top:0;
    left: 0;
    width: 80%;
    margin: 10px 0 10px 10%;
    transform: none;
  }
}
.crimson
{
  color: rgb(200,0,40);
  font-weight: bold;
}
.option_text{
  color: rgba(50,50,80);
  font-style: italic;
}
.mouvement{
  position: absolute;
  z-index: 100;
  left:-300%;
}

/*************/
/*Experiences*/
/*************/
#experiences{
  color: black;
}
#experiences a{
  color: black;
}
.card_expe{
  font-size: larger;
  width: 70%;;
  text-align: center;
  margin: 30px auto 30px auto;
  background-color: rgb(254, 254, 224);
  border-radius: 15px;
  transition: 2s;
  padding-bottom: 5px;
}
.clickable_expe:hover{
  transform: translateY(-10px);
  box-shadow: 5px 5px 5px black;
}
.card_expe_header
{
  padding: 5px 0 5px 0;
  border-radius: 15px 15px 0 0;
  background-color:  rgb(224, 224, 194);
}
.card_expe p{
  margin: 5px 0 5px 0;
}

/************/
/*References*/
/************/

.references_part{
  display: inline-block;
  vertical-align:top;
  width: 40%;
  min-height: 60%;
  margin-left: auto;
  margin-right: auto;
  color: rgb(254, 254, 224);
  font-size: larger;
}
#references>div{
  width: 100%;
  text-align: center;
  margin-top:  50vh;
  transform: translateY(calc(-50% - 20px));
}

.profil_ref_pic{
  border: solid 5px rgb(200,0,40);
  height: 45%;
  width: 45%;
  border-radius: 25%;
  margin-left: auto;
  margin-right: auto;
  transition: 0.5s
}
@media(max-width: 1000px)
{
  .profil_ref_pic
  {
    height: 70%;
    width: 70%;
  }

}
@media(max-width: 570px)
{
  .references_part
  {
    display: inline-block;
    width: 100%;
  }
  .profil_ref_pic
  {
    height: 40%;
    width: 40%;
  }
}
/*********/
/*Contact*/
/*********/
#contact{

}
form{
  margin:20px;
  color: white;
  text-align: center;
}
form p{
  margin:5px 20px 5px 20px;
}
label{
  display: block;
  font-family: "Lobster";
  letter-spacing: 2px;
  margin-top: 10px;
}
textarea{
  width: 60%;
  margin-top: 10px;
  padding: 2px;
}
input{
  width: 200px;
  height: 20px;
  border:none;
  border-bottom:solid 2px rgb(200,0,40);
  background-color: transparent;
  color: rgb(254, 254, 224);
  transition: 0.5s;
}

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px rgb(100,90,100) inset;
  background-color: transparent;
  border-radius: 5px;
  -webkit-text-fill-color: white;
}

#mail_send {
  background-color: rgb(200,0,40);
  color: rgb(254, 254, 224);
  border: transparent;
  border-radius: 10px;
  font-size: larger;
  transition: 0.5s;
  width: 100px;
  height: 30px
}
#mail_send:hover{
  background-color:  rgb(254, 254, 224);
  color: rgb(200,0,40);
  transform: rotate(5deg);
  border:solid 2px rgb(200,0,40);
}
@media(max-width: 500px)
{
  textarea{
    width: 100%;
  }
}
legend a{
  text-decoration: none;
  color: rgb(254, 254, 224);
  font-size: larger;
  margin:0 8px 0 8px;

}







/***********/
/*scrollbar*/
/***********/
::-webkit-scrollbar {
  width: 15px;
  height: 15px;
}
::-webkit-scrollbar-thumb {
  background: #a3a3a3;
  border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover {
  background: #757575;
}
::-webkit-scrollbar-track {
  background: #ffffff;
  border-radius: 100px;
}
::-webkit-scrollbar-corner {
  background: transparent;
}