/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/*** Design tokens ***/

/* The following code and design are my custom solo work. */


:root {
  /* Spaces */
  --space-xsmall: 0.6rem; /* For subtext */
  --space-small: 0.8rem; /* For lists */
  --space-medium: 1rem; /* For body text */
  --space-large: 1.6rem; /* For large controls */
  --space-xlarge: 3.2rem; /* For sections */

  /* Typography */
  --font-size-title: 3rem;
  --line-height-title: 3.4rem;
  --font-size-heading-2: 2rem;
  --line-height-heading-2: 2.4rem;
  --font-size-heading-3: 1.2rem;
  --line-height-heading-3: 1.6rem;
  --font-size-body: 0.8rem;
  --line-height-body: 1.2rem;
  --font-size-subtext: 0.6rem;
  --line-height-subtext: 0.8rem;

  /* Colors */
  --color-page-highlight: #cfefff;
  --color-background-primary: #f0f9ff;
  --color-text-primary: black;
  --color-text-secondary: #60696f;
  --color-text-link: #3060f0;
  --color-focus-ring: rgba(48, 96, 240, 0.75);
  --color-article-background: #f9fcff;
  --color-article-border: #e0e9ef;
  --color-article-border-bottom: #d0d9df;

  /* Border radii */
  --border-radius-small: 4px;
  --border-radius-medium: 8px;
  --border-radius-large: 16px;

  /* Box shadows */
  --box-shadow-article:
    inset 0 0 0 1px rgba(255, 255, 255, 0.75),
    inset 0 64px 64px -64px var(--color-background-primary),
    inset 0 -64px 64px -64px rgba(255, 255, 255, 0.75),
    0 8px 16px rgba(0, 10, 20, 0.05),
    0 32px 64px rgba(0, 10, 20, 0.05);
  --box-shadow-image: 0 0 0 1px #f0f9ff;
  --box-shadow-focus-ring: 0 0 0 3px var(--color-focus-ring);

  /* Transitions */
  --transition-focus: all 0.2s ease-in-out;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Colors */
    --color-page-highlight: #2f1f2f;
    --color-background-primary: #10191f;
    --color-text-primary: #e0e9ef;
    --color-text-secondary: #b0b9bf;
    --color-text-link: #c182f6;
    --color-focus-ring: rgba(193, 130, 246, 0.75);
    --color-article-background: #20292f;
    --color-article-border: #191c1f;
    --color-article-border-bottom: #090c0f;

    /* Box shadows */
    --box-shadow-article:
      inset 0 0 0 1px rgba(255, 255, 255, 0.05),
      inset 0 64px 64px -64px var(--color-background-primary),
      inset 0 -64px 64px -64px rgba(255, 255, 255, 0.1),
      0 8px 16px rgba(0, 5, 10, 0.75),
      0 32px 64px rgba(0, 5, 10, 0.75);
    --box-shadow-image: none;
  }
}

/*** Page ***/

* {
  box-sizing: border-box;
}

html {
  background:
    linear-gradient(to bottom, var(--color-page-highlight), var(--color-background-primary) 25rem) no-repeat,
    var(--color-background-primary);
  background-attachment: fixed;
}

body {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--space-xlarge) var(--space-large) var(--space-large);
}

/*** Typography ***/

html {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-size: 20px;
}

