:root {
	--blue: #0d6efd;
	--blue-600: #0a58ca;
	--grey: #6c757d;
	--grey-200: #e9ecef;
	--grey-300: #dee2e6;
	--grey-400: #ced4da;
	--blue-rgb: 13,110,253;
}

* {
	box-sizing: border-box;
}

html, body {
	height: 100%;
}

body {
	font-family: sans-serif;
	line-height: 1.5;
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	max-width: 60rem;
	padding: 0 1rem;
}

h1, h2, h3 {
	line-height: 1.2;
	font-weight: 500;
}

nav {
	display: flex;
	gap: 1rem;
	border-bottom: 1px solid var(--grey-300);
}

nav > a {
	margin-bottom: 1rem;
}

video {
	width: 100%;
}

footer {
	font-size: smaller;
	margin-top: auto;
	border-top: 1px solid var(--grey-300);
}

a, a:visited {
	color: var(--blue);
}

a:hover, a:active {
	color: var(--blue-600);
}

a:not(:hover) {
	text-decoration: none;
}

label, input, textarea {
	display: block;
	width: 100%;
}

input, textarea, button {
	font-size: 1rem;
	font-family: sans-serif;
	padding: .375rem .75rem;
}

input:focus, textarea:focus, button:focus {
	box-shadow: 0 0 0 .25rem rgba(var(--blue-rgb),.25);
	outline: 0;
}

input, textarea {
	line-height: 1.5;
	border: 1px solid var(--grey-400);
}

input:focus, textarea:focus {
	border-color: #86b7fe;
}

button {
	background-color: var(--grey-200);
	border: 1px solid var(--grey-200);
	cursor: pointer;
}

button:hover {
	background-color: var(--grey-300);
	border: 1px solid var(--grey-300);
}

.about {
	display: flex;
	gap: 2rem;
}

.links > a {
	display: block;
	margin: 1rem 0;
}

@media all and (min-width: 800px) {
	.row {
		display: flex;
	}

	.row > label {
		flex: 1;
	}

	.row > input, .row > textarea {
		flex: 2;
	}

	.justify-content-end {
		justify-content: flex-end;
	}
}

@media all and (max-width: 800px) {
	label {
		margin-bottom: .25rem;
	}

	.about {
		flex-direction: column;
		gap: 1rem;
	}
}

.text-muted {
	color: var(--grey);
}

.mt-0 {
	margin-top: 0;
}

.mt-1 {
	margin-top: 1rem;
}

.mb-0 {
	margin-bottom: 0;
}

.mb-1 {
	margin-bottom: 1rem;
}

.d-none {
	display: none;
}