add pubkeys + captive portal check service

style.css

@@ -4,12 +4,14 @@
 	--background: #534b4f;
 	--background-alt: #645452;
 	--foreground: #faf0e6;
+	--support: #444444;
 	@media (prefers-color-scheme: light) {
 		--primary: #ff91a4;
 		--secondary: #dc143c;
 		--foreground: #534b4f;
 		--background: #faf0e6;
 		--background-alt: #f0ead6;
+		--support: #dddddd;
 	}
 }
 
@@ -81,6 +83,22 @@ html {
 			text-decoration: none;
 		}
 	}
+	pre,
+	code {
+		overflow-x: auto;
+		max-width: 100%;
+		font-size: 14px;
+		color: var(--secondary);
+		background-color: var(--support);
+		padding: 0 4px;
+		border-radius: 4px;
+		display: inline-block;
+		-webkit-overflow-scrolling: touch;
+	}
+	hr {
+		margin: 20px 0;
+	}
+
 	body {
 		main {
 			margin: 5% 15%;
@@ -143,7 +161,7 @@ html {
 						margin: 5px;
 						border-radius: 5px;
 						border: 1px solid var(--primary);
-						width: 300px;
+						max-width: 300px;
 						.sd-grid-card-title {
 							text-align: center;
 							display: flex;
@@ -161,24 +179,57 @@ html {
 							padding: 5px;
 							text-align: left;
 						}
-						.sd-grid-card-action {
+						.sd-grid-actions-row {
+							display: flex;
+							flex-direction: row;
+							width: 100%;
 							padding: 5px;
-							width: 90%;
-							border: 4px dotted var(--secondary);
-							border-radius: 4px;
-							font-size: 22px;
-							font-weight: bolder;
-							text-decoration: none;
-							color: var(--secondary);
-							&:hover,
-							&:active {
-								background-color: var(--secondary);
+							.sd-grid-card-action {
+								width: 100%;
+								border: 4px dotted var(--primary);
+								border-radius: 4px;
+								margin: 4px;
+								font-size: 20px;
+								font-weight: bolder;
+								text-decoration: none;
 								color: var(--primary);
+								&:hover,
+								&:active {
+									border: 4px solid var(--secondary);
+									background-color: var(--secondary);
+									color: var(--primary);
+								}
 							}
 						}
 					}
 				}
 			}
+			#pubkeys {
+				h3 {
+					display: flex;
+					flex-direction: row;
+					text-align: center;
+					align-items: center;
+					margin: 10px 0;
+					button {
+						margin: 0 10px;
+						padding: 2px;
+						background-color: transparent;
+						border: none;
+						color: var(--primary);
+						font-size: 18px;
+						border-radius: 4px;
+						&:hover {
+							color: var(--secondary);
+							cursor: pointer;
+						}
+						&:active {
+							color: var(--primary);
+							background-color: var(--secondary);
+						}
+					}
+				}
+			}
 			#credits {
 				h1 {
 					padding: 5px;