/* fonts */

@font-face {
	font-family: "Anonymous Pro";
	font-weight: normal;
	font-style: normal;

	src: url("fonts/anonymous-pro.ttf") format("truetype");
}

@font-face {
	font-family: "Anonymous Pro";
	font-weight: bold;
	font-style: normal;

	src: url("fonts/anonymous-pro-bold.ttf") format("truetype");
}

@font-face {
	font-family: "Anonymous Pro";
	font-weight: normal;
	font-style: italic;

	src: url("fonts/anonymous-pro-italic.ttf") format("truetype");
}

@font-face {
	font-family: "Anonymous Pro";
	font-weight: bold;
	font-style: italic;

	src: url("fonts/anonymous-pro-bold-italic.ttf") format("truetype");
}

@font-face {
	font-family: "Exo";
	font-weight: normal;
	font-style: normal;

	src: url("fonts/exo.ttf") format("truetype");
}

@font-face {
	font-family: "Exo";
	font-weight: bold;
	font-style: normal;

	src: url("fonts/exo-bold.ttf") format("truetype");
}

@font-face {
	font-family: "Exo";
	font-weight: normal;
	font-style: italic;

	src: url("fonts/exo-italic.ttf") format("truetype");
}

@font-face {
	font-family: "Exo";
	font-weight: bold;
	font-style: italic;

	src: url("fonts/exo-bold-italic.ttf") format("truetype");
}

/* common */

html, body {
	font-family: "Exo";
	font-size: 14pt;
	background-color: hsl(0, 0%, 24%);
	color: white;

	padding: 0;
	margin: 0;
}

a, a:visited {
	color: inherit;
	text-decoration: underline hsl(206, 80%, 40%);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

b a, b a:visited {
	text-decoration-thickness: 3px;
}

a:hover {
	color: hsl(206, 80%, 40%);
}

.at-sign {
	font-size: 0;
}

.at-sign::before {
	font-size: 14pt;
	content: "@";
}

.text-blue {
	color: hsl(206, 80%, 40%);
}

/* header */

.header {
	min-height: 200px;
	text-align: center;
	background-color: hsl(206, 80%, 40%);
	color: white;
}

.header-title {
	padding-top: 35px;
	padding-bottom: 5px;
	font-size: 42pt;
	font-weight: bold;
}

.header-subtitle {
	font-size: 24pt;
}

/* navigation */

.navigation {
	min-height: 50px;
	background-color: hsl(0, 0%, 96%);
	box-shadow: 0 10px 20px -10px black;
	padding: 10px;
	margin-bottom: 30px;
	display: flex;
	align-items: center;
}

.navigation-items {
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	max-width: 1200px;

	font-size: 0;
	color: hsl(206, 80%, 40%);
}

.navigation-items li {
	display: inline;
	vertical-align: middle;
	list-style: none;

	font-size: 18pt;
}

.navigation-items li + li::before {
	content: "/";
	color: black;
	padding-left: 15px;
	padding-right: 15px;
}

.navigation-items a, .navigation-items a:visited {
	color: hsl(206, 80%, 40%);
	text-decoration: none;
}

.navigation-items a:hover {
	color: hsl(206, 80%, 40%);
	text-decoration: underline hsl(206, 80%, 40%);
	text-decoration-thickness: 4px;
	text-underline-offset: 10px;
}

/* contents */

.contents {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.6;

	padding: 0;
	margin-bottom: 30px;

	background-color: hsl(0, 0%, 96%);
	color: black;
	box-shadow: 0 0px 20px 0px black;
}

.contents p {
	margin-top: 0;
	margin-bottom: 8px;
}

.contents h1 {
	text-align: center;
	font-size: 22pt;
	font-weight: bold;

	margin-top: 0;
	margin-bottom: 8px;
	padding: 10px;

	color: white;
	background-color: hsl(206, 80%, 40%);
}

.contents h2 {
	font-size: 18pt;

	margin-top: 0;
	margin-bottom: 8px;
	padding: 0;
}

.contents ul {
	margin-top: 0;
	margin-bottom: 8px;
	line-height: 1.7;
}

.contents li {
	list-style: disc;
}

.contents li::marker {
	color: hsl(206, 80%, 40%);
}

/* container */

.container {
	padding: 10px;
}

/* highlight */

.highlight {
	margin: 0;
	padding: 0;

	border-left: 10px solid hsl(206, 80%, 40%);
	border-right: 10px solid hsl(206, 80%, 40%);

	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
}

@media screen and (max-width: 1023px) {
.highlight {
	flex-wrap: wrap;
}
}

.highlight-item {
	font-size: 0;
	margin: 0;
	padding: 10px;
}

.highlight-item p {
	font-size: 14pt;
	margin-bottom: 8px;
	padding: 0;
}

/* sys-base */

.sys-base {
	font-family: "Anonymous Pro";
	font-size: 48pt;
	font-weight: bold;
	text-align: center;
}

.sys-base a, .sys-base a:hover, .sys-base a:visited {
	text-decoration: none;
	color: black;
}

.sys-base-color {
	color: hsl(120, 40%, 60%);
}