/* Local Fonts */
@font-face {
     font-family: 'Inter';
     src: url('./fonts/Inter-Regular.woff2') format('woff2');
     font-weight: 400;
     font-style: normal;
     font-display: swap;
}

@font-face {
     font-family: 'Inter';
     src: url('./fonts/Inter-SemiBold.woff2') format('woff2');
     font-weight: 600;
     font-style: normal;
     font-display: swap;
}

@font-face {
     font-family: 'Inter';
     src: url('./fonts/Inter-Bold.woff2') format('woff2');
     font-weight: 700;
     font-style: normal;
     font-display: swap;
}

@font-face {
     font-family: 'Oswald';
     src: url('./fonts/Oswald-Regular.woff2') format('woff2');
     font-weight: normal;
     font-style: 400;
     font-display: swap;
}

@font-face {
     font-family: 'Oswald';
     src: url('./fonts/Oswald-Bold.woff2') format('woff2');
     font-weight: 700;
     font-style: normal;
     font-display: swap;
}

@font-face {
     font-family: 'Font Awesome 6 Free';
     font-style: normal;
     font-weight: 900;
     font-display: swap;
     src: url('./fonts/fa-solid-900.woff2') format('woff2');
}

@font-face {
     font-family: 'Font Awesome 6 Brands';
     font-style: normal;
     font-weight: 400;
     font-display: swap;
     src: url('./fonts/fa-brands-400.woff2') format('woff2');
}

:root {
     /* Colors */
     --text: hsl(0, 0%, 17%);
     --background: hsl(0, 0%, 100%);
     --primary: hsl(210, 100%, 40%);
     --error-color: hsl(0, 92.16%, 80%);
     --success-color: hsl(133.7, 61.35%, 40.59%);

     /* shades */
     --text-50: hsl(0, 0%, 95%);
     --text-100: hsl(0, 0%, 90%);
     --text-200: hsl(0, 0%, 80%);
     --text-300: hsl(0, 0%, 70%);
     --text-400: hsl(0, 0%, 60%);
     --text-500: hsl(0, 0%, 50%);
     --text-600: hsl(0, 0%, 40%);
     --text-700: hsl(0, 0%, 30%);
     --text-800: hsl(0, 0%, 22%);
     --text-900: hsl(0, 0%, 10%);
     --text-950: hsl(0, 0%, 5%);

     --background-20: hsl(0, 0%, 98%);
     --background-30: hsl(0, 0%, 97%);
     --background-50: hsl(0, 0%, 95%);
     --background-75: hsl(0, 0%, 92%);
     --background-100: hsl(0, 0%, 90%);
     --background-200: hsl(0, 0%, 80%);
     --background-300: hsl(0, 0%, 70%);
     --background-400: hsl(0, 0%, 60%);
     --background-500: hsl(0, 0%, 50%);
     --background-600: hsl(0, 0%, 40%);
     --background-700: hsl(0, 0%, 30%);
     --background-800: hsl(0, 0%, 20%);
     --background-900: hsl(0, 0%, 10%);
     --background-950: hsl(0, 0%, 5%);

     --primary-50: hsl(210, 100%, 95%);
     --primary-100: hsl(211, 100%, 90%);
     --primary-200: hsl(210, 100%, 80%);
     --primary-300: hsl(210, 100%, 70%);
     --primary-400: hsl(210, 100%, 60%);
     --primary-500: hsl(210, 100%, 50%);
     --primary-600: hsl(210, 100%, 40%);
     --primary-700: hsl(210, 100%, 30%);
     --primary-800: hsl(210, 100%, 20%);
     --primary-900: hsl(211, 100%, 10%);
     --primary-950: hsl(210, 100%, 5%);

     /* Gradients */

     /* Typography */
     --fs-1000: clamp( 2rem, 1.295774647887324rem + 3.004694835680751vw, 4rem );
     --fs-900: 3rem;
     --fs-850: clamp(2rem, 1.823943661971831rem + 0.7511737089201878vw, 2.5rem);
     --fs-800: 2rem;
     --fs-750: 1.875rem;
     --fs-700: 1.75rem;
     --fs-650: 1.5rem;
     --fs-625: 1.375rem;
     --fs-600: 1.25rem;
     --fs-500: 1.125rem;
     --fs-400: 1rem;
     --fs-350: clamp( 0.875rem, 0.7869718309859155rem + 0.3755868544600939vw, 1.125rem );
     --fs-300: 0.875rem;
     --fs-200: 0.75rem;
     --fs-100: clamp(0.625rem, 0.3365rem + 1.2308vw, 0.875rem);
     --ff-header: "Oswald", sans-serif;
     --ff-body: "Inter", sans-serif;

     /* Custom Properties */
     --border-radius: 6px;
     --gutter-width: 2rem;
     --container-width: 1440px;
     --max-width: 100%;
     --min-width: 375px;
}

/* CSS Reset  */
*,
*::before,
*::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
}

ul {
     list-style-type: none;
}

a {
     color: inherit;
     text-decoration: none;
}

p,
figcaption {
     text-wrap: pretty;
     max-width: 70ch;
}

