/* 
  COMBINATORS

    = descendant
  > = child
  ~ = general sibling
  + = adjacent sibling
*/

@font-face {
  font-family: "wotfardregular";
  src: url("wotfard-regular-webfont.eot");
  src: url("wotfard-regular-webfont.eot?#iefix") format("embedded-opentype"),
    url("wotfard-regular-webfont.woff2") format("woff2"),
    url("wotfard-regular-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* SECTION - VARIABLES */
:root {
  color-scheme: light;

  /* PRIMITIVE VARIABLES */
  /* Grey Color */
  --grey-50: #f5f5f5;
  --grey-800: #343434;
  --grey-900: #292929;

  /* Brand Color */
  --brand-400: #b1aaa0;
  --brand-600: #5d5c41;
  --brand-800: #636248;
  --brand-900: #282721;

  /* --brand-400: hsl(75, 26%, 58%);
  --brand-600: hsl(75, 26%, 48%);
  --brand-800: hsl(75, 26%, 38%);
  --brand-900: hsl(75, 26%, 28%); */

  /* Font Size */
  --rem-2: 0.125rem;
  --rem-4: 0.25rem;
  --rem-8: 0.5rem;
  --rem-12: 0.75rem;
  --rem-14: 0.875rem;
  --rem-16: 1rem;
  --rem-18: 1.125rem;
  --rem-20: 1.25rem;
  --rem-24: 1.5rem;
  --rem-28: 1.75rem;
  --rem-32: 2rem;
  --rem-36: 2.25rem;
  --rem-40: 2.5rem;
  --rem-54: 3.375rem;
  --rem-64: 4rem;
  --rem-72: 4.5rem;
  --rem-80: 5rem;

  /* Spacing */
  --spacing-1: var(--rem-4);
  --spacing-2: var(--rem-8);
  --spacing-3: var(--rem-12);
  --spacing-4: var(--rem-16);
  --spacing-5: var(--rem-20);
  --spacing-6: var(--rem-24);
  --spacing-7: var(--rem-28);
  --spacing-8: var(--rem-32);
  --spacing-9: var(--rem-36);
  --spacing-10: var(--rem-40);
  --spacing-11: var(--rem-44);
  --spacing-12: var(--rem-48);
  --spacing-13: var(--rem-54);

  /* Radius */
  --radius-sm: var(--rem-4);
  --radius-md: var(--rem-8);
  --radius-lg: var(--rem-12);
  --radius-xl: var(--rem-16);
  --radius-2xl: var(--rem-20);
  --radius-3xl: var(--rem-24);

  /* TOKEN VARIABLES */
  /* Text */
  --text-primary: var(--grey-900);
  --text-secondary: var(--grey-50);
  --text-tertiary: var(--grey-800);
  --text-brand: var(--brand-600);
  --text-gradient: -webkit-linear-gradient(
    237deg,
    #282721 -40.15%,
    #5d5c41 89.42%
  );

  /* Surface */
  --surface-primary: var(--grey-50);
  --surface-secondary: var(--brand-400);
  --surface-brand: var(--brand-600);
  --surface-nav: #f5f5f5a8;
  --surface-gradient: linear-gradient(
    129deg,
    var(--brand-600) 35.24%,
    var(--brand-900) 120.86%
  );

  /* SVG Color */
  --svg-dark: invert(15%) sepia(0%) saturate(44%) hue-rotate(218deg)
    brightness(104%) contrast(100%);
  --svg-light: invert(100%) sepia(0%) saturate(4907%) hue-rotate(154deg)
    brightness(114%) contrast(92%);

  /* Border */
  --border-primary: var(--grey-900);
  --border-secondary: var(--grey-50);
  --border-brand: var(--brand-600);

  /* Spacing */
  --spacing-none: 0;
  --spacing-xs: var(--spacing-1);
  --spacing-sm: var(--spacing-2);
  --spacing-md: var(--spacing-4);
  --spacing-lg: var(--spacing-5);
  --spacing-xl: var(--spacing-7);
  --spacing-2xl: var(--spacing-13);

  /* Radius */
  --radius-minimal: var(--radius-sm);
  --radius-rounded: var(--radius-md);
  --radius-more-rounded: var(--radius-xl);
  --radius-full: var(--radius-3xl);

  /* Font Weight */
  --fw-regular: 500;
  --fw-heavy: 600;
  --fw-extra-heavy: 700;

  /* Font Size */
  --fs-special: var(--rem-72);
  --fs-header: var(--rem-24);
  --fs-subheader: var(--rem-20);
  --fs-paragraph: var(--rem-18);
  --fs-small: var(--rem-16);

  /* Animation Length */
  --hero-animation-length: 5s;

  /* Box Shadow */
  --default-box-shadow: 4px 4px 4px 0px rgba(41, 41, 41, 0.2);

  /* Font */
  --font-handwritten: "Madimi One", sans-serif;
  /* --font-base: "Poppins"; */
  --font-base: "Nunito", sans-serif;
  /* --font-base: "wotfardregular"; */
}
/* !SECTION */

/* SECTION - GENERAL STYLES */
/* ------- */
/* GENERAL */
/* ------- */
*,
*:before,
*:after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  font-family: var(--font-base);
  font-optical-sizing: auto;
  font-style: normal;

  line-height: 1.4;
  background: var(--surface-primary);
  transition: background 0.3s;

  align-items: center;
}

.handwritten-font {
  font-family: var(--font-handwritten);
}

p.article-type {
  font-family: var(--font-handwritten);
}

.zero-opacity {
  opacity: 0%;
  content-visibility: hidden;
}

.hidden,
nav.hidden {
  opacity: 0%;
  display: none;
}

strong {
  font-weight: 800;
}
em:not(.text-gradient) {
  text-shadow: 0.1px 0.6px 0 var(--brand-900);
}

/* --------------------- */
/* POSITIONING & DISPLAY */
/* --------------------- */
/* Positioning */
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.sticky-item {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  z-index: 1;

  transition: background 0.3s;
}

/* Flex Direction Column */
.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-col-rev {
  display: flex;
  flex-direction: column-reverse;
}

/* Flex Direction Row */
.flex-row {
  display: flex;
  flex-direction: row;
}
.flex-row-rev {
  display: flex;
  flex-direction: row-reverse;
}

/* Flex Wrap */
.flex-wrap {
  flex-wrap: wrap;
}
div.flex-reverse-wrap {
  flex-wrap: wrap-reverse;
}

/* Justify Content */
.space-between {
  display: flex;
  justify-content: space-between;
}
.space-around {
  display: flex;
  justify-content: space-around;
}
.space-evenly {
  display: flex;
  justify-content: space-evenly;
}
.justify-cont-center {
  justify-content: center;
}

/* Align Items */
.align-center {
  align-items: center;
}

.dead-center {
  align-items: center;
  justify-content: center;
}

/* ----- */
/* WIDTH */
/* ----- */
.max-width {
  width: 100%;
}

/* ------------------------- */
/* HOVER, ACTIVE TRANSITIONS */
/* ------------------------- */
.hover-scale,
.project-image.hover-scale,
.active-translateY {
  transition: transform 0.5s, background 0.3s, box-shadow 0.5s;
}

/* ----------- */
/* GAP SPACING */
/* ----------- */

.sixty-four-spacing {
  gap: var(--rem-64);
}
.fifty-four-spacing {
  gap: var(--rem-54);
}

.thirty-six-spacing {
  gap: var(--rem-36);
}
.thirty-two-spacing {
  gap: var(--rem-32);
}
.twenty-four-spacing {
  gap: var(--rem-24);
}
.sixteen-spacing {
  gap: var(--rem-16);
}
.twelve-spacing {
  gap: var(--rem-12);
}
.eight-spacing {
  gap: var(--rem-8);
}
.four-spacing {
  gap: var(--rem-4);
}
.article-dates {
  column-gap: var(--rem-8);
  row-gap: var(--rem-4);
}
/* !SECTION */

/* SECTION - TYPOGRAPHY */
/* --------------------- */
/* TYPOGRAPHY - HEADINGS */
/* --------------------- */
h1,
h2,
h3,
.page-title {
  margin: 0;
  letter-spacing: 0.4px;
  line-height: 1.5;
  color: var(--text-primary);
  transition: color 0.3s;
}

/* Subtitles and Additional Heading Styles */

/* ------------------------ */
/* TYPOGRAPHY - PARAGRAPHS  */
/* ------------------------ */
p,
a {
  margin: 0;
  letter-spacing: 0.4px;
  color: var(--text-primary);
  transition: color 0.3s;
  text-wrap: pretty;
}

.inline-anchor {
  font-weight: normal;
  transition: border-bottom 0.3s;
  border-bottom: 1.5px solid var(--border-brand);
  font-family: var(--font-handwritten);
}
.inline-anchor:hover {
  border-bottom-color: hsla(58, 18%, 31%, 0.25);
}

button p,
a p,
.widget-container .widget p {
  line-height: 2;
}

body,
button p,
a p,
a,
p,
.default-button p,
.skill-list-container .widget p,
.widget-paragraph,
.project-img-details h1,
.footer-text,
.page-content h3.article-heading,
.side-toc p,
ul.nested-list p,
.project-img-details h2 {
  font-size: var(--fs-small);
}

.section-paragraph,
.section-paragraph a,
.purple-text,
.project-subtitle,
.widget-title,
.text-tag,
.widget-header h1,
.default-button .material-symbols-rounded,
.accolades-paragraph,
.project-details-container p.handwritten-font {
  font-size: var(--fs-paragraph);
}

h1,
.accolades-number + .section-paragraph,
h2.handwritten-font,
a.underline-hover + .material-symbols-rounded.hidden,
a.underline-hover + .material-symbols-rounded.visible,
.page-content h2.article-heading,
.widget-subtitle {
  font-size: var(--fs-subheader);
}

.section-header > h1 {
  font-size: var(--fs-header);
}

.accolades-number {
  font-size: var(--fs-special);
}

p.article-type,
.accolades-paragraph,
h1,
h2,
h3,
.page-title,
.hero-section h1,
.hero-section h2,
.page-subtitle,
p,
a,
.widget-header h1,
.widget-title {
  font-weight: var(--fw-regular);
}

nav p,
.active-toc-item > a > p {
  font-weight: var(--fw-extra-heavy);
}

.side-toc p,
.accolades-number + .section-paragraph,
.default-button p {
  font-weight: var(--fw-heavy);
}

/* Spacing */
article > section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.section-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.paragraph-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.section-paragraph,
.section-paragraph a {
  line-height: 1.8;
}

/* Multi-line Truncation */
.square-img ~ div p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------------- */
/* SPECIAL CLASSES  */
/* ---------------- */
/* .surface-secondary {
  background: var(--surface-secondary);
} */
.text-brand {
  color: var(--text-brand);
}

.underline-hover p {
  display: block;
}
.underline-hover p::after {
  content: "";
  display: flex;
  width: 0;
  height: 2px;
  background: var(--border-brand);
  border-radius: var(--radius-rounded);
  transition: width 0.3s;
  transform: translateY(4px);
}
.underline-hover:hover p::after,
.underline-hover:focus p::after,
.trigger-underline-hover p::after {
  width: 100%;
}

.truncate-text {
  overflow: hidden;
}
.truncate-text p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.side-toc p {
  transition: 0.5s;
  color: var(--text-tertiary);
  white-space: nowrap;
  opacity: 0.75;
}

/* .side-toc ol p {
  line-height: 1.25;
} */

.active-toc-item > a > p {
  color: var(--brand-900);
  opacity: 1;
  /* margin-left: var(--rem-12); */
  width: fit-content;
}

.paragraph-graphics-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--spacing-2xl);
}
.paragraph-graphics-container:has(.about-me-image) {
  justify-content: center;
}

