@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Berkshire+Swash&family=Clicker+Script&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

:root {
  --white: rgb(253, 253, 253);
  --bg-white-700: rgba(255, 255, 255, 0.7);
  --bg-white-500: rgba(255, 255, 255, 0.5);
  --bg-white-900: rgba(255, 255, 255, 0.9);
  --bg-shadow: rgba(0, 0, 0, 0.2);
  --black: rgba(0, 0, 0, 1);
  --bg-black-700: rgba(0, 0, 0, 0.7);
  --bg-black-500: rgba(0, 0, 0, 0.5);
  --bg-black-900: rgba(0, 0, 0, 0.9);
  --gray:rgb(234, 233, 233);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  text-decoration: none;
  font-family: "poppins";
  scroll-behavior: smooth;
  transition: scroll 1.3s ease;
}
html {
  font-size: 62.5%;
}
::before,
::after {
  box-sizing: border-box;
}

body {
  line-height: 1.5;
  font-size: 1.6rem;
  position: relative;
  width:100vw;
  background-color:var(--white);
}
ul {
  list-style: none;
}

/* effet de hover sur les liens de la nav ... */
.main-container .aside ul.nav li a:hover,
.main-container .aside ul.nav li a.dark:hover
{
  color: var(--skin-color);
  transition: color 0.3s ease;
}
.main-container .aside ul.nav li a.dark{
  color:var(--bg-white-900);
}

.main-container .aside ul.nav li a.active,
.main-container .aside ul.nav li a.dark.active{
  color:var(--skin-color);
}

