@charset "UTF-8";

:root {
  --white:          #ffffff;
  --black:          #000000;

  --gray-2:         #f9f9f9;
  --gray-4:         #e8e8e8;
  --gray-5:         #e0e0e0;
  --gray-10:        #838383;
  --gray-13:        #101010;

  --indigo-10:      #3358d4;
  --indigo-11:      #3a5bc7;
  --indigo-12:      #1f2d5c;

  --grass-3:        #e9f6e9;
  --grass-5:        #c9e8ca;
  --grass-10:       #3e9b4f;
  --grass-11:       #2a7e3b;
  --grass-11-5:     #255d30;
  --grass-12:       #203c25;
  --grass-13:       #101e13;

  --scale:          1.2;

  --md-no-unit:     1;
  --lg-no-unit:     calc(1 * pow(var(--scale), 1));
  --xl-no-unit:     calc(1 * pow(var(--scale), 2));

  --md-unitless:    1;

  --sm-unitless:    calc(1 / pow(var(--scale), 1));
  --xs-unitless:    calc(1 / pow(var(--scale), 2));
  
  --lg-unitless:    calc(1 * pow(var(--scale), 1));
  --xl-unitless:    calc(1 * pow(var(--scale), 2));

  --md:             1rem;
  
  --sm:             calc(1rem / pow(var(--scale), 1));
  --xs:             calc(1rem / pow(var(--scale), 2));
  --2xs:            calc(1rem / pow(var(--scale), 3));
  --3xs:            calc(1rem / pow(var(--scale), 4));
  --4xs:            calc(1rem / pow(var(--scale), 5));
  
  --lg:             calc(1rem * pow(var(--scale), 1));
  --xl:             calc(1rem * pow(var(--scale), 2));
  --2xl:            calc(1rem * pow(var(--scale), 3));
  --3xl:            calc(1rem * pow(var(--scale), 4));
  --4xl:            calc(1rem * pow(var(--scale), 5));
  --5xl:            calc(1rem * pow(var(--scale), 6));
  --6xl:            calc(1rem * pow(var(--scale), 7));
  --7xl:            calc(1rem * pow(var(--scale), 8));
  --8xl:            calc(1rem * pow(var(--scale), 9));
  --9xl:            calc(1rem * pow(var(--scale), 10));
  --10xl:           calc(1rem * pow(var(--scale), 11));
  --11xl:           calc(1rem * pow(var(--scale), 12));
  --12xl:           calc(1rem * pow(var(--scale), 13));

  --transition-duration:        187.5ms;

  --margin-bottom-for-paragraph: var(--xs);

  --line-height:    calc(var(--scale) * var(--scale));

  --line-height-sm: var(--scale);
  --line-height-xs: 1;

  --color:          var(--gray-13);

  --font-family:    "Source Sans 3", "Rubik", system-ui, sans-serif;
  --font-family-for-headings:
                    "Zilla Slab", "Roboto Slab", serif;
  --font-weight:    400;
  --font-weight-for-headings:
                    600;

  @media screen {
    --width:          672px;
    --space-x:        max(calc(calc(100% - var(--width)) / 2), var(--sm));
    --bg-color:       var(--gray-2);
  }

  @media screen and (width >= 1024px) {
    --scale:          1.25;
  }
}

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

html {
  display: flex;
  font-size: 15px;

  @media screen and (width >= 1024px) {
    font-size: 16px;
  }
}

body {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: calc(100vh + 1px);
  line-height: var(--line-height);
  font-family: var(--font-family);
  color: var(--color);

  @media screen {
    background-color: var(--bg-color);
  }

  @media screen and (width < 1024px) {
    min-height: 100vh;
  }

  @media screen and (width >= 1024px) {
    min-height: calc(100vh + 1px);
  }
}

header {
  position: relative;
  padding-inline: var(--space-x);
  
  @media screen and (width < 1024px) {
    border-bottom: 2px solid var(--gray-5);
    padding-top: var(--4xl);
    padding-bottom: var(--3xl);
  }
  
  @media screen and (width >= 1024px) {
    background-color: var(--gray-4);
    padding-top: var(--5xl);
    padding-bottom: var(--6xl);
    color: var(--black);
  }
}

nav {
  position: absolute;
  top: 0;
  right: var(--space-x);
  display: flex;
  align-items: center;
  margin-top: var(--xs);
  height: var(--3xl);
  font-weight: var(--font-weight-for-headings);
}

