:root {
	--color-primary : hsl(188 100% 24%);
	--color-secondary : hsl(10 100% 68%);
	--color-light : hsl(0 0% 95%);
	--color-dark : hsl(197 97% 13%);

	--color-body : hsl(0 0% 90%);
	--color-body-transparent : hsl(0 0% 90% / 0);
	--color-panel : hsl(0 0% 80%);
	--color-card : hsl(0 0% 60%);

	--shade-light : hsl(0, 0%, 100%, 15%);
	--shade-lighter : hsl(0, 0%, 100%, 40%);
	--shade-dark : hsl(0, 0%, 0%, 15%);
	--shade-darker : hsl(0, 0%, 0%, 40%);

	--shadow : 0 0 15px 2px hsla(0, 0%, 0%, 25%);

	--font-body : 'Roboto', sans-serif;
	--font-body-weight : 300;
	--font-heading : 'Lato', sans-serif;
	--font-heading-weight : normal;
	--font-utility : monospace;
	--font-utility-weight : normal;

	--size-small : 0.5rem; /* 10px */
	--size-medium : 1rem; /* 20px */
	--size-large : 2rem; /* 40px */
}

/* Typography */
html {
	font-size: 125%; /* 20px */
}
body {
	color: var(--color-dark);
	font-family: var(--font-body);
	font-size: var(--size-medium);
	font-weight: var(--font-body-weight);
	line-height: 1.5;
	background-color: var(--color-body);
}
a {
	color: var(--color-primary);
	font-weight: bold;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
h1, h2, h3, h4 {
	color: var(--color-primary);
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	//text-transform: uppercase;
}
h1 {
	margin: 0 0 var(--size-medium);
}
h2 {
	margin: 0 0 var(--size-small);
}
b, strong {
	font-weight: bold;
}

/* Tables */
table {
	width: 100%;
	font-size: var(--size-medium);
	border-collapse: collapse;
}
tr {
}
th {
	padding: 2px 5px;
	font-size: var(--size-small);
	font-weight: bold;
	text-align: left;
	text-transform: uppercase;
	border-bottom: 2px solid rgba(0,0,0,0.5);
}
td {
	padding: 5px;
	border-bottom: 1px solid rgba(0,0,0,0.25);
}

/* Code/Pre */
code {}
pre {
	padding: 10px;
	font-family: var(--font-utility);
	font-size: 13px;
	font-weight: var(--font-utility-weight);
	line-height: 1.2;
	tab-size: 2;
	white-space: pre-wrap;
	background-color: rgba(255,255,255,0.3);
}

/* Wrappers */
.wrapper {
	margin: 0 auto;
	padding: 0 var(--size-small);
}
.wrapper--fit {
	padding: 0;
}
.wrapper--small {
	max-width: 20rem;
}
.wrapper--medium {
	max-width: 40rem;
}
.wrapper--large {
	max-width: 50rem;
}
.wrapper--forms {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	justify-content: center;
}
@media screen and (min-width: 40rem) {
	.wrapper {
		padding: 0 var(--size-medium);
	}
	.wrapper--fit {
		padding: 0;
	}
}

/* Layout container */
.layout {
	position: relative;
	z-index: 1;
}
.layout--simple {}
.layout--shadow {}

/* Header */
.layout__header {
	margin-bottom: var(--size-medium);
	padding: var(--size-medium) 0;
	background-color: var(--color-primary);
}
	.layout__header > .wrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.layout--simple .layout__header > .wrapper {
		justify-content: center;
	}
		.layout__header a.logo {
			display: flex;
			align-items: center;
			color: var(--shade-lighter);
			font-size: 1.5rem;
			line-height: 1;
			text-decoration: none;
		}
		.layout__header a.logo:hover,
		.layout__header a.logo:focus {
			color: var(--shade-darker);
			outline: none;
		}
			.layout__header .logo em {
				margin-left: 0.1em;
				padding: 0.1em 0.3em;
				color: var(--color-primary);
				font-style: normal;
				background-color: var(--shade-lighter);
				border-radius: 3em;
			}
			.layout__header .logo:hover em,
			.layout__header .logo:focus em {
				background-color: var(--shade-darker);
				outline: none;
			}
@media screen and (min-width: 30rem) {
	.layout__header {
		margin-bottom: var(--size-large);
	}
}

/* Primary Navigation */
.layout__nav {
	font-size: 1rem;

	line-height: 1;
}
	.layout__nav ul {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5em 1em;
		justify-content: end;
		padding: 0 0 0 1em;
	}
		.layout__nav li {
			display: inline-block;
			font-size: 1.25em;
			text-transform: lowercase;
		}
		.layout__nav .extra {
			display: none;
		}
			.layout__nav a {
				color: var(--shade-lighter);
				text-decoration: none;
			}
			.layout__nav .current a,
			.layout__nav a:hover,
			.layout__nav a:focus {
				color: var(--shade-darker);
				outline: none;
			}
@media screen and (min-width: 30rem) {
		.layout__nav .extra {
			display: inline-block;
		}
}

/* Main */
.layout__main {}

/* Footer */
.layout__footer {
	position: relative;
	z-index: 1;
	padding: calc(var(--size-large) * 4) 0 var(--size-large);
	color: var(--color-secondary);
	text-align: center;
}
	.layout__footer .jump {
		position: fixed;
		right: var(--size-medium);
		bottom: var(--size-medium);
		display: block;
		width: 60px;
		height: 60px;
		text-indent: 110%;
		white-space: nowrap;
		background-color: var(--color-secondary);
		border-radius: 1em;
		overflow: hidden;
	}
	.layout__footer .jump:hover {
		background-color: var(--color-dark);
	}
		.layout__footer .jump:after {
			content: '';
			position: absolute;
			top: 24px;
			left: 20px;
			display: block;
			width: 20px;
			height: 20px;
			border: solid var(--color-light);
			border-width: 6px 6px 0 0;
			transform: rotate(-45deg);
		}