body {
	display: flex;
	flex-direction: column;
	min-height: 100svh;
	font-weight: 200;
	font-family: monospace;
	font-family: copperplate, fantasy;
}

img,
video {
	width: 100%;
	height: auto;
}

ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.flex {
	display: flex;
}

nav {
	justify-content: center;
	margin-top: 10px;
	width: 100%;
	height: 50px;
	align-items: center;
}

nav ul {
	width: 100%;
	text-align: center;
	justify-content: space-evenly;
}

nav li a {
	color: black;
	text-decoration: none;
}

header {
	width: 100%;
	justify-content: center;
	height: 100%;
	padding-top: 30px;
}

header img {
	width: 100px;
	height: auto;
}

.nav a:visited {
	color: black;
}

.nav a:active,
.nav a:hover {
	color: grey;
}

.video-container {
	position: relative;
}

.video-text {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;
	color: white;
	padding: 0 0 5vw 5vw;
	width: clamp(300px, 50vw, 500px);
}

.video-text-header {
	font-size: clamp(1.5rem, 1rem + 1.333vw, 2rem);
}

.video-text-body {
	font-size: clamp(0.7rem, 0.4rem + 0.8vw, 1rem);
}

.product-grid {
	text-align: center;
	font-size: clamp(0.7rem, 0.4rem + 0.8vw, 1rem);
}

.product-grid > li {
	flex: 1;
}

.product-grid img {
	width: 100%;
	display: block;
}

.product-grid li div {
	width: 100%;
}

.product-grid p,
.product-grid h4 {
	margin: 20px 30px;
}

.mid-section {
	text-align: center;
	padding: 50px;
	font-size: clamp(0.7rem, 0.4rem + 0.8vw, 1rem);
}

footer {
	width: 90%;
	align-self: center;
	text-align: center;
	align-items: center;
	padding: 20px;
	border-top: 1px solid #e6e6e6;
}

footer > * {
	flex: 1;
	justify-content: center;
}

.footer-img {
	max-width: 160px;
}