:root {
	// color values:
	--color--extra-light: hsl(0deg 0% 95%);
	--color--light: #d2d3dd;
	--color--lighter: #dfe0e7;
	--color--extra-light-transparent: hsl(0deg 0% 71% / 64%);
	--color--extra-light-extra-transparent: hsl(0deg 0% 71% / 20%);
	--color--gray-transparent: hsla(0deg 0% 50% / 30%);
	--color--dark-transparent: hsl(0deg 0% 5% / 40%);
	--color--light-dark: #404046;
	--color--dark: #23222B;
	--color--success: #559730;
	--color--error: #b51535;
	--color--info: #2196F3;
	--color--warning: #bd700c;
	--color--brand: #e1285c;
	--color--pink: #b217d8;
	--color--twitter-brand: rgb(29 161 242);
	--color--darker-blue: #1f51d9;

	// generic colors:
	--highlight-color: var(--color--twitter-brand);
	--background-color: var(--color--extra-light);
	--button-background-color--hover: var(--highlight-color);
	--color: var(--color--dark);
	--color--decent: var(--color--light-dark);
	--border-color: var(--color--gray-transparent);
	--button-border-color: var(--color--extra-light-transparent);
	--button-hover-border-color: var(--color--extra-light-extra-transparent);
	--button-hover-color: var(--color--extra-light);
	--graphics-color: var(--color--light-dark);
	--value-field-color: var(--color--extra-light-transparent);
	--colored-value--light: 30%;
	--shadow-color: var(--color--dark-transparent);
	--color--focus: var(--color--darker-blue);
	--color--funny: var(--color-pink);

	// other values:
	--drive-way: 46px;
	--body-padding: 1.5rem;
	--shadow-width: 3px;
	--shadow-distance: 2px;
}

* {
	box-sizing: border-box;
}

html {
	width: 100%;
	height: 100%;
}

body {
	font-family: $font-family;
	box-sizing: border-box;
	font-size: 16px;
	padding: var(--body-padding);
	width: 550px;
	height: auto;
	background-color: var(--background-color);
	color: var(--color);
	margin-right: 17px;

	@media (prefers-color-scheme: light) {
		--value-field-color: var(--color--extra-light-extra-transparent);
		--color--dark-transparent: hsl(0deg 0% 21.6% / 40%);
	}

	@media (prefers-color-scheme: dark) {
		--background-color: var(--color--dark);
		--color: var(--color--lighter);
		--color--decent: var(--color--light);
		--highlight-color: var(--color--twitter-brand);
		--button-background-color--hover: var(--highlight-color);
		--border-color: var(--color--gray-transparent);
		--button-border-color: var(--color--gray-transparent);
		--button-hover-border-color: var(--color--gray-transparent);
		--graphics-color: var(--color--light);
		--value-field-color: var(--color--gray-transparent);
		--colored-value--light: 50%;
	}
}

h1 {
	margin-top: 0;
	font-size: 140%;
}

hr {
	border-top: none;
	border-bottom: 1px dashed rgb(120 120 120 / 50%);
	margin: 1.3rem 0;
}

p {
	&:last-child {
		margin-bottom: 0;
	}
}

.lb-logo {
	float: right;
}

a {
	color: inherit;
	text-decoration: none;
	display: inline-flex;
	align-items: center;

	> svg {
		margin-right: 0.5em;
	}

	&:hover {
		color: var(--color--decent);
		color: var(--color--twitter-brand);
	}
}

ul {
	li {
		margin-bottom: 0.5em;
	}
}

footer {
	margin-top: 1.5rem;
}

header {
	opacity: 0.7;
	margin-bottom: 1.5rem;
}

small {
	font-size: .8rem;
}
