#loader {
       position: fixed;
       background: var(--bg);
       width: 100%;
       height: 100svh;
       top: 0px;
       pointer-events: none;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       z-index: 10000;
       animation: loader 1.5s ease forwards;

       .title {
              font-size: 80px;
              scale: 1;
              opacity: 0;
              transition: transform 1s ease-out;
              animation-duration: 0.5s;

              &:nth-child(2), &:nth-child(10) {
                     animation: loadertxt 0.5s ease-in-out forwards 0s; 
              }
              &:nth-child(3), &:nth-child(9) {
                     animation: loadertxt 0.5s ease-in-out forwards 0.1s; 
              }
              &:nth-child(4), &:nth-child(8) {
                     animation: loadertxt 0.5s ease-in-out forwards 0.2s; 
              }
              &:nth-child(5), &:nth-child(7) {
                     animation: loadertxt 0.5s ease-in-out forwards 0.3s; 
              }
              &:nth-child(6), &:nth-child(6) {
                     animation: loadertxt 0.5s ease-in-out forwards 0.4s; 
              }
              span {
                     padding-right: 0px;
                     background-image: linear-gradient(90deg, var(--pri), var(--acc));
                     background-clip: text;
                     color: transparent;
              }
       }
       div {  
              position: absolute;
                  width: 100%;
              height: 100svh;
              background: linear-gradient(0deg, var(--bg), transparent, var(--bg));
              z-index: 10001;
       }
}
@keyframes loader {
       from {
              opacity: 1;
       }
       70% {
              opacity: 1;
       }
       to {
              opacity: 0;
       }
}
@keyframes loadertxt {
       from {
              opacity: 0;
       }
       50% {
              opacity: 1;
       }
       to {
              opacity: 0;
       }
}


#header.desktop {
       position: fixed;
       display: flex;
       flex-direction: row;
       justify-content: center;
       align-items: center;
       gap: 30px;
       align-items: center;
       background: var(--bgtrans);
       padding: 15px 25px;
       z-index: 9999;
       top: 20px;
       height: 30px;


       h1 {
              font-size: 20px;
              scale: 1;
              span {
                     padding-right: 0px;
                     background-image: linear-gradient(90deg, var(--pri), var(--acc));
                     background-clip: text;
                     color: transparent;
              }
       }

       .wrapper {
              position: relative;
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              gap: 15px;
              background: transparent;
              max-height: 100%;

              h2 {
                     font-size: 16px;
                     cursor: pointer;
                     opacity: 0.7;
                     transition: 0.1s ease;

                     &:hover {
                            opacity: 1;
                     }
              }
              .button {
                     position: relative;
                     background: transparent;
                     height: 25px;
                     opacity: 0.7;
                     transition: 0.1s ease;

                     img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                     }
              }
       }
}
#header.mobile {
       position: fixed;
       display: flex;
       background: var(--bgtrans);
       padding: 1vmax 2vmax;
       top: 2vmax;
       width: calc(90% - 4vmax);
       z-index: 9999;

       .titlething {
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              align-items: center;
              background: transparent;
              width: 100%;

              .header-toggle {
                     position: relative;
                     flex: 1;
                     background: transparent;
                     height: 100%;
                     display: flex;
                     justify-content: flex-end;
                     align-items: center;
              }
       }

       #header-mobile-expand {
              position: absolute;
              top: calc(100% + 1vmax);
              width: calc(100% - 4vmax);
              left: 0px;
              background: var(--bgtrans);
              padding: 1vmax 2vmax;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              gap: 20px;
              pointer-events: none;
              opacity: 0;
              scale: 0.95;
              transition: 0.2s ease;

              &.active {
                     pointer-events: all;
                     opacity: 1;
                     scale: 1;
              }

              .direct {
                     display: flex;
                     flex-direction: column;
                     justify-content: center;
                     align-items: flex-start;
                     gap: 15px;
                     background: transparent;
                     margin-top: 1vmax;
                     width: 100%;

                     h2 {
                            font-size: 3vmax;
                            cursor: pointer;
                            opacity: 0.7;
                            transition: 0.1s ease;

                            &:hover {
                                   opacity: 1;
                            }
                     }
              }
              .socials {
                     display: flex;
                     flex-direction: row;
                     justify-content: center;
                     align-items: center;
                     gap: 10px;
                     background: transparent;
                     margin-bottom: 1vmax;
                     width: 100%;

                     .button {
                            position: relative;
                            background: var(--bgtrans);
                            height: 6vmax;
                            flex: 1;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            cursor: pointer;

                            img {
                                   height: 75%;
                                   object-fit: cover;
                                   opacity: 0.7;
                            }

                            &:hover {
                                   background-color: var(--pri2); /* Change the background color on hover */
                            }
                     }
              }
       }

       .wrapper {
              display: none;
       }

       h1 {
              font-size: 3vmax;
              scale: 1;
              span {
                     padding-right: 0px;
                     background-image: linear-gradient(90deg, var(--pri), var(--acc));
                     background-clip: text;
                     color: transparent;
              }
       }

}

