@font-face {
	font-family: "Roboto";
	src:
		local("Roboto"),
		url("/Roboto-Regular.ttf");
	font-weight: 400;
}

:root {
	--bg: #000;
	--fg: #fff;
	--gray: #777;
	--lowcontrast: #222;
	--accent: #1d9bf0;
}

@media (prefers-color-scheme: light) {
	:root {
		--bg: #fff;
		--fg: #000;
		--lowcontrast: #ddd;
	}
}

body {
	width: 100vw;
	height: 100vh;
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	display: grid;
	grid-template-rows: auto auto 1fr auto;
	font-family: "Roboto", sans-serif;
}

header {
	padding: 1em 1ch;
	border-bottom: 1px solid var(--lowcontrast);
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--bg);
}

header svg {
	width: 24px;
	height: 24px;
	fill: var(--fg);
}

header h1 {
	margin: 0 auto;
	font-size: 24px;
}

main {
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	width: calc(100% - 4ch);
	max-width: 80ch;
	padding: 0 2ch;
	margin: 0 auto;
}

label input {
	grid-area: input;
}

label h3 {
	grid-area: title;
	margin: 0;
}

label p {
	grid-area: text;
	color: var(--gray);
	margin: 0;
}

/* Checkbox settings */
label:has(input[type=checkbox]) {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto;
	grid-template-areas:
		"title input"
		"text text";
}

label:has(input[type=checkbox]):hover {
	cursor: pointer;
}

.checkboxcontainer {
	position: relative;
}

input[type=checkbox] {
	appearance: none;
	width: 20px;
	height: 20px;
	border: 2px solid var(--gray);
	border-radius: 5px;
	background: var(--bg);
}

input[type=checkbox]+svg {
	display: none;
	width: 20px;
	height: 20px;
	fill: var(--fg);
	position: absolute;
	inset: 1px 2px;
}

input[type=checkbox]:hover {
	box-shadow: 0 0 0 5px var(--lowcontrast);
}

input[type=checkbox]:checked {
	background: var(--accent);
	border-color: var(--accent);
}

input[type=checkbox]:checked+svg {
	display: block;
}

/* "Not a phishing site" warning tape */
aside {
	background: repeating-linear-gradient(
		45deg,
		var(--bg) 1ch 2ch,
		var(--accent) 2ch 3ch);
	text-align: center;
}

aside em {
	background: var(--bg);
	color: var(--accent);
}