/*bar de navigation*/
.navbar {
   font-family: "Just Me Again Down Here";
   font-size: 2rem;
   height: 3rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
   color: white;
   background-color: white;
   border-bottom: 1px solid hsl(243, 100%, 69%);
   margin: 0 0 1rem 0;
   padding: 1rem 0 1rem 0;
   position: sticky;
   top: 0;
   z-index: 1;
}

.navbar__background {
   width: 100%;
   height: 4.2rem;
   background-color: #6C63FF;
   margin-bottom: 1rem;
}

.nav {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 3rem;
}

.navbar__logo {
   color: white;
   text-decoration: none;
   display: flex;
   align-items: center;
}

.navbar__logoInitiales {
   margin-left: 3rem;
   margin-right: 0.5rem;
   font-family: 'Titillium Web', sans-serif;
   font-weight: 600;
   font-size: 1rem;
   border: 1px solid white;
   border-radius: 100px;
   aspect-ratio: 1;
   text-align: center;
   display: flex;
   align-items: center;
   padding: 0.2rem;
   max-width: 100%;
}

@media screen and (max-width: 1034px) {
   .navbar__logoInitiales {
      margin-left: 1rem;
   }   
}

@media screen and (max-width: 990px) {
   .navbar__logoTxt {
      display: none;
   }  
   .navbar__logoInitiales {
      margin-left: 2rem;
      font-size: 1.5rem;
   }
}

.navbar__links {
   margin-left: 5rem;
}

.navbar__settings {
   display: flex;
}

.navbar__selectLanguage, .dark-mode__button {
   cursor: pointer;
   background-color: #6C63FF;
   color: white;
   padding: 0.5rem;
   margin: 1rem;
}

.navbar__dark-mode {
   display: flex;
   align-items: center;
   margin-right: 2rem;   
}

.dark-mode__button {
   align-items: center;
   display: flex;
}

.dark-mode__radio {
   cursor: pointer;
   appearance: none;
   border-radius: 50%;
   width: 1.2rem;
   height: 1.2rem;
   border: 1px solid #4A43CC;
}

.dark-mode__radio:checked {
   appearance: none;
   background-color: white;
}

.navbar__link {
   color: white;
   text-decoration: none;
   margin-right: 1rem;
}

.navbar__link:hover {
   text-decoration: underline;
}

.burger {
   display: none;
   flex-direction: column;
   cursor: pointer;
   margin-right: 2.5rem;
   /*position: absolulte;
   top: 0;
   right: 0;*/
   height: 2.5rem;
   width: 2.5rem;
   padding-top: 0.2rem;
}

.burger__line {
   width: 2rem;
   height: 3px;
   background-color: white;
   margin: 4px auto;
}

@media screen and (max-width: 946px) {
   .nav, .navbar__links {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 1rem;
      background-color:  #6C63FF;
   }

   .js-navItems-hidden { 
      display: none;
   }

   .navbar__links, .navbar__name {
      margin-left: 0;
   }
   .burger {
      display: flex;
      position: absolute;
      top: 0;
      transform: translateY(-50%);
      right: -20px;   
      margin-top: 2rem;
   }
}

/*partie main*/
main {
   font-family: quicksand, sans-serif;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   max-width: 100%;
}

section {
   max-width: 100%;
}

/*Section Hero*/
.sectionHero  {
   display: flex;
   flex-direction: column;
   align-items: space-between;
   justify-content: center;
   height: 90vh;
   margin-bottom: 2rem;
}

.hero {
   display: flex;
   flex-direction: row;
   align-items: center;
   padding: 0 10% 0 10%;
}

.hero__text {
   max-width: 50%;
}

h1  {
   margin: 1rem;
   font: 13rem;
}

h1 {
 font-size: clamp(2rem, 4vw + 1rem, 3rem);
}

.hero__subtitle {
   font-size: clamp(1.2rem, 2.2vw + 0.6rem, 2.2rem);
   font-weight: 500; 
}

h1, .hero__subtitle {
   text-align: center;
}

.hero__image {
   max-width: 50%;
}

.hero__contact {
   display: flex;
   align-content:space-evenly;
   justify-content: center;
   justify-items:center ;
   margin-bottom: 3rem;
}

.hero__contactSvgPath {
   stroke: hsl(245, 17%, 29%);
   fill: hsl(245, 17%, 29%);
}

.hero__contactSvg:hover path {
   stroke: black;
   fill: black;
   background-color: black;
   animation: shake 0.5s;
   animation-iteration-count: 1;
}

.hero__contactImg {
   width: 4rem;
   margin: 0 0.5rem 0 0.5rem;
}

svg {
   height: clamp(2rem, 4vw + 1rem, 3rem);
   margin: 0 0.5rem 0 0.5rem;
}

@media (max-width: 937px ) {
   .sectionHero {
      height: auto;
   }
   .hero {
      flex-direction: column;
      padding:0;
      margin-top: 3rem;
      max-height: 80%;
   }
   .hero__title, .hero__text {
      max-width: 100%;
   }
   .hero__image {
      max-width: 60vw;
   }
}

.hero__arrowDown {
   align-self: center;
   margin-top: 2rem;
   animation: moveDown 4s ease-in 2s 3 forwards normal;
}

