:root {
	--text-main: #000000;
	--bg-primary: #ffffff;
	--bg-secondary: #f0f0f0;
	--primary: #1212ff;
	--primary-hover: #0303dd;
	--text-contrast: #ffffff;
	--border-color: #ededed;
	--link-color: var(--primary);
	--link-hover: var(--primary-hover);
    --bg3: #ffffff;
    --u1: 4px;
    --u2: 8px;
    --u3: 12px;
    --u4: 16px;
}
@media (prefers-color-scheme: dark) {
:root {
	--text-main: #ffffff;
	--bg-primary: #030303;
	--bg-secondary: #121212;
	--primary: #2424ff;
	--text-contrast: #ffffff;
	--border-color: #424242;
	--link-color: #abd3fe;
	--link-hover: #80b0e2;
--bg3: #272727;
}
}
body {
	width: 600px;
	max-width: 98%;
	margin: auto;
	background-color: var(--bg-secondary);
	padding: var(--u1);
	text-align: center;
	box-sizing: border-box;
	color: var(--text-main);
}
body a {
	color: var(--link-color);
}
body a:hover {
	color: var(--link-hover);
}
form input {
	width: 100%;
	border-radius: var(--u2);
	margin: var(--u4) 0;
	box-sizing: border-box;
    background-color: var(--bg3);
	padding: var(--u4);
	color: var(--text-main);
}
form input[type="submit"] {
	background-color: var(--primary);
	color: var(--text-contrast);
	padding: var(--u2);
	border-radius: var(--u2);
    border:none;
    box-shadow: none;
}
form input[type="submit"]:hover {
	background-color: var(--primary-hover);
	cursor: pointer;
}
form input[type="text"] {
    border: 2px solid var(--border-color);
	height: 3em;
}
.info {
	margin-top: var(--u4);
	padding: var(--u4);
	text-align: left;
	background-color: var(--bg-primary);
	border: 1px solid var(--border-color);
	border-radius: var(--u2);
}
.info h2 {
	margin-top: 0;
}
footer {
	margin-top: 1rem;
}