.paragraph-graphics-container > .graphics {
  flex: 1 1 fit-content;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xl);
}
.paragraph-graphics-container > .paragraph {
  flex: 1 1 400px;
}

/* --------- */
/* FONT SIZE */
/* --------- */
.section-header > h1 {
  font-family: var(--font-handwritten);
}

.widget-header h1 {
  font-family: var(--font-handwritten);
}

.widget-subtitle {
  font-style: italic;
  font-family: var(--font-handwritten);
}

.hero-section h1 {
  font-size: clamp(var(--rem-40), 6.4dvw, var(--rem-64));
}

.project-header h1 {
  font-size: clamp(var(--rem-28), 3dvw, var(--rem-32));
}

.hero-section h2 {
  font-size: clamp(var(--rem-28), 4dvw, var(--rem-40));
}

.hero-section h1,
.hero-section h2 {
  text-align: center;
}

.project-subtitle {
  font-style: italic;
}

/* ----------- */
/* FONT COLORS */
/* ----------- */
li,
.widget-paragraph,
.footer-text,
.section-paragraph {
  color: var(--text-tertiary);
}

.footer-title,
.project-subtitle {
  color: var(--text-primary);
}

.underline-hover p {
  line-height: 1;
}
/* !SECTION */

/* SECTION - ICONOGRAPHY */
/* ------------------- */
/* PROPER IMAGE SIZING */
/* ------------------- */
img,
picture,
svg video {
  display: block;
  max-width: 100%;
  width: 100%;
}

