/*=============== GOOGLE FONTS ===============*/
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

/*=============== VARIABLES CSS ===============*/
:root {
   /*========== Colors ==========*/
   --black: rgba(0, 0, 0, 1);
   --green: rgba(0, 168, 107, 1);
   --red: rgba(237, 41, 57, 1);
   --royal-blue: rgba(65, 105, 225, 1);
   --white-100: rgba(255, 255, 255, 1);
   --white-10: rgba(255, 255, 255, 0.1);
   --white-5: rgba(255, 255, 255, 0.05);

   /*========== Font and typography ==========*/
   /*.5rem = 8px | 1rem = 16px ...*/
   --body-font: "DM Sans", sans-serif;
   --biggest-font: 2rem;
   --big-font: 1.5rem;
   --h3-font: 1rem;
   --normal-font: 1rem;

   /*========== Font weight ==========*/
   --font-regular: 400;
   --font-medium: 500;
   --font-bold: 700;
   --font-black: 900;
}

/*=============== Base ===============*/
* {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
   scrollbar-width: none;
}

body {
   font-family: var(--body-font);
   font-size: var(--normal-font);
   background-color: var(--black);
   color: var(--white-100);
   cursor: url('../cursor.svg'), auto;
   overflow-x: hidden;
}

ul {
   list-style: none;
}

a {
   text-decoration: none;
}

img {
   display: block;
   height: 100%;
   width: 100%;
   object-fit: cover;
}

i {
   color: var(--white-100);
   font-size: 32px;
}

section {
   scroll-margin: 72px;
}

::selection,
::-moz-selection {
   background-color: var(--royal-blue);
}

/* ========== Header ========== */
.header {
   z-index: 2;
   background-color: var(--black);
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   padding: 16px;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

/* ===== Logo ===== */
.logo {
   font-size: 2rem;
   font-weight: var(--font-black);
   color: var(--white-100);
}

/* ========== Navigation ========== */
.nav {
   z-index: 3;
   max-width: 350px;
   width: 70%;
   display: none;
   position: absolute;
   top: 10px;
   right: 10px;
}

.nav__list {
   padding: 25px;
   display: flex;
   flex-direction: column;
   row-gap: 10px;
   border-radius: 10px;
   background-color: var(--royal-blue);
   box-shadow: -7px 9px 18px -5px rgba(0, 0, 0, 0.75);
}

.nav__link {
   display: inline-flex;
   font-size: 1.5rem;
   font-weight: var(--font-medium);
   color: var(--white-100);
   transition: padding-left .3s ease-out;
   white-space: nowrap;
}

.nav__link:hover {
   padding-left: 20px;
}

.nav__social-links {
   margin-top: 40px;
   display: flex;
   align-items: center;
   column-gap: 20px;
}

.desktop {
   display: none;
}

.social-link img {
   height: 30px;
}

.toggle,
.close {
   border: none;
   background: transparent;
   z-index: 3;
}

/* ===== Close button ===== */
.close {
   display: none;
}

/* ========== Home section ======== */
.home-section {
   position: relative;
   width: 100%;
   margin: 0 auto;
   max-width: 1700px;
   height: 100vh;
   text-align: center;
   display: flex;
   justify-content: center;
   align-items: center;
}

.home-title {
   font-size: 2.25rem;
   font-weight: var(--font-regular);
   line-height: 120%;
}

.home-description {
   font-size: 1.2rem;
   margin: 1rem 0;
}

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

.blue::selection {
   color: var(--black);
}

.cta {
   display: inline-block;
   font-size: 1rem;
   font-weight: var(--font-bold);
   color: var(--white-100);
   padding: 1rem 1.5rem;
   background-color: transparent;
   border: 2px solid var(--white-100);
   border-radius: 5px;
   transition: all .3s ease-out;
}

.cta:hover {
   color: var(--black);
   background-color: var(--white-100);
}

/* ========== About section ======== */
.about-section {
   margin: 200px auto;
   width: 90%;
   max-width: 1580px;
}

.section-title {
   font-size: 2rem;
   font-weight: var(--font-medium);
   text-align: center;
   margin-bottom: 64px;
}

@media screen and (min-width: 1024px) {
   .section-title {
      margin-bottom: 100px;
   }
}

.wrapper {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 128px;
}

/* ===== Left content ===== */
.left-content {
   display: flex;
   flex-direction: column;
   row-gap: 16px;
}

.left-content__title {
   font-size: 40px;
   font-weight: var(--font-medium);
   line-height: 120%;
}

.skills-list {
   display: flex;
   gap: 24px;
}

.skills-list li img {
   height: 50px;
}

/* ===== Right content ===== */
.right-content {
   position: relative;
   display: flex;
   /* justify-content: center;
   align-items: end; */
   width: 280px;
   height: 400px;
   border-radius: 20px;
   background-color: var(--white-5);
}

.right-content::before,
.right-content::after {
   position: absolute;
   content: "";
   z-index: 99;
   background-color: var(--royal-blue);
   box-shadow: 24px 37px 21px -9px rgba(255, 255, 255, 0.42) inset;
   border-radius: 50%;
   filter: blur(20px);
   width: 80px;
   height: 80px;
   animation: floatingX 2s ease-in-out infinite;
}

.right-content::before {
   top: -10%;
   left: -10%;
}

.right-content::after {
   bottom: -10%;
   right: -10%;
   animation-delay: -1s;
}

.right-content img {
   position: absolute;
   bottom: 0;
   object-fit: cover;
   border-radius: 20px;
}

@media screen and (min-width: 768px) {
   .right-content::before,
   .right-content::after {
      width: 100px;
      height: 100px;
   }
}

/* ========== Inspirations ========= */
.gallery-wrapper {
   margin: 150px auto 250px;
   max-width: 1000px;
   width: 90%;
}

.gallery {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   gap: 15px;

}

.img-box {
   position: relative;
   width: 100%;
   height: 250px;
   border-radius: 15px;
   overflow: hidden;
   transition: all .5s ease-out;
}

.img-box::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100px;
   background: linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, .5) , rgba(0, 0, 0, 0));
   transition: all .5s ease-out;
}

