body, html {
	margin: 0;
	font-family: sans-serif;
}

header, main, section, footer {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

header {
  position: relative;
  clip-path: polygon(100% 0, 0 0, 0 100%, 100% calc(100% - 50px));
  padding-bottom: 90px !important;
  padding-top: 50px !important;
}

footer {
	position: relative;
	padding-top: 70px !important;
	clip-path: polygon(100% 0, 0 50px, 0 100%, 100% 100%);
}

footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	background-color: var(--accent);
	clip-path: polygon(100% 0, 0 50px, 0 62px, 100% 12px);
	z-index: 1;
	transform: translateY(-3px);
}

header:has(#hamburger:checked) {
	clip-path: none;
}

header:has(#hamburger:checked) img {
	display: none;
}

header #header-left img {
	margin-top: 10px;
}

header:not(:has(#hamburger:checked))::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-color: var(--accent);
  clip-path: polygon(100% calc(100% - 62px), 0 calc(100% - 12px), 0 100%, 100% calc(100% - 50px));
  z-index: 1;
	transform: translateY(3px);
}

section.row {
	flex-direction: row;
}

header, footer {
	gap: 20px;
}

header>*,
section>*,
footer>* {
	max-width: 1440px;
	flex-grow: 1;
}

a {
	text-decoration: none;
	color: inherit;
}

.shadow {
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.35);
}

.text-shadow {
	text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.60);
}

.caption {
	color: #ccc;
}