:root {
  --light-1: #efefef;
  --dark-1: #1e1e1e;
  --dark-2: #0f0f0f;
  --primary: #C2B280;
  --primary-light: #D3C7A2;
  --primary-dark: #BAB298;
  --secondary: #B3CF99;
  --secondary-light: #C2D9AD;
  --secondary-dark: #9FAF8F;

  --background: var(--primary-light);
  --text: var(--dark-1);
  --text-2: var(--dark-2);

  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", sans-serif;
  --font-italic: "Georgia", serif;
	--font-code: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  --font-size: 1.2rem;
	--font-weight-semibold: 700;
	--font-weight-bold: 900;
	--leading: 1.45;
	--gutter: clamp(1ch, 2.5vmax, 3ch);
	--stack: clamp(1.25ex, 1ex + 2.5vmax, 1.75ex);
	--line-length-small: 30ch;
	--line-length: 75ch;
	--line-length-large: 115ch;
	--page-padding-inline: calc((100vw - min(var(--line-length), 80vw)) / 2);
	--border-width: 1px;
	--border-radius: 4px;
}






/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
*, *::before, *::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
:where(html) {
  overflow-x: hidden;
}
// :where(html, body) {
//   block-size: 100%;
// }
:where(body) {
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}
:where(img, picture, video, canvas) {
  display: block;
  max-inline-size: 100%;
}
:where(input, button, textarea, select, a) {
  font: inherit;
}
:where(p, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word;
}
:where(ul, ol):where([role='list'], [class]) {
  list-style: none;
}
:where(html:focus-within) {
  scroll-behavior: smooth;
}
:where(img, picture) {
	block-size: auto;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-play-state: paused !important;
    transition: none !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}








.wrapper {
  $wrapper-gap: var(--gutter);
  display: grid;
  grid-template-columns:
    1fr
    min(var(--wrapper-max-length, var(--line-length)), calc(100% - var(--wrapper-gap, $wrapper-gap) * 2))
    1fr;
  grid-column-gap: var(--wrapper-gap, $wrapper-gap);
  
  > * {
    grid-column: 2;
  }
}

.wrapper-full {
  @extend .wrapper;
  $wrapper-gap: var(--gutter);
  grid-template-columns:
    1fr
    min(var(--wrapper-max-length, var(--line-length-large)), calc(100% - var(--wrapper-gap, $wrapper-gap) * 2))
    1fr;
}

.full-bleed {
  inline-size: 100%;
  grid-column: 1 / -1;
  padding: var(--padding-block, 1rem) var(--padding-inline, 2rem);
  background-color: var(--background-color, none);
}

.flex-container {
  display: inline-flex;
  align-items: center;

  &.column {
    flex-direction: column;
  }
}






