:root {
	--md-sys-color-primary: rgb(57 96 143);
	--md-sys-color-surface-tint: rgb(57 96 143);
	--md-sys-color-on-primary: rgb(255 255 255);
	--md-sys-color-primary-container: rgb(211 228 255);
	--md-sys-color-on-primary-container: rgb(0 28 56);
	--md-sys-color-secondary: rgb(84 95 112);
	--md-sys-color-on-secondary: rgb(255 255 255);
	--md-sys-color-secondary-container: rgb(215 227 248);
	--md-sys-color-on-secondary-container: rgb(16 28 43);
	--md-sys-color-tertiary: rgb(108 86 119);
	--md-sys-color-on-tertiary: rgb(255 255 255);
	--md-sys-color-tertiary-container: rgb(244 217 255);
	--md-sys-color-on-tertiary-container: rgb(38 20 49);
	--md-sys-color-error: rgb(186 26 26);
	--md-sys-color-on-error: rgb(255 255 255);
	--md-sys-color-error-container: rgb(255 218 214);
	--md-sys-color-on-error-container: rgb(65 0 2);
	--md-sys-color-background: rgb(248 249 255);
	--md-sys-color-on-background: rgb(25 28 32);
	--md-sys-color-surface: rgb(248 249 255);
	--md-sys-color-on-surface: rgb(25 28 32);
	--md-sys-color-surface-variant: rgb(223 226 235);
	--md-sys-color-on-surface-variant: rgb(67 71 78);
	--md-sys-color-outline: rgb(115 119 127);
	--md-sys-color-outline-variant: rgb(195 198 207);
	--md-sys-color-shadow: rgb(0 0 0);
	--md-sys-color-scrim: rgb(0 0 0);
	--md-sys-color-inverse-surface: rgb(46 48 53);
	--md-sys-color-inverse-on-surface: rgb(239 240 247);
	--md-sys-color-inverse-primary: rgb(162 201 254);
	--md-sys-color-primary-fixed: rgb(211 228 255);
	--md-sys-color-on-primary-fixed: rgb(0 28 56);
	--md-sys-color-primary-fixed-dim: rgb(162 201 254);
	--md-sys-color-on-primary-fixed-variant: rgb(29 72 117);
	--md-sys-color-secondary-fixed: rgb(215 227 248);
	--md-sys-color-on-secondary-fixed: rgb(16 28 43);
	--md-sys-color-secondary-fixed-dim: rgb(187 199 219);
	--md-sys-color-on-secondary-fixed-variant: rgb(60 72 88);
	--md-sys-color-tertiary-fixed: rgb(244 217 255);
	--md-sys-color-on-tertiary-fixed: rgb(38 20 49);
	--md-sys-color-tertiary-fixed-dim: rgb(216 189 227);
	--md-sys-color-on-tertiary-fixed-variant: rgb(83 63 95);
	--md-sys-color-surface-dim: rgb(216 218 224);
	--md-sys-color-surface-bright: rgb(248 249 255);
	--md-sys-color-surface-container-lowest: rgb(255 255 255);
	--md-sys-color-surface-container-low: rgb(242 243 250);
	--md-sys-color-surface-container: rgb(236 237 244);
	--md-sys-color-surface-container-high: rgb(231 232 238);
	--md-sys-color-surface-container-highest: rgb(225 226 232);
}

