* {
  box-sizing: border-box;
}

html {
  --color-1: #1e90ff;
  --color-2: #9b59b6;
  --color-primary-surface: #2c2f33;
  --color-primary-text: #e0e6ed;
  --color-primary-text-muted: #999;
  --color-primary-text-dark: #666;
  --color-secondary-surface: #3a3f47;
  --color-secondary-surface-active: #494f58;
  --color-secondary-bold: #4b4f57;
  --color-secondary-text: #ffffff;
  --color-secondary-text-muted: #acacac;
  --color-tertiary-surface: #161726;
  --color-tertiary-text: #ffffff;
  --color-accent: #ff6f61;
  --color-error: #ff6b6b;
  --color-danger: #ff4444;
  --color-warning: #ffb347;
  --color-success: rgb(56, 173, 56);
  --color-grey-transparent: rgba(200, 200, 200, 0.3);

  --size-3x: 60px;
  --size-4x: 100px;
  --size-5x: 150px;
  --size-6x: 200px;
  --size-7x: 250px;
  --size-8x: 300px;

  --size-xxl: 48px;
  --size-xl: 32px;
  --size-large: 20px;
  --size-medium: 12px;
  --size-small: 8px;
  --size-tiny: 4px;
  --size-nano: 2px;
  --radius-medium: 6px;
  --radius-medium: 12px;
  --radius-large: 20px;
  --font-large: 22px;
  --font-medium: 18px;
  --font-small: 14px;
  --font-tiny: 12px;
  --line-height: 1.6;
  --border-active: 2px solid var(--color-1);
  --shadow-normal: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-active: 0 4px 12px rgba(0, 0, 0, 0.2);
  --shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.3);
  --inverse-hover: 0 6px 20px rgba(255, 255, 255, 0.3);
  --time-normal: 350ms;
  --transition-all: all var(--time-normal) ease-in-out;
  --transition-shadow: box-shadow var(--time-normal) ease-in-out;
  --font-family: "Inter", sans-serif;
  --content-width: 1280px;
  --transform-hover: translateY(-2px);

  --color-2-light: color-mix(in oklab, var(--color-2) 70%, white 20%);

  --code-header-color: var(--color-secondary-bold);
  --code-background-color: var(--color-secondary-surface-active);
  --content-width: 900px;
  font-size: var(--font-medium);
  line-height: 1.75rem;
  color: var(--color-primary-text);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: var(--color-primary-surface);
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--color-primary-surface);
}

h1 {
  margin: 0;
  font-size: 3rem;
  line-height: 1;
  font-weight: 500;
  color: var(--color-2);
  text-align: center;
}

h2 {
  margin: 1.5rem 0 0 0;
  font-size: 2rem;
  line-height: 1;
  font-weight: 400;
  color: var(--color-1);
}

h3 {
  margin: 1.25rem 0 0 0;
  font-size: 1.75rem;
  line-height: 1;
  font-weight: 300;
  letter-spacing: 2px;
  color: var(--tertiary-2);
}

h4 {
  /* Careful. This is meant to be used as code block headers */
  color: var(--code-header-color);
  margin: 1rem 0 0 0;
  background-color: var(--code-background-color);
  padding: 0.5em;
  border-bottom: 1px solid var(--code-header-color);
  font-weight: 300;
}

h5 {
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 300;
  color: var(--tertiary-2);
}

h6 {
  font-size: 1.25rem;
  line-height: 1;
  font-weight: 300;
  letter-spacing: 2px;
  color: var(--color-secondary-text-muted);
}

p {
  font-size: 1rem;
}

a {
  color: var(--color-secondary-text);
  text-decoration: none;
  transition: var(--transition-all);
  border-bottom: 1px solid var(--color-secondary-text);
}

a:hover {
  color: var(--color-1);
  border-bottom: 1px solid var(--color-1);
}

main p {
  text-align: justify;
}

section {
  padding: 1rem;
  background: var(--color-primary-surface);
}

section:nth-of-type(even) {
  background: var(--color-primary-surface);
}

section > *, footer > *, header > *, nav > * {
  max-width: var(--content-width);
  margin-right: auto;
  margin-left: auto;
}

p code, ul code, li code {
  padding: 3px;
  color: var(--color-secondary-text);
  background-color: var(--code-background-color);
  border-radius: 5px;
}

pre {
  margin-top: 0;
}

header {
  border-top: 3px solid transparent;
  border-image: linear-gradient(to right, var(--color-1), var(--color-2)) 1;
  background-color: var(--color-tertiary-surface);
  box-shadow: 0 10px 20px var(--color-tertiary-surface), 0 6px 6px var(--color-tertiary-surface);
}

footer {
  padding: 1rem;
  background: var(--color-secondary-surface);
}

img {
  max-width: 100%;
}