body {
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

abbr {
  text-decoration: underline dotted;
  text-underline-offset: 0.1rem;
}

b {
  font-weight: bold;
}

em {
  font-style: italic;
}

h1, h2, h3 {
  font-family: Rubik, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 700;
}

h1 {
  font-size: var(--font-size-title);
  line-height: var(--line-height-title);
}

h2 {
  font-size: var(--font-size-heading-2);
  line-height: var(--line-height-heading-2);
}

h3 {
  font-size: var(--font-size-heading-3);
  line-height: var(--line-height-heading-3);
}

a,
a:visited {
  /*
  1: Fix Safari 16.1 issue where top of focus state's box shadow is missing.
  */

  position: relative; /* 1 */
  padding: 0.1rem 0.05rem;
  border-radius: var(--border-radius-small);
  color: var(--color-text-link);
  transition: var(--transition-focus);
  will-change: auto;
}

a:focus {
  box-shadow: var(--box-shadow-focus-ring);
  outline: none;
}

ul {
  margin-top: var(--space-small);
  list-style: disc;
}

ul li {
  margin-left: var(--space-medium);
  padding-left: 0.1rem;
}

/*** Intro ***/

.Intro strong {
  font-weight: 500;
}

.Intro-titleKerned {
  margin-left: -0.04em;
  margin-right: -0.06em;
}

.Intro-description {
  margin-top: var(--space-medium);
  font-size: var(--font-size-heading-3);
  font-weight: 300;
  line-height: var(--line-height-heading-3);
}

.Intro-platforms {
  display: inline-flex;
  margin-left: -0.2rem; /* Left-align with neighboring text */
  margin-top: var(--space-medium);
  gap: var(--space-medium);
  list-style: none;
}

.Intro-platform {
  margin: 0;
  padding: 0;
}

.Intro-platformLink {
  display: inline-block;
  width: var(--space-large);
  height: var(--space-large);
  padding: 0.2rem;
  border-radius: 8px;
}

.Intro-platformLink path {
  /* TODO: Fix hover transitions for GitHub/Twitter icons */
  /* transition: var(--transition-focus); */

  fill: var(--color-text-primary);
}

.Intro-platformLink:hover path {
  fill: var(--color-text-link);
}

/*** Portfolio ***/

.Portfolio {
  margin-top: var(--space-xlarge);
}

.Portfolio-projectWrapper {
  margin-top: var(--space-xlarge);
  padding-top: var(--space-medium); /* Add space when jumping to id */
}

.Portfolio-project {
  padding: var(--space-medium);
  background: var(--color-article-background);
  border: 1px solid var(--color-article-border);
  border-bottom-color: var(--color-article-border-bottom);
  border-radius: var(--border-radius-large);
  box-shadow: var(--box-shadow-article);
}

.Portfolio-projectWrapper:first-of-type {
  margin-top: var(--space-medium);
}

.Portfolio--presentation .Portfolio-projectWrapper:not(:first-of-type) {
  margin-top: 100vh; /* Show one "slide" at a time */
}

.Portfolio--presentation .Portfolio-projectWrapper:last-of-type {
  margin-bottom: 100vh; /* Align to top of viewport */
}

.Portfolio-project p,
.Portfolio-projectFigure {
  margin-top: var(--space-medium);
}

.Portfolio-project h3 + .Portfolio-projectFigure,
.Portfolio-project p + p {
  margin-top: var(--space-medium);
}

.Portfolio-projectImage {
  display: block;
  max-width: 100%;
  height: auto;
  overflow: hidden;
  margin: 0 auto;
  box-shadow: var(--box-shadow-image);
  border-radius: var(--border-radius-medium);
}

.Portfolio-projectFigure--whiteBackground .Portfolio-projectImage {
  /*
  If an image has a white background, add extra white pixels so the image's
  elements don't directly touch the box shadow. Don't scale with the font size.
  */
  border: 8px solid white;
}

.Portfolio-projectImageCaption {
  max-width: 75ch;
  margin: var(--space-xsmall) auto 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-subtext);
  line-height: var(--line-height-subtext);
  text-align: center;
}

.Portfolio-projectDescription {
  margin-top: var(--space-large);
}

.Portfolio-projectTech {
  color: var(--color-text-secondary);
}

.Portfolio-projectFooter {
  display: none;
  margin-top: var(--space-medium);
}

.Portfolio--presentation .Portfolio-projectFooter {
  display: block;
}

/*** Site footer ***/

.SiteFooter {
  margin-top: var(--space-xlarge);
  color: var(--color-text-secondary);
  font-size: var(--font-size-subtext);
  line-height: var(--line-height-subtext);
}