.aside {
  width:35rem;
  min-height: 100vh;
  background: var(--white);
  position: fixed;
  box-shadow: 0 0 2rem var(--bg-shadow);
  left: 0;
  top:0;
  z-index:1003;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.aside.dark{
  background:var(--black);
  box-shadow:0 0 2rem var(--bg-shadow);
}
.aside .logo {
  position: absolute;
  top: 5rem;
  font-size: 3rem;
  text-transform: capitalize;
}
.aside .logo a{
  color: var(--bg-black-900);
  font-weight: 700;
  padding: 1.5rem 2rem;
  font-size: 3rem;
  letter-spacing: 0.5rem;
  position: relative;
}
.aside .logo a.dark{
  color:var(--white);
}

.aside .logo a::before {
  content: "";
  position: absolute;
  width: 2rem;
  height: 2rem;
  border-bottom: 0.5rem solid var(--skin-color);
  border-left: 0.5rem solid var(--skin-color);
  bottom: 0;
  left: 0;
}
.aside .logo a::after {
  content: "";
  position: absolute;
  width: 2rem;
  height: 2rem;
  border-top: 0.5rem solid var(--skin-color);
  border-right: 0.5rem solid var(--skin-color);
  top: 0;
  right: 0;
}
.aside .logo a span {
  font-family: "Berkshire swash";
  font-weight: 900;
  font-size: 4rem;
}
/* <main>Le bloc qui contiendra tous les sections du site</main> */
.main-content {
  padding-left:33.8rem;
  z-index:5;
}
/* end ------- */

.section {
  background: var(--white);
  min-height: 100vh;
  display: block;
  padding: 0 3rem;
  margin-left:3rem;
  opacity: 1;
  max-width:100%;
  z-index:5;
}
section.dark{
  background-color:var(--bg-black-900);
  color:white;
}
.section-title {
  flex: 0 0 100%;
  max-width: 100%;
}
.section-title h2 {
  font-size: 4rem;
  color: var(--bg-black-900);
  font-weight: 700;
  margin-bottom: 6rem;
  position: relative;
}
.section-title.dark h2{
  color:var(--white);
}
.section-title h2::before {
  content:"";
  position: absolute;
  top: 100%;
  left: 0;
  width: 5rem;
  height: 0.4rem;
  background-color: var(--skin-color);
}
.section-title h2::after {
  content: "";
  position: absolute;
  top: 110%;
  left: 0;
  width: 2.5rem;
  height: 0.4rem;
  background-color: var(--skin-color);
}

.section .container {
  padding-top: 6rem;
  padding-bottom: 7rem;
}
.hidden {
  display: none !important;
}
p.presentation-home-text{
  color:var(--black);
}
p.presentation-home-text.dark{
  color:var(--white);
}
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  position: relative;
}
.btn-home {
  display: flex;
  flex-direction: row;
  column-gap: 2rem;
}
a.btn.hire-me {
  color: var(--bg-white-900);
}
a.btn.hire-me:hover {
  color: var(--bg-black-900);
}
.btn-home a.btn.discuss {
  color: var(--bg-black-900);
  background-color: var(--white);
}
.btn {
  padding: 1.2rem 3.5rem;
  white-space: nowrap;
  width: 14rem;
  height: 5rem;
  background-color: var(--skin-color);
  position: relative;
  cursor: pointer;
  z-index: 1;
  border-radius: 2rem;
  border-color: var(--skin-color);
  border-width: 2px;
  border-style: solid;
  overflow: hidden;
}
.btn.hire-me::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: var(--white);
  z-index: -1;
  transition: width 0.7s ease;
}
.btn.discuss::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: var(--skin-color);
  z-index: -1;
  transition: width 0.7s ease;
}
.btn.discuss:hover::before {
  width: 100%;
}
.btn.hire-me:hover::before {
  width: 100%;
  color: var(--black);
}
.padd-15 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.container {
  max-width: 110rem;
  width: 100%;
  margin: auto;
}
/* La nav bar du responsive */
.aside .nav-toggler {
  height: 4rem;
  width: 4.5rem;
  border: 1px solid var(--bg-black-900);
  cursor: pointer;
  position: fixed;
  left: 30rem;
  top: 2rem;
  border-radius: 0.5rem;
  background: var(--bg-white-700);
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
}
.aside .nav-toggler span {
  height: 0.2rem;
  width: 2rem;
  display: inline-block;
  position: relative;
  background: var(--skin-color);
}
.aside .nav-toggler span::before {
  content: "";
  position: absolute;
  height: 0.2rem;
  width: 2rem;
  background: var(--skin-color);
  top: -0.6rem;
  left: 0;
}
.aside .nav-toggler span::after {
  content: "";
  position: absolute;
  height: 0.2rem;
  width: 2rem;
  background: var(--skin-color);
  top: 0.6rem;
  left: 0;
}
.aside .nav {
  margin-top: 5rem;
}
.aside .nav li {
  margin-bottom: 2rem;
  padding: 0.5rem 1.5rem;
  display: block;
}
.aside .nav li a {
  font-size: 1.6rem;
  font-weight: 600;
  display: block;
  color: var(--bg-black-900);
  padding-bottom: 0.2rem;
  border-bottom: 1px solid var(--bg-black-500);
}
.aside .nav li a.dark{
  border-bottom: 1px solid var(--bg-white-500)
}

.aside .nav li a i {
  margin-right: 1.5rem;
}

/* home section */
.home {
  min-height: 100vh;
  display: flex;
  color: var(--bg-black-900);
}
.home .home-info {
  flex: 0 0 60%;
  max-width: 60%;
}
.home .home-image {
  flex: 0 0 40%;
  max-width: 40%;
  text-align: center;
  position: relative;
}
.home .home-image::before {
  content: "";
  position: absolute;
  width: 8rem;
  height: 8rem;
  border-bottom: 1rem solid var(--skin-color);
  border-left: 1rem solid var(--skin-color);
  left: -1rem;
  bottom: -3rem;
}
.home .home-image::after {
  content: "";
  position: absolute;
  width: 8rem;
  height: 8rem;
  border-top: 1rem solid var(--skin-color);
  border-right: 1rem solid var(--skin-color);
  right: -1rem;
  top: -3rem;
}

h3.hello {
  font-size: 2.8rem;
  margin: 1.5rem 0;
}
h3.hello span {
  font-family: "Berkshire", cursive;
  font-size: 3rem;
  font-weight: 700;
  margin-left: 0.7rem;
  color: var(--skin-color);
}
h3.my-profession {
  font-size: 3rem;
  margin: 1.5rem 0;
}
.typing {
  color: var(--skin-color);
}
.home-info p {
  margin-bottom: 7rem;
  font-size: 2rem;
  color: var(--bg-black-700);
}
.home .home-image img {
  height: 40rem;
}
/* about about-content */
.about .about-content {
  flex: 0 0 100%;
  max-width: 100%;
}

