/* ------------------------------------------------------------------ */
/* Font Faces
/* ------------------------------------------------------------------ */

@font-face {
  font-family: "Source Serif 4 Variable";
  font-style: normal;
  src: url("/fonts/Source_Serif_4_Var.woff2") format("woff2");
}

@font-face {
  font-family: "Source Serif 4 Variable";
  font-style: italic;
  src: url("/fonts/Source_Serif_4_Var_It.woff2") format("woff2");
}

@font-face {
  font-family: "Source Sans 3 Variable";
  font-style: normal;
  src: url("/fonts/Source_Sans_3_Var.woff2") format("woff2");
}

@font-face {
  font-family: "Source Sans 3 Variable";
  font-style: italic;
  src: url("/fonts/Source_Sans_3_Var_It.woff2") format("woff2");
}

@font-face {
  font-family: "Source Code Pro Variable";
  font-style: normal;
  src: url("/fonts/Source_Code_Pro_Var.woff2") format("woff2");
}

@font-face {
  font-family: "Source Code Pro Variable";
  font-style: italic;
  src: url("/fonts/Source_Code_Pro_Var_It.woff2") format("woff2");
}

/* ------------------------------------------------------------------ */
/* View Transition
/* ------------------------------------------------------------------ */

@view-transition {
  navigation: auto;
  type: none;
}

/* ------------------------------------------------------------------ */
/* Variables
/* ------------------------------------------------------------------ */

:root {
  /* Font Faces */
  --font-face-body: "Source Serif 4 Variable", serif;
  --font-face-sans: "Source Sans 3 Variable", sans-serif;
  --font-face-code: "Source Code Pro Variable", monospace;

  /* Font Sizes */
  --font-size-300: clamp(0.9375rem, 0.7500rem + 0.625vw, 1.1250rem);
  --font-size-400: clamp(1.1250rem, 0.9375rem + 0.625vw, 1.3125rem);
  --font-size-700: clamp(1.3125rem, 1.1250rem + 0.625vw, 1.5000rem);

  /* Font Weights */
  --font-weight-300: 300;
  --font-weight-400: 400;
  --font-weight-700: 700;

  /* Text Colors */
  --color-text-300:   light-dark(hsl(  0   0%  25% / 100%), hsl(  0   0%  70% / 100%));
  --color-text-400:   light-dark(hsl(  0   0%  15% / 100%), hsl(  0   0%  85% / 100%));
  --color-text-700:   light-dark(hsl(  0   0%   5% / 100%), hsl(  0   0%  95% / 100%));

  /* Colors */
  --color-accent:     light-dark(hsl(220  50%  40% / 100%), hsl(220  50%  60% / 100%));
  --color-background: light-dark(hsl(  0   0%  95% / 100%), hsl(  0   0%   5% / 100%));
}

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

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

::selection {
  background-color: hsl(from var(--color-accent) h s l / 50%);
}

::marker {
  color: var(--color-accent);
}

html {
  accent-color          : var(--color-accent);
  background-color      : var(--color-background);
  color-scheme          : light dark;
  interpolate-size      : allow-keywords;
  scroll-behavior       : smooth;
  scroll-padding-block  : 4rem;
  scroll-padding-inline : 6rem;
  scrollbar-gutter      : stable;
}

body {
  display          : block flex;
  flex-direction   : column;
  margin-block     : 0;
  margin-inline    : auto;
  padding-block    : 0;
  padding-inline   : 0;
  min-block-size   : 100svb;
  inline-size      : min(60rem, 100% - 2rem);

  font-family      : var(--font-face-sans);
  font-size        : var(--font-size-400);
  font-weight      : var(--font-weight-400);
  text-rendering   : optimizeLegibility;
  text-size-adjust : none;
  color            : var(--color-text-400);
}

article {

}

section {
}

nav {

}

aside {

}

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

  &:first-child {
    margin-block-start: 0;
  }
}

h1 {
  margin-block          : 6.00rem 1.50rem;
  font-size             : var(--font-size-700);
  font-style            : normal;
  font-weight           : var(--font-weight-700);
  font-feature-settings : "smcp" on;
  color                 : var(--color-text-700);
}

h2 {
  margin-block          : 1.50rem 1.00rem;
  font-size             : var(--font-size-700);
  font-style            : normal;
  font-weight           : var(--font-weight-700);
  font-feature-settings : normal;
  color                 : var(--color-text-700);
}

h3 {
  margin-block          : 1.00rem 0.50rem;
  font-size             : var(--font-size-400);
  font-style            : normal;
  font-weight           : var(--font-weight-700);
  font-feature-settings : normal;
  color                 : var(--color-text-700);
}

h4 {
  margin-block          : 1.00rem 0.50rem;
  font-size             : var(--font-size-400);
  font-style            : normal;
  font-weight           : var(--font-weight-700);
  font-feature-settings : normal;
  color                 : var(--color-text-400);
}

h5 {
  display               : inline flow;
  font-size             : var(--font-size-400);
  font-style            : normal;
  font-weight           : var(--font-weight-700);
  font-feature-settings : normal;
  color                 : var(--color-text-400);
}

h6 {
  display               : inline flow;
  font-size             : var(--font-size-400);
  font-style            : italic;
  font-weight           : var(--font-weight-400);
  font-feature-settings : normal;
  color                 : var(--color-text-400);
}

hgroup {

}

header {

}

footer {

}

address {

}

p {
  margin-block : 1.00rem;
  text-wrap    : pretty;
  line-height  : 1.40;
}

hr {

}

