*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg-color: #f3f4f4;
  --card-color: #161e29;
  --card-skills-color: #232f46;
  --color-skills:rgb(247, 172, 255);
  --font-icon-color: #000000;
  --p-color:white;
  --blue-color:#6d68ff;
  --subtitle-color: #1a1919;
  --card-p-color:white;
  --title:#1c242e;
  --skills-title:rgb(247, 148, 222);
  --btn-color:#b9b6ff;
  --btn-header-color:#7f7dfdcd;
  --nav-color:#9b98ff;
  --progress-color: #7f7dc5;
  --container-color:#161e29d8;
  --icon: #7f7dc5;
  --icon-skills: black;

  --weight-font-title: 900;
  --weight-font-text: 600;
  --weight-font-card-projet: 500; 

  --shadow-button: rgb(125, 125, 125);
  --shadow-button-hover: rgb(106, 106, 106);
}

[data-theme="dark"] {
  --bg-color: #161e29;
  --card-color: #0d121a;
  --card-skills-color: whitesmoke;
  --color-skills:rgb(172, 255, 179);
  --font-icon-color: #f9f9fa;
  --title:#fafafa;
  --skills-title:#97fd97;
  --p-color:rgb(14, 13, 13);
  --blue-color:#89d4f7;
  --subtitle-color: #cacaca;
  --card-p-color:white;
  --btn-color:#dab3ff;
  --btn-header-color:#f1aaffe7;
  --nav-color:#89d4f7;
  --progress-color: #7d99b8;
  --container-color:#0d121a;
  --icon: #89d4f7;
  --icon-skills: rgb(255, 255, 255);

  --weight-font-title: 600;
  --weight-font-text: 500;
  --weight-font-p:400;
  --weight-font-card-projet: 500; 

  --shadow-button: rgba(94, 94, 94, 0.455);
  --shadow-button-hover: rgba(160, 160, 160, 0.475);
}

.theme-switch input {
  display:none;
}

html, body {
  background:var(--bg-color);
  font-family: 'Montserrat', sans-serif;
    scroll-behavior: smooth;
    height: 100%;
}

iframe {
  border:none; 
  border-radius: 0.4vw;
  box-shadow:0 0 1.5vw #070707; 
  margin-bottom: 10vh;
}

/* images */

.profil_img{
  width: auto; 
  height: 27rem; 
  margin: auto 2rem auto 0;
  border-radius: 0.3vw;
}

.detail_img{
  width: 40rem; 
  height: 23rem; 
  margin: auto; 
  padding: 1vw;
  border-radius: 0.3vw;
}

.project_img{
  width: 38rem;
  height: 25rem;
  margin: 0;
  padding: 1vw;
  border-radius: 0.3vw;
}

.img_bilan {
  width: 36vw;
  height: 69vh;
  margin: 0;
  padding: 1vw;
  border-radius: 0.3vw;
}

.img_mvc{
  height: 30rem;
  margin: 3vw auto 1vw auto;
}

.img_acteurs{
  height: 22rem; 
  margin:3vw auto 1vw auto;
}

.img_uml{
  height: 26rem; 
  width:43rem; 
  margin:3vw auto 1vw auto;
}

.img_gitlab{
  width: 56rem; 
  margin: 3vw auto 1vw auto;
}

.img_bdd{
  width: 18rem; 
  margin: 3vw auto 1vw auto;
}

.img_doc{
  margin: 3vw auto 0vw auto; 
  width: 40rem;
}

.img_slack{
  width: 53rem;
}

.img_bilan{
  margin: auto; 
  padding: 1vw;
  width: 30rem;
  height: 28rem;
}

.legende_img{
  font-size: 1rem;
  color: var(--font-icon-color);
  font-weight: var(--weight-font-text);
}

/* general */

a{
  text-decoration: none;
}

.space{
  margin: 2.8vw auto;
}

i{
  color: white;
  font-size: 2.5vw;
}

p {
  font-size: 1rem;   
  font-weight: 300;
  line-height: 1.9rem;
  color: var(--card-p-color);
}

/* hero */

.section {
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
}

.section hero {
  text-align: center;
  background: white;
  padding: 20px;
  font-size: 55px;
  font-weight: 200;
}

.hero {
  background-image:  url(../img/1080P/wallpaperflare.com_wallpaper\ \(2\).jpg);
  color: rgb(250, 249, 249);
  display: flex;
  font-weight: 300;
  flex-direction: column;
  font-family: 'Great vibes', cursive;
  /* font-family: 'Rajdhani', sans-serif; */
}

#hero_title{
  font-size: 5.7rem;
}

#under_title{
  font-size: 1.5rem;
  font-weight: 500;
  font-family: 'Montserrat', sans-serif;

}

