toggleable crt effect (accessibility)! (also better mobile support)

public/style/main.css

@@ -28,6 +28,7 @@ header {
 	flex-direction: row;
 	gap: 1em;
 	padding: 0 1em;
+	overflow-x: scroll;
 }
 
 img#header-icon {
@@ -99,6 +100,23 @@ header ul li a:hover {
 	text-decoration: none;
 }
 
+#toggle-crt {
+	margin-top: 4px;
+	padding: 4px;
+	fill: var(--links);
+	cursor: pointer;
+	transition: fill .1s, opacity .1s;
+	opacity: .5;
+}
+
+#toggle-crt:hover {
+	fill: #eee;
+}
+
+#toggle-crt.active {
+	opacity: 1;
+}
+
 main {
 	width: 	min(calc(100% - 4rem), 720px);
 	min-height: calc(100vh - 10.3rem);
@@ -300,6 +318,10 @@ footer {
 }
 
 @media screen and (max-width: 520px) {
+	body {
+		font-size: 14px;
+	}
+
 	#header-text {
 		display: none;
 	}

public/style/music.css

@@ -66,11 +66,14 @@ h3.music-type-upcoming {
 }
 
 .music-links {
+	width: fit-content;
 	margin: .5em 0;
 	padding: 0;
 	display: flex;
 	gap: .5rem;
 	flex-wrap: wrap;
+	line-height: 1.7em;
+	justify-content: center;
 }
 
 .music-links li {
@@ -113,3 +116,17 @@ h2.question {
 	border-radius: 4px;
 }
 
+@media screen and (max-width: 520px) {
+	a.music {
+		flex-direction: column;
+	}
+
+	.music-artwork,
+	.music-details {
+		text-align: center;
+		align-items: center;
+		display: flex;
+		flex-direction: column;
+	}
+}
+