.about .about-content .about-text h3 {
  font-size: 2.4rem;
  margin-bottom: 1.5rem;
  color: var(--bg-black-900);
}
.about .about-content .about-text.dark h3{
  color:var(--bg-white-900);
}

.about .about-content .about-text h3 span {
  color: var(--skin-color);
}
.about .about-content .about-text p {
  font-size: 1.6rem;
  line-height: 2.6rem;
  color: var(--bg-black-700);
}
.about .about-content .about-text.dark p{
  color:var(--bg-white-700);
}
.row .personal-info {
  flex: 0 0 60%;
  max-width: 60%;
}
.row .personal-info .info-item {
  flex: 0 0 50%;
  max-width: 50%;
}
.row .personal-info .info-item p {
  font-weight: 600;
  padding: 1rem 0;
  font-size: 1.6rem;
  color: var(--bg-black-900);
  border-bottom: 1px solid var(--bg-black-500);
}
.row .personal-info .info-item.dark p{
  color:var(--bg-white-900);
  border-bottom: 1px solid var(--bg-white-500);
}

.row .personal-info .info-item p span {
  font-weight: 400;
  color: var(--bg-black-700);
  margin-left: 4px;
  display: inline-block;
}
.row .personal-info .info-item.dark p span{
  color:var(--bg-white-700);
}
.row .skills {
  flex: 0 0 40%;
  max-width: 40%;
}
.row.second {
  margin-bottom: 4rem;
}
.row .buttons {
  margin-top: 3rem;
}
.row .buttons a.btn {
  width: auto;
}
.row .buttons .btn.hire-me {
  margin-left: 2rem;
}
#cv {
  color: var(--black);
}
.about.section#about .skills .skills-item {
  flex: 0 0 100%;
  margin-bottom: 1rem;
}

.about.section#about .skills .skills-item h5 {
  line-height: 4rem;
  font-weight: 600;
  font-size: 1rem;
  color: var(--bg-black-900);
  text-transform: capitalize;
}
.about.section#about .skills .skills-item.dark h5{
  color:var(--bg-white-900);
}

.about.section#about .skills .skills-item .progress {
  background-color: var(--bg-black-500);
  height: 0.7rem;
  width: 100%;
  position: relative;
  transition:all 0.3s cubic-bezier(.25,.8,.25,1);
}
.about.section#about .skills .skills-item .progress.dark{
  background-color:var(--bg-white-500);
}

.about.section#about .skills .skills-item .progress .progress-in{
  position:absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 0.4rem;
  opacity:1 !important;
  visibility:visible !important;
  display: block !important;
  background-color:var(--skin-color);
}
/* les bares de niveaux */

#html.animate{
  width:90%;
  animation:html 5s ease-in-out;
}
#javascript.animate{
  width:86%;
  animation:javascript 5s ease-in-out;
}

#java.animate{
  width:82%;
  animation:java 5s ease-in-out;
}
#bootstrap.animate{
  width:80%;
  animation:bootstrap 5s ease-in-out;
}
#python.animate{
  width:75%;
  animation:python 5s ease-in-out;
}


@keyframes html{
  0%{
    width:0;
  }
  100%{
    width:90%;
  }
}

@keyframes javascript{
  0%{
    width:0;
  }
  100%{
    width:86%;
  }
}

@keyframes java{
  0%{
    width:0;
  }
  100%{
    width:82%;
  }
}

@keyframes bootstrap{
  0%{
    width:0;
  }
  100%{
    width:80%;
  }
}
@keyframes python{
  0%{
    width:0;
  }
  100%{
    width:75%;
  }
}


.about.section#about .skills .skills-item .progress .skill-percent {
  position: absolute;
  right: 0;
  top: -3rem;
  color: var(--bg-black-900);
  font-weight: 400;
  line-height: 4rem;
}
.about.section#about .skills .skills-item .progress.dark .skill-percent{
  color:var(--bg-white-900);
}