img {
     display: block;
}

input,
button,
textarea,
select {
     font: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
     font-family: var(--ff-header);
     line-height: 1.1;
     text-wrap: balance;
     margin: 0; /* Explicit margin */
}

h1 {
     font-size: var(--fs-1000); /* 2rem–4rem */
}

button {
     outline: none;
     border: none;
     background: inherit;
     color: inherit;
     font-family: inherit;
     font-size: inherit;
     cursor: pointer;
}

input {
     outline: none;
     font-family: inherit;
     font-size: inherit;
     background: inherit;
     color: inherit;
}

select {
     appearance: none;
     /* for Firefox */
     -moz-appearance: none;
     /* for Chrome */
     -webkit-appearance: none;
}

/* For IE10 */
select::-ms-expand {
     display: none;
}

/* Container queries */
body > :is(header, footer),
main,
section,
article {
     /* container-type: inline-size; */
}

html {
     scroll-behavior: smooth;
     scroll-padding-top: var(--scroll-padding, 61px);
}

body {
     line-height: 1.5;
     font-family: var(--ff-body);
     font-size: var(--fs-400);
     font-weight: 400;
     max-width: var(--max-width);
     min-width: var(--min-width);

     min-block-size: 100svh;
     margin: auto;
     display: grid;
     grid-auto-rows: min-content;

     background: var(--background);
     color: var(--text);
     position: relative;
}

.hidden {
     display: none;
}

.visually-hidden {
     border: 0;
     clip: rect(0 0 0 0);
     height: auto;
     margin: 0;
     overflow: hidden;
     padding: 0;
     position: absolute;
     width: 1px;
     white-space: nowrap;
}

.disable-scrolling {
     overflow-y: hidden;
}

/* --------------------- */

.slide-left {
     transform: translateX(-100vw);
}

.slide-right {
     transform: translateX(100vw);
}

.slide-up {
     transform: translateY(-100vh);
}

.slide-down {
     transform: translateY(100vh);
}

.scale-up {
     transform: scale(1.2);
}

.scale-down {
     transform: scale(0);
}

.rotate-25 {
     transform: rotateX(0.25turn);
}

.scale,
.slide,
.rotate {
     transition: all 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.35);
}

/* --------------------- */
/* Base Icon Styles */
.fas,
.fab {
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
     display: inline-block;
     font-style: normal;
     font-variant: normal;
     text-rendering: auto;
     line-height: 1;
     }

/* FontAwesome Solid Icons */
.fas {
     font-family: 'Font Awesome 6 Free';
     font-weight: 900;
}

/* FontAwesome Brand Icons */
.fab {
     font-family: 'Font Awesome 6 Brands';
     font-weight: 400;
}

/* Solid Icon Definitions */
.fa-bars:before {
     content: "\f0c9";
}

.fa-xmark:before {
     content: "\f00d";
}

.fa-arrow-right:before {
     content: "\f061";
}

.fa-chevron-down:before {
     content: "\f078";
}

.fa-envelope:before {
     content: "\f0e0";
}

/* Brand Icon Definitions */
.fa-facebook:before {
     content: "\f09a";
}

.fa-instagram:before {
     content: "\f16d";
}

.fa-github:before {
     content: "\f09b";
}

.fa-linkedin:before {
     content: "\f08c";
}

/* --------------------- */

.btn {
     --border-radius: 100px;

     border-radius: var(--border-radius);
     border: 2px solid var(--btn-border-color, transparent);
     background: var(--btn-bg-color);
     color: var(--btn-text-color);
     cursor: pointer;
     transition: color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
          border 0.5s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: inset 2px 2px 4px -2px rgb(255, 255, 255, 0.8),
          inset -2px -2px 4px -2px rgb(0, 0, 0, 0.8);
     display: grid;
     place-items: center;
     position: relative;
     overflow: hidden;
     z-index: 1;
}

.btn::after {
     content: "";
     position: absolute;
     inset: 100%;
     background: var(--btn-hover-bg-color);
     transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
     z-index: -1;
     border-radius: inherit;
}

.btn:hover,
.btn:active,
.btn:focus {
     color: var(--btn-hover-text-color, transparent);
     border-color: var(--btn-hover-border-color, transparent);
}

.btn:hover::after,
.btn:active::after,
.btn:focus::after {
     inset: 0;
}

.faded {
     position: relative;
}

.faded::after {
     content: "";
     position: absolute;
     inset: 0;
}

.faded-all:after {
     box-shadow: inset 0 0 2rem 2rem var(--image-fade--clr, transparent);
}

.faded-top-right::after {
     /* --image-fade--clr: red; */
     /* box-shadow: inset -6rem 2rem 6rem 0rem var(--image-fade--clr, transparent); */
     box-shadow: inset -6rem 6rem 3rem 0rem var(--image-fade--clr, transparent);
}

.faded-top-left::after {
     box-shadow: inset 2rem 2rem 2rem 0rem var(--image-fade--clr, transparent);
}

.faded-bottom-right::after {
     box-shadow: inset -2rem -2rem 2rem 0rem var(--image-fade--clr, transparent);
}

