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

:root {
  --color-base: #ffffff;
  --color-contrast: #000000;
  --color-primary: #9DFF20;
  --color-secondary: #345C00;
  --color-tertiary: #F6F6F6;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --spacing-30: clamp(1.5rem, 5vw, 2rem);
  --spacing-40: clamp(1.8rem, 1.8rem + ((1vw - 0.48rem) * 2.885), 3rem);
  --spacing-50: clamp(2.5rem, 8vw, 4.5rem);
  --spacing-60: clamp(3.75rem, 10vw, 7rem);
  --spacing-70: clamp(5rem, 5.25rem + ((1vw - 0.48rem) * 9.096), 8rem);
  --font-size-medium: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.227), 1.125rem);
  --font-size-xx-large: clamp(2.032rem, 2.032rem + ((1vw - 0.2rem) * 2.896), 3.625rem);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-base);
  color: var(--color-contrast);
  font-size: var(--font-size-medium);
  line-height: 1.6;
  min-height: 100vh;
}

.wp-site-blocks {
  padding-top: var(--spacing-40);
  padding-right: var(--spacing-30);
  padding-bottom: var(--spacing-40);
  padding-left: var(--spacing-30);
}

main {
  margin-top: var(--spacing-50);
  margin-bottom: var(--spacing-70);
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
}

h1 {
  font-size: var(--font-size-xx-large);
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  margin-bottom: var(--spacing-60);
  letter-spacing: -0.02em;
}

pre {
  font-family: var(--font-mono);
  font-size: var(--font-size-medium);
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.spacer {
  height: var(--spacing-60);
}

a {
  color: var(--color-contrast);
  text-decoration: underline;
}

a:hover {
  color: var(--color-secondary);
}