.scroll_down{
  color: white;
  font-size: 4rem;
  display: block;
  animation: animate 0.6s infinite alternate;
}.scroll_down:hover{
  cursor: pointer;
}

@keyframes animate {
  0% { transform: translateY(0); }
  100% { transform: translateY(-10px); }
}

/* icons */

.icons{
  font-size: 1.3rem;
  color: var(--icon);
  margin: 0 1vw 0 0;
}.icons:hover{
  color: var(--nav-color);
  cursor:pointer;
}

#toggleDark:hover{
  color:var(--nav-color);
}

.icons_passion{
  margin: auto 1vw auto 2vw;
}

.icon:hover{
  color: var(--nav-color);
  cursor: pointer;
}

.icon_navstage{
  color: black;
}.icon_navstage:hover{
  color: var(--nav-color);
}

.icon_skills{
  font-size: 1.5rem;
  color:var(--icon-skills);
  margin:  auto 0.5vw auto 0;
}

.icon_project{
  font-size: 1.2rem;
  color:var(--icon);
  margin: auto 1vw auto 1vw;
}

.icon_stage{
  font-size: 1.2rem;
  color: #14141b;
  margin: auto 0.5rem;
}

.icon_contact{
  font-size: 1.2rem;
  color: #14141b;
  margin-left: 1vw;
}

/* buttons */

.contact_button{
  background-color: var(--btn-color);
  width: 11rem;
  padding: 1rem 0.5rem 1rem 1rem;  
  text-decoration: none;
  color: #0f0f0f;
  border:rgb(15, 15, 15) 2px solid;
  font-weight: 800;
  border-radius: 0.8vw;
  margin: 2rem 0 0 2rem;
  box-shadow: 0 0 0.6vw rgb(102, 102, 102);
}.contact_button:hover{
  box-shadow: 0 0 0.8vw rgb(102, 102, 102);
  transition: 0.3s;
}

.doowup_btn {
  display: flex;
  background-color: var(--btn-color);
  padding: 1rem 0.5rem 1rem 1rem;  
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  color: #020202;
  border-radius: 0.8vw;
  box-shadow: 0 0 0.6vw rgb(102, 102, 102);
  margin: 3vw 1vw 0vw 0vw;
  width: 11rem;
}.doowup_btn:hover{
  box-shadow: 0 0 0.6vw rgb(145, 145, 145);
  transition: 0.3s;
}

.row, .row_skills{
  display: flex;
  flex-direction: row;}

.row_skills{
  margin: 1rem auto;
}

.maquettes_btn{
  width: 16vw;
}

.stage_button{
  background-color: var(--progress-color);
  width: 11rem;
  padding: 1rem;
  text-decoration: none;
  color: #14141b;
  font-size: 1rem;
  border-radius: 0.8vw;
  margin-top: 2vw;
  box-shadow: #242329;
}.stage_button:hover{
  transition: 0.3s;
  box-shadow: 0 0 0.8vw rgb(102, 102, 102);
}

/* about */

.container{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 6rem auto 0 auto;
}

.container_stage{
  margin: 10vw auto;
}

.about {
  text-align: center;
  align-items: center;
  width: 80vw;
  margin: 0 auto 4vw auto;
}

#presentation{
  display:flex;
  flex-direction: row;
  width: 80%;
  margin: 0 auto;
  padding: 2vw;
  margin-bottom: 6vw;
}

.title {
  margin: 2rem auto 3rem auto;
  font-size: 2.4rem;
  font-weight:var(--weight-font-title);
  color: var(--title);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Sansita Swashed', cursive;
}

.testMe{
  font-size: 1.3rem;
  color: var(--font-icon-color);
  font-weight: var(--weight-font-text);
  margin: 0rem auto 3rem auto;
}

.downArrowIcon{
  margin: -4vh auto 2vh auto;
  font-size: 2.2rem;
  color: var(--font-icon-color);
}

.arrow_left{
	text-shadow: 0 -1px 4px rgba(66, 66, 66, 0.719);
  color:var(--font-icon-color);
}

.subtitle{
  color:var(--subtitle-color);
  margin-bottom: 3vw;
  font-weight: var(--weight-font-text);
}

.description{
  margin: auto 0 auto 2vw;
  text-align: justify;
  font-weight: var(--weight-font-text);
  font-size: 1.1rem;
  color:var(--font-icon-color);
}

.projet_description{
  font-weight: var(--weight-font-card-projet);
  text-align: justify;
  font-size: 1.1rem;
}

.skills_description{
  font-size: 1rem;
  font-weight: 700;
  color:var(--p-color);
}

