@font-face {
	font-family: 'Google Sans';
	src: url('../../../fonts/GoogleSans-VariableFont_GRAD,opsz,wght.ttf') format('truetype');
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
}

:root {
	font-family: 'Google Sans', sans-serif;
	font-optical-sizing: auto;
	font-synthesis: none;
	color-scheme: dark;
}

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

::selection {
	background-color: var(--md-sys-color-primary);
	color: var(--md-sys-color-on-primary);
}

body {
	margin: 0;
	padding: 24px;
	min-width: 320px;
	min-height: 100vh;
	background: var(--md-sys-color-background, #000);
	color: var(--md-sys-color-on-background, #fff);
}

a {
	color: inherit;
}

blockquote {
	position: relative;
	margin: 24px 0;
	padding: 16px 56px 16px 20px;
	border-left: 4px solid var(--md-sys-color-primary, #fff);
	background: var(--md-sys-color-surface-container-low, #111);
}

blockquote::after {
	position: absolute;
	top: 16px;
	right: 20px;
	font-size: 32px;
	line-height: 1;
	content: '“';
}

blockquote > * {
	margin-block: 0;
}

blockquote > * + * {
	margin-top: 4px;
}

button,
input,
select,
textarea {
	font: inherit;
}

button {
	padding: 8px;
	border: 0;
	border-radius: 0;
	background: var(--md-sys-color-primary, #fff);
	color: var(--md-sys-color-on-primary, #000);
	font-weight: 700;
	cursor: pointer;
}
:root {
	--md-sys-color-background: #16130b;
	--md-sys-color-on-background: #eae1d4;
	--md-sys-color-surface: #16130b;
	--md-sys-color-surface-dim: #16130b;
	--md-sys-color-surface-bright: #3d392f;
	--md-sys-color-surface-container-lowest: #110e07;
	--md-sys-color-surface-container-low: #1f1b13;
	--md-sys-color-surface-container: #231f17;
	--md-sys-color-surface-container-high: #2e2921;
	--md-sys-color-surface-container-highest: #39342b;
	--md-sys-color-on-surface: #eae1d4;
	--md-sys-color-surface-variant: #4c4639;
	--md-sys-color-on-surface-variant: #cfc5b4;
	--md-sys-color-inverse-surface: #eae1d4;
	--md-sys-color-inverse-on-surface: #343027;
	--md-sys-color-outline: #989080;
	--md-sys-color-outline-variant: #4c4639;
	--md-sys-color-shadow: #000000;
	--md-sys-color-scrim: #000000;
	--md-sys-color-surface-tint: #e5c36c;
	--md-sys-color-primary: #e5c36c;
	--md-sys-color-on-primary: #3e2e00;
	--md-sys-color-primary-container: #594400;
	--md-sys-color-on-primary-container: #ffdf94;
	--md-sys-color-primary-fixed: #ffdf94;
	--md-sys-color-primary-fixed-dim: #e5c36c;
	--md-sys-color-on-primary-fixed: #241a00;
	--md-sys-color-on-primary-fixed-variant: #594400;
	--md-sys-color-inverse-primary: #755b0b;
	--md-sys-color-secondary: #d6c5a0;
	--md-sys-color-on-secondary: #392f15;
	--md-sys-color-secondary-container: #51462a;
	--md-sys-color-on-secondary-container: #f3e1bb;
	--md-sys-color-secondary-fixed: #f3e1bb;
	--md-sys-color-secondary-fixed-dim: #d6c5a0;
	--md-sys-color-on-secondary-fixed: #231a04;
	--md-sys-color-on-secondary-fixed-variant: #51462a;
	--md-sys-color-tertiary: #aecfac;
	--md-sys-color-on-tertiary: #1b361e;
	--md-sys-color-tertiary-container: #314d33;
	--md-sys-color-on-tertiary-container: #caebc7;
	--md-sys-color-tertiary-fixed: #caebc7;
	--md-sys-color-tertiary-fixed-dim: #aecfac;
	--md-sys-color-on-tertiary-fixed: #05210a;
	--md-sys-color-on-tertiary-fixed-variant: #314d33;
	--md-sys-color-error: #ffb4ab;
	--md-sys-color-on-error: #690005;
	--md-sys-color-error-container: #93000a;
	--md-sys-color-on-error-container: #ffdad6;
}

:root {
	--md-ref-typeface-brand: 'Google Sans', sans-serif;
	--md-ref-typeface-plain: 'Google Sans', sans-serif;
	--md-sys-typescale-label-large-font: 'Google Sans', sans-serif;
	--md-sys-typescale-body-large-font: 'Google Sans', sans-serif;
}