/*!**************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/style/main.scss ***!
  \**************************************************************************************************************/
@charset "UTF-8";
/* ------------------- */
/* Custom properties   */
/* ------------------- */
:root {
  /* colors */
  color-scheme: light dark;
  --clr-dark: 230 35% 7%;
  --clr-light-accent: 231 77% 90%;
  --clr-dark-accent: 276, 100%, 50%;
  --clr-white: 0 0% 100%;
  --clr-highlight: 276, 100%, 50%;
  --primary-clr: light-dark(hsl(var(--clr-dark)), hsl(var(--clr-light-accent)));
  --primary-bg: light-dark(hsl(var(--clr-white)), hsl(var(--clr-dark)));
  --accent-clr: light-dark(
    hsl(var(--clr-dark-accent)),
    hsl(var(--clr-light-accent))
  );
  --border-radius: 4px;
  --easing: cubic-bezier(0.645, 0.045, 0.355, 1);
  /* font-sizes */
  --fs-900: clamp(5rem, 2.586rem + 7.543vw, 9.375rem);
  --fs-800: clamp(3.5rem, 1.983rem + 4.741vw, 5rem);
  --fs-700: clamp(3rem, 0.397rem + 3.448vw, 3.5rem);
  --fs-600: clamp(2.5rem, 0.448rem + 1.724vw, 3rem);
  --fs-500: clamp(1.5rem, 0.586rem + 1.293vw, 1.75rem);
  --fs-400: clamp(0.938rem, 0.834rem + 0.323vw, 1.125rem);
  --fs-300: 1rem;
  --fs-200: 0.875rem;
  /* font-families */
  --ff-serif: "Bellefair", serif;
  --ff-sans-cond: "Barlow Condensed", sans-serif;
  --ff-sans-normal: "Barlow", sans-serif;
  /* spacing */
  --space-lg: clamp(2.5rem, -0.179rem + 7.143vw, 6.25rem);
  --space-md: 2.5rem;
  --space-sm: 1.25rem;
}

:root:has(input[name=color-scheme][value=system]:checked) {
  color-scheme: light dark;
  --theme-icon: "brightness_medium";
}
:root:has(input[name=color-scheme][value=light]:checked) {
  color-scheme: light;
  --theme-icon: "light_mode";
}
:root:has(input[name=color-scheme][value=dark]:checked) {
  color-scheme: dark;
  --theme-icon: "dark_mode";
}

/* ------------------- */
/* Reset               */
/* ------------------- */
/* https://piccalil.li/blog/a-modern-css-reset/ */
/* Box sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

/* Reset margins */
body,
h1,
h2,
h3,
h4,
h5,
p,
figure,
picture {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  font-weight: 400;
}

/* set up the body */
body {
  font-family: var(--ff-sans-normal);
  font-size: var(--fs-400);
  color: var(--primary-clr);
  background-color: var(--primary-bg);
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
}

/* make images easier to work with */
img,
picutre {
  max-width: 100%;
  display: block;
}

/* make form elements easier to work with */
input,
button,
textarea,
select {
  font: inherit;
}

/* remove animations for people who've turned them off */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
body::before {
  --line: color-mix(in lch, canvasText 25%, transparent);
  --size: 60px;
  content: "";
  height: 100vh;
  width: 100vw;
  position: fixed;
  background: linear-gradient(90deg, var(--line) 1px, transparent 1px var(--size)) 0 -5vmin/var(--size) var(--size), linear-gradient(var(--line) 1px, transparent 1px var(--size)) 0 -5vmin/var(--size) var(--size);
  mask: linear-gradient(-15deg, transparent 40%, white);
  top: 0;
  z-index: -1;
  animation: drift 2s linear infinite;
}

/* ------------------- */
/* Utility classes     */
/* ------------------- */
/* general */
.content-grid {
  --padding-inline: 1rem;
  --content-max-width: 1000px;
  --breakout-max-width: 1200px;
  --breakout-size: calc(
    (var(--breakout-max-width) - var(--content-max-width)) / 2
  );
  display: grid;
  grid-template-columns: [full-width-start] minmax(var(--padding-inline), 1fr) [breakout-start] minmax(0, var(--breakout-size)) [content-start] min(100% - var(--padding-inline) * 2, var(--content-max-width)) [content-end] minmax(0, var(--breakout-size)) [breakout-end] minmax(var(--padding-inline), 1fr) [full-width-end];
}