.header-img {
  width: 75%;
  align-self: center;
}

.about-me-image {
  max-width: 25rem;
  max-height: 25rem;
  aspect-ratio: auto;
  border-radius: var(--rem-20);
  box-shadow: var(--default-box-shadow);
  align-self: center;
}

/* ---------------------- */
/* MATERIAL ROUNDED ICONS */
/* ---------------------- */
.material-symbols-rounded {
  align-self: center;
  transition: color 0.3s;
  color: var(--text-primary);
  font-family: "Material Symbols Rounded", sans-serif;
}

.material-symbols-rounded.light {
  color: var(--text-secondary);
}

.material-symbols-rounded.arrow {
  transition: transform 0.25s, color 0.3s;
}

p:has(.material-symbols-rounded) .material-symbols-rounded {
  vertical-align: sub;
}

.svg-icon.dark {
  filter: var(--svg-dark);
}
.svg-icon.light {
  filter: var(--svg-light);
}

a.widget:hover .material-symbols-rounded.arrow,
a.widget:focus .material-symbols-rounded.arrow {
  transform: rotate(-45deg);
}

nav .material-symbols-rounded {
  --icon-size: var(--rem-24);
  font-size: var(--icon-size);
  width: var(--icon-size);
  height: var(--icon-size);
}