.faded-bottom-left::after {
     box-shadow: inset 2rem -2rem 2rem 0rem var(--image-fade--clr, transparent);
}

/* --------------------- */

.container {
     display: grid;
     grid-template-columns:
          minmax(var(--gutter-width), 1fr)
          min(100% - calc(2 * var(--gutter-width)), var(--container-width))
          minmax(var(--gutter-width), 1fr);
}

.container > * {
     grid-column: 2 / 3;
}

/* <!-- TEXT CONTAINER: SHADER --> */
#textContainer {
     position: relative;
     width: 100%;
     height: 100vh; /* Full viewport height */
     overflow: hidden; /* Prevent scroll issues */
}

canvas {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     display: block;
     width: 100%;
     height: 100%;
     pointer-events: none; /* Allow mouse events to reach #textContainer */
}

.fallback-text {
     text-align: center;
     font-family: Oswald, sans-serif;
     font-size: 10vw;
     font-weight: 700;
     color: var(--text);
     margin: 0;
     line-height: 1.2;
     max-font-size: 80px;
}

.scroll-down--icon {
     --scroll-padding: 0px;
     position: absolute;
     bottom: 1rem;
     left: 50%;
     transform: translateX(-50%);
     font-family: var(--ff-header);
     text-transform: uppercase;
     color: var(--text);
     display: flex;
     flex-direction: column;
     gap: 1rem;
     align-items: center;
     z-index: 1;     
}

.angles-down-icon {
     width: clamp( 3rem, 2.647887323943662rem + 1.5023474178403755vw, 4rem );
     aspect-ratio: 448 / 512;
     height: auto;
     animation: pulsate 1.5s ease-in-out alternate-reverse infinite;
     transform: scale(1);
     transform-origin: center;
     will-change: transform, opacity;
     pointer-events: none;
}

symbol path {
     fill: var(--primary);
}

@keyframes pulsate {
     0% { transform: scale(1); opacity: 1; }
     50% { transform: scale(1.1); opacity: 0.8; }
     100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
     .angles-down-icon {
          animation: none;
     }
}


/* <!-- HEADER --> */
header {
     position: sticky;
     top: 0;
     left: 0;
     background-color: var(--background-20);
     border-bottom: 1px solid hsl(0, 0%, 0%, 20%);
     z-index: 10;
}

.header__wrapper {
     display: flex;
     align-items: center;
     justify-content: space-between;
}

/* LOGO */
.logo {
     min-width: max-content;
     font-family: var(--ff-header);
     font-size: var(--fs-800);
     font-weight: 700;
     margin: 0;
}

/* <!-- NAVIGATION --> */
#navbar {
     background-color: var(--background-20);
}

.nav__list {
     display: flex;
}

.nav__item {
     display: flex;
}

.nav__link {
     display: flex;
     padding: 1em 2em;
     border-bottom: 5px solid transparent;
     transition: 0.3s ease-in-out;
     transition-property: background-color, color, border;
}

.nav__link:hover,
.nav__link:active,
.nav__link:focus {
     background-color: hsl(0, 0%, 0%, 20%);
}

.nav__link--active {
     border-color: var(--primary);
}

#nav__link--contact {
     background-color: var(--primary);
     color: var(--background);
     min-width: max-content;
}

#nav__link--contact:hover,
#nav__link--contact:active,
#nav__link--contact:focus {
     background-color: var(--primary-700);
}

/* <!-- MOBILE TOGGLE BUTTONS --> */
#open-navbar-button,
#close-navbar-button {
     padding: 1em;
     transition: color 0.3s ease-in-out;
     display: none;
}

#open-navbar-button:hover,
#open-navbar-button:active,
#open-navbar-button:focus,
#close-navbar-button:hover,
#close-navbar-button:active,
#close-navbar-button:focus {
     color: hsl(0, 0%, 0%, 20%);
}

#open-navbar-button {
     margin-left: auto;
     align-self: start;
     background: none;
     color: var(--text);
}

#close-navbar-button {
     margin-left: auto;
}

/* <!-- OVERLAY --> */
.overlay {
     position: fixed;
     inset: 0;
     background-color: hsl(0, 0%, 0%, 80%);
     z-index: 9;
     inset: 0 0 100% 0;
     transition: bottom 0.2s linear;
}

/* ALL SECTIONS/WRAPPERS */

section {
     min-height: 100svh;
}

.wrapper {
     padding-block: 5rem;
}

/* <!-- SECTION: HERO --> */
#section__hero {
     background-color: var(--text);
     background: linear-gradient( to bottom, var(--primary-900), var(--text));
     color: var(--background);
}

.hero__wrapper {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     align-items: center;
     gap: 1rem;
     isolation: isolate;
}

.hero__content {
     align-self: center;
     display: grid;
     grid-auto-rows: min-content;
     margin-top: 2rem;
}

.hero__content--kicker {
     text-transform: uppercase;
     font-weight: 400;
     font-size: var(--fs-350);
     letter-spacing: 4px;
     color: var(--text-200);
     margin-bottom: 1rem;
}

