:root {
   --clr-background: hsl(216, 27.78%, 7.06%);
   --clr-text: hsl(210, 66.67%, 96.47%);
   --clr-primary: hsl(217.5, 80%, 1.96%);
   --clr-primary-1: hsl(212.52, 94.69%, 22.16%);
   --clr-accent: hsl(216, 19.23%, 10.2%);
   --clr-accent-1: hsl(212.62, 94.9%, 30.78%);
   --clr-accent-2: hsl(212.62, 94.9%, 40.78%);
   --clr-border: rgba(255, 255, 255, 0.1);

   --h-nav: 4rem;
   --pt-nav: 30px;
}

body {
   font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
   background-color: var(--clr-background);
   color: var(--clr-text);
}

.primary-nav {
   --px-nav: 4rem;

   background-color: var(--clr-primary-1);
   color: var(--clr-text);
   border-top: 1px solid var(--clr-border);
   border-bottom: 1px solid var(--clr-border);

   display: flex;
   justify-content: space-between;
   align-items: center;

   height: var(--h-nav);
   padding-inline: var(--px-nav);

   position: absolute;
   width: 100%;
   top: var(--pt-nav);
   z-index: 9999;
}

.nav-list {
   --w-navlist: 45rem;

   display: flex;
   align-items: center;

   width: var(--w-navlist);
   height: 100%;
}

.nav-item {
   --ff-navitem: "Kollektif", sans-serif;
   --fs-navitem: 0.75rem;
   --ls-navitem: 0.1rem;
   --ls-navitem-hover: 0.8rem;

   display: flex;
   justify-content: center;
   align-items: center;

   font-family: var(--ff-navitem);
   font-size: var(--fs-navitem);
   font-weight: 700;

   height: 100%;
   flex: 1;

   letter-spacing: var(--ls-navitem);
   transition: letter-spacing 0.15s ease-in-out, glow 0.3s ease-in-out,
      background-color 0.1s ease-in-out;
   cursor: pointer;

   &:hover {
      background-color: var(--clr-accent-1);
      animation: glow 1.5s infinite alternate ease-in-out;
      letter-spacing: var(--ls-navitem-hover);
   }
}

.nav-link {
   height: 100%;
   width: 100%;

   display: flex;
   justify-content: center;
   align-items: center;
}

.logo {
   height: 2.5rem;

   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   align-items: center;

   .logo-img {
      height: 2rem;
   }
}

main {
   --padding: calc(var(--h-nav) + var(--pt-nav));
   height: 100dvh;
   padding-top: var(--padding);

   display: flex;
   justify-content: center;
   align-items: center;
}

.intro-section {
   height: 90%;
   width: 90%;
   border: 1px solid var(--clr-border);
   border-radius: 1rem;
   overflow: hidden;

   display: flex;
   align-items: center;
   gap: 3rem;

   padding-inline: 6rem;
}

.profile-info {
   display: flex;
   flex-direction: column;
   justify-content: center;
   flex: 1.8;
   height: 100%;

   .profile-title {
      font-size: 15px;
   }
   .profile-name {
      font-size: 48px;
      font-weight: 500;
      padding-bottom: 0.5rem;
   }
   .profile-desc {
      font-size: 16px;
      line-height: 1.5;
      padding-bottom: 2.1rem;
   }
}

.profile-avatar {
   display: flex;
   justify-content: center;
   align-items: center;
   flex: 1;

   .avatar {
      border: 1.5px solid var(--clr-border);
      border-radius: 30% 100% 40% / 15% 40% 15%;
      object-fit: cover;
   }
}

.social-links {
   display: flex;
   gap: 1rem;

   .btn {
      display: grid;
      place-items: center;
      width: 144px;
      height: 40px;
      border-radius: 3px;
      border: 1px solid var(--clr-primary-1);
      font-size: 18px;
      font-weight: 500;
      color: var(--clr-accent-2);
      font-size: 1rem;

      transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;

      &:hover {
         background-color: var(--clr-primary-1);
         color: var(--clr-text);
         animation: faint-glow 0.8s infinite alternate ease-in-out;
      }
   }
}

.projects-container {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
   gap: 1rem;
   width: 100%;
   height: 100%;
   place-content: center;
   flex-wrap: wrap;
   padding-inline: 2rem;
} 

.project-item {
   height: 235px;
   background-color: var(--clr-accent);
   cursor: pointer;
   position: relative;

   & a {
      display: block;      /* Make the link fill the div */
      width: 100%;
      height: 100%;
      position: absolute;  /* Position it over the project */
      inset: 0;            /* Stretch to cover the div */
      z-index: 2;          /* Ensure it's above everything */
   }

   &:hover {
      transform: scale(1.05);
   }
}

.project-1 {
   background-image: url(./../assets/images/projects/cafe-menu.png);
   background-size: cover;
   background-position: center;
   transition: background-image 0.3s ease-in-out;
   position: relative;
   transition: transform 0.3s ease-in-out; 
}