@media (prefers-color-scheme: dark) {
	:root {
		--md-sys-color-primary: rgb(162 201 254);
		--md-sys-color-surface-tint: rgb(162 201 254);
		--md-sys-color-on-primary: rgb(0 50 91);
		--md-sys-color-primary-container: rgb(29 72 117);
		--md-sys-color-on-primary-container: rgb(211 228 255);
		--md-sys-color-secondary: rgb(187 199 219);
		--md-sys-color-on-secondary: rgb(38 49 65);
		--md-sys-color-secondary-container: rgb(60 72 88);
		--md-sys-color-on-secondary-container: rgb(215 227 248);
		--md-sys-color-tertiary: rgb(216 189 227);
		--md-sys-color-on-tertiary: rgb(60 41 71);
		--md-sys-color-tertiary-container: rgb(83 63 95);
		--md-sys-color-on-tertiary-container: rgb(244 217 255);
		--md-sys-color-error: rgb(255 180 171);
		--md-sys-color-on-error: rgb(105 0 5);
		--md-sys-color-error-container: rgb(147 0 10);
		--md-sys-color-on-error-container: rgb(255 218 214);
		--md-sys-color-background: rgb(17 20 24);
		--md-sys-color-on-background: rgb(225 226 232);
		--md-sys-color-surface: rgb(17 20 24);
		--md-sys-color-on-surface: rgb(225 226 232);
		--md-sys-color-surface-variant: rgb(67 71 78);
		--md-sys-color-on-surface-variant: rgb(195 198 207);
		--md-sys-color-outline: rgb(141 145 153);
		--md-sys-color-outline-variant: rgb(67 71 78);
		--md-sys-color-shadow: rgb(0 0 0);
		--md-sys-color-scrim: rgb(0 0 0);
		--md-sys-color-inverse-surface: rgb(225 226 232);
		--md-sys-color-inverse-on-surface: rgb(46 48 53);
		--md-sys-color-inverse-primary: rgb(57 96 143);
		--md-sys-color-primary-fixed: rgb(211 228 255);
		--md-sys-color-on-primary-fixed: rgb(0 28 56);
		--md-sys-color-primary-fixed-dim: rgb(162 201 254);
		--md-sys-color-on-primary-fixed-variant: rgb(29 72 117);
		--md-sys-color-secondary-fixed: rgb(215 227 248);
		--md-sys-color-on-secondary-fixed: rgb(16 28 43);
		--md-sys-color-secondary-fixed-dim: rgb(187 199 219);
		--md-sys-color-on-secondary-fixed-variant: rgb(60 72 88);
		--md-sys-color-tertiary-fixed: rgb(244 217 255);
		--md-sys-color-on-tertiary-fixed: rgb(38 20 49);
		--md-sys-color-tertiary-fixed-dim: rgb(216 189 227);
		--md-sys-color-on-tertiary-fixed-variant: rgb(83 63 95);
		--md-sys-color-surface-dim: rgb(17 20 24);
		--md-sys-color-surface-bright: rgb(55 57 62);
		--md-sys-color-surface-container-lowest: rgb(11 14 19);
		--md-sys-color-surface-container-low: rgb(25 28 32);
		--md-sys-color-surface-container: rgb(29 32 36);
		--md-sys-color-surface-container-high: rgb(39 42 47);
		--md-sys-color-surface-container-highest: rgb(50 53 58);
	}
}

.md-typescale-display-small,
.md-typescale-display-small-prominent {
	font: var(--md-sys-typescale-display-small-weight, var(--md-ref-typeface-weight-regular, 400))
		var(--md-sys-typescale-display-small-size, 2.25rem) /
		var(--md-sys-typescale-display-small-line-height, 2.75rem)
		var(--md-sys-typescale-display-small-font, var(--md-ref-typeface-brand, Roboto));
}

.md-typescale-display-medium,
.md-typescale-display-medium-prominent {
	font: var(--md-sys-typescale-display-medium-weight, var(--md-ref-typeface-weight-regular, 400))
		var(--md-sys-typescale-display-medium-size, 2.8125rem) /
		var(--md-sys-typescale-display-medium-line-height, 3.25rem)
		var(--md-sys-typescale-display-medium-font, var(--md-ref-typeface-brand, Roboto));
}

.md-typescale-display-large,
.md-typescale-display-large-prominent {
	font: var(--md-sys-typescale-display-large-weight, var(--md-ref-typeface-weight-regular, 400))
		var(--md-sys-typescale-display-large-size, 3.5625rem) /
		var(--md-sys-typescale-display-large-line-height, 4rem)
		var(--md-sys-typescale-display-large-font, var(--md-ref-typeface-brand, Roboto));
}

.md-typescale-headline-small,
.md-typescale-headline-small-prominent {
	font: var(--md-sys-typescale-headline-small-weight, var(--md-ref-typeface-weight-regular, 400))
		var(--md-sys-typescale-headline-small-size, 1.5rem) /
		var(--md-sys-typescale-headline-small-line-height, 2rem)
		var(--md-sys-typescale-headline-small-font, var(--md-ref-typeface-brand, Roboto));
}