.sr-only {
  position: absolute !important;
  block-size: 1px !important;
  inline-size: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.invisible {
  visibility: hidden !important;
}













/* ------------------------------------ *\
   https://codepen.io/mikemai2awesome/full/KKvMZVz
\* ------------------------------------ */

:root {
	color: var(--text);
	background-color: var(--background);
	accent-color: var(--text);
}

:where(a) {
	color: var(--text);
}

:where(input, textarea, select) {
	color: var(--text);
	background-color: var(--background);
}

:where(button, .btn) {
	color: var(--primary-light);
	background-color: var(--text);
}

:where(code) {
	color: var(--text);
	background-color: var(--primary-dark);
}

/* ------------------------------------ *\
    Typography
\* ------------------------------------ */

:root {
	font-size: clamp(
		var(--font-size),
		var(--font-size) * 0.9 + 0.25vw,
		var(--font-size) * 2
	); // % ensures browser zoom is supported. 
	font-family: var(--font); // Use system UI font. 
	font-weight: var(--font-weight-regular);
	line-height: var(--leading); // Standard leading for good legibility. 
	letter-spacing: var(--tracking);
}

:where(a) {
	text-decoration: underline;
	text-decoration-thickness: var(--border-width);
	text-underline-offset: calc(var(--border-width) * 2);
}

:where(a):hover {
	text-decoration-thickness: calc(var(--border-width) * 2);
}

:where(pre, code, kbd, dl, figcaption, abbr, table) {
	font-family: var(
		--font-code
	); // Differentiate preformatted, code, description, and table text from body text. 

	font-size: 0.8em; // Make monospace and small text smaller than body text. 
}

:where(big) {
	font-size: 1.2em; // <big> is technically deprecated, but I love using it. This creates a fallback if a browser doesn't support it. 
	letter-spacing: 0.006em;
}

:where(pre code) {
	display: block; // Define block code.
	font-size: 1em; // Prevent cascading.
}

:where(blockquote, em, i, cite) {
	font-family: var(
		--font-italic
	); // Differentiate blockquote, citation, idiomatic, and emphasisized text from body text. Also, sans-serif italic is ugly.
	font-weight: var(
		--font-weight-regular
	); // Prevent italics to be bold. Bold italic is also ugly and unnecessary.
}

:where(blockquote) {
	font-size: clamp(1.5rem, 1.25rem + 1vw, 3rem);
	letter-spacing: 0;
}

:where(blockquote p) {
	max-inline-size: 35ch;
}

:where(blockquote q):before {
	position: absolute;
	transform: translateX(-100%);
}

:where(strong, b, th, button, .btn) {
	font-weight: var(
		--font-weight-semibold
	); // Make non-heading emphasized text less bold than heading text.
}

:where(h1, h2, h3, h4, h5, h6, summary strong, legend) {
	font-weight: var(--font-weight-semibold);
}

:where(h1, h2, h3, h4, h5, h6, summary strong, legend, big) {
	font-stretch: var(--font-stretch, expanded);
}

:where(button, .btn, input[type="file"]) {
	font-stretch: var(--font-stretch, condensed);
}

:where(abbr) {
	text-decoration: underline;
	text-decoration-style: dotted; // Differentiate abbreviaions from links.
	text-underline-offset: calc(var(--border-width) * 2);
}

:where(button, label, select, summary) {
	cursor: pointer;
}

:where(summary:hover > *) {
	text-decoration: underline;
	text-underline-offset: calc(var(--border-width) * 2);
}

:where(figcaption) {
	text-align: center;
}

:where(th) {
	text-align: start;
}

:where(th, td) {
	vertical-align: baseline;
}

:where(fieldset > ol) {
	list-style: none;
}

/* ------------------------------------ *\
   Spacing
\* ------------------------------------ */

:where(h1, h2, h3, h4, h5, h6, p, figure, form, pre, blockquote, ul, ol, dl, li, details) {
	margin-block-end: 0;
}

:where(h1, h2, h3, h4, h5, h6) {
	margin-block-start: calc(var(--stack) * 1.75);
}

:where(p, figure, form, fieldset, pre, blockquote, ul, ol, dl, details) {
	margin-inline: 0;
	margin-block-start: var(--stack);
}

:where(h1, h2, h3, h4, h5, h6, p, figure, form, fieldset, pre, blockquote, ul, ol, dl, details):first-child,
:where(legend + *) {
	margin-block-start: 0;
}

:where(h1, h2, h3, h4, h5, h6) + * {
	margin-block-start: calc(var(--stack) / 5);
}

// :where(ul, ol) {
// 	padding: 0;
// }

:where(li > ul, li > ol) {
	margin-block-start: calc(var(--stack) / 5);
}

:where(details ul, details ol) {
	margin-inline-start: 4ch; // Unify indent for all lists inside details.
}

:where(li > ul, li > ol, fieldset ul, fieldset ol) {
	margin-inline-start: 2.25ch; // Unify indent for all nested lists.
}

:where(li + li) {
	margin-block-start: calc(var(--stack) / 5);
}

:where(fieldset > ol li + li) {
	margin-block-start: calc(var(--stack) / 2);
}

:where(fieldset > ol) {
	margin-inline: 0;
}

:where(hr) {
	margin-block-start: calc(var(--stack) * 3);
	margin-block-end: calc(var(--stack) * 3);
}

:where(hr + *) {
	margin-block-start: 0;
}

:where(figure > img, table) {
	margin-inline: auto;
}

:where(blockquote > *) {
	margin-block-start: calc(var(--stack) / 4);
}

:where(blockquote:not(:last-child)) {
	padding-block-end: calc(var(--stack) / 2);
}

:where(button, .btn, dd, th, td) {
	// Unify inset spacing on bordered elements.
	padding-block: calc(var(--stack) / 6);
	padding-inline: calc(var(--gutter) / 3);
}

:where(input, textarea) {
	padding-inline: 2px;
}

:where(caption, figcaption) {
	padding-block: calc(var(--stack) / 2);
}

:where(code, kbd) {
	padding-block: 0.25ex;
	padding-inline: 0.5ch;
}

:where(figure, pre) {
	padding-block-start: calc(
		var(--stack) / 2.5
	); // Line up top of images/codeblocks with text in an adjacent column layout.
}

:where(pre) {
	padding-block-end: calc(var(--stack) / 2.5);
}

:where(pre code) {
	padding-block: var(--stack);
	padding-inline: var(--gutter);
}

details[open] summary + * {
	margin-block-start: calc(var(--stack) / 4);
}

/* ------------------------------------ *\
   General
\* ------------------------------------ */

*,
*:before,
*:after {
	font-feature-settings: "kern";
	font-kerning: normal;
	-moz-osx-font-smoothing: grayscale !important;
	-webkit-font-smoothing: antialiased !important;
	box-sizing: border-box;
}

:where(input, textarea, select, fieldset, button, kbd, dd, table, th, td) {
	// Unify border styles.
	border: var(--border-width) solid var(--text);
}

:where(input, textarea, select, fieldset, button, .btn, kbd) {
	// Unify interactive elements border radius.
	border-radius: var(--border-radius);
}

:where(pre) {
	white-space: -moz-pre-wrap;
	white-space: -o-pre-wrap;
	white-space: pre-wrap;
	word-spacing: normal;
	word-break: normal;
	word-wrap: break-word;
}

:where(dl) {
	display: grid;
	grid-template-columns: auto minmax(75%, 1fr);
	gap: calc(var(--gutter) / 2);
	align-items: baseline;
}

:where(dt) {
	border-block-end: var(--border-width) dotted;
}

:where(dd) {
	block-size: 100%;
	margin-inline-start: 0;
}

:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
	display: block;
	inline-size: 100%;
}