.widget div:has(.bottom-image),
.widget picture.project-image {
  display: none;
}

.skill-list-container .widget {
  flex: none;
}
.skill-list-container div:has(> ul) {
  flex: 1 0 18rem;
}

.widget-header img.material-symbols-rounded {
  width: var(--rem-24);
  height: var(--rem-24);
  border-radius: 0;
}

/* Icon next to underline-hover elements */
a.underline-hover + .material-symbols-rounded.hidden {
  width: 0;
  height: 20px;
  overflow: hidden;
  transition: 0.5s;
  opacity: 100%;
}
a.underline-hover:hover,
a.underline-hover:focus-visible,
a.underline-hover:focus {
  & + .material-symbols-rounded.hidden {
    width: 20px;
    height: 20px;
    margin-left: 4px;
  }
}
a.underline-hover + .material-symbols-rounded.visible {
  margin-left: 4px;
}

/* ------ */
/* IMAGES */
/* ------ */
div:not(.toc-section):has(> img.project-image) {
  align-self: center;
  padding: 0 0;
}
.project-image {
  width: auto;
  height: auto;
  max-height: 50dvh;
  transition: border-radius 0.5s;
  align-self: center;
  border: 0.1875rem solid var(--grey-900);
  box-shadow: 0.4375rem var(--rem-8) 0 var(--grey-900);
  border-radius: var(--rem-16);
  background: var(--grey-900);
}

