: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);

	/* Varlet CSS Variable overrides to enable Material Design 3 Styling and Theme */
	--color-primary: var(--md-sys-color-primary);
	--color-primary-container: var(--md-sys-color-primary-container);
	--color-on-primary-container: var(--md-sys-color-on-primary-container);
	--color-secondary: var(--md-sys-color-secondary);
	--color-secondary-container: var(--md-sys-color-secondary-container);
	--color-tertiary: var(--md-sys-color-tertiary);
	--color-error: var(--md-sys-color-error);
	--color-error-container: var(--md-sys-color-error-container);
	--color-background: var(--md-sys-color-background);
	--color-surface: var(--md-sys-color-surface);
	--color-surface-container: var(--md-sys-color-surface-container);
	--color-outline: var(--md-sys-color-outline);
	--color-text: var(--md-sys-color-on-background);

	--button-border-radius: 100px;
	--button-primary-color: var(--md-sys-color-primary);
	--button-info-color: var(--md-sys-color-secondary);
	--button-default-color: var(--md-sys-color-surface-container);
	--button-default-text-color: var(--md-sys-color-on-surface);
	--button-outline-border-color: var(--md-sys-color-outline);
	--button-text-primary-color: var(--md-sys-color-primary);
	--input-primary-color: var(--md-sys-color-primary);
	--input-input-text-color: var(--md-sys-color-on-surface);
	--input-label-text-color: var(--md-sys-color-on-surface-variant);
	--input-border-radius: 4px;
}

@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;
}