:where(input[type="radio"], input[type="checkbox"]) {
	size: 1.5ex;
	vertical-align: baseline;
}

:where(input[type="file"]) {
	padding-inline: 0;
	border: 0;
}

::-webkit-file-upload-button {
	appearance: button;
	cursor: pointer;
	font: inherit;
}

:where(input, textarea, select) ~ * {
	margin-block-start: 0;
	font-size: 0.8em;
}

:where(input:required + mark) {
	display: none;
	color: var(--text);
	background-color: transparent;
}

:where(input:required:invalid + mark) {
	display: block;
}

:where(hr) {
	block-size: 0;
	border: 0;
	border-block-start: var(--border-width) dashed var(--text);
}

:where(figure, figure table) {
	inline-size: 100%;
}

:where(figure) {
	overflow-x: auto;
}

:where(figure > img) {
	display: block;
}

:where(table) {
	caption-side: bottom;
	border-collapse: collapse;
	border-spacing: 0;
}

:where(tr > *:first-child) {
	white-space: nowrap;
}

:where(summary > *) {
	display: inline;
	vertical-align: middle;
}

/* ------------------------------------ *\
   Add-ons
   - Requires data attributes.
   - Remove to do your own layouts.
\* ------------------------------------ */

:where(body main) {
	padding-block-start: clamp(var(--stack) * 1, 10vmax, var(--stack) * 2);
}