pre {
  font-family: var(--font-face-code);
}

blockquote {

}

ol {

}

ul {

}

menu {

}

li {

}

dl {

}

dt {

}

dd {

}

figure {

}

figcaption {

}

main {
  flex: 1 0 100%;
}

search {

}

div {

}

a {
  text-decoration: none;
  color: currentColor;
  transition: color 0.2s ease-in-out;

  &[href]:hover {
    color: var(--color-accent);
  }

  &[href][rel="external"]::after {
    content: "\FEFF°";
    margin-inline-start: 0.1rem;
    color: light-dark(hsl(000 50% 40% / 100%), hsl(000 50% 60% / 100%));
  }
}

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

body > header {
  display: block flex;
  margin-block: 1rem;
  margin-inline: 0;
  padding-block: 1rem;
  padding-inline: 1rem;

  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.50rem 2.00rem;

  border-radius: 0.50rem;
  background-color: light-dark(
    hsl(from var(--color-accent) h 15% 90% / 100%),
    hsl(from var(--color-accent) h 15% 10% / 100%)
  );

  & > a {
    display: block;
    font-size: var(--font-size-700);
    font-weight: var(--font-weight-700);
    color: var(--color-text-700);
  }

  & button {
    display: none;
    anchor-name: --header-navigation;

    @media (width >= 60rem) {
      display: none;
    }
  }

  & nav {
    text-wrap: nowrap;
    flex-direction: row;
    gap: 0.25rem 0.50rem;
    position: absolute;
    position-anchor: --header-navigation;
    position-area: bottom span-left;
    margin-block: 1rem;
    border-radius: 1rem;
    border: none;

    @media (width >= 60rem) {
      display: block flex;
      position: initial;
      margin: 0;
      padding: 0;
      background-color: inherit;
    }

    & a {
      display: block;
      padding-block: 0.25rem;
      padding-inline: 1.00rem;
    }
  }
}

body > footer {
  display: block flex;
  margin-block: 1rem;
  margin-inline: 0;
  padding-block: 1rem;
  padding-inline: 1rem;
  border-radius: 1rem;
  background-color: light-dark(
    hsl(from var(--color-accent) h 15% 90% / 100%),
    hsl(from var(--color-accent) h 15% 10% / 100%)
  );
}

main > article > section {
  margin-block   : 3.00rem;
  padding-block  : 1.00rem;
  padding-inline : 1.00rem;
  border-radius  : 0.50rem;

  &:first-child {
    margin-block-start: 2.00rem;
  }
  &:last-child {
    margin-block-end: 2.00rem;
  }

  & > section {
    margin-block : 2.00rem;
  }
}

.about-you {
  background-color: light-dark(
    hsl(from var(--color-accent) h 15% 90% / 100%),
    hsl(from var(--color-accent) h 15% 10% / 100%)
  );

  & h2 {
    font-size: 2rem;
    text-align: center;
  }

  & figure {
    margin-block: 0;
    margin-inline: 0;
    padding-block: 1rem;
    padding-inline: 1rem;

    & img {
      border-radius: 100%;
    }
  }

  @media (width > 30rem) {
    display: block grid;
    grid-template-columns: 3fr 7fr;
    grid-template-rows: auto;
    gap: 0 2rem;

    & > h2 {
      align-self: self-end;
      text-align: start;
    }

    & > figure {
      margin-block: 0;
      margin-inline: 0;
      padding-block: 0;
      padding-inline: 0;
      grid-column: 1 / 2;
      grid-row: 1 / 3;
      align-self: center;
    }

    & > p {
      align-self: self-start;
    }
  }
}

.proof-of-work {
  background-color: light-dark(
    hsl(from var(--color-accent) h 15% 90% / 100%),
    hsl(from var(--color-accent) h 15% 10% / 100%)
  );

  & h2 {
    font-size: 2rem;
  }

  & figure {
    margin-block: 0;
    margin-inline: 0;
    padding-block: 1rem;
    padding-inline: 1rem;
  }

  @media (width > 40rem) {
    & > section {
      display: grid;
      grid-template-columns: 7fr 3fr;
      column-gap: 2rem;
    }

    & figure {
      margin-block: 0;
      margin-inline: 0;
      padding-block: 0;
      padding-inline: 0;
    }
  }
}

.about-me {

  background-color: light-dark(
    hsl(from var(--color-accent) h 15% 90% / 100%),
    hsl(from var(--color-accent) h 15% 10% / 100%)
  );

  & h2 {
    font-size: 2rem;
  }

  & .figures {
    margin-block: 0;
    margin-inline: 0;
    padding-block: 1rem;
    padding-inline: 1rem;
  }

  @media (width > 30rem) {
    display: block grid;
    grid-template-columns: 3fr 7fr;
    grid-template-rows: auto;
    gap: 0 2rem;

    & > .figures {
      margin-block: 0;
      margin-inline: 0;
      padding-block: 0;
      padding-inline: 0;
      align-self: center;
    }

  }
}

.figures {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 2fr 1fr;

  & figure:first-child {
    & img {
      border-radius: 0.5rem;
    }
  }

  & figure {
    grid-area: 1 / 1 / -1 / -1;
    margin-block: 0;
    margin-inline: 0;
    padding-block: 0;
    padding-inline: 0;
  }

  & .nix {
    grid-area: 2 / 2 / -1 / -1;

    & img {
      border-radius: 100%;
    }
  }
}

p a {
  font-feature-settings:
    "smcp" on,
    "c2sc" on;
}

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

input, button, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

textarea {
  min-block-size: 5lh;
}

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