:root {
  --road-green: #00912a;
  --road-blue: #0055C9;
  --road-yellow: #ffd600;
  --small-radius: 15px;
  --large-radius: 20px;
  --small-border: 4px;
  --large-border: 5px;
}
* {
	margin: 0;
	padding: 0;
}
html {
	background-color: #adf;
	color: #fff;
	z-index: -2;
}
body {
	max-width: 800px;
	margin: 10px auto 0 auto;
	position: relative;
	font-family: 'Overpass', sans-serif;
	font-size: 1.25rem;
	font-weight: 600;
}
h1, menu, .contentArea, footer {
	border: var(--large-border) solid #fff;
	padding: 10px;
}
h1, .contentArea {
	background-color: var(--road-green);
	border-bottom: none;
	margin-bottom: 0;
}
h1 {
	float: right;
	border-radius: var(--small-radius) var(--small-radius) 0 0;
	border-width: var(--small-border);
	position: relative;
	padding: 5px 20px 0px 20px;
	font-weight: 900;
	text-align: right;
}
h1::before, h1::after {
	content: '';
	background-color: var(--road-green);
	width: var(--small-radius);
	height: var(--small-radius);
	position: absolute;
	top: -4px;
	z-index: -1;
}
h1::before {
	left: -4px;
}
h1::after {
	right: -4px;
}
menu {
	clear: both;
	margin: 0;
	border-bottom: none;
	background-color: var(--road-blue);
	border-top-left-radius: var(--large-radius);
	position: relative;
	font-weight: 800;
	padding: 10px 0 8px 0;
}
menu::before {
	content: '';
	background-color: var(--road-blue);
	width: var(--large-radius);
	height: var(--large-radius);
	position: absolute;
	top: -5px;
	left: -5px;
	z-index: -1;
}
menu a {
	color: #fff;
	text-decoration: none;
	padding: 0 10px 0 20px;
	margin: 0;
	display: inline-block;
}
menu li {
	list-style: none;
}
.menuTop {
	display: inline-block;
}
.menuTopLink {
	vertical-align: middle;
	position: relative;
	height: 100%;
	margin: 0;
	display: block;
}
.menuTopLink::after, .submenu a::after {
	content: '';
	font-size: 1.5rem;
	width: 2rem;
	height: 2rem;
	display: inline-block;
	text-align: center;
	position: relative;
	left: -1px;
	top: -3px;
	margin: 0;
	vertical-align: top;
}
.menuTopLink:hover::after {
	content: '\2193';
}
.submenu {
	display: none;
	position: absolute;
	margin-top: 0;
	z-index: 1;
	background-color: var(--road-blue);
}
.submenu a:hover::after {
	content: '\2197';
}
.menuTopLink:hover ~ .submenu, .submenu:hover, .submenu a {
	display: block;
}
.contentArea {
	border-top: none;
	border-bottom: none;
	padding: 30px 20px;
}
footer {
	border-top: none;
	background-color: var(--road-yellow);
	color: #000;
	text-align: center;
	border-color: #000;
	border-bottom-left-radius: var(--large-radius);
	border-bottom-right-radius: var(--large-radius);
	position: relative;
}
footer::before, footer::after {
	content: '';
	background-color: var(--road-yellow);
	width: var(--large-radius);
	height: var(--large-radius);
	position: absolute;
	bottom: -5px;
	z-index: -1;
}
footer::before {
	left: -5px;
	}
footer::after {
	right: -5px;
}
footer p {
	padding: 0;
	margin: 0;
}