.list-inline {
  $item-gap : 1ch;
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  list-style: none;
  margin-left: calc(var(--item-gap, $item-gap) * 3 * -1);
  clip-path: inset(0 0 0 calc(var(--item-gap, $item-gap) * 3));
  align-items: center;
  color: var(--item-color, var(--text));
  
  li {
    padding-left: var(--item-gap, $item-gap);
    &::before {
      content: var(--item-separator, '•');
      display: inline-block;
      margin-right: var(--item-gap, $item-gap);
      width: var(--item-gap, $item-gap);
      text-align: center;
    }
  }

  a {
    color: var(--item-color, var(--text));
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}















body {
  --start: var(--primary-light);
  --end: var(--secondary);
  background: var(--start);
  background: linear-gradient(180deg, var(--start) 0%, var(--start) 35%, var(--end) 100%);

  header, footer {
    padding: .5rem clamp(.2rem, 3vw, 2rem);  
  }
}
header {
  background-color: var(--primary);
  position: fixed;
  z-index: 10;
  inset-block-start: 0;
  inset-inline: 0;

  @media screen and (max-width: 767px) {
    &.wrapper-full {
      nav {
          grid-column: 1 / -1;
      }
    }
  }

  nav {
    ul {
      display: flex;
      justify-content: flex-end;
      padding: 0;
      list-style: none;

      @media screen and (max-width: 767px) {
        justify-content: start;
      }
    }

    li {
      padding: 6px 20px;
      padding: 6px clamp(10px, 3vw, 20px);
      margin: 0;
  
      @media screen and (min-width: 768px) {
        display: inline-block;
      }
    }

    a[aria-current="page"] {
      color: var(--text-2);
      text-decoration: underline;
      font-weight: var(--font-weight-semibold)
    }
  }
}
main {
  margin: 0;
  padding: 0;
  h2 {
    margin-block: 2rem 1rem;
    font-size: calc(var(--font-size) * 1.6);
  }
  .list-inline {
    --item-gap: 0;
    margin: 0;
    padding: 0;
  }
  ul:not(.list-inline) {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  li {
    --item-separator: none;
    margin: 0;
    padding: 0;
  }
}
footer {
  background-color: var(--secondary);
  justify-items: center;
  margin-block-start: 1.5rem;
  .list-inline {
    a {
      text-decoration: underline;
      --item-color: var(--text-2);
    }
  }
}

i {
  vertical-align: text-top;
  fill: var(--fill-color, var(--primary-light));
  display: inline-block;
  block-size: 1.5rem;
  aspect-ratio: 1;
  
  svg {
    aspect-ratio: 1;
    block-size: 1.5rem;
  }
}

.hero-section {
  height: 65vh;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.projects-section {
  ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
  }

  li {
    border-radius: var(--border-radius);
    overflow: hidden;
  }

  article {
    --background: url('https://placehold.co/200x150');
    position: relative;
    height: 100%;
    padding: .4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2.5rem;
    z-index: 1;
    background: var(--background);
    background-repeat: no-repeat;
    background-size: cover;
  }

  a {
    &:hover {
      i {
        fill: #3a3a3a;
      }
    }
  }

  i {
    --fill-color: var(--text);
    transition: fill .2s ease-in-out;
  }

  .top {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .links {
    display: flex;
    gap: .2rem;
    align-self: flex-end;
  }

  .content {
    padding: 1rem .4rem 0 .4rem;
  }
}

.about-section, 
.projects-section,
.experiences-section {
  padding-block: 2rem;
}
.about {
  display: flex;
  gap: 2rem;
  align-items: center;

  & > div:first-child {
    inline-size: 30%;
  }
  & > div:last-child {
    inline-size: 60%;
  }
  img {
    margin: 1rem auto;
    inline-size: 100%;
    inline-size: clamp(200px, 100%, 400px);
    aspect-ratio: 1;
    border-radius: 100%;
    border: 4px solid var(--primary-dark)
  }
  ul {
    margin-block-start: 1rem;
    gap: .2rem;
  }

  @media screen and (max-width: 767px) {
    flex-direction: column;

    & > div:first-child, & > div:last-child {
      inline-size: 100%;
    }

    img {
      inline-size: clamp(200px, 50vw, 300px);
      margin: 0 auto;
    }
  }
}

.timeline {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 0;

  &:before {
    content: '';
    position: absolute;
    inline-size: 6px;
    background-color: var(--light-1);
    inset: 0 0 0 1.5rem;
    margin-inline-start: -3px;
  }

  li {
    --size: 3rem;
    position: relative;
    margin: 1.4rem 0;
    padding: 0 0 0 calc(var(--size) + .8rem);

    &:first-child {
      margin-top: 3rem;
    }

    &:last-child {
      margin-bottom: 0;
      margin-bottom: -10px;
    }

    &:after {
      content: '';
      position: absolute;
      aspect-ratio: 1;
      inline-size: var(--size);
      background-color: var(--light-1);
      border: 6px solid var(--secondary-dark);
      inset-inline-start: 0;
      // inset-inline-start: .9rem;
      inset-block-end: 50%;
      transform: translateY(50%);
      // inset-block-end: 0;
      // inset-block-start: 1.5rem;
      border-radius: 50%;
      z-index: 1;
    }
  }
}

.experiences-section {
  p {
    margin: 0;
  }
}



* {
  outline-color: #0a76f6;
  outline-offset: 2px;
  outline-width: 2px;
}

*:focus, *:focus-visible {
  outline-style: solid;
}



.btn {
  --hover: var(--dark-2);
  --active: var(--dark-2);
  text-decoration: none;
  transition: background-color .1s ease-in-out;
  display: inline-flex;
  flex-direction: row;
  font-size: 1rem;
  line-height: 1.5rem;
  min-height: 2.5rem;
  padding: .5rem 1rem;
  width: fit-content;
  align-items: center;
  max-height: none;
  max-width: 100%;
  cursor: pointer;
  border: none;
  
  &:disabled {
    --hover: inherit;
    --active: inherit;
    background-color: #e5e5e5;
    color: #929292;
    cursor: not-allowed;
  }

  &[class*="btn-icon"]:before {
    --icon-size: 1.4rem;
    content: '';
    display: block;
    flex: 0 0 auto;
    background-color: currentColor;
    mask-size: 100% 100%;
    height: var(--icon-size);
    width: var(--icon-size);
    margin-left: -.125rem;
    margin-right: .5rem;
  }

  &.btn-icon--download:before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Etray-arrow-down%3C/title%3E%3Cpath d='M2 12H4V17H20V12H22V17C22 18.11 21.11 19 20 19H4C2.9 19 2 18.11 2 17V12M12 15L17.55 9.54L16.13 8.13L13 11.25V2H11V11.25L7.88 8.13L6.46 9.55L12 15Z' /%3E%3C/svg%3E");
  }

  &:not(:disabled):hover {
    background-color: var(--hover);
  }
  &:not(:disabled):active {
    background-color: var(--active);
  }
}

.download-section {
  text-align: center;
  margin-block: 3.5rem;
  // .btn {
  //   color: var(--secondary-light);
  // }

  .content {
    p {
      font-size: 1.4rem;
    }
  }
}