:root {
	--color1: #004e9b;
	--color2: #555;
	--color3: #f0f0f0;
	--color4: #000;
	--color5: #fff;
	--color6: #eee;
	--color7: #ccc;
	--color8: #093;
	--color9: #ffc;
	--color10: #930;
	--color11: #fec;
	--radius: 0.25rem;
	--border: 2px;
	--border-input: 1px;
	--space: 1rem;
	--half-space: 0.5rem;
	--font: 1rem;
	--input: 15rem;
}
@font-face {
	font-family: 'A';
	src: url(inter_variable.woff2) format('woff');
	font-weight: normal;
}

*, *::after, *::before {
	outline: 0;
	border: 0;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	scrollbar-color: var(--color2) var(--color3);
	scrollbar-width: thin;
	transition: all 0.125s;
	font-family: 'A', helvetica;
	font-size: var(--font);
	word-spacing: 0.25rem;
	line-height: 1.25;
}
:active, :focus {
	outline: 0;
	-webkit-tap-highlight-color: transparent;
}
:focus-visible {
   	outline: 2px solid var(--color1);
	outline-offset: 2px;
}
::selection {
	opacity: 1;
	background: var(--color1) !important;
	color: var(--color3);
}
::-webkit-scrollbar {
	width: 0.25rem;
	height: 0.25rem;
}
::-webkit-scrollbar-thumb { background: var(--color2); }
::-webkit-scrollbar-track { background: var(--color3); }
html, body {
	width: 100%;
	height: 100%;
	height: 100vh;
	height: 100dvh;
}
input, button, textarea, select {
    accent-color: var(--color1);
    border-radius: var(--radius);
}
a {
	text-decoration: none;
	color: var(--color1);
}
a:hover, a:active, a:focus { color: var(--color4); }
body {
	overscroll-behavior: none;
	background-color: var(--color3);
	text-align: left;
	color: var(--color4);
	justify-content: space-between;
}
input[type="text"], input[type="password"], button {
	padding: var(--half-space);
	border: var(--border) solid transparent;
}
input[type="radio"], input[type="checkbox"] { margin-right: var(--space); }
input[type="text"], input[type="password"] {
	border: var(--border-input) solid var(--color2);
	width: var(--input);
}
input[type="text"], input[type="password"], input[type="radio"], input[type="checkbox"], select, textarea {
    background-color: transparent;
}
input[type="text"]:hover, input[type="text"]:active, input[type="text"]:focus,
input[type="password"]:hover, input[type="password"]:active, input[type="password"]:focus { border-color: var(--color4); }
input[type="radio"], input[type="checkbox"] {
    width: 1.5rem;
    height: 1.5rem;
}
button {
	color: var(--color5);
	font-weight: bold;
	background: var(--color1);
	cursor: pointer;
}
button.green, [data-success] {
    background: var(--color8);
    color: var(--color5);
}
button.gray, [data-error] {
    background: var(--color10);
    color: var(--color5);
}
button:hover, button:focus, button:active {
	color: var(--color7);
	background: var(--color4);
}
[data-success], [data-error] {
    padding: var(--space);
    border-radius: var(--border);
    display: inline-block;
    width: var(--input);
    word-break: keep-all;
}
[data-hidden] { display: none; }
[data-hidden="no"] { display: flex; }

[data-load] { animation: l 0.5s infinite alternate; }
@keyframes l { from { background: var(--color1); } to { background: var(--color2); } }
header {
	background: var(--color1);
	color: var(--color5);
}
h1 span { font-size: 1.25rem; }
h1 img {
	height: 3rem;
	line-height: 0;
	margin-right: var(--space);
	filter: invert();
}
header, footer, h1, main, fieldset label, [data-row] {
    display: flex;
    flex-flow: row;
}
body, fieldset, fieldset > div, [data-column] {
    display: flex;
	flex-flow: column;
}
header > *, footer > *, h1 > *, main > * { align-self: center; }
main, footer { justify-content: center; }
footer {
	background: var(--color7);
	color: var(--color2);
	padding: var(--half-space) var(--space);
	text-align: center;
	font-weight: bold;
}
main {
    flex-grow: 1;
    background: var(--color3);
}
main section {
    margin: var(--half-space);
}
fieldset legend, fieldset legend[data-selected] {
    width: 100%;
    font-size: 1.5rem;
    cursor: pointer;
    border: var(--border) solid var(--color7);
    border-radius: var(--radius);
    padding: var(--half-space) var(--space);
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    position: relative;
    top: var(--radius);
    background: var(--color6);
    font-weight: bold;
}
fieldset legend[data-selected="no"] {
    font-weight: normal;
    border-bottom: var(--border) solid var(--color7);
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
    top: 0;
}
fieldset legend[data-selected="no"]:hover,
fieldset legend[data-selected="no"]:active,
fieldset legend[data-selected="no"]:focus {
    background: var(--color7);
}
[data-box] {
    background-color: var(--color5);
    border: var(--border) solid var(--color7);
    border-radius: var(--radius);
    padding: var(--space);
}
[data-box] > * {
    margin-bottom: var(--space);
}
[data-box] > *:last-child {
    margin-bottom: 0;
}
fieldset h4, fieldset div label {
    margin-bottom: var(--half-space);
}
fieldset div label:last-child { margin-bottom: 0; }
@media screen and (max-width: 640px), (max-width: 960px) {
    *, *::after, *::before { font-size: 0.9rem; }
    main { flex-flow: column; }
}
@media screen and (max-width: 320px) {
    *, *::after, *::before { font-size: 0.85rem; }
}