index.css

/*Variables*/
:root {
  --primary: 27, 0, 255;
  --secondary: 96, 159, 255;
  --background: 255, 255, 255;
  --foreground: 0, 0, 0;
  --accent: 211, 211, 211;
}

.darked:root {
  --primary: 0, 228, 255;
  --secondary: 0, 171, 191;
  --background: 0, 0, 0;
  --foreground: 255, 255, 255;
  --accent: 128, 128, 128;
}

html {
	font-family: Noto Sans, Verdana, sans-serif;
	background-color: rgb(var(--background));
	color: rgb(var(--foreground));
	transition: background .2s linear;
}

body {
	max-width: 480px;
	margin: auto;
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10+ and Edge */
	user-select: none; /* Standard syntax */
	padding: 0 1em;
}

.no-margins {
	margin: 0;
}

.small-font {
	font-size: small;
}

.header {
	position: relative;
}

.group {
	text-transform: uppercase;
}

.page-list {
	margin: auto;
}

.page-list a {
	color: rgb(var(--primary));
	text-decoration: none;
    display: inline-block;
	padding: 2px 5px;
}

.page-list > a:hover {
	color: rgb(var(--foreground));
	text-decoration: underline;
}

.settings {
	position: absolute;
	right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.settings a {
	color: rgb(var(--foreground));
	cursor: pointer;
	text-decoration: none;
}

.settings a:hover {
	color: rgb(var(--primary));
}

.blog {
	font-weight: 100;
	/* font-size: 1em; */
}

/*MEDIA QUERIES - REDUCED MOTION*/
@media (prefers-reduced-motion: reduce) {
	html {
		transition: none;
	}
}