:root {
	--background: #f8fdff;
	--text: #221c22;
	--shadow: #ccddcc;
	--link: #aa1c22;
	--link-hover: #fff2cc;
}

@media (prefers-color-scheme:dark) {
	:root {
		--background: #221c22;
		--text: #f8fdff;
		--shadow: #667766;
		--link: #dd4f77;
		--link-hover: #443711;
	}
}

html {
	height: 100%;
}

body {
	background-color: var(--background);
	color: var(--text);
}

#content {
	margin: 1em;
	font-family: 'Roboto', Helvetica, sans-serif;
	font-size: 1.5em;
	line-height: 1.5em;
	width: 28em;
	max-width: 90%;
}

#content h1 {
	margin: 0;
	text-shadow: 2px 2px 0px var(--shadow);
	font-size: 1.75em;
	line-height: 1.25em;
}

#content a, #content a:visited, #content a:active, #content a:hover {
	text-decoration: none;
	color: var(--link);
	rotate: 0deg;
	}

#content a:hover {
	background-color: var(--link-hover);
	transition: background-color .35s ease-in-out;
}

#content a:hover img {
	rotate: -5deg;
	transform: scale(1.25,1.25);
	transition: all .35s ease-in-out;
}

img#avatar {
	margin-left: .15em;
	margin-right: .15em;
	height: 1.1em;
	display: inline-block;
	vertical-align: middle;
	margin-bottom: .15em;
}

.avatar#avatar:hover {
	rotate: -1085deg;
	transition: all 1.1s ease-in-out;
}