.img-box:hover {
   cursor: pointer;
}

.img-box:nth-child(1){
   background: center / cover url('../images/inspirations/jeu.png');
}

.img-box:nth-child(2){
   background: center / cover url('../images/inspirations/musique.jpg');
}

.img-box:nth-child(3){
   background: center / cover url('../images/inspirations/3d.jpg');
}

.img-box:nth-child(4){
   background: center / cover url('../images/inspirations/design.jpg');
}

.img-box:nth-child(5){
   background: center / cover url('../images/inspirations/anime.jpg')
}

.box-title, 
.box-tags {
   z-index: 1;
   position: absolute;
   left: 15px;
   transition: all .3s ease-out;
}

.box-title {
   font-size: 2rem;
   font-weight: var(--font-bold);
   bottom: 40px;
}

.box-tags {
   font-size: 1rem;
   position: absolute;
   bottom: 20px;
}

/* ========== Portrait chinois ========== */
.details-wrapper {
   margin: 150px auto 250px;
   max-width: 700px;
   height: 450px;
}

details {
   width: 100%;
   display: flex;
   flex-direction: column;
}

summary {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 1.5rem;
   font-weight: var(--font-medium);
   padding: 20px 10px;
   border-bottom: 3px var(--white-100) solid;
}

summary::marker {
   display: none;
}

details summary{
   transition: all .3s ease-out; 
}

details[open=""] summary i {
   transform: rotate(180deg);
   /* transition: all .3s ease-out;  */
}

details p {
   font-size: 1.2rem;
   padding: 20px 20px 10px;
   color: rgba(255, 255, 255, 0.9);
}