.project-2 {
   background-image: url(./../assets/images/projects/orange-engineers.png);
   background-size: cover;
   background-position: top;
   transition: background-image 0.3s ease-in-out;
   position: relative;
   transition: transform 0.3s ease-in-out; 

   &::after {
      content: "";
      position: absolute;
      background-image: url('./../assets/videos/orange-engineers.gif'); 
      inset: 0;
      background-size: cover;
      opacity: 0;
      transition: opacity 0.5s ease-in-out; 
   }
   
   &:hover::after {
      opacity: 1;
    }
}
.project-3 {
   background-image: url(./../assets/images/projects/profile-card-rimuru.png);
   background-size: cover;
   background-position: top;
   transition: background-image 0.3s ease-in-out;
   position: relative;
   transition: transform 0.3s ease-in-out; 

   &::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image: url('./../assets/videos/profile-card-rimuru.gif');
      background-size: cover;
      background-position: top;
      opacity: 0; 
      transition: opacity 0.5s ease-in-out; 
    }
   
    &:hover::after {
      opacity: 1;
    }
}
.project-4 {
   background-image: url(./../assets/images/projects/registration-form-code-camp.png);
   background-size: cover;
   background-position: top;
   transition: background-image 0.3s ease-in-out;
   position: relative;
   transition: transform 0.3s ease-in-out; 

   &::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image: url('./../assets/videos/registration-form-code-camp.gif'); 
      background-size: cover;
      background-position: top;
      opacity: 0; 
      transition: opacity 0.5s ease-in-out; 
    }
   
    &:hover::after {
      opacity: 1; 
    }
}

.project-5 {
   background-image: url(./../assets/images/projects/click-mate-rentals.png);
   background-size: cover;
   background-position: top;
   transition: background-image 0.3s ease-in-out;
   position: relative;
   transition: transform 0.3s ease-in-out; 

   &::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image: url('./../assets/videos/click-mate-rentals.gif');
      background-size: cover;
      background-position: top;
      opacity: 0; 
      transition: opacity 0.5s ease-in-out; 
    }
   
    &:hover::after {
      opacity: 1;
    }
}

.project-6 {
   background-image: url(./../assets/images/projects/kohiibara.png);
   background-size: cover;
   background-position: top;
   transition: background-image 0.3s ease-in-out;
   position: relative;
   transition: transform 0.3s ease-in-out;   

   &::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image: url('./../assets/videos/kohiibara.gif'); 
      background-size: cover;
      background-position: top;
      opacity: 0;
      transition: opacity 0.5s ease-in-out; 
    }
   
    &:hover::after {
      opacity: 1; 
    }
}


.contact-section {
   height: 100%;
   width: 100%;

   display: flex;
   justify-content: center;
   align-items: center;
}

.contact-container {
   border: 1px solid var(--clr-border);
   border-radius: 0.5rem;
   padding: 2.25rem;
}

.contact-title {
   display: flex;
   flex-direction: column;

   & h1 {
      font-size: 2rem;
      font-weight: 500;
      margin-bottom: 5px;
   }
   & hr {
      border: none;
      width: 120px;
      height: 5px;
      background-color: var(--clr-accent-1);
      border-radius: 2px;
      border: 1px solid var(--clr-border);
      margin-bottom: 20px;
   }
}

.contact-form {
   display: flex;
   flex-direction: column;
}

.contact-inputs {
   width: 18.75rem;
   height: 2.8rem;
   border: none;
   outline: none;
   border-radius: 1rem;

   background-color: var(--clr-text);
   color: var(--clr-background);
   
   margin-bottom: 1.25rem;
   padding-left: 1.25rem;

   &:focus {
      border-color: var(--clr-accent-2);
      outline: 2px solid var(--clr-accent-2);
   }
}


.contact-form textarea {
   height: 8.75rem;
   padding-top: 0.938rem;
   border-radius: 1rem;
}

.contact-form button {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;

   padding-block: 0.7rem;
   padding-left: 2.5rem;
   padding-right: 2rem;
   margin-inline: auto;

   font-size: 1rem;
   font-weight: 500;

   background-color: var(--clr-primary-1);
   color: var(--clr-text);
   
   border: none;
   border-radius: 0.2rem;
   cursor: pointer;

   & img {
      height: 1rem;
   }

   &:hover {
      animation: faint-glow 0.8s infinite alternate ease-in-out;
   }
}

* {
   /* outline: 1px solid gray; */
}

/* Animation Classes */
@keyframes glow {
   0% {
      text-shadow: 0 0 5px rgba(255, 255, 255, 0.8),
         0 0 10px rgba(255, 255, 255, 0.6), 0 0 15px rgba(255, 255, 255, 0.4);
   }
   50% {
      text-shadow: 0 0 8px rgba(255, 255, 255, 1),
         0 0 16px rgba(255, 255, 255, 0.9), 0 0 24px rgba(255, 255, 255, 0.7);
   }
   100% {
      text-shadow: 0 0 5px rgba(255, 255, 255, 0.8),
         0 0 10px rgba(255, 255, 255, 0.6), 0 0 15px rgba(255, 255, 255, 0.4);
   }
}

.is-active {
   animation: glow 1.5s infinite alternate ease-in-out,
      letterSpacingAnim 0.3s forwards;
}

@keyframes faint-glow {
   0% {
      text-shadow: 0 0 1px rgba(255, 255, 255, 0.3),
         0 0 2px rgba(255, 255, 255, 0.2), 0 0 3px rgba(255, 255, 255, 0.15);
   }
   50% {
      text-shadow: 0 0 2px rgba(255, 255, 255, 0.4),
         0 0 4px rgba(255, 255, 255, 0.3), 0 0 5px rgba(255, 255, 255, 0.25);
   }
   100% {
      text-shadow: 0 0 1px rgba(255, 255, 255, 0.3),
         0 0 2px rgba(255, 255, 255, 0.2), 0 0 3px rgba(255, 255, 255, 0.15);
   }
}

.faint-glow {
   animation: faint-glow 1.5s infinite alternate ease-in-out;
}

@keyframes letterSpacingAnim {
   0% {
      letter-spacing: 0.8rem;
   }
   100% {
      letter-spacing: 0.1rem;
   }
}