:root {
	--color-white: white;
	--color-gray: #efefef;
	--color-light: #cfcfcf;
	--color-medium: rgb(75 85 99);
	--color-dark: rgb(31 41 55);
	--background-color: rgb(243, 244, 246);
	--shadow: 0 1px 1px hsl(0deg 0% 0% / 0.3);
	--container-width: 48em;
}

:root {
	/* An em on the root element is relative to the browser’s default. */
	font-size: 1em;
}

html {
	background-color: var(--background-color);
}

body {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	min-height: 100vh;
}

main {
	flex-grow: 1;
	flex-basis: 0;
}

svg {
	width: 1.25em;
	height: 1.25em;
}

.input {
	border: none;
	box-shadow: inset 0px 0px 0px 1px var(--color-light);
	border-radius: 0.375em;
	padding: 0.75em 1em;
}

.button {
	color: var(--color-white);
	background-color: var(--color-dark);
	padding: 0.75em 1em;
	font-weight: 600;
	border-radius: 0.5em;
	border-width: 0;
	text-decoration: none;
}

.button:hover {
	background-color: var(--color-medium);
	cursor: pointer;
}

.button--outline {
	color: var(--color-dark);
	background-color: var(--color-white);
	box-shadow: var(--shadow);
}

.button--outline:hover {
	background-color: var(--color-gray);
}

.toast {
	background-color: var(--color-dark);
	color: var(--color-white);
	padding: 1em;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}