@font-face {style
  font-family: "Overpass Mono";
  font-weight: 400;
  src:
    local("Overpass Mono"),
    local("OverpassMono-Regular"),
    url("../static/OverpassMono-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Overpass Mono";
  font-weight: 500;
  src:
    local("Overpass Mono"),
    local("OverpassMono-Medium"),
    url("../static/OverpassMono-Medium.ttf") format("truetype");
}

@font-face {
  font-family: "Inconsolata";
  font-weight: 500;
  src:
    local("Inconsolata"),
    url("../static/Inconsolata-Medium.ttf") format("truetype");
}

@font-face {
  font-family: "Overpass";
  font-style: italic;
  font-weight: 400;
  src:
    local("Overpass Italic"),
    local("Overpass-Italic"),
    url("../static/Overpass-Italic.ttf") format("truetype");
}

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }

  /* https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html */
  [role="list"] {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  body {
    min-block-size: 100vh;
    line-height: 1.6;
    letter-spacing: 0.003rem;
  }

  h1,
  h2,
  h3,
  button,
  input,
  label {
    line-height: 1.1;
  }

  h1,
  h2,
  h3,
  h4 {
    text-wrap: balance;
  }

  p,
  li {
    text-wrap: pretty;
  }

  img,
  picture {
    max-inline-size: 100%;
    display: block;
  }

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

@layer base {
  :root {
    --ff-heading:
      "Inconsolata", "Overpass Mono", "Courier New", Courier, monospace;
    --ff-body: "Overpass Mono", "Courier New", Courier, monospace;
    --ff-alt: "Overpass", "Courier New", Courier, monospace;

    /* --- PRIMITIVES --- */
    --clr-bg-0: hsl(203deg 14% 19%);
    --clr-bg-1: hsl(206deg 14% 23%);
    --clr-bg-2: hsl(200deg 13% 26%);
    --clr-bg-3: hsl(200deg 12% 30%);
    --clr-bg-4: hsl(202deg 11% 34%);
    --clr-bg-5: hsl(205deg 9% 37%);
    --clr-bg-6: hsl(159deg 7% 39%);
    --clr-bg-6-60: hsl(159deg 7% 39% / 60%);
    --clr-bg-red: hsl(327deg 19% 30%);
    --clr-bg-visual: hsl(341deg 12% 31%);
    --clr-bg-yellow: hsl(55deg 7% 31%);
    --clr-bg-green: hsl(143deg 10% 31%);
    --clr-bg-glass-60: hsl(143deg 10% 21% / 69%);
    --clr-bg-blue: hsl(201deg 23% 32%);
    --clr-red: hsl(359deg 68% 70%);
    --clr-orange: hsl(19deg 69% 68%);
    --clr-yellow: hsl(40deg 56% 68%);
    --clr-green: hsl(83deg 34% 63%);
    --clr-green-light: hsl(83deg 30% 69%);
    --clr-blue: hsl(172deg 31% 62%);
    --clr-aqua: hsl(135deg 33% 63%);
    --clr-purple: hsl(331deg 43% 72%);
    --clr-fg-1: hsl(41deg 32% 75%);
    --clr-fg-0: hsl(41deg 33% 65%);
    --clr-statusline-green: hsl(83deg 34% 63%);
    --clr-statusline-beige: hsl(41deg 32% 75%);
    --clr-gray-0: hsl(110deg 5% 49%);
    --clr-gray-1: hsl(138deg 6% 55%);
    --clr-gray-2: hsl(135deg 7% 64%);

    --fs-200: 0.75rem;
    --fs-300: 0.875rem;
    --fs-400: 1rem;
    --fs-500: 1.125rem;
    --fs-600: 1.25rem;
    --fs-700: 1.5rem;
    --fs-800: 2rem;
    --fs-900: 3.75rem;
    --fs-1000: 3.75rem;

    --font-size-heading-sm: var(--fs-700);
    --font-size-heading-base: var(--fs-800);
    --font-size-heading-lg: var(--fs-900);
    --font-size-heading-xl: var(--fs-1000);

    --font-size-xs: var(--fs-200);
    --font-size-sm: var(--fs-300);
    --font-size-base: var(--fs-400);
    --font-size-md: var(--fs-500);
    --font-size-lg: var(--fs-600);

    --border-radius-1: 0.25rem;
    --border-radius-2: 0.5rem;
    --border-radius-3: 0.75rem;

    --text-heading-1: var(--clr-green);
    --text-heading-2: var(--clr-red);
    --text-heading-3: var(--clr-blue);
    --text-main: var(--clr-fg-1);
    --text-secondary: var(--clr-gray-2);
    --text-dark: var(--clr-bg-1);

    --border-color: var(--clr-bg-6);
	--focus-outline: var(--clr-fg-1);

    --card-height: 32.55rem;
    --card-width: 56rem;

    @media (width >= 760px) {
      --fs-300: 0.875rem;
      --fs-400: 1rem;
      --fs-500: 1.25rem;
      --fs-600: 1.5rem;
      --fs-700: 2rem;
      --fs-800: 3rem;
      --fs-900: 5rem;
      --fs-1000: 7.5rem;
    }
  }

  html,
  .body_font {
    font-family: var(--ff-body);
    letter-spacing: normal;
    line-height: 1.6;
  }

  *::selection {
    color: var(--clr-bg-blue);
    background-color: var(--clr-blue);
  }

  body {
    background-color: var(--clr-bg-0);
    background-position: bottom;
    color: var(--text-main);
  }

  h1,
  h2,
  h3,
  h4 {
    font-family: var(--ff-heading);
    font-weight: 500;
    color: var(--text-heading-1);
  }

  h2,
  h3 {
    color: var(--text-heading-2);
  }

  h3 {
    color: var(--text-heading-3);
  }

  a {
    color: var(--clr-fg-1);
    text-underline-position: from-font;
  }

  a:visited {
    color: var(--clr-fg-0);
  }
}

@layer utility {
  .text-yellow {
    color: var(--clr-yellow);
  }
}

@layer layout {
  html {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
    @media (width >= 760px) {
      /* scroll based animation tab change */
      height: 150vh;
    }
  }

  body {
    position: relative;
    overflow-x: hidden;
    background-image: url("../static/background_1440x1024.webp");
    background-size: 100vw 100vh;
    background-position: top;
    background-attachment: fixed;

    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;

    padding: 1.75rem;

    @media (width >= 760px) {
      position: fixed;
      width: 100vw;
    }
    @media (width < 760px) {
      padding: 0.75rem;
      height: auto;
    }
    @media (width < 480px) {
      padding: 0.5rem;
    }
  }
}

@layer page-content {
  .work_experience_table {
    width: fit-content;
    border-spacing: 1rem 0;
    margin-bottom: 1.5rem;

    @media (width < 760px) {
	  border-spacing: 0.5rem 0;
	}

    tr > td:first-child {
      color: var(--text-secondary);
    }
  }
}

@layer components {
  nav {
    display: flex;
    justify-content: stretch;
    gap: 1rem;

    @media (width < 760px) {
      display: none;
    }
  }

  tab-button button {
	appearance: none;
    background: none;
    border: none;
    display: flex;
	justify-content: center;
	align-items: center;
	user-select: none;
    width: 100%;
    padding: 0;
    color: var(--clr-bg-4);
  }

  tab-button button > span {
    position: absolute;
    text-transform: uppercase;
  }

  tab-button button svg path {
    transition: fill 0.2s ease-out;
  }

  tab-button button[aria-selected="false"]:hover {
    color: var(--clr-green);
  }

  tab-button button[aria-selected="false"]:hover svg path {
    fill: var(--clr-bg-glass-60);
    stroke: var(--clr-green);
  }

  tab-button:not(:defined) {
    display: none;
  }

  tab-button button[aria-selected="true"] {
    color: var(--text-dark);
  }

  tab-button button:focus span {
    text-decoration: underline;
  }

  tab-button button:focus {
    outline: solid;
    outline-color: var(--focus-outline);
    outline-offset: 1px;
    outline-width: 2px;
    border-radius: 0.1rem 0.1rem 0.1rem 1rem;
  }

  tab-button button[aria-selected="true"] svg path {
    fill: var(--clr-green);
    stroke: var(--clr-green);
  }

  tab-button button[aria-selected="true"]:focus svg path {
    stroke: var(--clr-green-light);
  }

  h3#keywords_heading {
    color: var(--clr-green);
    font-size: var(--font-size-base);

    @media (width < 760px) {
      font-size: var(--font-size-md);
    }
  }

  ul.keywords {
    padding-left: 1.5rem;
  }

  ul.keywords li {
    list-style-type: square;
    list-style-position: outside;
    padding-bottom: 0.275rem;
  }

  ul.keywords li:nth-child(n + 1) {
    color: var(--clr-aqua);
    list-style-image: url("../static/square_aqua.svg");
  }

  ul.keywords li:nth-child(n + 2) {
    color: var(--clr-purple);
    list-style-image: url("../static/square_purple.svg");
  }

  ul.keywords li:nth-child(n + 3) {
    color: var(--clr-red);
    list-style-image: url("../static/square_red.svg");
  }

  ul.keywords li:nth-child(n + 4) {
    color: var(--clr-blue);
    list-style-image: url("../static/square_blue.svg");
  }

  ul.link_list {
	list-style: none;
	flex: 1;
	padding-inline-start: 2rem;

	@media(width < 760px) {
	  padding-inline-start: 1.25rem;
	}

	li {
	  display: flex;
	  gap: .5rem;
	  margin-block-end: 0.3rem;
	}

	li::before {
	  content: "■" / ""; 
	  display: inline-block;
	  width: 1em;
	  margin-left: -1em;
	  color: var(--ff-body); /* Matches your text color */
	}
  }

  div.links {
    /* display: grid; */
    /* grid-auto-columns: 1fr; */
    /* grid-auto-flow: column; */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-block-start: 1rem;

    a {
      display: inline-flex;
      gap: 0.35rem;
    }
  }

  div.links img {
    height: 2ch;
  }

  main {
    width: 100%;
    max-width: var(--card-width);
    transition: max-width 200ms ease-in-out;
    background: var(--clr-bg-glass-60);
    border-radius: var(--border-radius-2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    -webkit-backdrop-filter: blur(9.2px);
    backdrop-filter: blur(9.2px);
    border: 1px solid rgba(255, 255, 255, 0.3);
  }

  main section.profile {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;

    @media (width < 760px) {
      flex-direction: row;
      align-items: center;
      gap: 2rem;
      justify-content: stretch;

      @media (width < 480px) {
        flex-direction: column;
        gap: 0rem;
      }
    }
  }

  main section.profile img.profile_picture {
    min-width: 14rem;

    @media (width < 760px) {
      min-width: auto;
      max-width: 12rem;
    }
  }

  main.card {
    display: flex;
    flex-direction: row-reverse;
    align-items: stretch;
    padding: 1.5rem 2rem;
    gap: 2rem;

    @media (width < 760px) {
      flex-direction: column-reverse;
      padding: 1.25rem 1rem;
    }
  }

  .inner_container {
    border-radius: var(--border-radius-2);
    border: 1px solid var(--border-color);
    border-top-width: 0.65rem;
  }

  h1 span#main_heading_subtitle {
    font-style: italic;
    font-size: 0.75em;
  }

  main.card .text {
    display: flex;
    flex-direction: column;
    width: 100%;
    transition: height 200ms ease-in-out;
    @media (width >= 760px) {
      height: var(--card-height);
    }
  }

  main.card .text .text-block {
    flex: 1;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  button#fullscreen {
    position: absolute;
    top: 0.25rem;
    right: 0;
    background-color: transparent;
    border: none;
    appearance: none;

    @media (width < 760px) {
      display: none;
    }

    svg {
      width: 1.2rem;
      height: 1.2rem;
    }

    &:hover {
      filter: brightness(1.5);
    }
  }

  tab-content:defined {
    --animLength: 0.17s;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    padding-block-end: 2rem;
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
    animation: none;

    @media (width >= 760px) {
      &.visible {
        animation:
          NextTab var(--animLength) linear 0s forwards,
          GlitchEffectNext calc(var(--animLength) * 1.75);
      }
    }
  }

  @keyframes GlitchEffectNext {
    0% {
      opacity: 1;
      filter: drop-shadow(-3px 5px var(--clr-green)) hue-rotate(0deg);
    }

    40% {
      opacity: 0.6;
      filter: drop-shadow(-6px 2px var(--clr-green)) hue-rotate(70deg);
    }

    70% {
      opacity: 1;
      filter: drop-shadow(0px 0px var(--clr-green)) hue-rotate(0deg);
    }
  }

  @keyframes NextTab {
    0% {
      transform: rotate3d(0, 1, 0, 90deg) skewX(30deg);
    }

    100% {
      transform: rotate3d(0, 1, 0, 0deg) skewX(0deg);
    }
  }


  svg:has(#bottom_mist) {
    display: none;
  }

  @media (width >= 760px) {
    tab-content:defined:not(.visible) {
      /* Screen reader only */
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      height: 1px;
      overflow: hidden;
      position: absolute;
      white-space: nowrap;
      width: 1px;
    }

    svg:has(#bottom_mist) {
      display: block;
      position: absolute;
      bottom: 0;
      min-width: 1440px;
      width: 100vw;
      z-index: -1;
    }
  }

  h1 > i {
    font-weight: 400;
    font-size: var(--fs-600);
  }
}