.md-typescale-headline-medium,
.md-typescale-headline-medium-prominent {
	font: var(--md-sys-typescale-headline-medium-weight, var(--md-ref-typeface-weight-regular, 400))
		var(--md-sys-typescale-headline-medium-size, 1.75rem) /
		var(--md-sys-typescale-headline-medium-line-height, 2.25rem)
		var(--md-sys-typescale-headline-medium-font, var(--md-ref-typeface-brand, Roboto));
}

.md-typescale-headline-large,
.md-typescale-headline-large-prominent {
	font: var(--md-sys-typescale-headline-large-weight, var(--md-ref-typeface-weight-regular, 400))
		var(--md-sys-typescale-headline-large-size, 2rem) /
		var(--md-sys-typescale-headline-large-line-height, 2.5rem)
		var(--md-sys-typescale-headline-large-font, var(--md-ref-typeface-brand, Roboto));
}

.md-typescale-title-small,
.md-typescale-title-small-prominent {
	font: var(--md-sys-typescale-title-small-weight, var(--md-ref-typeface-weight-medium, 500))
		var(--md-sys-typescale-title-small-size, 0.875rem) /
		var(--md-sys-typescale-title-small-line-height, 1.25rem)
		var(--md-sys-typescale-title-small-font, var(--md-ref-typeface-plain, Roboto));
}

.md-typescale-title-medium,
.md-typescale-title-medium-prominent {
	font: var(--md-sys-typescale-title-medium-weight, var(--md-ref-typeface-weight-medium, 500))
		var(--md-sys-typescale-title-medium-size, 1rem) /
		var(--md-sys-typescale-title-medium-line-height, 1.5rem)
		var(--md-sys-typescale-title-medium-font, var(--md-ref-typeface-plain, Roboto));
}

.md-typescale-title-large,
.md-typescale-title-large-prominent {
	font: var(--md-sys-typescale-title-large-weight, var(--md-ref-typeface-weight-regular, 400))
		var(--md-sys-typescale-title-large-size, 1.375rem) /
		var(--md-sys-typescale-title-large-line-height, 1.75rem)
		var(--md-sys-typescale-title-large-font, var(--md-ref-typeface-brand, Roboto));
}

.md-typescale-body-small,
.md-typescale-body-small-prominent {
	font: var(--md-sys-typescale-body-small-weight, var(--md-ref-typeface-weight-regular, 400))
		var(--md-sys-typescale-body-small-size, 0.75rem) /
		var(--md-sys-typescale-body-small-line-height, 1rem)
		var(--md-sys-typescale-body-small-font, var(--md-ref-typeface-plain, Roboto));
}

.md-typescale-body-medium,
.md-typescale-body-medium-prominent {
	font: var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400))
		var(--md-sys-typescale-body-medium-size, 0.875rem) /
		var(--md-sys-typescale-body-medium-line-height, 1.25rem)
		var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto));
}

.md-typescale-body-large,
.md-typescale-body-large-prominent {
	font: var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400))
		var(--md-sys-typescale-body-large-size, 1rem) /
		var(--md-sys-typescale-body-large-line-height, 1.5rem)
		var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto));
}

.md-typescale-label-small,
.md-typescale-label-small-prominent {
	font: var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500))
		var(--md-sys-typescale-label-small-size, 0.6875rem) /
		var(--md-sys-typescale-label-small-line-height, 1rem)
		var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto));
}

.md-typescale-label-medium,
.md-typescale-label-medium-prominent {
	font: var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500))
		var(--md-sys-typescale-label-medium-size, 0.75rem) /
		var(--md-sys-typescale-label-medium-line-height, 1rem)
		var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, Roboto));
}

.md-typescale-label-medium-prominent {
	font-weight: var(
		--md-sys-typescale-label-medium-weight-prominent,
		var(--md-ref-typeface-weight-bold, 700)
	);
}

.md-typescale-label-large,
.md-typescale-label-large-prominent {
	font: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500))
		var(--md-sys-typescale-label-large-size, 0.875rem) /
		var(--md-sys-typescale-label-large-line-height, 1.25rem)
		var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto));
}

.md-typescale-label-large-prominent {
	font-weight: var(
		--md-sys-typescale-label-large-weight-prominent,
		var(--md-ref-typeface-weight-bold, 700)
	);
}

body {
	margin: 0;
	background-color: var(--md-sys-color-surface);
	color: var(--md-sys-color-on-surface);
	font-family: Roboto;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
	margin: 0;
}