@charset "UTF-8";
/*Variables*/
/*Don't forget to add html when overflow-x: hidden*/
/*all*/
html, body {
  background-color: #93441A;
  overflow-x: hidden;
}

/*all Text color*/
p, h1, h2, h3, h4, h5, h6, a {
  color: #e5e7e6;
}

/*For all the h1*/
.title {
  background-color: #B67332;
}

/*Header*/
header a {
  font-size: clamp(1.5rem, 4.5vw, 6rem);
  font-family: "Fira Sans Extra Condensed", sans-serif;
  color: #e5e7e6;
}
header a:hover {
  color: #daab3a;
}
header .navbar {
  position: relative;
}
header .underline {
  position: absolute;
  bottom: 0; /* collé en bas de la nav */
  height: 5px;
  width: 0;
  background: #B67332; /* ta couleur */
  border-radius: 3px;
  transition: 0.3s;
}

/*section with the carousel of words*/
.words section {
  background-color: #daab3a;
}
.words h2 {
  font-family: "Fredericka the Great", cursive;
  font-size: clamp(2.5rem, 4.5vw, 6rem);
  text-align: center;
}

/*Me*/
.me {
  padding: 10px;
  margin: 50px 0px 50px 0px;
  text-align: center;
}
.me p {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
}
.me a {
  /*need display: inline-block for rotate*/
  display: inline-block;
  color: #daab3a;
  transition: transform 0.5s ease, text-decoration 0.5s ease;
}
.me a:hover {
  transform: rotate(3deg) scale(1.1);
  text-decoration: underline;
}
.me .img-container-profil {
  width: 300px;
  height: 300px;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5333333333);
  transition: transform 0.5s ease, rotate 0.5s ease;
}
.me .img-container-profil picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*Project*/
.projects {
  background-image: url("../image/circle-scatter-haikei.svg");
  animation: backgroundMove 25s linear infinite;
  /*For all the Projects (left and right)*/
  /*Project on the left*/
  /*Project on the right*/
}
@keyframes backgroundMove {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 0% 100%;
  }
}
.projects .top-projects {
  background-color: #93441A;
}
.projects h1 {
  margin: auto;
  text-align: center;
  font-size: clamp(2.5rem, 4vw, 9rem);
  font-family: "Fredericka the Great", cursive;
}
.projects .img-container {
  width: 550px;
  height: 550px;
  overflow: hidden;
}
.projects .img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.projects .projects-id {
  margin-bottom: 50px;
  background-color: #B67332;
  width: 60%;
}
.projects .projects-id .image-container, .projects .projects-id picture, .projects .projects-id source, .projects .projects-id img {
  border-radius: 50px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5333333333);
  transition: transform 0.5s ease, rotate 0.5s ease;
}
.projects .projects-id .image-container, .projects .projects-id picture, .projects .projects-id source, .projects .projects-id img:hover {
  rotate: 3deg;
}
.projects .projects-id .text {
  padding: 20px;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  margin: auto;
  text-align: center;
}
.projects .projects-id .text h3 {
  text-align: center;
  padding-bottom: 10%;
  font-size: clamp(2rem, 4vw, 3rem);
  font-family: "Fira Sans Extra Condensed", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.projects .projects-id .text .link {
  text-align: center;
  padding-top: 15px;
}
.projects .projects-id .text .link:hover {
  text-decoration: underline;
  color: #daab3a;
}
.projects .left {
  box-shadow: 3px 5px 15px rgba(0, 0, 0, 0.5333333333);
  padding-left: 10px;
  border-radius: 0px 50px 50px 0px;
}
.projects .left .image-container {
  margin-right: auto;
}
.projects .right {
  margin-left: auto;
  position: relative;
  box-shadow: -3px 5px 15px rgba(0, 0, 0, 0.5333333333);
  padding-right: 10px;
  border-radius: 50px 0px 0px 50px;
}
.projects .right .img-container {
  margin-left: auto;
}

/*My skills*/
.my-skills {
  margin-bottom: 50px;
}
.my-skills h1 {
  margin: auto;
  text-align: center;
  font-size: clamp(2.5rem, 4vw, 9rem);
  font-family: "Fredericka the Great", cursive;
}
.my-skills .box {
  background-color: #B67332;
  padding: 10px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5333333333);
  border-radius: 10px;
  transition: transform 0.5s ease;
}
.my-skills .box h3 {
  text-align: center;
  font-size: clamp(2rem, 4vw, 3rem);
  font-family: "Fira Sans Extra Condensed", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.my-skills .box p {
  text-align: center;
}
.my-skills .box:hover {
  transform: rotate(5deg);
}
.my-skills .text-exp {
  padding: 10px;
  margin: auto;
  text-align: end;
}
.my-skills .text-exp p {
  margin-top: 50px;
  font-size: clamp(1rem, 2vw, 1.5rem);
}

/*Footer*/
footer {
  text-align: center;
  background-color: #B67332;
}

@media (max-width: 1000px) {
  .projects .left, .projects .right {
    width: 100%;
    border-radius: 0px;
  }
}
@media (max-width: 550px) {
  .projects .img-container {
    width: 100%;
    height: 100%;
  }
}
/*Palette Couleurs*/
/*#93441A */ /*Brun foncé*/
/*#B67332 */ /*Brun clair*/
/*#DAAB3A */ /*Jaune foncé*/
/*#EEE6D8 */ /* Jaune clair */
/*#e5e7e6 */ /* Blanc cassé */
/*sass --watch scss:css  Commande to launch the scss auto-compilations
need to be done at the start every time*/

/*# sourceMappingURL=style.css.map */