/* ========== Project section ========== */
.projects-section {
   width: 90%;
   margin: 200px auto;
   max-width: 1500px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

.projects-list {
   position: relative;
   display: grid;
   grid-template-columns: repeat(1, 1fr);
   gap: 28px;
}

/* ========== Bubble ========== */
.projects-list::before,
.projects-list::after {
   position: absolute;
   content: "";
   z-index: -1;
   background-color: var(--royal-blue);
   box-shadow: 24px 37px 21px -9px rgba(255, 255, 255, 0.42) inset;
   border-radius: 50%;
   filter: blur(20px);
   width: 120px;
   height: 120px;
   animation: floatingY 2s ease-in-out infinite;
}

.projects-list::before {
   top: -3%;
   left: -15%;
}

.projects-list::after {
   bottom: -2%;
   right: -15%;
   animation-delay: -1s;
}

@media screen and (min-width: 680px) {
   .projects-list::before,
   .projects-list::after {
      width: 120px;
      height: 120px;
   }

   .projects-list::before {
      top: -7%;
      left: -5%;
   }

   .projects-list::after {
      bottom: -7%;
      right: -5%;
   }
}

@media screen and (min-width: 1280px) {
   .projects-list::before,
   .projects-list::after {
      width: 200px;
      height: 200px;
      animation: floatingZ 2s ease-in-out infinite;
   }

   .projects-list::before {
      top: -15%;
      left: -10%;
   }

   .projects-list::after {
      bottom: -15%;
      right: -10%;
      animation-delay: -1s;
   }
}
/* ========== End of Bubble ========== */

.projects-item {
   background-color: var(--white-5);
   width: 280px;
   height: 280px;
}

.projects-item img {
   filter: grayscale(1);
   transition: filter .3S ease-in-out;
}

.projects-item img:hover {
   /* filter: none; */
   filter: grayscale(0);
}

/* ========== Page projets ========== */
.projets {
   width: 90%;
   max-width: 1500px;
   margin: 200px auto 150px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   row-gap: 100px;
}

.projets .wrapper {
   /* flex-direction: column; */
   gap: 40px;
}

.projets-content {
   display: flex;
   flex-direction: column;
   row-gap: 10px;
   /* width: 50%; */
}

.projets-content__title {
   font-size: 40px;
   font-weight: var(--font-medium);
   line-height: 120%;
}

.projets-content__infos {
   color: var(--white-100);
   font-weight: var(--font-medium);
}

.projets-content__description {
   font-size: 1.125rem;
}

.illustration {
   width: 100%;
   height: 350px;
   /* width: 350px;
   height: 350px; */
   background-color: var(--white-5);
}

.cta-projet {
   margin-top: 10px;
   display: inline-flex;
   align-self: self-start;
}

.cta-projet:hover {
   color: var(--black);
   background-color: var(--white-100);
}

/* ========== Contact section ========== */
.contact-section {
   margin: 200px auto;
   width: 90%;
   max-width: 800px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

form {
   position: relative;
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 16px;
}

.form__names,
.form__email,
.form__message {
   display: flex;
   flex-direction: column;
}

.form__names,
.form__email,
.form__message {
   width: 100%;
}

.firstname__field,
.lastname__field {
   display: flex;
   flex-direction: column;
}

.firstname__field {
   margin-bottom: 16px
}

label {
   color: var(--white-100);
   font-size: 1.125rem;
   font-weight: var(--font-bold);
   margin-bottom: 10px;
}

input:not(input[type="submit"]),
textarea {
   font-size: 1rem;
   color: var(--white-100);
   font-weight: var(--font-regular);
   background-color: transparent;
   padding-left: 20px;
   height: 55px;
   border: 2px solid var(--white-100);
   border-radius: 5px;
   outline: none;
}

input::placeholder,
textarea::placeholder {
   color: var(--white-100);
   font-family: var(--body-font);
   font-size: 1rem;
   font-weight: var(--font-regular);
}

textarea {
   /* width: 100%; */
   height: 225px;
   padding: 15px 20px;
   resize: none;
}

.submit-container {
   position: relative;

}

.submit-container::after {
   position: absolute;
   content: "";
   z-index: -1;
   top: 5px;
   left: -20px;
   background-color: var(--royal-blue);
   box-shadow: 24px 37px 21px -9px rgba(255, 255, 255, 0.42) inset;
   border-radius: 50%;
   filter: blur(10px);
   width: 80px;
   height: 80px;
   animation: moving 2s ease-in-out infinite;
}

.submit-btn {
   margin-top: 20px;
   display: inline-block;
   font-size: 1.25rem;
   font-weight: var(--font-bold);
   color: var(--white-100);
   padding: 15px 40px;
   background-color: var(--white-5);
   /* background-color: transparent; */
   border: 2px solid var(--white-100);
   border-radius: 5px;
   transition: all .3s ease-out;
   cursor: pointer;
}

.submit-btn:hover {
   color: var(--black);
   mix-blend-mode: screen;
   background-color: var(--white-100);
}

/* ========== Footer ========== */
.footer {
   position: relative;
   padding: 28px 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   row-gap: 16px;
   text-align: center;
}

.footer::before {
   z-index: -1;
   position: absolute;
   content: "";
   bottom: 0;
   left: 0;
   width: 250px;
   height: 200px;
   border-top-right-radius: 100%;
   background-color: var(--royal-blue);
   filter: blur(80px);

}

@media screen and (min-width: 768px) {
   .footer::before {
      width: 325px;
      height: 250px;
      filter: blur(120px);
   } 
}

.footer .links {
   display: flex;
   align-items: center;
   gap: 18px;
}


/* ========== Responsive =========== */
/* ========== Navigation responsive =========== */
/* ====== 1280px ====== */
@media screen and (min-width: 1280px) {
   .header {
      padding: 16px 128px;
   }

   .nav {
      position: static;
      /* width: 100%; */
      display: flex;
      justify-content: space-around;
      align-items: center;
   }

   .nav__list {
      flex-direction: row;
      align-items: center;
      gap: 4.25rem;
      width: auto;
      padding: 0;
      background-color: transparent;
      border-radius: 0;
   }

   .nav__link {
      position: relative;
      font-size: 1.25rem;
   }

   .nav__link::after {
      position: absolute;
      content: '';
      left: 0;
      bottom: 0;
      width: 0%;
      height: 2px;
      background-color: var(--white-100);
      transition: width .3s ease-out;
   }

   .nav__link:hover {
      padding-left: 0;
   }

   .nav__link:hover::after {
      width: 100%;
   }

   .desktop {
      display: flex;
      margin-top: 0;
   }

   .mobile {
      display: none;
   }

   .social-link {
      border: 2px solid var(--white-100);
      border-radius: 100%;
      padding: 8px;
   }

   .social-link img {
      height: 20px;
   }

   .toggle,
   .close {
      display: none;
   }
}

/* ========== Home responsive =========== */
/* ====== 680px ====== */
@media screen and (min-width: 680px) {
   .home-title {
      font-size: 3.75rem;
   }
}

/* ====== 1024px ====== */
@media screen and (min-width: 1024px) {
   .home-title {
      font-size: 5rem;
   }
}

/* ====== 1280px ====== */
@media screen and (min-width: 1240px) {
   .home-title {
      font-size: 6rem;
   }

   .home-description {
      font-size: 1.5rem;
      margin: 1.5rem 0;
   }
}

/* ========== About responsive =========== */
/* ====== 800px ====== */
@media screen and (min-width: 800px) {
   .about-section {
      margin-bottom: 400px
   }

   .wrapper {
      flex-direction: row;
      justify-content: space-around;
      margin-bottom: 300px;
   }

   .left-content {
      width: 50%;
      max-width: 580px;
   }
}

/* ====== 1280px ====== */
@media screen and (min-width: 1280px) {
   .left-content__title {
      font-size: 3.25rem;
   }

   .left-content__description {
      font-size: 1.15rem;
   }

   .skills-list li img {
      height: 3.75rem;
   }
}

/* ========== Inspirations ========= */
/* ====== 814px ====== */
@media screen and (min-width: 814px) {
   .gallery-wrapper {
      margin: 150px auto 250px;
      height: 450px;
   }
   
   .gallery {
      flex-direction: row;
      gap: 30px;
   }

   /* affichage original */
   .img-box {
      flex: 1;
      height: 100%;
      filter: grayscale(1);
   }
   
   .img-box::after {
      bottom: -100px;
   }
   
   .img-box:hover {
      flex: 4;
      filter: grayscale(0);
   }
   
   .img-box:hover::after {
      bottom: 0;
   }
   
   .box-title, 
   .box-tags {
      opacity: 0;
   }
   
   .box-title {
      bottom: -15px;
   }
   
   .box-tags {
      bottom: -20%;
   }
   
   .img-box:hover .box-title,
   .img-box:hover .box-tags {
      opacity: 1;
   }
   
   .img-box:hover .box-title {
      bottom: 40px;
   }
   
   .img-box:hover .box-tags {
      bottom: 20px;
   }
}

/* ========== Project responsive =========== */
/* ====== 680px ====== */
@media screen and (min-width: 680px) {
   .projects-list {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(3, 1fr);
   }
}

/* ====== 1024px ====== */
@media screen and (min-width: 1024px) {
   .projects-list {
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(2, 1fr);
   }
}

/* ========== Page projets responsive =========== */
/* ====== 800px ====== */
@media screen and (min-width: 800px) {
   .projets .wrapper:nth-child(even) {
      flex-direction: row-reverse;
      gap: 40px;
   }

   .projets-content,
   .illustration {
      width: 50%;
      max-width: 500px;
   }
}

/* ====== 800px ====== */
@media screen and (min-width: 800px) {
   .projets .wrapper:nth-child(even) {
      flex-direction: row-reverse;
      gap: 40px;
   }

   .projets-content,
   .illustration {
      width: 50%;
      max-width: 450px;
      height: 450px;
   }
}

/* ====== 1024px ====== */
@media screen and (min-width: 1024px) {
   .projets {
      row-gap: 150px;
   }


   .illustration {
      height: 450px;
   }
}

/* ========== Form responsive =========== */
/* ====== 680px ====== */
@media screen and (min-width: 680px) {
   .form__names {
      /* flex-wrap: nowrap; */
      flex-direction: row;
      /* justify-content: space-between; */
      gap: 20px;
   }

   .form__names .firstname__field,
   .form__names .lastname__field {
      width: 100%;
   }
}

/* ========== Bubble =========== */
.bubble {
   z-index: -1;
   position: absolute;
   background-color: var(--royal-blue);
   box-shadow: 24px 37px 21px -9px rgba(255, 255, 255, 0.42) inset;
   border-radius: 50%;
   filter: blur(20px);
   /* opacity: .7; */
}

.bubble1 {
   width: 200px;
   height: 200px;
   bottom: 5%;
   left: 5%;
   animation: floatingY 2s ease-in-out infinite;

}

.bubble2 {
   width: 100px;
   height: 100px;
   top: 15%;
   left: 20%;
   animation: floatingY 2s -.5s ease-in-out infinite;
}

.bubble3 {
   width: 150px;
   height: 150px;
   bottom: 35%;
   right: 5%;
   animation: floatingY 2s -1.5s ease-in-out infinite;
}

/* ========== Bubble responsive  =========== */
@media screen and (min-width: 768px) {
   .bubble1 {
      width: 250px;
      height: 250px;
      bottom: 5%;
   }

   .bubble3 {
      width: 200px;
      height: 200px;
      bottom: 20%;
   }
}

@media screen and (min-width: 1280px) {
   .bubble1 {
      width: 300px;
      height: 300px;
      bottom: 5%;
      left: 5%;
   }

   .bubble3 {
      width: 200px;
      height: 200px;
      bottom: 20%;
      right: 5%;
   }
}

/* ========== Bubble animation  =========== */
@keyframes floatingY {
   0% {
      transform: translateY(0);
   }

   50% {
      transform: translateY(20px);

   }

   100% {
      transform: translateY(0);
   }
}

@keyframes floatingX {
   0% {
      transform: translateX(0);
   }

   50% {
      transform: translateX(20px);

   }

   100% {
      transform: translateX(0);
   }
}

@keyframes floatingZ {
   0% {
      transform: translate(0);
   }

   50% {
      transform: translate(20px, 20px);

   }

   100% {
      transform: translate(0);
   }
}

@keyframes moving {
   0% {
      transform: translateX(0);
   }

   50% {
      transform: translateX(150%);

   }

   100% {
      transform: translateX(0);
   }
}

/* ========== Message de confirmation  =========== */
.message {
   padding: 20px;
   border-radius: 10px;
}

.success {
   background-color: var(--green);
}

.error {
   background-color: var(--red);
}