@font-face {
	font-family:    'Courier Prime';
	font-style:     normal;
	font-weight:    normal;
	font-stretch:   normal;
	font-display:   swap;
	src:            url('/static/fonts/CourierPrime-Regular.ttf') format('truetype'),
					local('Courier Prime');
}

@font-face {
	font-family:    'Courier Prime';
	font-style:     normal;
	font-weight:    bold;
	font-stretch:   normal;
	font-display:   swap;
	src:            url('/static/fonts/CourierPrime-Bold.ttf') format('truetype'),
					local('Courier Prime');
}

@font-face {
	font-family:    'Courier Prime';
	font-style:     italic;
	font-weight:    normal;
	font-stretch:   normal;
	font-display:   swap;
	src:            url('/static/fonts/CourierPrime-Italic.ttf') format('truetype'),
					local('Courier Prime');
}

@font-face {
	font-family:    'Courier Prime';
	font-style:     italic;
	font-weight:    bold;
	font-stretch:   normal;
	font-display:   swap;
	src:            url('/static/fonts/CourierPrime-BoldItalic.ttf') format('truetype'),
					local('Courier Prime');
}

:root {
	--background-body: #FAFAFA;
	--background-item: #FFFFFF;
	--accent-blue:     #2072b1;
	--accent-red:      #c21a7e;
	--text:            #000000;
	--gradient:        linear-gradient(45deg, #2072b1 10%, #c21a7e 90%);
	--body-width:      80vw;
}

@media (max-width: 860px) {
	:root {
		--body-width: 100vw;
	}
}

/* consider padding and borders for width and height */
*,
*::before,
*::after {
	box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

html {
	font-size: 1rem;
}

body {
	font-family:      'Courier Prime', monospace;
	line-height:      1.8;
	max-width:        var(--body-width);
	min-height:       100vh;
	overflow-x:       hidden;
	background-color: var(--background-body);
	text-rendering:   optimizeLegibility;
	margin:           auto;
}

header
{
	height:              4em;
	width:               100%;
	padding:             1ch;
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: var(--accent-blue);
	border-image:        var(--gradient);
	border-image-slice:  1;
	display:             flex;
	align-items:         center;
	margin-bottom:       1.5em;
}

header img
{
	height:        3ch;
	padding-right: 1ch;
}

header a {
	text-decoration: none;
}

header a h1 {
	font-size: 2ch;
}

header a h1 span:nth-of-type(1) {
	color: var(--accent-red)
}

header a h1 span:nth-of-type(2) {
	color: var(--accent-blue)
}

header a:hover h1 span:nth-of-type(1) {
	color: var(--accent-blue)
}

header a:hover h1 span:nth-of-type(2) {
	color: var(--accent-red)
}

header label {
	display: none;
}

header nav {
	flex-grow: 1;
}

header form {
	display:    block;
	text-align: right;
	font-size:  0;
	min-width:  14rem;
}

header select {
	border-width:              2px;
	border-style:              solid;
	border-color:              var(--accent-blue);
	border-top-left-radius:    1ch;
	border-bottom-left-radius: 1ch;
	height:                    2rem;
	width:                     4rem;
	background-color:          var(--background-item);
	text-align:                right;
	font-family:               'Courier Prime', monospace;
	vertical-align:            middle;
}

header input[type=number] {
	border-width:       2px;
	border-style:       solid;
	border-color:       var(--accent-blue);
	height:             2rem;
	width:              8rem;
	background-color:   var(--background-item);
	font-family:        'Courier Prime', monospace;
	-webkit-appearance: none;
	-moz-appearance:    textfield;
	vertical-align:     middle
}

header input[type=number]:focus {
	border-color: var(--accent-red);
	outline:      none;
}

header input[type=submit] {
	border-width:               2px;
	border-style:               solid;
	border-color:               var(--accent-blue);
	border-top-right-radius:    1ch;
	border-bottom-right-radius: 1ch;
	height:                     2rem;
	width:                      2rem;
	background-color:           var(--accent-blue);
	color:                      var(--background-item);
	font-weight:                bold;
	vertical-align:             middle;
}

header input[type=submit]:hover {
	background-color: var(--background-item);
	border-color:     var(--accent-blue);
	color:            var(--accent-blue);
}

header input[type=submit]:focus {
	background-color: var(--background-item);
	border-color:     var(--accent-red);
	color:            var(--accent-red);
}

main {
	min-height: 50vh;
	padding:    1em;
}

main h1 {
	font-size:     1.4rem;
	font-weight:   bold;
	color:         var(--accent-blue);
	margin-bottom: 0.5em;
	margin-top:    0.5em;
}

main h2 {
	font-size:     1.2rem;
	font-weight:   bold;
	margin-bottom: 0.5em;
	margin-top:    0.5em;
}

main p {
	margin-bottom: 0.5em;
}

main a {
	text-decoration: none;
	color:           var(--accent-blue);
}

main a:hover {
	text-decoration: none;
	color:           var(--accent-red);
}

main a:active {
	text-decoration: underline;
}

main dl dt {
	font-weight: bold;
}

main dl dd {
	padding-left: 2rem;
}

footer {
	width:              100%;
	padding:            1ch;
	border-top-width:   3px;
	border-top-style:   solid;
	border-top-color:   var(--accent-blue);
	border-image:       var(--gradient);
	border-image-slice: 1;
	margin-top:         2ch;
	clear:              both;
}

footer ul {
	display:         flex;
	align-items:     center;
	justify-content: center;
	color:           var(--accent-blue);
	font-size:       0.8rem;
}

footer ul li {
	padding-left:  1ch;
	padding-right: 1ch;
}

footer ul li:nth-child(2):before {
	content: "::";
}

footer ul li:nth-child(2):after {
	content: "::";
}

footer ul li a {
	text-decoration: none;
	color:           var(--accent-blue);
}

footer ul li a:hover {
	text-decoration: none;
	color:           var(--accent-red);
}