.content-grid > :not(.breakout, .full-width),
.full-width > :not(.breakout, .full-width) {
  grid-column: content;
}

.content-grid > .breakout {
  grid-column: breakout;
}

.content-grid > .full-width {
  grid-column: full-width;
  display: grid;
  grid-template-columns: inherit;
}

.flex {
  display: flex;
  gap: var(--gap, 1rem);
}

.grid {
  display: grid;
  gap: var(--gap, 1rem);
}

.d-block {
  display: block;
}

.flow > *:where(:not(:first-child)) {
  margin-top: var(--flow-space, 1rem);
}

.flow--space-small {
  --flow-space: 0.5rem;
}

.container {
  padding-inline: 2em;
  margin-inline: auto;
  max-width: 80rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; /* added line */
  border: 0;
}

.skip-to-content {
  position: absolute;
  z-index: 9999;
  background: var(--primary-bg);
  color: var(--primary-clr);
  padding: 0.5em 1em;
  margin-inline: auto;
  transform: translateY(-100%);
  transition: transform 250ms ease-in;
}

.skip-to-content:focus {
  transform: translateY(0);
}

/* colors */
.primary-bg {
  background-color: var(--primary-bg);
}

.primary-clr {
  color: var(--primary-clr);
}

.accent-clr {
  color: var(--accent-clr);
}

.highlight-clr {
  color: hsl(var(--clr-highlight));
}

/* typography */
.ff-serif {
  font-family: var(--ff-serif);
}

.ff-sans-cond {
  font-family: var(--ff-sans-cond);
}

.ff-sans-normal {
  font-family: var(--ff-sans-normal);
}

.letter-spacing-1 {
  letter-spacing: 4.75px;
}

.letter-spacing-2 {
  letter-spacing: 2.7px;
}

.letter-spacing-3 {
  letter-spacing: 2.35px;
}

.uppercase {
  text-transform: uppercase;
}

.fs-900 {
  font-size: var(--fs-900);
}

.fs-800 {
  font-size: var(--fs-800);
}

.fs-700 {
  font-size: var(--fs-700);
}

.fs-600 {
  font-size: var(--fs-600);
}

.fs-500 {
  font-size: var(--fs-500);
}

.fs-400 {
  font-size: var(--fs-400);
}

.fs-300 {
  font-size: var(--fs-300);
}

.fs-200 {
  font-size: var(--fs-200);
}

.fs-900,
.fs-800,
.fs-700,
.fs-600 {
  line-height: 1.1;
}

.numbered-title {
  font-family: var(--ff-sans-cond);
  font-size: var(--fs-500);
  letter-spacing: 4.72px;
  position: relative;
  text-transform: uppercase;
}
.numbered-title.flex {
  align-items: center;
}
@media (min-width: 35rem) {
  .numbered-title::after {
    content: "";
    display: block;
    position: relative;
    height: 1px;
    width: 300px;
    background: light-dark(hsl(var(--clr-dark)/0.25), hsl(var(--clr-white)/0.25));
  }
}

.numbered-title span {
  margin-right: 0.5em;
  font-weight: 700;
  align-self: start;
}

.scroll {
  display: inline-block;
}

.scroll-icon {
  width: 30px;
}
.scroll-icon .circle {
  fill: hsl(var(--clr-highlight));
}

.material-symbols-outlined {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 24px; /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: "liga";
}

.tech-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 200px));
  padding: 0;
  list-style-position: inside;
}
.tech-stack li::marker {
  content: "▹";
  color: hsl(var(--clr-highlight));
}

@media (min-width: 35rem) {
  .grayscale-img {
    mix-blend-mode: multiply;
    filter: grayscale(100%);
    transform: translate(0);
    transition: filter 250ms var(--easing), mix-blend-mode 250ms var(--easing), transform 250ms var(--easing);
    width: 100%;
  }
  .grayscale-img:hover {
    transform: translate(-4px, -4px);
    filter: none;
    mix-blend-mode: normal;
  }
}

