added popup styling; cleaned up basic layout

this is super janky tbh but it's not like there'll be many styled pages I guess

static/style.css

@@ -30,6 +30,11 @@ body {
 	color: var(--fg);
 	display: grid;
 	grid-template-rows: auto auto 1fr auto;
+	grid-template-areas:
+		"bannertop"
+		"header"
+		"main"
+		"bannerbot";
 	font-family: "Roboto", sans-serif;
 }
 
@@ -40,6 +45,7 @@ header {
 	justify-content: center;
 	align-items: center;
 	background: var(--bg);
+	grid-area: header;
 }
 
 header svg {
@@ -61,6 +67,7 @@ main {
 	max-width: 80ch;
 	padding: 0 2ch;
 	margin: 0 auto;
+	grid-area: main;
 }
 
 label :has(input) {
@@ -103,6 +110,7 @@ input[type=checkbox] {
 	border: 2px solid var(--gray);
 	border-radius: 5px;
 	background: var(--bg);
+	transition: .2s all;
 }
 
 input[type=checkbox]+svg {
@@ -127,6 +135,52 @@ input[type=checkbox]:checked+svg {
 	display: block;
 }
 
+/* Popup */
+main:has(.popup) {
+	justify-content: center;
+}
+
+.popup {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	height: calc(100% - 4em);
+	max-height: 400px;
+	padding: 2em 0;
+}
+
+.popup h1 {
+	text-align: center;
+	margin: 0;
+}
+
+.popup .buttoncontainer {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-content: center;
+}
+
+.popup button {
+	background: var(--accent);
+	color: var(--fg);
+	width: 60%;
+	height: 3em;
+	border-radius: 1.5em;
+	border: none;
+	cursor: pointer;
+	margin: 1em auto;
+	font-size: larger;
+	font-weight: bold;
+	font-family: 'Roboto', sans-serif;
+	transition: .2s all;
+}
+
+.popup button:where(:hover, :focus) {
+	background: var(--fg);
+	color: var(--bg);
+}
+
 /* "Not a phishing site" warning tape */
 aside {
 	background: repeating-linear-gradient(
@@ -140,3 +194,11 @@ aside em {
 	background: var(--bg);
 	color: var(--accent);
 }
+
+aside.top {
+	grid-area: bannertop;
+}
+
+aside.bottom {
+	grid-area: bannerbot;
+}