.row .education,
.row .experience {
  flex: 0 0 50%;
  max-width: 50%;
  margin-top: 3rem;
}

.row .education h3.title,
.row .experience h3.title {
  font-size: 2.4rem;
  margin-bottom: 3rem;
  font-weight: 700;
  color: var(--bg-black-900);
}

#deuxieme-about.dark .education h3.title,
#deuxieme-about.dark .experience h3.title{
  color:var(--bg-white-900);
}


.row .education .row .timeline-box,
.row .experience .row .timeline-box {
  flex: 0 0 100%;
  max-width: 100%;
}
.shadow-dark {
  box-shadow: 0 0 4rem var(--bg-shadow);
}
.row .education .row .timeline-box .timeline,
.row .experience .row .timeline-box .timeline {
  background-color: var(--bg-white-700);
  padding: 3rem 1.5rem;
  border-radius: 1.2rem;
}
.timeline-box .timeline-item {
  padding-left: 3.7rem;
  padding-bottom: 5rem;
  position: relative;
}
.timeline-box .timeline-item:last-child {
  padding-bottom: 0;
}
.timeline-box .timeline-item::before {
  content: "";
  position: absolute;
  top: 0;
  width: 0.1rem;
  height: 100%;
  left: 0.7rem;
  height: 100%;
  background-color: var(--skin-color);
}
.timeline-box .timeline-item .circle-dot {
  position: absolute;
  top: 0;
  left: 0;
  height: 1.5rem;
  width: 1.5rem;
  border-radius: 50%;
  background-color: var(--skin-color);
}

.timeline-box .timeline-item .timeline-date {
  font-weight: 400;
  color: var(--bg-black-700);
  font-size: 1.4rem;
  margin-bottom: 1.2rem;
}
.timeline-box .timeline-item .timeline-date i.fa {
  color: var(--bg-black-700);
  margin-right: 0.5rem;
}

.timeline-box .timeline-item h4.timeline-title {
  font-weight: 600;
  margin-bottom: 1.5rem;
  text-transform: capitalize;
  color: var(--bg-black-900);
}

.timeline-box .timeline-item .timeline-text {
  line-height: 2.5rem;
  font-size: 1.6rem;
  text-align: justify;
  color: var(--bg-black-700);
}

/* services section */

/* Iere possibilite avec les grids */
/* .row.services-box{
  display:grid;
  grid-template-columns:repeat(6fr,1);
}

.service-item.first{
  grid-column:1/2;
  grid-row:1/2;
}
.service-item.second{
  grid-column:2/3;
  grid-row:1/2;
}
.service-item.third{
  grid-column:3/4;
  grid-row:1/2;
}
.service-item.fourth{
  grid-column:1/2;
  grid-row:2/3;
}
.service-item.feeth{
  grid-column:2/3;
  grid-row:2/3;
}
.service-item.sixth{
  grid-column:3/4;
  grid-row:2/3;
}  */

/* 02 eme possibilite ...avec les flex box.. */
#services .container {
  padding-bottom: 4rem;
}

#services .row.services-box .service-item {
  flex: 0 0 33.33%;
  max-width: 33.33%;
  margin-bottom: 30px;
}
#services .row.services-box .service-item .service-item-inner {
  background-color: var(--bg-white-500);
  border: 0.1rem solid var(--bg-black-500);
  border-radius: 1rem;
  padding: 3rem 1.5rem;
  text-align: center;
  transition: all 0.3 ease;
}
#services .row.services-box .service-item .service-item-inner:hover {
  box-shadow: 0 0 5rem var(--bg-shadow);
}
#services .row.services-box .service-item .service-item-inner .icon {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  display: block;
  text-align: center;
  margin: 0 auto 3rem;
  transition: all 0.3s ease;
}
#services .row.services-box .service-item .service-item-inner .icon .fa {
  font-size: 4rem;
  line-height: 6rem;
  color: var(--skin-color);
}
#services .row.services-box .service-item .service-item-inner:hover .icon {
  background-color: var(--skin-color);
}
#services .row.services-box .service-item .service-item-inner:hover .icon .fa {
  color: var(--white);
  font-size: 2.5rem;
}