.project-image {
  margin: var(--rem-12) 0 var(--rem-28);
}

.solid-shadow {
  border: 0.1875rem solid var(--grey-900);
  box-shadow: 0.3125rem 0.375rem 0 var(--grey-900);
  border-radius: var(--rem-16);
  background: var(--grey-900);
}

picture.project-image {
  width: 100%;
  display: flex;
  justify-content: center;
}

.dropdown img {
  width: 32px;
}

img.square-img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  max-width: 100%;
  border-radius: 12px;
  height: auto;
  align-self: center;
}

.widget .overflow-img {
  position: absolute;
  bottom: -40px;
}

/* SECTION - MAIN SECTIONS */
main {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.page-content,
article {
  gap: var(--spacing-2xl);
}
article {
  display: flex;
  flex-direction: column;
  padding-top: 4.5rem;
}

.page-content > *,
.hero-section,
article > section,
.project-header,
div:not(.toc-section):has(> img.project-image),
nav,
footer {
  --contentWidth: 80rem;
  padding: 0 max(var(--rem-32), calc((100% - var(--contentWidth)) / 2));
}
.page-content.page-content-and-rail > .side-toc {
  padding: 0 0 var(--rem-64)
    max(var(--rem-32), calc((100% - var(--contentWidth)) / 2));
}

.project-img-button img {
  transition: 0.2s;
  max-height: 100%;
  border-radius: var(--rem-12);
  box-shadow: var(--default-box-shadow);
}

.project-img-button {
  position: relative;
  width: fit-content;
  flex: 1 1 22rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--rem-12);
  overflow: hidden;

  /* Solid Shadow */
  border: 3px solid var(--grey-900);
  box-shadow: 0.3125rem 0.375rem 0 var(--grey-900);
  border-radius: var(--rem-16);
  background-color: var(--grey-900);
}

@media screen and (min-width: 744px) {
  .project-img-button .project-img-details {
    position: absolute;
    bottom: -3rem;
    left: 0.6rem;
    width: -webkit-fill-available;
    right: 0.6rem;
    opacity: 0%;

    transition: 0.5s;

    * {
      color: var(--text-secondary);
    }
  }

  .project-img-button:hover .project-overlay,
  .project-img-button:focus-visible .project-overlay {
    opacity: 100%;
  }
  .project-img-button:hover .project-img-details,
  .project-img-button:focus-visible .project-img-details {
    bottom: var(--rem-8);
    opacity: 100%;
  }
}

.project-img-button .project-overlay {
  display: block;
  opacity: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  border-radius: var(--rem-12);
  transition: 0.5s;
  background: rgba(41, 41, 41, 0.75);
}

.project-img-details {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 0.8rem;
  position: inherit;
  width: 100%;
  left: 0.2rem;
  bottom: 0.2rem;

  * {
    color: var(--text-secondary);
  }

  .material-symbols-rounded {
    transition: 0.2s;
    transform: translateX(-0.2rem);
  }
}

.project-img-button:hover,
.project-img-button:focus,
.project-img-button:focus-visible {
  img,
  .project-overlay {
    transform: scale(1.01);
  }

  .material-symbols-rounded {
    transform: scale(1.1) translateX(-0.2rem);
  }
}

/* !SECTION */

/** SECTION - HERO SECTION **/
.hero-section {
  min-height: 30rem;
  height: 80dvh;
  max-height: 40rem;
  align-items: center;
  justify-content: space-between;
  /* padding-top: 4.5rem; */
  gap: var(--rem-24);
}