@layer animations {
  #bottom_mist {
    --fog-speed: 27s;
    --fog-curve: cubic-bezier(0.17, 0.08, 0.87, 0.83);

    g {
      animation-duration: var(--fog-speed);
      animation-timing-function: var(--fog-curve);
      animation-fill-mode: both;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      transform-origin: 50% 60%;
    }

    #fog_cloud_1 {
      animation-name: BigLeftToRight;
      animation-duration: calc(var(--fog-speed) * 2);
      animation-delay: 3.5s;
    }

    #fog_cloud_2 {
      animation-name: BigRightToLeft;
      animation-duration: calc(var(--fog-speed) * 1.6);
      animation-delay: 3.8s;
    }

    #fog_cloud_3 {
      animation-name: RightToLeft;
      animation-duration: calc(var(--fog-speed) * 1.4);
    }

    #fog_cloud_4 {
      animation-name: LeftToRight;
    }
  }

  @keyframes BigRightToLeft {
    0% {
      transform: translate(0%, -0%);
    }

    50% {
      transform: translate(-60%, 20%);
    }

    100% {
      transform: translate(-200%, -15%);
    }
  }

  @keyframes RightToLeft {
    0% {
      transform: translateX(0%) scale(1);
    }

    100% {
      transform: translateX(-120%) scale(1.4);
    }
  }

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

    50% {
      transform: translate(60%, 20%);
    }

    100% {
      transform: translate(120%, -15%);
    }
  }

  @keyframes LeftToRight {
    0% {
      transform: translateX(0%) scale(1.4);
    }

    100% {
      transform: translateX(120%) scale(1);
    }
  }

  main[data-size="full"] {
    --card-width: 82vw;
    --card-height: calc(85vh - 46px);
  }
}

@layer utils {
  .sr-only {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .hidden {
    visibility: hidden;
  }
}