Some initial sass refactoring (breaking change!)

Well, it's not a breaking change if you don't restyle duckquill heavily :)

sass/_general.scss

@@ -0,0 +1,60 @@
+* {
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+html {
+	scroll-behavior: smooth;
+	// scrollbar-color: var(--primary-color) transparent;
+	accent-color: var(--primary-color);
+	font-size: 16px;
+	overflow-wrap: break-word;
+
+	// Smaller font size on mobile
+	// @media only screen and (max-width: 480px) {
+	//     font-size: 14px;
+	// }
+}
+
+html,
+body {
+	margin: 0;
+	padding: 0;
+}
+
+body {
+	display: grid; // Put footer at the bottom for short pages, such as the 404
+	grid-template-rows: auto minmax(auto, 1fr) auto; // Header, stuff, footer
+	background: var(--bg-color);
+	min-height: 100vh;
+	color: var(--fg-color);
+	line-height: 1.6;
+	font-family: var(--font-system-ui), var(--font-emoji);
+}
+
+// Style text selection to use primary color
+::selection {
+	background-color: var(--primary-color);
+	color: var(--fg-color);
+}
+
+// Make focused anchor not get covered by nav,
+// and flash it with primary color when jumping to it
+:target:not(#main) {
+	animation: var(--transition-long) 1s highlight-in-out;
+	scroll-margin-top: 15vh;
+	color: var(--primary-color);
+	text-shadow: var(--primary-color-alpha) 0 0 4px, var(--primary-color) 0 0 12px;
+
+	@keyframes highlight-in-out {
+		50% {
+			font-weight: bolder;
+			letter-spacing: 0.0125em;
+		}
+	}
+
+	@media (prefers-reduced-motion) {
+		animation: none;
+	}
+}