#hero.desktop {
       position: relative;
       background: linear-gradient(90deg, var(--pri), var(--acc), var(--pri), var(--acc), var(--pri));
       width: 100%;
       height: 100svh;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       background-size: 200% 200%;
       animation: heroanim 10s linear infinite;
       overflow: hidden;
       display: flex;
       justify-content: center;
       align-items: center;

       .wrapper {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              opacity: 1;
              background: 
                     repeating-linear-gradient(transparent 0px, transparent var(--hero-sz), var(--bg)var(--hero-sz), var(--bg)var(--hero-sp)),
                     repeating-linear-gradient(90deg, transparent 0px, transparent var(--hero-sz), var(--bg)var(--hero-sz), var(--bg)var(--hero-sp));
       }
       .hero-decor {
              position: absolute;
              height: 500vmax;
              aspect-ratio: 1;
              background: radial-gradient(transparent, var(--bg) 300px);
              top: 0;
              left: 0;
              translate: -50% -50%;
              scale: 1;
              pointer-events: none;
              z-index: 0;
       }
       
       .content {
              position: relative;
              z-index: 1;
              justify-content: space-between;
              display: flex;
              flex-direction: row;
              align-items: center;

              .contentText {
                     position: relative;
                     display: flex;
                     flex-direction: column;
                     justify-content: left;

                     h1 {
                            font-size: 100px;
                            color: var(--txt);
                            opacity: 1;
                            letter-spacing: -4px;

                            span {
                                   position: relative;
                                   padding-right: 15px;
                                   background-image: linear-gradient(90deg, var(--pri), var(--acc));
                                   background-clip: text;
                                   color: transparent;

                                   &:before {
                                          content: '';
                                          position: absolute;
                                          width: 100%;
                                          height: 100%;
                                          top: 0px;
                                          left: 0px;
                                          border-radius: inherit;
                                          background: linear-gradient(90deg, var(--pri), var(--acc));
                                          z-index: 0;
                                          justify-self: center;
                                          align-self: center;
                                          scale: 0.5;
                                          opacity: 0.5;
                                          filter: blur(7vmax);
                                   }
                            }
                     }
                     h2 {
                            font-size: 24px;
                            color: var(--txt);
                            opacity: 0.7;
                     }
              }
              .contentBox {
                     position: relative;
                     width: 600px;
                     min-height: 300px;
                     background: var(--bgtrans);
                     display: flex;
                     flex-direction: column;
                     justify-content: center;
                     align-items: center;
                     overflow: hidden;

                     .contentBoxPanel {
                            position: relative;
                            background: var(--bgtrans);
                            width: 100%;
                            padding: 0px 0px;
                            height: 35px;
                            top: 0px;
                            left: 0px;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            border-radius: 0 !important;

                            h2 {
                                   font-size: 12px;
                                   opacity: 0.5;
                                   margin-left: 15px;
                            }

                            .wrapper2 {
                                   position: relative;
                                   display: flex;
                                   flex-direction: row-reverse;
                                   justify-content: center;
                                   align-items: center;
                                   gap: 8px;
                                   margin-right: 15px;

                                   .dot {
                                          width: 10px;
                                          height: 10px;
                                          border-radius: 50%;

                                          &:nth-child(1) {
                                                 background: #FF5F56;
                                          }
                                          &:nth-child(2) {
                                                 background: #ffbb56;
                                          }
                                          &:nth-child(3) {
                                                 background: #78ff56;
                                          }
                                   }
                            }
                     }
                     .contentBoxMessage {
                            position: relative;
                            width: 100%;
                            min-height: 20px;
                            flex: 1;
                            background: transparent;
                            border-radius: 0 !important;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            gap: 8px;

                            h2 {
                                   font-size: 14px;
                                   color: var(--txt);
                                   opacity: 0.7;
                                   margin-left: 30px;
                                   letter-spacing: -0.4px;
                                   font-family: consolas, monospace;

                                   .red {
                                          color: #FF5F56;
                                   }
                                   .orange {
                                          color: #ffa256;
                                   }
                                   .yellow {
                                          color: #fff456;
                                   }
                                   .green {
                                          color: #5ece41;
                                   }
                                   .lightBlue {
                                          color: #56d4ff;
                                   }
                                   .blue {
                                          color: #5688ff;
                                   }
                                   .purple {
                                          color: #a856ff;
                                   }
                            }
                     }
              }

       }
}
#hero.mobile {
       position: relative;
       background: linear-gradient(
              90deg,
              var(--pri),
              var(--acc),
              var(--pri),
              var(--acc),
              var(--pri)
       );
       width: 100%;
       height: 100svh;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       background-size: 200% 200%;
       animation: heroanim 10s linear infinite;
       overflow: hidden;
       display: flex;
       justify-content: center;
       align-items: center;

       .wrapper {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              opacity: 1;
              background: repeating-linear-gradient(
                            transparent 0px,
                            transparent var(--hero-sz),
                            var(--bg)var(--hero-sz),
                            var(--bg)var(--hero-sp)
              ), repeating-linear-gradient(
                            90deg,
                            transparent 0px,
                            transparent var(--hero-sz),
                            var(--bg)var(--hero-sz),
                            var(--bg)var(--hero-sp)
              );
       }
       .hero-decor-mobile {
              position: absolute;
              height: 500vmax;
              aspect-ratio: 1;
              background: radial-gradient(transparent, var(--bg) 500px);
              top: 100%;
              left: 50%;
              translate: -50% -50%;
              scale: 1;
              pointer-events: none;
              z-index: 0;
       }
       
       .content {
              position: relative;
              z-index: 1;
              justify-content: space-between;
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: center;

              .contentText {
                     position: relative;
                     display: flex;
                     flex-direction: column;
                     justify-content: center;
                     align-items: center;

                     h1 {
                            font-size: 60px;
                            color: var(--txt);
                            opacity: 1;
                            letter-spacing: -4px;
                            text-align: center;

                            span {
                                   padding-right: 15px;
                                   background-image: linear-gradient(
                                          90deg,
                                          var(--pri),
                                          var(--acc)
                                   );
                                   background-clip: text;
                                   color: transparent;

                                   &:before {
                                          content: '';
                                          position: absolute;
                                          width: 100%;
                                          height: 100%;
                                          top: 0px;
                                          left: 0px;
                                          border-radius: inherit;
                                          background: linear-gradient(90deg, var(--pri), var(--acc));
                                          z-index: 0;
                                          justify-self: center;
                                          align-self: center;
                                          scale: 0.5;
                                          opacity: 0.5;
                                          filter: blur(5vmax);
                                   }
                            }
                     }
                     h2 {
                            font-size: 16px;
                            color: var(--txt);
                            opacity: 0.7;
                            text-align: center;
                     }
              }
              .contentBox {
                     position: relative;
                     width: 600px;
                     min-height: 300px;
                     background: var(--bgtrans);
                     display: flex;
                     flex-direction: column;
                     justify-content: center;
                     align-items: center;
                     overflow: hidden;
                     display: none;

                     .contentBoxPanel {
                            position: relative;
                            background: var(--bgtrans);
                            width: 100%;
                            padding: 0px 0px;
                            height: 35px;
                            top: 0px;
                            left: 0px;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            border-radius: 0 !important;

                            h2 {
                                   font-size: 12px;
                                   opacity: 0.5;
                                   margin-left: 15px;
                            }

                            .wrapper2 {
                                   position: relative;
                                   display: flex;
                                   flex-direction: row-reverse;
                                   justify-content: center;
                                   align-items: center;
                                   gap: 8px;
                                   margin-right: 15px;

                                   .dot {
                                          width: 10px;
                                          height: 10px;
                                          border-radius: 50%;

                                          &:nth-child(1) {
                                                 background: #FF5F56;
                                          }
                                          &:nth-child(2) {
                                                 background: #ffbb56;
                                          }
                                          &:nth-child(3) {
                                                 background: #78ff56;
                                          }
                                   }
                            }
                     }
                     .contentBoxMessage {
                            position: relative;
                            width: 100%;
                            min-height: 20px;
                            flex: 1;
                            background: transparent;
                            border-radius: 0 !important;
                     }
              }

       }
}
#about {
       background: transparent;
       padding: 10px;
       display: flex;
       justify-content: center;
       align-items: center;
       flex-direction: column;
       gap: 20px;

       &.mobile {
              &.titleLeft {
                     .aboutTitle {
                            h1 {
                                   text-align: left;
                                   max-width: 90%;
                            }
                     }
              }
              &.titleCenter {
                     .aboutTitle {
                            display: flex;
                            justify-content: center;
                            align-items: center;

                            h1 {
                                   text-align: center;
                                   max-width: 90%;
                            }
                     }
              }
       }

       &.titleCenter {
              .aboutTitle {
                     display: flex;
                     justify-content: center;
                     align-items: center;

                     h1 {
                            text-align: center;
                            max-width: 50%;
                     }
              }
       }
       &.titleLeft {
              .aboutTitle {
                     h1 {
                            text-align: left;
                            max-width: 40%;
                     }
              }
       }

       .aboutTitle {
              width: 100%;
              position: relative;
              background: transparent;
              padding: 15px 5px;

              h1 {
                     font-size: 26px;
                     color: var(--txt);
                     z-index: 1;

                     span {
                            position: relative;
                            background-image: linear-gradient(90deg, var(--pri), var(--acc));
                            background-clip: text;
                            color: transparent;

                            &:before {
                                   content: '';
                                   position: absolute;
                                   width: 100%;
                                   height: 100%;
                                   top: 0px;
                                   left: 0px;
                                   border-radius: inherit;
                                   background: linear-gradient(90deg, var(--pri), var(--acc));
                                   z-index: 0;
                                   justify-self: center;
                                   align-self: center;
                                   scale: 0.5;
                                   opacity: 1;
                                   filter: blur(4vmax);
                            }
                     }
              }
       }

       .aboutLine {
              background: transparent;
              width: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              gap: 10px;
              margin-bottom: 25px;

              &.white {
                     div {
                            background: #FFFFFF;
                            opacity: 0.2;
                     }
              }
              &.primary {
                     div {
                            background: var(--pri);
                            opacity: 0.2;
                     }
              }


              div {
                     height: 2px;
                     opacity: 0.2;
                     flex: 1;
              }
       }
       .aboutContent {
              background: transparent;
              width: 100%;
              display: flex;
              justify-content: flex-start;
              align-items: flex-start;
              gap: 15px;
              flex-direction: row;

              &.background {
                     .content {
                            background: var(--bg2);
                            padding: 20px 25px;
                     }
              }

              .content {
                     position: relative;
                     background: transparent;
                     padding: 15px 0px;
                     flex: 1;
                     display: flex;
                     justify-content: left;
                     flex-direction: column;
                     gap: 15px;

                     .title {
                            position: relative;
                            font-size: 22px;
                            background-image: linear-gradient(
                                   90deg,
                                   var(--pri),
                                   var(--acc)
                            );
                            background-clip: text;
                            color: transparent; 
                     }

                     &.skills.bigCard {
                            .container {
                                   display: grid;
                                   grid-template-rows: repeat(auto-fill, max(100px, 1fr));
                                   grid-template-columns: 1fr 1fr;
                                   gap: 10px;
                                   flex-wrap: wrap;

                                   .card {
                                          background: var(--bgtrans);
                                          padding: 15px;
                                          max-height: 150px;
                                          display: flex;
                                          flex-direction: column;
                                          justify-content: center;
                                          align-items: center;
                                          transition: 0.2s ease !important;

                                          &:hover {
                                                 box-shadow: inset 0px 0px 0px 0px var(--pri),
                                                        0px 30px 20px -20px var(--pri2);
                                                        
                                                 translate: 0px -5px;
                                          }

                                          .image {
                                                 position: relative;
                                                 border-radius: 0px !important;
                                                 height: 40px;
                                                 margin-top: 5px;
                                                 margin-bottom: 5px;

                                                 img {
                                                        height: 100%;
                                                        border-radius: 0px !important;
                                                        width: auto;
                                                        aspect-ratio: 1;
                                                 }
                                          }
                                          h1 {
                                                 font-size: 18px;
                                                 margin-top: 10px;
                                                 color: var(--pri);
                                          }
                                          h2 {
                                                 font-size: 12px;
                                                 opacity: 0.7;
                                                 text-align: center;
                                                 max-width: 75%;
                                          }
                                          h3 {
                                                 font-size: 10px;
                                                 text-align: center;
                                                 max-width: 75%;
                                                 margin-top: 10px;

                                                 span {
                                                        opacity: 0.2;
                                                 }
                                          }
                                   }
                            }
                     }
                     &.skills.smallCard {
                            .container {
                                   display: grid;
                                   grid-template-rows: repeat(auto-fill, max(100px, 1fr));
                                   grid-template-columns: 1fr 1fr;
                                   gap: 10px;
                                   flex-wrap: wrap;

                                   .card {
                                          position: relative;
                                          background: var(--bgtrans);
                                          padding: 15px;
                                          max-height: 150px;
                                          display: flex;
                                          flex-direction: column;
                                          justify-content: left;
                                          align-items: flex-start;
                                          transition: 0.2s ease !important;
                                          overflow: hidden;
                                          gap: 5px;

                                          &:hover {
                                                 box-shadow: inset 0px 0px 0px 0px var(--pri),
                                                        0px 30px 20px -20px var(--pri2);
                                                        
                                                 translate: 0px -5px;

                                                 .image {
                                                        filter: blur(0vmax);
                                                        opacity: 0.2;
                                                 }
                                          }

                                          .image {
                                                 position: absolute;
                                                 border-radius: 0px !important;
                                                 height: 80%;
                                                 opacity: 0.2;
                                                 left: 0;
                                                 translate: -50% 0%;
                                                 scale: 1.5;
                                                 filter: blur(1vmax);
                                                 transition: 0.2s ease;

                                                 img {
                                                        height: 100%;
                                                        border-radius: 0px !important;
                                                        width: auto;
                                                        aspect-ratio: 1;
                                                 }
                                          }
                                          h1 {
                                                 font-size: 18px;
                                                 color: var(--pri);
                                          }
                                          h2 {
                                                 font-size: 10px;
                                                 opacity: 0.7;
                                                 max-width: 75%;
                                          }
                                          h3 {
                                                 font-size: 10px;
                                                 text-align: center;
                                                 max-width: 75%;

                                                 span {
                                                        opacity: 0.2;
                                                 }
                                          }
                                   }
                            }
                     }
                     &.skills.pill {
                            .container {
                                   display: flex;
                                   flex-direction: row;
                                   gap: 10px;
                                   flex-wrap: wrap;

                                   .card {
                                          position: relative;
                                          background: var(--bgtrans);
                                          padding: 10px 20px;
                                          max-height: 150px;
                                          display: flex;
                                          flex-direction: column;
                                          justify-content: left;
                                          align-items: flex-start;
                                          transition: 0.2s ease !important;
                                          overflow: hidden;
                                          gap: 5px;
                                          transition: 0.2s ease;

                                          &:hover {
                                                 scale: 1.05;
                                          }

                                          .image {
                                                 position: absolute;
                                                 border-radius: 0px !important;
                                                 height: 80%;
                                                 opacity: 0.4;
                                                 translate: -50% 0%;
                                                 scale: 1.5;
                                                 filter: blur(1vmax);
                                                 transition: 0.2s ease;

                                                 img {
                                                        height: 100%;
                                                        border-radius: 0px !important;
                                                        width: auto;
                                                        aspect-ratio: 1;
                                                 }
                                          }
                                          h1 {
                                                 font-size: 15px;
                                                 color: var(--txt);
                                          }
                                          h2 {
                                                 display: none;
                                          }
                                          h3 {
                                                 display: none;
                                          }
                                   }
                            }
                     }
                     &.history {
                            .container {
                                   position: relative;
                                   background: transparent;
                                   width: 100%;
                                   min-height: 200px;

                                   .timeline {
                                          position: relative;
                                          min-height: 50px;
                                          width: 5px;
                                          background: transparent;
                                          display: flex;
                                          flex-direction: column;
                                          justify-content: center;
                                          align-items: center;
                                          margin-left: 100px;

                                          &:before {
                                                 content: '';
                                                 position: absolute;
                                                 width: 100%;
                                                 height: 100%;
                                                 top: 0px;
                                                 left: 0px;
                                                 border-radius: inherit;
                                                 background: linear-gradient(180deg, var(--pri), var(--acc));
                                                 z-index: 0;
                                                 justify-self: center;
                                                 align-self: center;
                                          }

                                          .card {
                                                 position: relative;
                                                 width: 10px;
                                                 aspect-ratio: 1;
                                                 background: var(--bg2);
                                                 border: 3px solid transparent;
                                                 border-radius: 50%;
                                                 margin: 50px 0px;
                                                 display: flex;
                                                 justify-content: center;
                                                 align-items: center;

                                                 &:nth-child(1) {
                                                        background: var(--bg2);
                                                        border: 3px solid var(--pri);
                                                        width: 20px;

                                                        .info {
                                                               &:before {
                                                                      content: '';
                                                                      position: absolute;
                                                                      top: 0;
                                                                      left: 0;
                                                                      width: 100%;
                                                                      height: 100%;
                                                                      border-radius: inherit;
                                                                      background: linear-gradient(90deg, var(--pri), var(--acc));
                                                                      opacity: 0.1;
                                                                      z-index: -1;
                                                               }
                                                        }
                                                 }

                                                 .time {
                                                        text-align: right;
                                                        position: absolute;
                                                        font-size: 12px;
                                                        color: var(--txt);
                                                        background: transparent;
                                                        width: 100px;
                                                        right: calc(100% + 15px);
                                                        font-weight: 400;
                                                 }
                                                 .info {
                                                        position: absolute;
                                                        left: calc(100% + 15px);
                                                        top: 50%;
                                                        width: 365px;
                                                        transform: translateY(-50%);
                                                        background: transparent;
                                                        display: flex;
                                                        flex-direction: column;
                                                        gap: 5px;
                                                        padding: 15px;

                                                        h1 {
                                                               font-size: 18px;
                                                               color: var(--txt);
                                                               margin: 0;
                                                        }
                                                        h3 {
                                                               font-size: 14px;
                                                               color: var(--pri);
                                                               opacity: 0.7;
                                                               margin: 0;
                                                        }
                                                        h2 {
                                                               font-size: 12px;
                                                               color: var(--txt);
                                                               opacity: 0.5;
                                                               margin: 0;
                                                        }
                                                 }
                                          }
                                   }
                            }
                     }
              }
       }
}
#projects {
       background: transparent;
       padding: 10px;
       display: flex;
       justify-content: center;
       align-items: center;
       flex-direction: column;
       gap: 20px;
       margin-top: 100px;

       &.titleCenter {
              .projectTitle {
                     display: flex;
                     justify-content: center;
                     align-items: center;

                     h1 {
                            text-align: center;
                            max-width: 50%;
                     }
              }
       }
       &.projectLeft {
              .projectTitle {
                     h1 {
                            text-align: left;
                            max-width: 40%;
                     }
              }
       }

       .projectTitle {
              width: 100%;
              position: relative;
              background: transparent;
              padding: 15px 5px;

              h1 {
                     font-size: 26px;
                     color: var(--txt);
                     z-index: 1;

                     span {
                            position: relative;
                            background-image: linear-gradient(90deg, var(--pri), var(--acc));
                            background-clip: text;
                            color: transparent;

                            &:before {
                                   content: '';
                                   position: absolute;
                                   width: 100%;
                                   height: 100%;
                                   top: 0px;
                                   left: 0px;
                                   border-radius: inherit;
                                   background: linear-gradient(90deg, var(--pri), var(--acc));
                                   z-index: 0;
                                   justify-self: center;
                                   align-self: center;
                                   scale: 0.5;
                                   opacity: 1;
                                   filter: blur(4vmax);
                            }
                     }
              }
       }

       .projectLine {
              background: transparent;
              width: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              gap: 10px;
              margin-bottom: 25px;

              &.white {
                     div {
                            background: #FFFFFF;
                            opacity: 0.2;
                     }
              }
              &.primary {
                     div {
                            background: var(--pri);
                            opacity: 0.2;
                     }
              }


              div {
                     height: 2px;
                     opacity: 0.2;
                     flex: 1;
              }
       }
       .projectMain {
              display: grid;
              grid-template-rows: repeat(auto-fill, max(100px, 1fr));
              grid-template-columns: 1fr 1fr 1fr;
              justify-content: left;
              align-content: left;
              gap: 10px;
              flex-wrap: wrap;

              .card {
                     position: relative;
                     background: var(--bg2);
                     padding: 20px;
                     display: flex;
                     flex-direction: column;
                     gap: 10px;

                     .title {
                            background: transparent;
                            width: 100%;
                            display: flex;
                            flex-direction: column;
                            gap: 10px;
                            flex: 1;
                            
                            h1 {
                                   font-size: 20px;
                                   color: var(--pri);
                                   margin: 0;
                                   display: flex;
                                   align-items: center;

                                   span {
                                          font-size: 12px;
                                          background: var(--pri2);
                                          padding: 4px 10px;
                                          border-radius: 50px;
                                          font-weight: 500;
                                          margin-left: 10px;
                                   }
                            }
                            h2 {
                                   font-size: 14px;
                                   color: var(--txt);
                                   opacity: 0.7;
                                   margin: 0;
                            }

                     }
                     .buttonWrapper {
                            display: flex;
                            align-items: center;
                            gap: 5px;

                            .button {
                                   font-size: 12px;
                                   font-weight: 500;
                                   color: var(--txt);
                                   background: var(--bgtrans);
                                   padding: 5px 10px;
                                   border-radius: 50px;
                                   display: flex;
                                   align-items: center;
                                   gap: 5px;
                                   transition: 0.2s ease;
                                   cursor: pointer;
                                   
                                   &:hover {
                                          background: var(--pri2);
                                          color: var(--pri);
                                   }

                                   &.disabled {
                                          cursor: default;
                                          opacity: 0.5;
                                          cursor: not-allowed;

                                          &:hover {
                                                 color: inherit;
                                                 background: inherit;
                                                 opacity: 1;
                                          }
                                   }
                                   span {
                                          font-size: 14px;
                                   }
                            }
                     }
              }
       }
}