#services .row.services-box .service-item .service-item-inner h4 {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  color: var(--bg-black-900);
  font-weight: 700;
  text-transform: capitalize;
}
#services .row.services-box .service-item .service-item-inner p {
  color: var(--bg-black-700);
  font-size: 1.6rem;
  line-height: 2.5rem;
}
#portfolio.portfolio.section {
  margin-bottom: 0rem;
}

/* Portfolio section */
.row.box-portfolio {
  flex: 0 0 100%;
  max-width: 100%;
  height: 40rem;
  margin-bottom:23rem;
}
.portfolio-heading {
  flex: 0 0 100%;
  max-width: 100%;
}
.portfolio-heading h2 {
  color: var(--bg-black-700);
  font-weight: 500;
  margin-bottom: 2rem;
}
.portfolio-heading.dark h2{
  color:var(--bg-white-700);
}

#portfolio .portfolio-item {
  flex: 0 0 33.33%;
  max-width: 33.33%;
  width: 31rem;
  height: 20rem;
  margin-bottom: 7rem;
}

.portfolio-img {
  object-fit: cover;
  object-position: center;
  text-align:center;
  color:var(--skin-color);
  font-weight:600;
}
.portfolio-img img {
  display: block;
  width: 100%;
  height: 100%;
}
.portfolio-item.feeth {
  margin-top: 1.2rem;
}
.portfolio-item.sixth {
  margin-top: 1.3rem;
}
.portfolio-item .portfolio-item-inner {
  border: 0.6rem solid var(--bg-white-500);
  border-radius: 1rem;
  overflow: hidden;
  cursor: pointer;
}
.portfolio-item .portfolio-item-inner:hover {
  box-shadow: 0 0 10rem var(--bg-shadow);
}
.portfolio-item .portfolio-item-inner:hover img {
  transform: scale(1.3);
  transition: transform 0.4s ease;
}

/* contact section */

h3.contact-title {
  color: var(--skin-color);
  font-weight: 700;
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 2rem;
}

h4.contact-sub-title {
  color: var(--bg-black-700);
  font-weight: 700;
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 6rem;
}
h4.contact-sub-title.dark{
  color:var(--bg-white-900);
}

.contact-info-item {
  flex: 0 0 25%;
  max-width: 25%;
  text-align: center;
  margin-bottom: 4rem;
}
.contact-info-item .icon {
  display: inline-block;
}
.contact-info-item .icon .fa {
  font-size: 2.5rem;
  color: var(--skin-color);
}


.contact-info-item h4 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--bg-black-900);
  text-transform: capitalize;
  margin: 1.5rem 0 0.5rem;
  font-weight: 500;
  color: var(--bg-black-700);
}
.contact-info-item h4.dark{
  color:var(--bg-white-700);
}


.contact .contact-form {
  flex: 0 0 100%;
  max-width: 100%;
}
.contact .contact-form .form-item.col-6 {
  flex: 0 0 50%;
  max-width: 50%;
}

.contact .contact-form .form-item.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}
.contact-form .row .form-item {
  margin-bottom: 3rem;
}

.contact-form .row .form-item .form-control {
  width: 100%;
  height: 5rem;
  border-radius: 2.5rem;
  border: 0.1rem solid var(--bg-black-500);
  background-color:var(--white);
  padding: 1rem 2.5rem;
  font-size: 1.6rem;
  color: var(--bg-black-700);
  transition: all 0.3 ease;
}
.contact-form .row .form-item .form-control.dark{
  background-color:gray;
}


.contact-form .row .form-item .form-control:focus {
  box-shadow: 0 0 4rem var(--bg-shadow);
}

.contact-form .row .form-item .form-group textarea.form-control {
  max-width: 100%;
  height: 16rem;
  max-height: 30rem;
  min-height: 5rem;
}
.contact-form .row .form-item .form-group .btn.submit {
  width: 19.3rem;
  height: 5rem;
  color: var(--white);
}
.contact-form .row .form-item .form-group .btn.submit:hover {
  transform: scale(1.1);
  transition: transform 0.3s ease;
  background-color: var(--bg-white);
  color: var(--skin-color);
}