[class*=animations] {
  transition-property: opacity, transform, filter;
  transition-duration: 1s;
  animation-duration: 1s;
  animation-delay: 0.2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  opacity: 0;
}

.slide-up-fade-in-animations.animate {
  transform-origin: 50% 50%;
  animation-timing-function: ease;
  animation-name: slide-up-fade-in;
}

.slide-left-fade-in-animations.animate {
  transform-origin: 50% 50%;
  animation-timing-function: ease;
  animation-name: slide-left-fade-in;
}

.slide-right-fade-in-animations.animate {
  transform-origin: 50% 50%;
  animation-timing-function: ease;
  animation-name: slide-right-fade-in;
}

@keyframes slide-up-fade-in {
  0% {
    opacity: 0;
    filter: blur(5px);
    transform: translate(0px, 40px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate(0px, 0px);
  }
}
@keyframes slide-left-fade-in {
  0% {
    opacity: 0;
    filter: blur(5px);
    transform: translate(-40px, 0px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate(0px, 0px);
  }
}
@keyframes slide-right-fade-in {
  0% {
    opacity: 0;
    filter: blur(5px);
    transform: translate(40px, 0px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate(0px, 0px);
  }
}
@keyframes drift {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-60px, -60px);
  }
}
.circle {
  animation: circleAnim 1s infinite alternate-reverse;
}

@keyframes circleAnim {
  from {
    transform: translate(1214px, 2063px);
    z-index: 5;
  }
  to {
    transform: translate(1214px, 2103px);
  }
}
.mobile-nav-toggle {
  display: none;
}

.primary-header {
  position: sticky;
  top: 0;
  padding-block: 1rem;
  z-index: 1;
}
.primary-header__layout {
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.primary-header__logo {
  flex: 1;
}
.primary-header__logo img {
  max-width: 48px;
}
.primary-header__logo a {
  text-decoration: none;
  font-weight: 600;
}
.primary-header nav {
  flex: 2;
}
.primary-header__navigation {
  --gap: clamp(1.5rem, 5vw, 3.5rem);
  --underline-gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
  background: light-dark(hsl(var(--clr-dark)/0.05), hsl(var(--clr-white)/0.05));
  backdrop-filter: blur(1.5rem);
}
.primary-header__navigation a {
  text-decoration: none;
}
.primary-header__navigation a > span {
  font-weight: 700;
  margin-right: 0.5em;
}
@media (max-width: 45rem) {
  .primary-header__navigation {
    --underline-gap: 0.5rem;
    position: fixed;
    z-index: 1000;
    inset: 0 0 0 30%;
    list-style: none;
    padding: min(20rem, 15vh) 2rem;
    margin: 0;
    flex-direction: column;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 500ms ease-in-out, visibility 500ms ease-in-out;
  }
  .primary-header__navigation[data-visible=true] {
    transform: translateX(0);
    visibility: visible;
  }
  .primary-header__navigation.underline-indicators > .active {
    border: 0;
  }
}
@media (min-width: 35em) {
  .primary-header__navigation {
    padding-inline: clamp(3rem, 7vw, 7rem);
  }
}

@media (max-width: 45rem) {
  .primary-header {
    background: light-dark(hsl(var(--clr-white)/0.9), hsl(var(--clr-dark)/0.9));
  }
  .mobile-nav-toggle {
    position: absolute;
    z-index: 2000;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    width: 1.5rem;
    aspect-ratio: 1;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    --toggle-icon: "menu";
  }
  .mobile-nav-toggle::before {
    content: var(--toggle-icon);
    text-rendering: optimizelegibility;
    overflow-wrap: normal;
    font: 1.5rem/1.5rem "Material Icons";
    text-transform: none;
  }
  .mobile-nav-toggle[aria-expanded=true] {
    --toggle-icon: "close";
  }
}
.underline-indicators > * {
  cursor: pointer;
  padding: var(--underline-gap, 0.5rem) 0;
  border: 0;
  border-bottom: 0.2rem solid light-dark(hsl(var(--clr-dark)/0), hsl(var(--clr-white)/0));
  background: transparent;
}

.underline-indicators a {
  padding: var(--underline-gap, 0.5rem) 0;
}

.underline-indicators > *:hover,
.underline-indicators > *:focus {
  border-color: light-dark(hsl(var(--clr-dark)/0.5), hsl(var(--clr-white)/0.5));
}

.primary-header__theme-switcher {
  flex: 1;
}

.theme-switcher {
  anchor-name: --popover-anchor;
  appearance: none;
  background: none;
  border: none;
  padding-block: 6px;
  padding-inline: 8px;
  position: relative;
  transition: background-color 250ms ease-in-out;
  border-radius: var(--border-radius);
  --gap: 8px;
  align-items: center;
}
@media (max-width: 45rem) {
  .theme-switcher {
    margin-inline-end: 35px;
  }
}
@media (min-width: 45rem) {
  .theme-switcher {
    margin: 0 0 0 auto;
  }
}
.theme-switcher::before {
  content: var(--theme-icon);
  text-rendering: optimizelegibility;
  overflow-wrap: normal;
  font: 24px/24px "Material Icons";
  text-transform: none;
}
.theme-switcher:hover {
  cursor: pointer;
  background-color: light-dark(hsl(var(--clr-dark)/0.5), hsl(var(--clr-white)/0.5));
}

#themePopover {
  inset-area: bottom;
  position-anchor: --popover-anchor;
  padding: 5px;
  border-radius: var(--border-radius);
  border-width: 1px;
  background: light-dark(hsl(var(--clr-dark)/0.05), hsl(var(--clr-white)/0.05));
  backdrop-filter: blur(1.5rem);
}
#themePopover ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#themePopover ul li {
  --gap: 0;
  width: 100%;
}
#themePopover input {
  all: unset;
}
#themePopover label {
  --gap: 8px;
  outline: 0px;
  padding-block: 6px;
  padding-inline: 8px;
  white-space: nowrap;
  cursor: pointer;
  width: 100%;
  transition: background-color 250ms ease-in-out;
}
#themePopover label[for=system]::before {
  content: "brightness_medium";
}
#themePopover label[for=light]::before {
  content: "light_mode";
}
#themePopover label[for=dark]::before {
  content: "dark_mode";
}
#themePopover label::before {
  text-rendering: optimizelegibility;
  overflow-wrap: normal;
  font: 24px/24px "Material Icons";
  text-transform: none;
}
#themePopover label:hover,
#themePopover input:checked + label {
  background-color: light-dark(hsl(var(--clr-dark)/0.5), hsl(var(--clr-white)/0.5));
}