#sec2.desktop {
       position: relative;
       background: transparent;
       width: 100%;
       padding: 100px 30px;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       gap: 80px;

       .title {
              background-image: linear-gradient(90deg, var(--pri), var(--acc));
              background-clip: text;
              color: transparent;
              translate: 0% 0%;
              font-size: 100px;
              transition: transform 0.3s ease-out;
       }
       .items {
              padding: 10px;
              background: transparent;
              width: 100%;
              max-width: 1200px;
              display: grid;
              grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
              row-gap: 35px;
              column-gap: 25px;

              .project-item {
                     text-decoration: none;
                     color: inherit;
                     display: flex;
                     transition: 0.2s ease;

                     &:hover {
                            transform: translateY(-5px);

                            .project-content {
                                   box-shadow: 0px 0px 0px 2px var(--pri),
                                          0px 0px 20px -2px var(--pri);
                                   border-left: 4px solid var(--pri);
                            }

                            .project-link {
                                   opacity: 1;
                                   color: var(--pri);
                            }
                     }

                     .project-content {
                            background: var(--bg2);
                            padding: 25px 30px;
                            display: flex;
                            flex-direction: column;
                            gap: 10px;
                            border-left: 4px solid transparent;
                            transition: 0.2s ease;
                            flex: 1;

                            .project-header {
                                   display: flex;
                                   justify-content: space-between;
                                   align-items: center;
                                   gap: 10px;
                                   margin-bottom: 5px;

                                   h1 {
                                          font-size: 28px;
                                          color: var(--txt);
                                          opacity: 0.9;
                                          margin: 0;
                                          flex: 1;
                                   }

                                   .project-language {
                                          font-size: 12px;
                                          font-family: inter, sans-serif;
                                          color: var(--pri);
                                          background: rgba(0, 220, 255, 0.1);
                                          padding: 6px 12px;
                                          border-radius: 50px;
                                          font-weight: 500;
                                          white-space: nowrap;
                                   }
                            }

                            h2 {
                                   font-size: 16px;
                                   color: var(--txt);
                                   opacity: 0.5;
                                   margin: 0;
                                   font-weight: 400;
                            }

                            .project-link {
                                   font-size: 14px;
                                   font-family: inter, sans-serif;
                                   font-weight: 500;
                                   color: var(--sec);
                                   opacity: 0.6;
                                   margin-top: auto;
                                   display: flex;
                                   align-items: center;
                                   gap: 5px;
                                   transition: 0.2s ease;

                                   span {
                                          font-size: 18px;
                                          font-family: 'Material Symbols Rounded';
                                   }
                            }
                     }
              }
       }
}
#sec2.mobile {
       position: relative;
       background: transparent;
       width: 100%;
       padding: 100px 0px;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       gap: 50px;

       .title {
              background-image: linear-gradient(90deg, var(--pri), var(--acc));
              background-clip: text;
              color: transparent;
              translate: 0% 0%;
              font-size: 70px;
              transition: transform 0.3s ease-out;
       }
       .items {
              padding: 0px 20px;
              background: transparent;
              width: 100%;
              display: grid;
              grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
              row-gap: 30px;
              column-gap: 15px;

              .project-item {
                     text-decoration: none;
                     color: inherit;
                     display: flex;
                     transition: 0.2s ease;

                     &:active {
                            .project-content {
                                   box-shadow: 0px 0px 0px 2px var(--pri),
                                          0px 0px 20px -2px var(--pri);
                                   border-left: 4px solid var(--pri);
                            }

                            .project-link {
                                   opacity: 1;
                                   color: var(--pri);
                            }
                     }

                     .project-content {
                            background: var(--bg2);
                            padding: 20px 25px;
                            display: flex;
                            flex-direction: column;
                            gap: 8px;
                            border-left: 4px solid transparent;
                            transition: 0.2s ease;
                            flex: 1;

                            .project-header {
                                   display: flex;
                                   justify-content: space-between;
                                   align-items: center;
                                   gap: 8px;
                                   margin-bottom: 5px;
                                   flex-wrap: wrap;

                                   h1 {
                                          font-size: 5vmax;
                                          color: var(--txt);
                                          opacity: 0.9;
                                          margin: 0;
                                          flex: 1;
                                          min-width: 100px;
                                   }

                                   .project-language {
                                          font-size: 2.5vmax;
                                          font-family: inter, sans-serif;
                                          color: var(--pri);
                                          background: rgba(0, 220, 255, 0.1);
                                          padding: 1vmax 2vmax;
                                          border-radius: 50px;
                                          font-weight: 500;
                                          white-space: nowrap;
                                   }
                            }

                            h2 {
                                   font-size: 3vmax;
                                   color: var(--txt);
                                   opacity: 0.5;
                                   margin: 0;
                                   font-weight: 400;
                            }

                            .project-link {
                                   font-size: 2.5vmax;
                                   font-family: inter, sans-serif;
                                   font-weight: 500;
                                   color: var(--sec);
                                   opacity: 0.6;
                                   margin-top: auto;
                                   display: flex;
                                   align-items: center;
                                   gap: 5px;
                                   transition: 0.2s ease;

                                   span {
                                          font-size: 4vmax;
                                          font-family: 'Material Symbols Rounded';
                                   }
                            }
                     }
              }
       }
}
#sec3.desktop {
       position: relative;
       background: transparent;
       width: 1700px;
       padding: 50px 0px;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       gap: 50px;

       .title {
              background-image: linear-gradient(90deg, var(--pri), var(--acc));
              background-clip: text;
              color: transparent;
              translate: 0px 0%;
              font-size: 100px;
              transition: transform 0.3s ease-out;
       }
       .items {
              padding: 10px;
              background: transparent;
              min-width: 50px;
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              gap: 25px;
              flex-wrap: wrap;

              div {
                     position: relative;
                     padding: 20px 40px;
                     background: var(--bg2);
                     overflow: hidden;

                     h1 {
                            color: var(--pri);
                     }
                     img {
                            pointer-events: none;
                            position: absolute;
                            opacity: 0.1;
                            height: 80px;
                            width: auto;
                            top: 50%;
                            right: -20px;
                            transform: translateY(-50%);
                     }
              }
       }
}
#sec3.mobile {
       position: relative;
       background: transparent;
       width: 100%;
       padding: 50px 0px;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       gap: 50px;

       .title {
              background-image: linear-gradient(90deg, var(--pri), var(--acc));
              background-clip: text;
              color: transparent;
              translate: 0px 0%;
              font-size: 100px;
              transition: transform 0.3s ease-out;
       }
       .items {
              padding: 10px;
              background: transparent;
              min-width: 50px;
              width: 90%;
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              gap: 25px;
              flex-wrap: wrap;

              div {
                     position: relative;
                     width: 100%;
                     padding: 20px 40px;
                     background: var(--bg2);
                     overflow: hidden;

                     h1 {
                            color: var(--pri);
                     }
                     img {
                            pointer-events: none;
                            position: absolute;
                            opacity: 0.1;
                            height: 60px;
                            width: auto;
                            top: 50%;
                            right: -10px;
                            transform: translateY(-50%);
                     }
              }
       }
}
#footer.desktop {
       position: relative;
       background: transparent;
       border-radius: 0px !important;
       width:100%;
       display: flex;
       flex-direction: row;
       align-items: center;
       gap: 10px;

       hr {
              flex-grow: 1;
              border-color: var(--pri2);
              border-style: dashed;
              height: 0px;
       }

       .ftitle {
              margin-bottom: 10px;
              margin-left: 10px;
              height: 100%;
              position: relative;
              padding: 30px;
              background: var(--bg2);
              overflow: hidden;

              div {
                     position: absolute;
                     height: 100%;
                     width: 5px;
                     background: var(--pri);
                     top: 0px;
                     left: 0px;
              }
              h1 {
                     font-size: 50px;
                     scale: 1;
                     transition: transform 1s ease-out;
                     span {
                            padding-right: 15px;
                            background-image: linear-gradient(90deg, var(--pri), var(--acc));
                            background-clip: text;
                            color: transparent;
                     }
              }
              h2 {
                     font-size: 20px;
                     font-style: italic;
                     opacity: 0.7;
              }
       }
       .items {
              margin-bottom: 10px;
              margin-right: 10px;
              position: relative;
              background: var(--bg2);
              overflow: hidden; 
              display: flex;
              gap: 10px;

              div {
                     background: transparent;
                     padding: 20px 30px;
                     text-align: right;

                     h1 {
                            color: var(--pri);
                            font-size: 30px;
                            margin-bottom: 5px;
                     }
                     h2 {
                            opacity: 0.5;
                            font-size: 20px;
                            cursor: pointer;
                            transition: 0.1s ease;

                            &:hover {
                                   opacity: 1;
                            }
                     }
              }
       }
}