.hero__content--headline {
     font-weight: 400;
     font-size: var(--fs-1000);
     margin: 0;

     & span {
          background: linear-gradient(45deg, var(--primary-100), var(--primary-300));
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          filter: drop-shadow(2px 2px 4px hsl(0, 0%, 0%));
     }
}

.hero__content--description {
     --fs-600: clamp(
          1rem,
          0.9119718309859155rem + 0.3755868544600939vw,
          1.25rem
     );
     /* max-width: 45ch; */
     font-size: var(--fs-600);
     margin-block: 2.5rem;
     text-wrap: balance;
}

.hero__content--buttons {
     display: flex;
     flex-wrap: wrap;
     gap: 1rem;
     margin-top: 0.5rem;
     margin-inline: auto;
     width: 100%;
}

.hero__content--buttons > .btn {
     padding: 0.75rem 1rem;
     font-size: var(--fs-500);
     min-width: max-content;
     max-width: 200px;
     flex: 1 1 200px;
     width: 100%;
}

#learn-more {
     --btn-bg-color: transparent;
     --btn-text-color: var(--background);
     --btn-border-color: var(--background);
     --btn-hover-bg-color: hsl(0, 0%, 100%, 20%);
     --btn-hover-text-color: var(--background);
     --btn-hover-border-color: var(--background);
     box-shadow: none;
}

#contact-me {
     --btn-bg-color: var(--primary);
     --btn-text-color: var(--background);
     --btn-border-color: none;
     --btn-hover-bg-color: var(--primary-700);
     --btn-hover-text-color: var(--background);
     --btn-hover-border-color: none;
     font-weight: 700;
     grid-template-columns: repeat(2, max-content);
     place-content: center;
     gap: 0.5rem;
}

.hero__image {
     --image-fade--clr: var(--text);
     --fadeHeight: 2rem;
     --fadeWidth: 2rem;
     aspect-ratio: 1;
     border-radius: var(--border-radius);
     overflow: hidden;
     z-index: -1;
     position: relative;
     width: 100%;
     height: 100%;  /* remove to reduce image height */
     overflow: hidden;
}

.hero__image > img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     position: relative;
     z-index: 0;

     /* Combine both gradients into one using multiply effect */
     -webkit-mask-image: 
     linear-gradient(to bottom, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 98%),
     linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
     -webkit-mask-composite: destination-in;
     mask-composite: intersect;

     /* Ensure it's recognized as a mask in Safari */
     mask-image: 
     linear-gradient(to bottom, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 98%),
     linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
     mask-composite: intersect;

     /* Additional compatibility properties */
     -webkit-mask-size: cover;
     -webkit-mask-repeat: no-repeat;
     mask-size: cover;
     mask-repeat: no-repeat;
}

/* <!-- SECTION: ABOUT --> */
#section__about {
     background-color: var(--background-75);
}

.about__wrapper {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 1rem;
     isolation: isolate;

}

.about__image {
     --image-fade--clr: var(--background-75);
     display: grid;
     grid-template-areas: "image-stack";
     border-radius: var(--border-radius);
     -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
     mask-image: radial-gradient(circle, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 95%);
     -webkit-mask-repeat: no-repeat;
     mask-repeat: no-repeat;
     -webkit-mask-size: 100% 100%;
     mask-size: 100% 100%;
     position: relative;
     overflow: hidden;
     width: 100%;
}

.about__image::after {
     content: "";
     position: absolute;
     inset: 0;
     box-shadow: inset 0 0 1rem 1rem var(--image-fade--clr, transparent);
}
.about__image--container {
     grid-area: image-stack;
     aspect-ratio: 1/1.5;
     width: 100%;
     height: auto;
     position: relative;
     overflow: hidden;
     border-radius: var(--border-radius);
}

.about__image--container img {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover; /* ensures image fills container without distortion */
     object-position: center;
     transition: opacity 0.8s ease-in-out;
     opacity: 0;
     visibility: hidden;
}

.about__image--container img.active {
     opacity: 0.9;
     visibility: visible;
}

.about__content {
     display: grid;
     grid-auto-rows: min-content;
}

.about__content--headline {
     font-weight: 700;
     font-size: var(--fs-850);
     max-width: 30ch;
     text-transform: uppercase;
     color: var(--primary);
     text-align-last: left;
}

.about__content--description {
     max-width: 54ch;
     margin-top: 0.5rem;

     & h3 {
          font-size: inherit;
          margin-block: 1rem;
          text-wrap: unset;
     }
}

.about__content--buttons {
     display: grid;
     place-items: start;
     gap: 1rem;
     margin-top: 1.5rem;
}

.about__content--buttons > .btn {
     padding: 0.75rem 1rem;
     font-size: var(--fs-300);
     font-weight: 700;
     min-width: max-content;
}

#my-experience {
     --btn-bg-color: transparent;
     --btn-text-color: var(--text);
     --btn-border-color: var(--text);
     --btn-hover-bg-color: hsl(0, 0%, 0%, 20%);
     --btn-hover-text-color: var(--text);
     --btn-hover-border-color: var(--text);
     box-shadow: none;
}