.hero-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: var(--rem-40);
  flex-wrap: wrap-reverse;
}
/* .hero-container > * {
  flex: 1 0 fit-content;
} */
.text-gradient {
  background: var(--text-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-right: var(--rem-16);
}

.hero-image-container {
  display: flex;
  justify-content: center;
  align-items: center;

  --blob-size: auto;
  transition: right 0.5s ease-in-out, top 0.5s ease-in-out;

  --blob-max-size: 28rem;

  max-width: var(--blob-max-size);
  max-height: var(--blob-max-size);

  height: var(--blob-size);
  width: var(--blob-size);
}

.hero-image-container svg {
  width: 100%;
  height: auto;
}

.hero-section .button-group {
  align-self: flex-start;
}

/* !SECTION */

/* SECTION - LISTS */
/* ---------------------- */
/* GENERAL TYPE SELECTORS */
/* ---------------------- */
ul {
  padding: 0;
  margin: 0;
}
ul.padding-left {
  padding-left: var(--rem-40);

  li {
    margin-bottom: var(--rem-8);
  }
}
ul.nested-list {
  padding: var(--rem-16) 0 0 var(--rem-12);
}
ul.button-group {
  display: flex;
  align-items: center;
}
.button-group li,
.nav-list li,
.side-toc li {
  list-style: none;
}

.button-group li {
  flex: 1 0 fit-content;
}

.button-group a:has(.material-symbols-rounded) {
  width: var(--rem-32);
  height: var(--rem-32);
}

ol {
  padding: 0;
  margin: 0;
}

li:has(a .material-symbols-rounded) {
  display: flex;
  height: var(--rem-24);
  width: var(--rem-24);
}

ul.number-accolades-container {
  display: flex;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.number-accolades-container li {
  list-style: none;
}
.accolades-number {
  line-height: normal;
  font-family: var(--font-handwritten);
}

.side-toc ol {
  display: none;
  background-color: var(--surface-primary);
  /* padding: var(--rem-24); */
  border-radius: var(--rem-12);
  position: absolute;
  z-index: 5;
  width: 100%;

  transition: background 0.3s;
}

.side-toc li:not(:last-child) {
  margin-bottom: var(--rem-20);
}

.side-toc li p {
  width: fit-content;
}

.side-toc button {
  display: flex;
}

/* ---------------- */
/* NAV BAR DROPDOWN */
/* ---------------- */
.dropdown ul {
  flex-direction: column;
  align-items: flex-end;
  height: fit-content;
  width: 100%;
  gap: 12px;
  padding: 0;
  margin: 0;
}

/* ----------------- */
/* ABOUT ME SECTIONS */
/* ----------------- */
ul.sticky-item.slideshow-controls {
  bottom: var(--rem-12);
  padding: var(--rem-16);
  width: -webkit-fill-available;
  border-radius: var(--rem-36);
  align-self: center;
  background: var(--surface-primary);
  max-width: var(--rem-28);
  justify-content: space-between;
  z-index: 2;
  flex-wrap: nowrap;
}

ul.slideshow-controls li {
  width: 30%;
}
ul.slideshow-controls li:has(p) {
  width: auto;
  height: auto;
  align-self: center;
}
/* !SECTION */

/* SECTION - ANCHORS & BUTTONS */
/* ---------------------- */
/* GENERAL TYPE SELECTORS */
/* ---------------------- */
button {
  font-family: "Poppins";
  cursor: pointer;
}

a {
  text-decoration: none;
  color: var(--text-primary);
}

nav a {
  display: flex;
  align-items: center;
  transition: color 0.25s;
  box-shadow: none;
  gap: var(--spacing-sm);
}

/* ---------------- */
/* SPECIFIC BUTTONS */
/* ---------------- */
a.widget:hover .hover-scale,
a.widget:focus .hover-scale {
  transform: scale(1.02);
}

button.active-translateY:active {
  transform: translateY(3px);
  box-shadow: none !important;
}

.default-button,
.secondary-button {
  display: flex;
  gap: var(--rem-8);
  padding: var(--rem-4) var(--rem-16);
  border-radius: var(--rem-24);
  border: 0.1875rem solid var(--border-brand);
  box-shadow: 0 0 0 var(--grey-900);

  transition: background 0.3s, border 0.3s, box-shadow 0.3s;

  position: relative;
}
.default-button {
  background: var(--surface-primary);
}
.default-button:hover,
.default-button:focus {
  background: var(--surface-brand);
  box-shadow: 0.3125rem 0.375rem 0 var(--grey-900);
  border-color: var(--grey-900);
}
.default-button:hover p,
.default-button:focus p {
  color: var(--text-secondary);
}

.default-button.solid-bg {
  background: var(--surface-brand);

  p {
    color: var(--text-secondary);
  }
}

.default-button p {
  color: var(--text-primary);
}

.secondary-button {
  background: var(--surface-brand);
}
.secondary-button p {
  color: var(--text-secondary);
}
.secondary-button:hover {
  background: hsl(261, 78%, 60%);
}

/* ------------- */
/* SPECIAL CASES */
/* ------------- */
button:not(.icon-button) {
  border: none;
  user-select: none;
}

.icon-button {
  display: flex;
  align-self: center;
  border: none;
  background: none;
  padding: 0;
  --size: var(--rem-24);
  height: var(--size);
  width: var(--size);
}

.button-group {
  gap: var(--spacing-md);
  width: fit-content;
  /* flex-wrap: wrap; */
}
.button-group:has(a.material-symbols-rounded) {
  gap: var(--spacing-sm);
}

.nav-list .icon-button {
  align-self: flex-end;
}
/* !SECTION */

/* SECTION - NAVIGATION BAR */
/* ----------- */
/* TOP NAV BAR */
/* ----------- */
nav {
  justify-content: space-between;

  width: 100%;
  height: fit-content;
  padding: 1.6rem 0;

  align-items: flex-start;
  overflow: hidden;

  background: var(--surface-nav);
  backdrop-filter: blur(10px);

  transition: height 0.5s, gap 0.2s, background 0.3s, top 0.5s;

  position: fixed;
  z-index: 4;
  top: 0;

  padding: var(--rem-24)
    max(var(--rem-32), calc((100% - var(--contentWidth)) / 2));
  border-bottom: 0.1875rem solid var(--border-brand);
}

#toggle-nav {
  display: flex;
}

nav .button-group {
  display: none;
}

.nav-bar {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-self: center;
}

.nav-list {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-self: stretch;
  gap: var(--spacing-5);
}

/* ---------------------- */
/* NAV DROPDOWN CONTAINER */
/* ---------------------- */
.dropdown {
  width: 100%;
  height: fit-content;
  margin-top: var(--rem-24);

  z-index: 3;
  top: var(--rem-80);

  display: none;
}

.overlay {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  background-color: rgba(0, 0, 0, 0.5);
}

.separated-line {
  width: 100%;
  border: 0.09375rem solid var(--border-brand);
}
/* !SECTION */

/* SECTION - FOOTER */
.footer-text {
  line-height: 1.5;
  font-family: var(--font-handwritten);
  align-self: center;
}
body footer {
  gap: var(--rem-32);
  width: 100%;
  padding: var(--spacing-2xl)
    max(var(--rem-32), calc((100% - var(--contentWidth)) / 2)) var(--spacing-xl);
}

.material-symbols-rounded,
footer li {
  --size: var(--rem-24);
  font-size: var(--size);
  width: var(--size);
  height: var(--size);
}
/* !SECTION */

/* SECTION - MISC */
/* -------------------- */
/* ARTICLE/PROJECT PAGE */
/* -------------------- */
.project-header {
  width: 100%;
}

.page-content h3.article-heading {
  white-space: nowrap;
}

.page-content-and-rail {
  position: relative;
  flex-direction: column;
  width: 100%;
}

.project-details-container {
  display: flex;
  flex-direction: column;
}

img.project-profile-picture {
  --size: var(--rem-64);
  max-height: var(--size);
  max-width: var(--size);
}

/* TABLE OF CONTENTS */
.sticky-item.side-toc {
  display: none;
  align-self: end;
  top: 10rem;
  z-index: 3;
  justify-content: flex-end;
}

/* ----------------- */
/* ARTICLE & SECTION */
/* ----------------- */
.section-header {
  width: fit-content;
}

.section-header > hr {
  border: var(--rem-2) solid var(--border-brand);
  border-radius: var(--rem-12);
  margin-left: 0;
  width: 0%;
}

/* ------- */
/* WIDGETS */
/* ------- */
.widget-container {
  gap: var(--rem-20);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* padding: var(--rem-40) 0; */
}

.widget {
  display: flex;
  padding: var(--rem-12) var(--rem-16);
  gap: var(--rem-16);
  border-radius: var(--rem-20);
  background: var(--surface-gradient);
  overflow: hidden;

  min-width: fit-content;

  justify-content: space-between;
  overflow: hidden;
  position: relative;
  flex: 1 0 0;

  transition: background 0.3s;

  /* Solid Shadow */
  border: 0.1875rem solid var(--grey-900);
  box-shadow: 0.3125rem 0.375rem 0 var(--grey-900);
  border-radius: var(--rem-16);
  background-color: var(--grey-900);
}

.widget * {
  color: var(--text-secondary);
}

.widget-header {
  display: flex;
  gap: var(--rem-14);
  align-items: center;
  width: 100%;
}

.widget.medium {
  width: 100%;
}

.widget.small {
  width: auto;
  max-width: fit-content;
}

div:has(> .album-cover) {
  height: auto;
  flex-wrap: wrap;
  justify-content: center;
}
div:has(> .album-cover) > *:not(img) {
  flex: 1 0 0;
}
.widget img {
  width: auto;
  aspect-ratio: auto;
  height: 6rem;
  max-width: 12.5rem;
  border-radius: var(--rem-8);
  align-self: center;
}
a.widget:has(> img.bg-album) {
  position: relative;
}
img.bg-album {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  top: 0;
  filter: blur(50px);
  object-fit: cover;
  z-index: -1;
  transform: rotate(90deg);
}
.album-details {
  align-items: flex-start;
  justify-content: space-evenly;
}

/* --------- */
/* SLIDESHOW */
/* --------- */
.slideshow#features-container .slide {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

#features-container h2 {
  width: 100%;
}