#footer.mobile {
       position: relative;
       background: transparent;
       border-radius: 0px !important;
       width:100%;
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 10px;

       hr {
              flex-grow: 1;
              border-color: var(--pri2);
              border-style: dashed;
              height: 0px;
       }

       .ftitle {
              margin-bottom: 10px;
              margin-left: 10px;
              height: 100%;
              position: relative;
              padding: 30px;
              background: var(--bg2);
              overflow: hidden;

              div {
                     position: absolute;
                     height: 100%;
                     width: 5px;
                     background: var(--pri);
                     top: 0px;
                     left: 0px;
                     display: none;
              }
              h1 {
                     text-align: center;
                     font-size: 50px;
                     scale: 1;
                     transition: transform 1s ease-out;
                     span {
                            padding-right: 15px;
                            background-image: linear-gradient(90deg, var(--pri), var(--acc));
                            background-clip: text;
                            color: transparent;
                     }
              }
              h2 {
                     text-align: center;
                     font-size: 20px;
                     font-style: italic;
                     opacity: 0.7;
              }
       }
       .items {
              margin-top: 10px;
              margin-bottom: 10px;
              position: relative;
              background: var(--bg2);
              overflow: hidden; 
              display: flex;
              justify-content: center;
              width: 100%;
              gap: 10px;

              div {
                     background: transparent;
                     padding: 20px 30px;
                     text-align: right;

                     h1 {
                            color: var(--pri);
                            font-size: 30px;
                     }
                     h2 {
                            opacity: 0.5;
                            font-size: 20px;
                            cursor: pointer;
                            transition: 0.1s ease;

                            &:hover {
                                   opacity: 1;
                            }
                     }
              }
       }
}

@keyframes heroanim {
       from {
              background-position: 0%, 0%;
       }
       to {
              background-position: 0%, 100%;
       }
}