/* <!-- SECTION: EXPERIENCE --> */
#section__experience {
     background-color: var(--text-800);
     color: var(--background-100);
}

.experience__wrapper {
     display: grid;
     grid-auto-rows: min-content;
     gap: 4rem;
}

.section__title {
     justify-self: center;

     & h2 {
          font-size: var(--fs-850);
          font-weight: 700;
          text-align: center;
          color: var(--primary-100);
          text-transform: uppercase;
     }

     & p {
          margin-top: 1rem;
          --fs-600: clamp(
               1rem,
               0.9119718309859155rem + 0.3755868544600939vw,
               1.25rem
          );
          max-width: 70ch;
          font-size: var(--fs-600);

          & a {
               font-weight: 700;
               text-decoration: underline;
               transition: color 0.3s ease-in-out;
          }

          & a:hover,
          & a:active,
          & a:focus {
               color: var(--primary-100);
          }
     }
}

.timeline {
     --event-gap: 2rem;
     --timeline-gap: 4rem;
     display: grid;
     grid-auto-rows: min-content;
     gap: var(--timeline-gap);
}

.event {
     display: grid;
     align-items: center;
     gap: var(--event-gap);
     
}

.event:nth-of-type(2n + 1) {
     --line-direction: -1;
     grid-template-columns: 1fr min-content;
     grid-template-areas: "details icon";
}
.event:nth-of-type(2n) {
     --line-direction: 1;
     grid-template-columns: min-content 1fr;
     grid-template-areas: "icon details";
}

.icon {
     --line-thickness: 0.5rem;
     grid-area: icon;
     width: 100%;
     height: 100%;
     display: grid;
     place-items: center;
     position: relative;
     z-index: 1;
}

.icon::before,
.icon::after {
     content: "";
     position: absolute;
     background: var(--primary);
     box-shadow: inset 2px 2px 4px -2px rgb(255, 255, 255, 0.8),
          inset -2px -2px 4px -2px rgb(0, 0, 0, 0.8);
     will-change: transform;
     z-index: -1;
}

.icon::before {
     top: 50%;
     width: calc(50% + var(--event-gap));
     height: var(--line-thickness);
     transform: scaleX(0);
     transform-origin: left center;
     animation: fillHorizontal 2s forwards 2s ease-in-out;
}

.event:nth-child(2n) .icon::before {
     left: 50%;
}

.event:nth-child(2n+1) .icon::before {
     right: 50%;
}

.icon::after {
     top: 50%;
     left: 50%;
     width: var(--line-thickness);
     height: calc(50% + var(--timeline-gap));
     transform: scaleY(0);
     transform-origin: center top;
}

.event:not(:last-of-type) .icon::after {
     animation: fillVertical 2s forwards 2s ease-in-out;
}

@keyframes fillHorizontal {
     to {
          transform: scaleX(1);
     }
}

@keyframes fillVertical {
     to {
          transform: scaleY(1);
     }
}

.sprite {
     aspect-ratio: 1;
     width: 5rem;
     display: grid;
     place-items: center;
     font-size: 2rem;
     border-radius: 50%;
     box-shadow: inset 2px 2px 4px -2px rgb(255, 255, 255, 0.8),
          inset -2px -2px 4px -2px rgb(0, 0, 0, 0.8),
          0px 5px 10px -2px rgb(0, 0, 0, 0.5);
     background: radial-gradient(
               circle at center,
               var(--background-100),
               hsl(0, 0%, 0%, 10%)
          ),
          var(--background-100);
     padding: 0.5rem;
     overflow: hidden;
}

.marquee__logo {
     width: 100%;
     height: 100%;
     object-fit: contain;
}