.feature-desc-container {
  width: 100%;
  gap: var(--rem-12);
}

.feature-desc-container ul {
  width: 100%;
  flex-wrap: nowrap;
}

.feature-desc-container li:has(button) {
  width: 100%;
}

.slide-item {
  opacity: 0;
}

.slideshow-controls li > p.section-paragraph {
  width: var(--rem-80);
  text-align: center;
}

.counter {
  font-family: var(--font-handwritten);
}

/* !SECTION */

/* SECTION - ANIMATION */
/* ----------------- */
/* ANIMATION CLASSES & KEYFRAME ANIMATIONS */
/* ----------------- */
/* Scroll-driven Animation */
@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateY(-1.25rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.slide-in {
  animation: slideIn 1.5s cubic-bezier(0, 0, 0.3, 1) forwards;
}

/* Header Underline Animation  */
@keyframes drawHeaderUnderline {
  0% {
    width: 0%;
  }
  100% {
    width: 67%;
  }
}
.draw-header-underline {
  animation: drawHeaderUnderline 2s ease-in-out forwards;
}

/* SECTION - MEDIA QUERIES */
/* ------------- */
/* DESKTOP WIDTH */
/* ------------- */
@media screen and (min-width: 75rem) {
  .side-toc ol {
    display: block;
    position: relative;
    width: fit-content;
    /* width: 12.5rem; */
    padding-top: var(--rem-24);
    padding-right: 0;
  }
  #open-toc {
    display: none;
  }
  .sticky-item.side-toc {
    display: flex;
    flex-direction: column;
    width: fit-content !important;
    align-self: start;
  }
  .page-content-and-rail {
    flex-direction: row;
  }

  .page-content h3.article-third-heading {
    font-size: var(--rem-18);
  }

  .page-content.page-content-and-rail > .project-content {
    padding: var(--rem-64)
      max(var(--rem-20), calc((100% - var(--contentWidth)) / 2)) var(--rem-64) 0;
  }
}

/* Nav Bar */
@media screen and (min-width: 37.5rem) {
  nav {
    justify-content: center;
  }
  nav .button-group {
    display: flex;
  }
  nav #toggle-nav {
    display: none;
  }
}