/* Standard font */
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('https://digitalgdp.b-cdn.net/gdp/fonts/AtkinsonHyperlegibleNext-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

/* Italic font */
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('https://digitalgdp.b-cdn.net/gdp/fonts/AtkinsonHyperlegibleNext-RegularItalic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
}

/* Bold font */
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('https://digitalgdp.b-cdn.net/gdp/fonts/AtkinsonHyperlegibleNext-Bold.woff2') format('woff2');
  font-weight: 900;
  font-style: bold;
}

/* Bold & Italic font */
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('https://digitalgdp.b-cdn.net/gdp/fonts/AtkinsonHyperlegibleNext-BoldItalic.woff2') format('woff2');
  font-weight: 900;
  font-style: italic;
}

:root {
	--font-family-base: 'Atkinson Hyperlegible Next', sans-serif;
}

a {
	color: #4988bf;
}

a:hover {
	color: #666666;
}

.post-meta {
	font-size: small;
}

.post-meta a {
	font-size: small;
	color: #4988bf;
}

.post-meta a::after {
	font-size: small;
	content: "∞";
}

.post-meta a:hover {
	color: #666666;
	text-decoration: underline;
}

.fa-li {
	color: #666666;
}

figcaption {
	margin-top: var(--spacing-xs);
	padding-bottom: var(--spacing-xl);
}

.strike {
	text-decoration: line-through;
}

@media (max-width: 768px) {
    :root {
        --font-size-base: 18px;
        --font-size-small: 16px;
        --container-width: 100%;
        --spacing-lg: 1rem;
        --spacing-xl: 1.25rem;
        --spacing-2xl: 2rem;
        --spacing-3xl: 2.5rem;
        --button-padding-mobile: var(--spacing-md) var(--spacing-md);
        --button-padding-compact-mobile: var(--spacing-sm) var(--spacing-md);
	}
}

@media (prefers-color-scheme: dark) {
    :root {
        /* DARK MODE COLORS*/
        --color-text: #F2F2F2;
        --color-text-light: #cccccc;
        --color-text-muted: #999999;
        --color-background: #030140;
        --color-background-alt: #2a2a2a;
        --color-border: #404040;
        --color-border-light: #333333;
        --color-link: #9ABBD9;
        --color-link-hover: #e5e5e5;
        --color-accent: #888888; 
	}

	a {
		color: #9ABBD9;
	}

	a:hover {
		color: #F2F2F2;
	}

	.fa-li {
		color: #F2F2F2;
	}

	.post-meta {
		font-size: 18px;
	}

	.post-meta a {
		font-size: 18px;
		color: #9ABBD9;
	}
}

.site-header {
    background-color: #e5e5e5;
}