nav ul {
  display: flex;
  column-gap: var(--md);
  padding: 0;

}

nav li {
  list-style: none;
}

nav a {
  color: var(--color);
  padding-block: var(--2xs);
}

nav a[aria-current="page"] {
  text-decoration-color: var(--color);
}

main {
  padding-inline: var(--space-x);

  @media screen and (width < 1024px) {
    padding-top: var(--xl);
    padding-bottom: var(--6xl);
  }

  @media screen and (width >= 1024px) {
    padding-block: var(--4xl);
    padding-bottom: var(--6xl);
  }
}

h1,
h2,
h3,
h4 {
  margin-bottom: var(--margin-bottom-for-paragraph);
  line-height: var(--line-height-sm);
  color: var(--grass-11-5);
  font-family: var(--font-family-for-headings);
  font-weight: var(--font-weight-for-headings);
}

h1 {
  font-size: var(--4xl);
}

h2 {
  margin-top: var(--2xl);
  font-size: var(--3xl);
}

h3 {
  margin-top: var(--xl);
  font-size: var(--xl);
}

h4 {
  margin-top: var(--md);
  font-size: var(--lg);
}

p {
  margin-bottom: var(--margin-bottom-for-paragraph);
}

ul {
  display: grid;
  row-gap: 2px;
  margin-bottom: var(--margin-bottom-for-paragraph);
  padding-left: var(--xl);
}

li {
  list-style-image: url('/assets/icons/arrow-turn-down-right-solid.svg');
  list-style-position: initial;
}

li::marker {
  font-size: var(--lg);
  line-height: 0;
}

dl {
  display: grid;
  grid-template-columns: 13ch minmax(0, 1fr);
  row-gap: 4px;
  
  @media (width >= 600px) {
    grid-template-columns: 20ch minmax(0, 1fr);
  }
}

a {
  transition-property: color, text-decoration-color;
  transition-duration: var(--transition-duration);
  /*
  text-decoration-color: var(--gray-5);
  */
  text-decoration-color: rgba(0, 0, 0, 0.122);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-underline-offset: 4px;
  text-decoration-thickness: 3px;
  color: var(--indigo-11);
}

a:active,
a:hover {
  text-decoration-color: var(--color);
}

.print-only {
  @media screen {
    display: none;
  }
}

.month {
  @media screen and (width < 600px) {
    display: none;
  }
}

.site-title {
  line-height: 1;
  font-family: var(--font-family-for-headings);
  font-size: var(--5xl);
  font-weight: var(--font-weight-for-headings);
}

.site-tagline {
  line-height: 1;
  font-size: var(--2xl);
  margin-bottom: 0;
}

.home main p {
  font-size: var(--lg);
}

.resume-skill-title {
  position: relative;
  width: max-content;
}

.resume-skill-title[data-skill-level]::after {
  position: absolute;
  /*
    Magic number!
  */
  bottom: 9.375%;
  left: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-left: var(--2xs);
  width: max-content;
  border: 1px solid var(--grass-5);
  background-color: var(--grass-3);
  padding: 0.125em 0.5em;
  text-transform: uppercase;
  color: var(--grass-11);
  font-size: var(--sm);
  font-family: var(--font-family);
  font-weight: 600;
  content: attr(data-skill-level);
}

.footer {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  border-top: 2px solid var(--gray-5);
  padding-inline: var(--space-x);
  padding-block: var(--2xl);
}

.footer__copy {
  margin: 0;
  font-size: var(--md);
}

/*

  Web fonts                                                                  *

*/

@font-face {
  font-display: swap;
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/source-sans-3-v15-latin-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  src: url('/assets/fonts/source-sans-3-v15-latin-italic.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  src: url('/assets/fonts/source-sans-3-v15-latin-600.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 600;
  src: url('/assets/fonts/source-sans-3-v15-latin-600italic.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  src: url('/assets/fonts/source-sans-3-v15-latin-700.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 700;
  src: url('/assets/fonts/source-sans-3-v15-latin-700italic.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Zilla Slab';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/zilla-slab-v11-latin-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Zilla Slab';
  font-style: normal;
  font-weight: 600;
  src: url('/assets/fonts/zilla-slab-v11-latin-600.woff2') format('woff2');
}