.cardTop {
  width: 90%;
  font-weight:var(--weight-font-text);
  text-align: center;
  font-size: 1.4rem;
  margin: 6vw auto 2vw auto;
  color:var(--font-icon-color);
  font-family: 'Montserrat', sans-serif;
}

.cardTopProjet{
  width: 90%;
  text-align: center;
  font-size: 1.7rem;
  margin: 0 auto 2vw auto;
  color:var(--card-p-color);
  font-family: 'Sansita Swashed', cursive;
}

.card {
  display:flex;
  flex-direction: row;
  width: 90%;
  margin: 0 auto;
  padding: 1vw;
  background-color: var(--card-color);
  color:var(--card-p-color);
  border-radius: 0.8rem;
  font-weight: var(--weight-font-text);
}

.card_projet{
  display:flex;
  flex-direction: row;
  width: 60%;
  margin: 0 auto 8vw auto;
  padding: 1vw;
  background-color: var(--card-color);
  border-radius: 0.8rem;
  color:var(--card-p-color);
  font-weight: var(--weight-font-card-projet);
}

.card, .card_projet p{
  color:var(--card-p-color)
}

.card_projet_skills{
  width: 40%;
  background-color: var(--card-skills-color);
  margin: 0 auto 5vw auto;
  border-radius: 0.8rem;
  font-weight: var(--weight-font-text);
}


.flex_column {
  display: flex;
  flex-direction: column;
  margin : auto 1vw;
  text-align: left;
}

.flex_row {
  display: flex;
  flex-direction: row;
  margin : 1.2vw 0;
  padding: 0.5vw 1vw;
  transition: 0.3s;
  border-radius: 1.3rem;
} 

.row{
  display: flex;
  flex-direction: row;
  margin: auto;
  align-items: center;
}

.interests{
  display: flex;
  flex-direction: row;
  margin: auto;
}

/* skills */

.competence{
  text-align: center;
  align-items: center;
  width: 90vw;
  margin: 2vw auto 4vw auto;
}

.skills_part_1{
  display:flex;
  flex-direction: row;
  width: 80%;
  margin:auto;
}

.skills_part_2{
  display:flex;
  flex-direction: row;
  width: 80%;
  margin:5vh auto 0 auto;
}

.skills_block{
  display:flex;
  flex-direction: column;
  margin: 0 auto;
  width: 80%;
}

.skills_block p{
  font-weight: var(--weight-font-text);
  color:var(--font-icon-color);
}


.skills_header{
  margin: 2vw auto 0 auto;
  display: flex;
  flex-direction: row;
}

.skill_title{
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0 0 0.5vw 0;
  color: var(--font-icon-color);
}

.skill_subtitle{
  font-size: 0.9rem;
  font-weight: var(--weight-font-text);
  color:var(--font-icon-color);
  margin-bottom: 2vw;
}

.legend, .legend_skills{
  display:flex;
  flex-direction: row;
  margin: 0 auto;
}

.legend_skills{
  flex-direction: column;
}

.legend p {
  font-size: 0.9rem;
  font-weight: var(--weight-font-text);
  color:var(--font-icon-color);
}

.color_legend, .color_skills {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 100%;
  background-color:var(--nav-color);
  border: none;
  box-shadow: 0 0 0.2vw rgba(0, 0, 0, 0.6);
  margin: 1.4vh 0.7vw 0vw 0vw;
}

.color_skills{
  width: 1rem;
  height: 1rem;
  background-color: var(--color-skills);
  margin: 0.4vh 1vw 0vw 0vw ;
  padding: 0.5vw;
}


.frontend{
  display:flex;
  flex-direction: column;
  margin: 0 auto;
  text-align: left;
  width: 80%
}

.backend{
  display:flex;
  flex-direction: column;
  margin: 0 auto 2vw auto;
  text-align: left;
  width: 80%
}

.logiciels{
  display:flex;
  flex-direction: column;
  margin: 0 auto;
  text-align: left;
  width: 80%
}

.container_skills{
  background-color: var(--container-color); 
  margin: 1vw 0;
  border-radius: .25rem;
  height: 0.32rem;
  box-shadow:0 0 0.9vw rgba(0, 0, 0, 0.329);
}

.container_skills .skills_percentage{
  height: 0.32rem;
  border-radius: .25rem;
}

.skills_percentage{
  display: block;
  background-color: var(--nav-color);
}

.skills_javascript{
  width: 35%;
}

.skills_htmlcss{
  width: 50%;
}

.skills_php{
  width: 50%;
}

.skills_symfonyf{
  width: 55%;
}

.skills_symfony{
  width: 55%;
}

.skills_java{
  width: 55%;
}

.skills_vuejsf{
  width: 55%;
}