.details {
     grid-area: details;
     display: grid;
     border-radius: var(--border-radius);
     background: linear-gradient(145deg, #3c3c3c, #323232);
     box-shadow:  5px 5px 10px #2b2b2b,
     -5px -5px 10px #454545;
     position: relative;
     isolation: isolate;
}

.details::after {
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
     border-radius: var(--border-radius);
     box-shadow: inset 5px 5px 10px #1c1c1c,
          inset -5px -5px 10px #545454,
          0 0 15px 0 var(--primary-300);

     opacity: 0;
     z-index: -1;
     transition: opacity 0.3s ease-in-out;
}

.details:hover::after,
.details:active::after,
.details:focus::after {
     opacity: 1;
}

.event:nth-of-type(2n + 1) > .details {
     grid-template-columns: 1fr min-content;
     grid-template-areas: "content date";
}

.event:nth-of-type(2n) > .details {
     grid-template-columns: min-content 1fr;
     grid-template-areas: "date content";
}

.date {
     grid-area: date;
     min-width: max-content;
     font-weight: 700;
     padding: 1.25rem;
     width: 100%;
     height: 100%;
     display: grid;
     place-items: center;
     color: var(--primary-100);
}

.event:nth-of-type(2n + 1) .date {
     border-left: 2px inset var(--primary-100);
     border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.event:nth-of-type(2n) .date {
     border-right: 2px inset var(--primary-100);
     border-radius: var(--border-radius) 0 0 var(--border-radius);
}

.content {
     grid-area: content;
     display: grid;
     grid-auto-rows: min-content;
     padding: 1.25rem;
}

.event:nth-of-type(2n + 1) .content {
     border-radius: var(--border-radius) 0 0 var(--border-radius);
     justify-items: end;
}

.event:nth-of-type(2n) .content {
     border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.job-title,
.company-name,
.description {
     font-size: inherit;
     line-height: 1.5;
}

.job-title,
.company-name {
     text-transform: uppercase;
}

.job-title {
     font-size: var(--fs-500);
     font-weight: 700;
     color: var(--primary-100);
     letter-spacing: 2px;
}

.company-name {
     font-weight: 400;
     color: var(--text-200);
}

.description {
     margin-block: 1rem;
     max-width: 70ch;
}

.view-more-button {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     font-weight: 700;
     background: transparent;
     transition: color 0.3s ease-in-out;
     color: var(--text-400);
}

.view-more-button:hover,

.view-more-button:focus {
     color: var(--background);
}

.view-more-button > i {
     transition: transform 0.3s linear;
}

.view-more-button.expanded,
.view-more-button:active {
     color: var(--primary-100);
}

.view-more-button.expanded > i,
.view-more-button:active > i {
     transform: rotate(0.5turn);
}

.more__information {
     display: grid;
     grid-template-rows: 0fr;
     transition: grid-template-rows 0.5s linear;
     max-width: 70ch;
}

.more__information > .more__information--list {
     overflow: hidden;
}

.view-more-button.expanded ~ .more__information {
     grid-template-rows: 1fr;
}

.more__information--list {
     display: grid;
     grid-auto-rows: min-content;
}

.more__information--list > li {
     padding-block: 0.5rem;
     border-bottom: 1px solid hsl(0, 0%, 100%, 30%);
}

.more__information--position,
.more__information--list > li:last-child {
     border-bottom: none !important;
}

.more__information--position {
     margin-block: 1rem .5rem;
     font-weight: 600;
}


.experience__content--buttons {
     display: grid;
     place-items: center;
     gap: 1rem;
     margin-top: 1.5rem;
}

.experience__content--buttons > .btn {
     padding: 0.75rem 1rem;
     font-size: var(--fs-300);
     font-weight: 700;
     min-width: max-content;
}

#my-skills {
     --btn-bg-color: transparent;
     --btn-text-color: var(--text-200);
     --btn-border-color: var(--text-200);
     --btn-hover-bg-color: hsl(0, 0%, 100%, 20%);
     --btn-hover-text-color: var(--background);
     --btn-hover-border-color: var(--background);
     box-shadow: none;
}

/* <!-- SECTION: SKILLS--> */
#section__skills {
     background-color: var(--background-20);
}

.skills__wrapper {
     display: grid;
     grid-auto-rows: min-content;
     gap: 2rem;
}

#section__skills .section__title {
     & h2 {
          color: unset;
     }
}

/* SKILLS LIST */
.skills__list {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 400px));
     grid-template-rows: auto 1fr;
     justify-content: center;
     gap: 1.5rem;
     padding-block: 1rem;
}

/* SKILLS CARD */
.skills__card {
     min-height: 400px;
     display: grid;
     grid-template-rows: 100px 1fr;

     border-radius: var(--border-radius);
     box-shadow: inset 2px 2px 4px -2px hsl(0, 0%, 100%, 80%),
          inset -2px -2px 4px -2px hsl(0, 0%, 0%, 80%),
          0px 5px 10px -2px hsl(0, 0%, 0%, 50%);
     position: relative;
     isolation: isolate;
     overflow: hidden;
     z-index: 0;
}

.skills__card > header {
     border-radius: var(--border-radius) var(--border-radius) 0 0;
     background: linear-gradient(to bottom, var(--primary), var(--primary-800));
     position: relative;
     z-index: 0;
}

.skills__card--icon {
     aspect-ratio: 1;
     width: 100px;
     border-radius: 50%;
     position: absolute;
     left: 50%;
     bottom: 0;
     transform: translate(-50%, 50%);
     display: grid;
     place-items: center;
     border: 5px solid var(--background);
     background: var(--primary-100) var(--icon-image, none) no-repeat center;
     background-size: cover;
     font-size: var(--fs-900);

     & i {
          color: var(--background);
     }
}

#general__skills {
     --icon-image: url("./images/general-skills-icon.webp");
}

#nos__skills {
     --icon-image: url("./images/network-os-icon.webp");
}

#hardware__skills {
     --icon-image: url("./images/hardware-icon.webp");
}

#software__skills .skills__card--icon {
     --icon-image: url("./images/network-tools-icon.webp");
}

#programming__skills .skills__card--icon {
     --icon-image: url("./images/programming-icon.webp");
}

#productivity__skills .skills__card--icon {
     --icon-image: url("./images/productivity-icon.webp");
}

.skills__card > main {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 1rem;
     padding: 1rem;
     text-align: center;
     border-radius: 0 0 var(--border-radius) var(--border-radius);
     background-color: var(--background);
}

