@fontSize: 30px;

@light: ~"(prefers-color-scheme: light)";
@dark: ~"(prefers-color-scheme: dark)";

html {
	margin: 0px;
	line-height: @fontSize + 6%;
}

h1 {
	font-size: @fontSize + 25px;
	line-height: @fontSize + 30px
}

body {
	margin: 0px;
	font-family: system-ui, sans-serif;
	font-size: @fontSize;
}

header, main, footer {
	margin-left: 20%;
	margin-right: 20%;
	@media (max-width: 500px) {
		margin-left: 20px;
		margin-right: 20px;
	}

}

code {
	line-height: @fontSize + 6%;
	font-size: @fontSize;
}

nav {
	display: inline-block;
	margin-left: 20px;
	margin-right: 20px;
}

header {
	text-align: center;
	margin-top: 20px;
}

p {
	margin: 0px;
	margin-bottom: 15px;
}

h2 {
	margin: 0px;
	padding: 0px;
}

.breakable {
	word-break: break-all;
}

@media @light {
	html {
		background-color: @lightColor;
		color: @darkColor;
	}

	::selection {
		background-color: @darkColor;
		color: @lightColor;
	}

	a {
		color: @darkColor;
	}
}

@media @dark {
	html {
		background-color: @darkColor;
		color: @lightColor;
	}

	::selection {
		background-color: @lightColor;
		color: @darkColor;
	}

	a {
		color: @lightColor;
	}
}