/* Font */

@font-face {
	font-family: "Atkinson Hyperlegible Next";
	src: url(/public/fonts/atkinson-hyperlegible-next-regular.woff2) format("woff2");
	font-style: normal;
	font-weight: normal;
}
@font-face {
	font-family: "Atkinson Hyperlegible Next";
	src: url(/public/fonts/atkinson-hyperlegible-next-regular-italic.woff2) format("woff2");
	font-style: italic;
	font-weight: normal;
}
@font-face {
	font-family: "Atkinson Hyperlegible Next";
	src: url(/public/fonts/atkinson-hyperlegible-next-extrabold.woff2) format("woff2");
	font-style: normal;
	font-weight: bold;
}
@font-face {
	font-family: "Atkinson Hyperlegible Next";
	src: url(/public/fonts/atkinson-hyperlegible-next-extrabold-italic.woff2) format("woff2");
	font-style: italic;
	font-weight: bold;
}

/* Default styles */

* {
	margin: 0;
	padding: 0;
	font-family: "Atkinson Hyperlegible Next", sans-serif;
	box-sizing: border-box;
}   
body {
	font-size: 18px;
}
*:focus {
	outline: 0.2em solid #f00;
}
a:hover {
	color: #f00;
}
button {
	cursor: pointer;
}
ol, ul {
	list-style-position: inside;
}

/* Design classes */

button.uibtn {
    padding: 0.5em;
    color: #000;
    background-color: #eee;
    border: 1px solid #000;
    border-radius: 0.5rem;
    font-size: 1em;
}
button.uibtn:focus, 
button.uibtn:hover {
    background-color: #fee;
}

/* Header */

h1 {
	display: flex;
	align-items: center;
	gap: 1em;
	font-size: 1em;
	padding: 1em;
}
h1 svg {
	width: 3em;
}
h1 circle {
	stroke-width: 0.15em;
}
h1 line { stroke: #fff;
	stroke-width: 0.15em;
	stroke-linecap: round;
}

/* Navigation menu */

header nav {
	position: relative;
	background-color: #000;
}
#skiplink {
	position: absolute;
	top: 5px;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
#skiplink:focus {
	left: 5px;
	width: auto;
	height: auto;
	overflow: visible;
	background-color: #333;
	padding: 0.5em;
}
header nav ul {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 1em;
}
header nav li {
	list-style-type: none;
}
header nav a {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	color: #fff;
	padding: 1em;
}
header nav svg {
	width: 2em;
}
path.ico-base,
circle.ico-base {
	fill: #fff;
}
path.curved-line {
	fill: none;
	stroke: #000;
	stroke-width: 0.1em;
}
line.nav-ico {
	stroke: #000;
	stroke-width: 0.1em;
}
circle.ico-contact {
	fill: #000;
}
a:focus .ico-base,
a:hover .ico-base {
	fill: #f00;
}

/* Footer */

footer {
	padding: 2em 0;
	text-align: center;
	border-top: 1px dashed #333;
}
footer ul {
	display: flex;
	justify-content: center;
	gap: 2em;
	padding: 1em 0;
	list-style-type: none;
}
footer a {
	padding: 0.5em;
}

@media (prefers-color-scheme: dark) {
	body {
		background-color: #333;
	}
	* {
		color: #ccc;
	}
	a {
		color: #cff;
	}
	button.uibtn {
		color: #ccc;
		background-color: #000;
		border-color: #ccc;
	}
	button.uibtn:focus, 
	button.uibtn:hover {
		background-color: #600;
	}
	h1 circle,
	h1 line,
	header button line,
	header nav line {
		stroke: #ccc;
	}
	path.ico-base,
	circle.ico-base {
		fill: #ccc;
	}
	footer {
		border-top-color: #ccc;
	}
}
@media (min-width: 1024px) {
	body {
		font-size: 24px;
	}
}
@media print {
	header button,
	footer {
		display: none;
	}
}