.skills__name {
     font-size: var(--fs-650);
     font-weight: 700;
     margin-top: 40px;
}

/* SKILLS OVERLAY */
.skills__overlay {
     position: absolute;
     inset: 0;
     border-radius: var(--border-radius);
     background-color: hsl(0, 0%, 0%, 90%);
     color: var(--background);
     transform: translateX(-100%);
     transition: transform 0.5s cubic-bezier(0.86, 0, 0.07, 1);
     padding: 1rem;
     z-index: 8;
}

.skills__card--active > .skills__overlay {
     transform: translateX(0);
}

.skills__card--active .skill::before {
     animation: load 2s 0s;
     -webkit-animation: load 2s 0s;
     -moz-animation: load 2s 0s;
     -o-animation: load 2s 0s;
     text-wrap: nowrap;
}

.skills {
     width: 100%;
     height: 100%;
     display: grid;
     grid-auto-rows: min-content;
     align-content: center;
     gap: 5px;
}

.skill {
     font-size: var(--fs-300);
     padding: 2px;
     border-radius: 15px;
     background-color: hsl(0, 0%, 100%, 10%);
     text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.skill::before {
     content: attr(data-skill);
     background: linear-gradient(
          to right,
          var(--primary-600),
          var(--primary),
          var(--primary-700)
     );
     box-shadow: inset 2px 2px 4px -2px rgb(255, 255, 255, 0.8),
          inset -2px -2px 4px -2px rgb(0, 0, 0, 0.8);
     display: inline-block;
     padding: 5px 0 5px 10px;
     border-radius: inherit;
     line-height: 1;
}

/* Keyframes */
@keyframes load {
     from {
          width: 0%;
     }
}
@-webkit-keyframes load {
     from {
          width: 0%;
     }
}
@-moz-keyframes load {
     from {
          width: 0%;
     }
}
@-o-keyframes load {
     from {
          width: 0%;
     }
}

/* Skill Progress Bar Widths */
.expert::before {
     width: 100%;
}

.advanced::before {
     width: 80%;
}

.intermediate::before {
     width: 60%;
}

.basic::before {
     width: 40%;
}

.learning::before {
     width: 20%;
}

/* FOOTER */
footer {
     background: var(--text);
     color: var(--background);
}

.footer__wrapper {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 1rem;
}

/* <!-- CONNECT INFO --> */
.connect__info--wrapper {
     display: grid;
     grid-auto-rows: min-content;
     gap: 2rem;
}

/* <!-- CONTACT --> */
.contact__info--wrapper {
     display: grid;
     grid-auto-rows: min-content;
     gap: .5rem;
     color: var(--text-400);
}

.contact__info {
     min-width: max-content;
}

.contact__info--link {
     position: relative;
     transition: color 0.3s ease-in-out;
     width: min-content;
}

.contact__info--link::after {
     content: '';
     height: 3px;
     width: 0;
     position: absolute;
     bottom: -.25rem;
     left: 0;
     border-radius: 100px;
     background-color: var(--primary);
     transition: width 0.3s ease-in-out;
}

.contact__info--link:hover,
.contact__info--link:active,
.contact__info--link:focus {
     color: var(--background);

     &::after {
          width: 100%;
     }
}

/* <!-- SOCIAL MEDIA --> */
.social__media--wrapper {
     display: grid;
     grid-auto-flow: column;
     grid-auto-columns: min-content;
     gap: 0.5rem;
}

.social__media--wrapper > .btn {
     --border-radius: 6px;
     --btn-bg-color: var(--text);
     --btn-text-color: var(--background);
     --btn-border-color: none;
     --btn-hover-bg-color: var(--primary);
     --btn-hover-text-color: var(--background);
     --btn-hover-border-color: none;
     box-shadow: none;
     font-size: var(--fs-800);
     align-self: start;
     padding: 0.5rem;
     aspect-ratio: 1;
     width: 3rem;
}

/* <!-- NAVIGATION --> */
footer #navbar {
     background-color: unset;
     color: unset;
}

footer .nav__list {
     display: grid;
     grid-auto-rows: min-content;
}

footer .nav__link {
     padding: 0.5rem 0;
     color: var(--text-400);
}

footer .nav__link:hover,
footer .nav__link:active,
footer .nav__link:focus {
     color: var(--primary-100);
     background-color: unset;
}

/* <!-- CONTACT FORM --> */
.contact__form--wrapper {
     width: 100%;
     max-width: 600px;
     color: var(--text);
}

.contact__form--title {
     font-size: var(--fs-850);
     font-weight: 700;
     color: var(--background);
     margin-bottom: 2rem;
     text-align: center;
     text-decoration: underline 5px var(--primary);
     text-underline-offset: 5px;
}

.contact__form {
     display: flex;
     flex-direction: column;
     gap: 2rem;
}

.form__group {
     position: relative;
}

.form__input {
     width: 100%;
     padding: 1rem;
     border: 2px solid var(--border-color);
     border-radius: var(--border-radius);
     background: var(--background);
     color: var(--text-primary);
     font-size: var(--text-base);
     transition: all 0.3s ease;
}

