#dark-theme { display: none; }

body {
	font-family: 'Roboto Mono', Monaco, Consolas, monospace;
	font-display: block;
	background-color: #111111;
	color: white;
	height: 100%;
	margin: 0;
}

body.light {
	background-color: white;
	color: black;
}

a {
	text-decoration: none;
	color: white;
}

a:hover {
	color: orange;
}

body.light a {
	color: black;
}

body.light a:hover {
	color: orange;
}

@media (min-width: 701px) {
	.visible-mobile { display: none; }
	.visible-desktop { display: block; }

	#outer {
		max-width: 970px;
		height: 100vh;
		margin-left: auto;
		margin-right: auto;
	}

		#edge {
			float: left;
			width: 200px;
			height: 100vh;
			position: fixed;
			padding-left: 20px;
			padding-top: 10px;
		}
			
			#nav-mobile { display: none; }
			#nav-desktop { display: block; }
			
				#nav-desktop ul {
					list-style-type: none;
					padding-left: 20px;
				}
			
				#nav-desktop li {
					margin-top: 10px;
				}

				#nav-desktop li:first-child {
					margin-top: 0;
				}
		
		#content {
			margin-left: 220px;
			padding-left: 60px;
			padding-top: 10px;
		}
	#theme-lang-select {
		text-align: right;
		position: absolute;
		bottom: 20px;
		right: 20px;
	}
}

@media (max-width: 700px) {
	.visible-mobile { display: block; }
	.visible-desktop { display: none; }
	
	#outer {
		margin: 10px;
	}
	
		#edge {}
			
			#nav-desktop { display: none; }
			
			#nav-mobile {
				text-align: center;
				display: block;
			}
			
				#nav-mobile h2 {
					margin: 0;
				}
			
				#nav-mobile ul {
					margin: 0;
					padding: 0;
					font-size: 90%;
				}
			
				#nav-mobile li {
					margin-top: 10px;
					display: inline-block;
				}
				
				#nav-mobile a {
					display:inline-block;
					padding: 5px;
					text-decoration: none;
				}
	
		#content {
			width: 100%;
			margin-bottom: 10px;
			font-size: 90%;
		}
		
		#content h1 {
			font-size: 150%;
		}
	#theme-lang-select {
		text-align: right;
		position: absolute;
		bottom: 20px;
		right: 20px;
	}
}