/* le bouton pour revenir en haut  */
.circle-up{
  position:fixed;
  top:calc(100vh - 12rem);
  right:3rem;
  width:6rem;
  height:6rem;
  display: flex;
  justify-content: center;
  align-items:center;
  cursor: pointer;
  transition:display 3s ease;
  display:none;
}

.circle-up i.fa{
  color:var(--skin-color);
}
.circle-up i.fa:hover{
  transform:scale(1.3);
  transition:transform 0.3s ease;
}



/* responsive */
/* mini -phone  */
@media (max-width: 575.2px) {
  html {
    font-size: 32.5%;
  }
  .aside.active {
    width:35rem;
    height: 100vh;
    left:0;
    top:0;
    background-color:var(--white);
    transition:left 0.5s ease;
  }
  .btn.hire-me{
      width:auto;
  }

  .aside:not(.active){
    left:-35rem;
    transition:left 0.7s ease;
  }
  .aside .logo a.dark{
    color:var(--black);
  }
  .main-content {
    padding-left:0;
    margin-left:-4rem;
  }
  .main-container .aside ul.nav li a.dark{
    color:var(--black);
  }
  .aside .nav-toggler {
    display: flex !important;
    position: fixed;
    top: 2rem;
    left: 2rem;
  }
  .aside .nav-toggler span {
    position: relative;
  }
  .home .home-info {
    flex: 0 0 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: -1rem;
    text-align: center;
    justify-content: center;
    margin-bottom: 8.4rem;
  }

  .home .home-image {
    flex: 0 0 75%;
    max-width: 75%;
    text-align: center;
    position: relative;
    margin-left:50%;
    transform:translateX(-50%);
    display: flex;
    align-items: center;
  }
  .home .home-image img {
    width: 100%;
    height: auto;
  }

  .row .personal-info {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 5rem;
  }
  .row .skills {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .row .education,
  .row .experience {
    flex: 0 0 100%;
    max-width: 100%;
  }
  #services .row.services-box .service-item {
    flex: 0 0 100%;
    max-width: 100%;
  }
  #portfolio .portfolio-item {
    flex: 0 0 100%;
    max-width: 100%;
    width: auto;
    height: 20rem;
    margin-bottom:33rem;
  }
  #portfolio.portfolio.section{
    margin-bottom:240rem;
  }
  .contact-info-item {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .contact-form .row .form-item .form-group .btn.submit {
    width: auto;
    height: 6rem;
    color: var(--white);
    padding-right: 3rem;
  }

}