@media (max-width: 937px ) {
   .hero__arrowDown {
      transform: translateY(-1rem);
      animation: paused;
   }
}

/*Section about*/
.sectionAbout {
   align-items: center;
   min-height: 60vh;
   background-color: #F7F5FA;
   max-width: 100%;
   position: relative;
   z-index: -2;
}

.sectionAbout, .skills, .projects {
   padding: 2rem 10% 2rem 10%;  
   display: flex;
   flex-direction: column;
   justify-items: center;
}

.about {
    display: flex; 
    align-items: center;
    position: relative;
}

.about__text  {
   z-index: 2;
}

.about__image {
   max-height: 32vh;
   width: auto;
   align-self: center;
   justify-self: center;
   margin-right: 3rem;
   /*border: 2px solid  #3F3D56;*/
   /*border-radius: 100%;*/
}

.about__decorationBig {
   height: 40vh;
   aspect-ratio: 1;
   background-color: #4A43CC;
   color: #4A43CC;
   clip-path: circle(15vw at right bottom);
   position: absolute;
   right: 0;
   bottom: 0;
   z-index: -1;
}

.about__decorationSmall {
   height: 10vw;
   aspect-ratio: 1;
   border-radius: 100%;
   background-color: hsla(243, 100%, 69%, 0.2);;
   position: absolute; 
   left: 20%;
   bottom: 0;
   animation: floating 120s linear running infinite;
}

.about__decorationSmaller {
   height: 5vw;
   aspect-ratio: 1;
   border-radius: 100%;
   background-color: #4A43CC;
   position: absolute;
   left: -5%;
   bottom: 80%;
}

@media screen and (max-width: 937px) {
   .about {
      flex-direction: column;
      width: 100%;
      justify-content: center;
      margin: 0 0 1rem 0;
      padding: 2rem 0 2rem 0;
   }
   .about__image {
      margin: 1rem auto 1rem auto;
   }
}

/*section skills*/
.skillsSection {
   background-color: #F7F5FA;
   background-size: contain;
   width: 100%;
   padding-top: 2rem;
}

.skills {
   text-transform: uppercase;
}

.skill_list {
   background-color: #4A43CC;
   color:white;
   border-radius: 10px;
   min-height: 3vh;
   display: flex;
   align-content: center;
   align-items: center;
   justify-content: center;
   justify-items: center;
   font-size: clamp(0.7rem, 1vw, 1rem);
   font-weight: bolder;
}

.skill_listItem {
   padding: 0 1rem 0 1rem;
}

@media (max-width: 680px) {
   .skills {
      padding: 2rem 0.5rem;
   }
}

@media (max-width: 476px) {
   .skill_list {
   flex-direction: column;
   border: 10px double #E3DCEB;
   }
   .skill_listItem {
      padding: 0.5rem 0 0.5rem 0;
   }
}

.skills__cv {
   display: flex;
   align-items: center;
}

.skills__cvSvg {
   height: clamp(2rem, 4vw + 1rem, 3rem);
   margin: 2rem auto 2rem auto;
}

.cvSvgColor {
   stroke: #3F3D56;
   fill: #3F3D56;
}

.skills__cvSvg:hover > .cvSvgColor {
   stroke: black;
   fill: black;
}

.projects__text, .contact__text{
   font-size: clamp(1rem, 2vw, 1.5rem);
}

/*Section contact*/
.contact__methods {
   display: flex;
   max-width: 50%;
}

.contactSection {
   display: flex;
   flex-direction: column;
   justify-items: center;
   align-items: center;
   color: black;
}

.sectionContact__text {
   margin: 2rem;
}

.sectionContact__thanks {
   margin: 5rem auto 0 auto;
   border: 1 px solid red;
}

.sectionContact__thanksText {
   font-size: 1.2;
}

.contact__text {
   text-align: center;
   font-size: 1.2rem;
   margin: 1rem auto;
}

.callToAction {
   background-color: #4A43CC;
   border-radius: 5px;
   text-decoration: none;
   padding: 10px;
   transition: transform 0.25s ease, box-shadow 0.25s ease;
}

   .callToAction:hover {
      transform: scale(1.05);
      box-shadow: 0 12px 24px rgba(0,0,0,0.15);
      background-color: #6C63FF;
   }

.callToAction a {
   text-decoration: none;
   margin-bottom: 0;
   font-size: clamp(1.1rem, 1.5vw + 0.5rem, 1.5rem);
   font-weight: 700;
   color: white;  
}

/*Footer*/
.footer {
   font-size: 0.8rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-top: 3rem;
   border-top: 1px solid #E3DCEB;
   color:hsl(245, 17%, 29%);
   padding: 1rem;
}

/*Animations*/
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

@keyframes moveDown {
   0% { transform: translateY(0); }
   10% { transform: translateY(1rem); }
   20% { transform: translateY(2rem); }
   30% { transform: translateY(3rem); }
   40% { transform: translateY(4rem); }
   50% { transform: translateY(4rem); }
   75% { transform: translateY(4rem); }
   100% { transform: translateY(4rem); }
}

@keyframes floating {
   0% { transform: translate(0, 0);}     
   10% { transform: translate(-20vw, -20vh);}
   20% { transform: translate(0,0);}
   60% { transform: translate(70vw, -30vh);}
   100% { transform: translate(0, 0);}
}