@supports (position-anchor: --popover-anchor) {
  #themePopover {
    margin: 0;
    margin-block-start: 0.5rem;
  }
}
#themePopover:popover-open {
  animation: slideIn 250ms ease-in-out;
}

@keyframes slideIn {
  0% {
    translate: 0 -2rem 0;
    opacity: 0;
  }
  100% {
    translate: 0 0 0;
    opacity: 1;
  }
}
.hero {
  height: calc(100dvh - 90px);
  align-content: center;
}
.hero__title {
  line-height: 1.75;
}
.hero__title--name {
  font-weight: 700;
  color: light-dark(hsl(var(--clr-dark)), hsl(var(--clr-white)));
}
.hero__desc {
  --flow-space: 1.75rem;
  max-width: 32rem;
}
.hero__scroll {
  --flow-space: 1.75rem;
}
.hero__scroll .flex {
  --gap: 0.5rem;
}

.about {
  padding-block-end: var(--space-lg);
  --flow-space: 2.5rem;
}
.about__content {
  --gap: 2rem;
}
@media (min-width: 35rem) {
  .about__content {
    grid-template-columns: 3fr 2fr;
  }
}
.about__desc {
  --flow-space: 1rem;
}
@media (max-width: 35rem) {
  .about__desc {
    order: 2;
  }
}
.about__pic {
  height: 100%;
  display: block;
}
.about__pic__img {
  border-radius: var(--border-radius);
  box-shadow: 0 10px 30px -20px var(--primary-clr);
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.project {
  padding-block-end: var(--space-lg);
  --flow-space: 2.5rem;
}
.project__title a {
  transition: color 250ms ease-in-out;
}
.project__title a:hover {
  color: hsl(var(--clr-highlight));
}
.project__tech-list {
  flex-wrap: wrap;
  list-style-position: inside;
  padding: 0;
}
.project__tech-list li::marker {
  content: "▹";
  color: hsl(var(--clr-highlight));
}

.contact {
  padding-block-end: var(--space-lg);
  --flow-space: 2.5rem;
}
.contact__form {
  grid-template-columns: 1fr 1fr;
  --gap: 1.25rem;
  width: min(650px, 100%);
  margin: 0 auto;
}
.contact__form label {
  text-align: left;
}
.contact__form input,
.contact__form textarea {
  width: 100%;
  border-radius: var(--border-radius);
  background-color: hsl(var(--clr-white)/0.85);
  margin-block-start: 0.25rem;
  padding: 0.5rem;
  border: 2px solid hsl(var(--clr-highlight));
  color: hsl(var(--clr-dark));
}
.contact__submit {
  border-radius: var(--border-radius);
  border: 2px solid hsl(var(--clr-highlight));
  background: transparent;
  width: 100%;
  padding: 0.5rem;
  transition: color 250ms ease-in-out, background-color 250ms ease-in-out;
}
.contact__submit:hover {
  color: hsl(var(--clr-white));
  cursor: pointer;
  background-color: hsl(var(--clr-highlight));
}
.contact .full {
  grid-column: 1/3;
}

.footer {
  padding-block: 2rem;
}
.footer a {
  display: inline-block;
  text-decoration: none;
  transform: translateY(0);
  transition: transform 250ms ease-in-out, color 250ms ease-in-out;
  font-size: var(--fs-300);
}
.footer a:hover {
  transform: translateY(-0.25rem);
  color: hsl(var(--clr-highlight));
}
.footer .flex {
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
}
@media (min-width: 45rem) {
  .footer .flex {
    justify-content: space-between;
    flex-direction: row;
  }
}
.footer__socials {
  align-items: center;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.footer__socials li {
  list-style: none;
}
.footer__socials li a {
  display: flex;
  padding: 0.5rem;
}
.footer__socials li a svg {
  height: 20px;
  width: 20px;
}

.accordion {
  --panel-height: clamp(25rem, 18.75rem + 16.667vw, 33.75rem);
  --panel-width: 36.25rem;
  --panel-inactive-width: 5rem;
  display: flex;
  row-gap: var(--space-sm);
  column-gap: var(--space-sm);
  flex-direction: column;
}
@media (min-width: 45rem) {
  .accordion {
    flex-direction: row;
    height: var(--panel-height);
  }
}
.accordion__fig__link {
  text-decoration: none;
}
.accordion__fig img {
  border-radius: var(--border-radius);
}
.accordion__content {
  transform: translateY(2rem);
  opacity: 0;
  visibility: hidden;
  max-height: var(--panel-height);
  overflow-y: scroll;
  padding: 1.5rem;
  --flow-space: 1.5rem;
}
.accordion__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: flex-basis 400ms, flex-grow 400ms;
  flex-basis: var(--panel-inactive-width);
  background: light-dark(hsl(var(--clr-dark)/0.05), hsl(var(--clr-white)/0.05));
  border-radius: var(--border-radius);
}
.accordion__panel:has([aria-expanded=true]) {
  flex-basis: var(--panel-width);
  flex-grow: 1;
}
@media (max-width: 45rem) {
  .accordion__panel:has([aria-expanded=true]) {
    flex-basis: var(--panel-height);
  }
}
.accordion__panel:has([aria-expanded=true]) .accordion__content {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform 400ms 400ms, opacity 400ms 400ms;
}
.accordion__trigger {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s, visibility 0.4s;
  appearance: none;
  border: none;
  background: transparent;
}
.accordion__trigger[aria-expanded=false] {
  opacity: 1;
  visibility: visible;
}
@media (min-width: 45rem) {
  .accordion__trigger {
    left: 50%;
    text-orientation: mixed;
    top: 24px;
    transform: translateX(-50%) translateY(0);
    writing-mode: vertical-rl;
  }
}
@media (max-width: 45rem) {
  .accordion__trigger {
    height: 100%;
    padding: 12px 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
  }
}

/*# sourceMappingURL=main.d19e90168342d2734414.css.map*/