@media(max-width:575.8px){

  .style-switcher{
      position:fixed;
      top:0.9rem;
      right:0.7rem;
      width:20rem;
      border:1px solid var(--black);
      background:var(--gray);
      z-index:101;
      border-radius:0.5rem;
      height:auto;
      transform: translateX(73%);
      transition: all 0.7s ease;
  }
  .btn.hire-me{
      width:auto;
  }
  .aside .logo a.dark{
     color:var(--black);
  }
  .main-content{
    padding-left: 0;
  }
  .main-container .aside ul.nav li a.dark{
    color:var(--black);
  }
  .style-switcher.open{
      transform:translateX(-6rem);
      transition:transform 0.4s ease;
  }
  .style-switcher .s-icon{
      position: absolute;
      width:4rem;
      height:4rem;
      text-align: center;
      font-size:2rem;
      right:100%;
      top:-0.1rem;
      background-color: var(--gray);
      color: var(--bg-black-900);
      border-radius:50%;
      display: flex;
      align-items:center;
      justify-content: center;
      cursor: pointer;
  }
}
/* phone */
@media ((min-width: 576px) and (max-width:767.8px)) {
  html {
    font-size: 40%;
  }
  .aside{
    width:24rem;
  }
  .main-content {
    margin-left: -17rem;
    padding-left:36rem;
  }
  .home .home-info {
    flex: 0 0 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: -1rem;
    text-align: center;
    justify-content: center;
    margin-bottom: 8.4rem;
  }
  .home .home-image {
    flex: 0 0 80%;
    max-width: 890%;
    text-align: center;
    position: relative;
    margin-left:50%;
    transform:translateX(-50%);
    width:90%;
    height:auto;
    display: grid;
    place-items:center;
  }

  .btn-home {
    margin-left: -3rem;
  }
  .home .home-image::before {
    content: "";
    position: absolute;
    width: 8rem;
    height: 8rem;
    border-bottom: 1rem solid var(--skin-color);
    border-left: 1rem solid var(--skin-color);
    left: -2rem;
    bottom: -3rem;
  }
  .home .home-image::after {
    content: "";
    position: absolute;
    width: 8rem;
    height: 8rem;
    border-top: 1rem solid var(--skin-color);
    border-right: 1rem solid var(--skin-color);
    right:-6rem;
    top: -3rem;
  }
  .row .personal-info {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 20rem;
  }
  .row .skills {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .row.hiring {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-left: -5rem;
  }
  .row .education,
  .row .experience {
    flex: 0 0 100%;
    max-width: 100%;
  }
  #services .row.services-box .service-item {
    flex: 0 0 100%;
    max-width: 100%;
  }
  #portfolio .portfolio-item {
    flex: 0 0 100%;
    max-width: 100%;
    width: auto;
    height: 20rem;
    margin-bottom: 22rem;
  }

  .contact-info-item {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .contact-form .row .form-item .form-group .btn.submit {
    width: auto;
    height: 6rem;
    color: var(--white);
    padding-right: 3rem;
  }
  #portfolio.portfolio.section {
    margin-bottom: 200rem;
    margin-top: -20rem;
  }
  #services.services.section {
    margin-bottom: 20rem;
  }
}
/* tablettes */
@media ((min-width: 768px) and (max-width:991.8px)) {
  html {
    font-size: 50%;
  }
  .home .home-info {
    flex: 0 0 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 1rem;
    text-align: center;
    justify-content: center;
    margin-bottom: 8.4rem;
  }
  .home .home-image {
    flex: 0 0 85%;
    max-width: 85%;
    text-align: center;
    position: relative;
    margin-left: 7.5rem;
  }
  .btn-home {
    margin-left: -3rem;
  }
  .home .home-image::before {
    content: "";
    position: absolute;
    width: 8rem;
    height: 8rem;
    border-bottom: 1rem solid var(--skin-color);
    border-left: 1rem solid var(--skin-color);
    left: 2rem;
    bottom: -3rem;
  }
  .home .home-image::after {
    content: "";
    position: absolute;
    width: 8rem;
    height: 8rem;
    border-top: 1rem solid var(--skin-color);
    border-right: 1rem solid var(--skin-color);
    right: 2rem;
    top: -3rem;
  }
  .row .personal-info {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .row .skills {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .row.hiring {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-left: -5rem;
  }
  .row .education,
  .row .experience {
    flex: 0 0 100%;
    max-width: 100%;
  }
  #services .row.services-box .service-item {
    flex: 0 0 50%;
    max-width: 50%;
  }
  #portfolio .portfolio-item {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .contact-info-item {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .contact-form .row .form-item .form-group .btn.submit {
    width: auto;
    height: 6rem;
    color: var(--white);
    padding-right: 3rem;
  }
}

/* pc and laptops */
@media ((min-width: 992px) and (max-width:1199.8px)) {
  html {
    font-size: 45%;
  }
  .contact-form .row .form-item .form-group .btn.submit {
    width: auto;
    height: 6rem;
    padding: 0 2rem;
  }
  .home .home-image::after {
    content: "";
    position: absolute;
    width: 8rem;
    height: 8rem;
    border-top: 1rem solid var(--skin-color);
    border-right: 1rem solid var(--skin-color);
    right: 2rem;
    top: -3rem;
  }
  .home .home-image::before {
    left: 2rem;
    bottom: -3rem;
  }
}
/* TV  */
@media (min-width: 1200px) {
}