.form__input:focus {
     outline: none;
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px var(--primary-color-100);
}

.form__textarea {
     min-height: 150px;
     resize: none;
}

.form__error {
     position: absolute;
     left: 0;
     bottom: -1.5rem;
     top: 100%;
     font-size: var(--fs-300);
     color: var(--error-color);
     opacity: 0;
     transform: translateY(-10px);
     transition: all 0.3s ease;
     text-align: left;
}

.form__error.show {
     opacity: 1;
     transform: translateY(0);
}

.form__submit {
     --border-radius: unset;
     --btn-bg-color: var(--primary);
     --btn-text-color: var(--background);
     --btn-border-color: var(--primary);
     --btn-hover-bg-color: hsl(0, 0%, 100%, 20%);
     --btn-hover-text-color: var(--background);
     --btn-hover-border-color: var(--background);
     box-shadow: none;
     padding: 1rem 2rem;
     margin-top: 1.5rem;
     border-radius: var(--border-radius);
     font-weight: 700;
     cursor: pointer;
     transition: all 0.3s ease;
}

.form__submit:hover,
.form__submit:active,
.form__submit:focus {
     background: var(--primary-color-dark);
     transform: translateY(-2px);
}

.form__submit:active {
     transform: translateY(0);
}

/* Form validation styles */
.form__input.error {
     border-color: var(--error-color);
}

.form__input.success {
     border-color: var(--success-color);
}

/* Responsive styles */
@media (max-width: 768px) {
     .contact__form--wrapper {
          padding: 1.5rem;
     }
}

/* <!-- COPYRIGHT --> */
.copyright--wrapper {
     text-align: center;
}


/* CSS styles for mobile devices */
@media (max-width: 875px) {
     header #navbar {
          position: fixed;
          top: 0;
          right: -100%;
          height: 100svh;
          width: min(15em, 100%);
          z-index: 10;
          border-left: 1px solid hsl(0, 0%, 0%, 20%);
          transition: right 0.5s ease-in-out;
     }

     header #navbar.show {
          right: 0;
     }

     header #navbar.show ~ .overlay {
          inset: 0;
     }

     header .nav__list {
          width: 100%;
          flex-direction: column;
     }

     header .nav__link {
          width: 100%;
     }

     header .nav__link--active {
          border-bottom: none;
     }

     #nav__item--home {
          margin-right: unset;
     }

     #open-navbar-button,
     #close-navbar-button {
          display: block;
     }

     .hero__wrapper,
     .about__wrapper {
          grid-template-columns: 1fr;
          grid-template-rows: min-content 1fr;
          gap: 2.5rem;
          justify-items: center;
     }

     .hero__content {
          justify-items: center;
          text-align: center;
     }

     .hero__content--buttons {
          justify-content: center;
     }

     .about__content {
          grid-row: 1;
     }

     .about__image {
          /* margin-right: unset; */
          mask-image: unset;
     }


     #contact-me > i {
          transform: rotate(90deg);
     }
}

@media (max-width: 800px) {
     /* EXPERIENCE */
     .event:nth-of-type(n) {
          grid-template-columns: 1fr;
          grid-auto-rows: min-content;
          grid-template-areas:
               "icon"
               "details";
     }

     .event:nth-of-type(n) > .details {
          grid-template-columns: 1fr;
          grid-auto-rows: min-content;
          grid-template:
               "date"
               "content";
     }

     .event:nth-of-type(n) .date {
          border-left: unset;
          border-right: unset;
          border-bottom: 2px inset var(--text-400);
          border-radius: var(--border-radius) var(--border-radius) 0 0;
     }

     .event:nth-of-type(n) .content {
          border-radius: 0 0 var(--border-radius) var(--border-radius);
     }

     .event:nth-of-type(n) .icon::before {
          top: 50%;
          left: 50%;
          width: var(--line-thickness);
          height: calc(50% + var(--event-gap));
     }

     .event:nth-of-type(n) .icon::after {
          top: calc(-1 * var(--timeline-gap));
          transform-origin: center bottom;
          animation: fillVertical 2s forwards 2s ease-in-out;
     }

     .event:first-of-type .icon::after {
          animation: none;
     }

     @keyframes mobileFillEventGap {
          100% {
               height: calc(50% + var(--event-gap));
          }
     }

     @keyframes mobileFillTimelineGap {
          100% {
               height: calc(50% + var(--timeline-gap));
          }
     }

     .event:nth-of-type(2n) .content,
     .event:nth-of-type(2n + 1) .content {
          justify-items: center;
     }

     .job-title {
          text-align: center;
     }

     .footer__wrapper {
          grid-template-columns: 1fr;
          gap: 3rem;
     }

     .footer__wrapper > * {
          justify-items: center;
          text-align: center;
          margin-inline: auto;
          
     }

     .contact__info--wrapper,
     footer .nav__list {
          justify-items: center;
     }
}

@media (max-width: 525px) {

     .wrapper {
          padding-block: 3rem;
     }
     .hero__content,
     .about__content {
          justify-items: center;
     }

     .hero__image {
          aspect-ratio: 1 / 1.5;
     }

}