$dark-accent: lightgreen
$dark-bg: #1f1f1f
$dark-bg-alt: #272822
$dark-nav: darken($dark-bg, 5%)
$dark-fg: #dddddd

\:root
	color-scheme: light dark

@media (prefers-color-scheme: dark)
	body, .toot
		background-color: $dark-bg
		color: $dark-fg

	body > footer
		background-color: $dark-nav

	#logopath
		fill: $dark-accent
		stroke: $dark-accent

	nav
		background-color: $dark-nav

	.search-form
		input
			background-color: $dark-bg-alt
			border: 1px solid grey
		button[type="submit"]
			background-color: $dark-bg-alt
			color: $dark-accent

			&:hover
				background-color: $accent


	a, a:visited, .link
		color: $dark-accent
	a:hover, a:visited:hover, .link:hover
		color: $dark-fg

	.pagination li a, .pagination .active a
		background-color: $dark-bg
		color: $dark-fg

	h1, h2, h3
		color: $dark-accent

	.intro
		h1
			text-shadow: black 0px 0px 10px

	kbd
		color: $dark-accent
		border: 1px solid $dark-accent

	code, pre
		background-color: lighten($dark-bg-alt, 10%)
		color: lightgrey

	div.list h3
		color: darken($dark-fg, 20%)

	figure
		img
			filter: brightness(.8) contrast(1.2)
		figcaption
			color: darken($dark-fg, 20%)

	.highlight
		pre
			filter: invert(100%)

	hr
		border-top: 1px solid darken($dark-fg, 20%)

	header
		h1
			color: $dark-accent

	article a, article .link
		color: $dark-accent
		border-bottom: 1px solid $dark-accent

	.belowsingle
		background-color: $dark-bg-alt
		border-bottom: 5px solid $dark-bg

	table
	  tbody
	    border-top: 1px solid $dark-fg
	    tr
	      &:nth-child(odd)
	        background: lighten($dark-bg-alt, 10%)

	.worksgrid
		.worksblock
			&:hover
				background-color: lighten($dark-bg, 7%)