.skills_vuejs{
  width: 40%;
}

.skills_python {
  width: 30%;
}
.skills_gitlab{
  width: 60%;
}
.skills_jetbrains{
  width:60%;
}
.skills_wamp{
  width:60%;
}

.skills_vscode{
  width:70%;
}

.skills_gestionp{
  width:55%;
}

.skills_analyse{
  width:60%;
}

.skills_sgbd{
  width:65%;
}

.skills_testu{
  width:45%;
}

/* portfolio */

.projets{
  text-align: center;
  align-items: center;
  width: 80vw;
  margin: 2vw auto 4vw auto;
}

.project_column{
  display: flex;
  flex-direction: column;
  margin : auto;
  padding: 1vw;
  text-align: initial;
}

.project_header{
  display: flex;
  flex-direction: row;
  margin : 2.5rem auto 2.5rem auto;
  padding: 1rem 0rem 1rem 1rem;  
  width: 16rem;
  background-color: #f0f0f0;
  border-radius: 0.8vw;
  box-shadow: #242329;
  text-align: center;
}
.project_header:hover{
  cursor:pointer;
  transition: 0.2s;
  color: black;
  box-shadow: 0 0 0.8vw rgba(255, 255, 255, 0.6);
}

.project_header p{
  color:#000000;
  margin-right: 0.5vw;
  width: 12rem;
  font-weight:600;
  font-size: 1rem;
}

/* competence */
.row_projects{
  display: flex;
  flex-direction: row;
  margin: auto;
  flex-wrap: wrap;
}

.project_button{
  display: flex;
  width: auto;
  padding: 0.7vw;
  margin: 2.5vw 3vw 1vw 0vw;
  background-color: whitesmoke;
  border-radius: 0.2vw;
  color: black;
  font-weight: 700;
  font-size: 1vw;
}.project_button:hover{
  box-shadow: 0 0 0.8vw rgba(255, 255, 255, 0.6);
  cursor: pointer;
}

.row_skills_cards{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}


/* stage */

.stage{
  text-align: center;
  align-items: center;
  width: 80vw;
  margin: 0vw auto 15vw auto;
} 

.card_stage{
  display:flex;
  flex-direction: column;
  width: 90%;
  margin: 6rem auto 5rem auto;
  padding: 3.5rem;
  background-color: #0d121a;
  border-radius: 0.8rem;
}

.card_outils{
  flex-direction: row;
  padding: 1rem;
  margin: 1rem auto 1rem auto;
  background-color: #232f46;
  width: 60%;
}

.banniere{
  display: flex;
  flex-direction: row;
  width: 50%;
}

.banniere p { 
  display: flex;
  color: black;
  margin : auto;
  font-weight: 700;
  padding : 0.2rem 1rem;
  background-color: var(--btn-color);
  border-radius: 0.3vw;
}

.card_bilan{
  width: 50%;
  margin-top: 3rem;
  background-color: transparent;
}

.logo_stage{
  height: 4rem;
  width: 16rem;
  margin: auto 0;
}

.title_stage, .title_stage_skills{
  margin: 2rem auto 0.5rem auto;
  font-family: 'Sansita Swashed', cursive;
}

.title_stage_skills{
  color:var(--skills-title);
  margin: 4rem auto 2rem auto
}

.doowup_description{
  margin: 0 auto 1rem auto;
  width: 50%;
  font-size: 1rem;
  text-align: justify;
  color:var(--font-icon-color);
  font-weight: var(--weight-font-text);
}

.stage_cardTop{
  color: var(--blue-color);
}

.stage_description{
  color:var(--font-icon-color);
  text-align: left;
  margin-top: 1rem ;
  font-size: 1rem;
}

.scroll_back{
  display: flex;
  text-align: right;
  position: fixed;
  margin: 32vw 0vw 0vw 80vw;
 
}

.uil-arrow-circle-up{
  color:var(--blue-color);
}

.uil-arrow-circle-up:hover{
  cursor:pointer;
}

/* footer */

.footer{
  text-align: center;
  align-items: center;
  width: 100%;
  height: 12rem;
  background-color: var(--card-color);
  font-size: 2rem;
  padding: 2rem;
  font-weight: bolder;
  box-shadow:0 0 0.9vw rgba(0, 0, 0, 0.329);
  color:white;
}

.copyright{
  font-size: 1rem;
  font-weight: 300;
  color: rgb(253, 252, 252);
}

.socials{
  display: flex;
  flex-direction: row;
  text-align: center;
}

.icon_social{
  font-size: 2rem;
  padding: 1rem;
  color: var(--icon);
}.icon_social:hover{
  cursor:pointer;
  color:var(--nav-color);;
  
}