options.css

:root {
	font-size: 10px;
	--font-color: #444;
	--font-color-active: #000;
	--font-color-inactive: #999;
	--border-color: #eee;
	--border-color-active: #ccc;
	--background-color : #fcfcfc;
	--background-color-active: #e3ecf1;
	background-color: var(--background-color);
}
* {
	margin: 0;
	padding: 0;
}

@font-face {
	font-family: "Roboto";
	src: url(./Roboto-Regular.woff2);
	font-style: normal;
	font-weight: normal;
}
@font-face {
	font-family: "Roboto";
	src: url(./Roboto-Italic.woff2);
	font-style: italic;
	font-weight: normal;
}
@font-face {
	font-family: "Roboto";
	src: url(./Roboto-Bold.woff2);
	font-style: normal;
	font-weight: bold;
}
@font-face {
	font-family: "Roboto";
	src: url(./Roboto-BoldItalic.woff2);
	font-style: italic;
	font-weight: bold;
}

body {
	margin: 0;
	font-family: "Roboto";
	overflow-y: scroll;
	overflow-x: hidden;
	background-color: var(--background-color);
	border-width: 0.05rem;
	border-style: solid;
	border-color: var(--border-color);
	padding: 1.5rem 1rem;
	user-select: none;
	word-wrap: break-word;
	max-width: 50rem;
}

header {
	font-size: 2.4rem;
	text-align: center;
}

nav {
	display: flex;
	flex-flow: row;
	flex-wrap: wrap;
	width: auto;
	margin: 1rem 0;
}
	nav>span {
		color: var(--font-color-inactive);
		font-size: 1.6rem;
		text-align: center;
		min-width: 3rem;
		padding: 0.2rem 0.4rem;
		white-space: nowrap;
	}
	nav>span:hover {
		color: var(--font-color-active);
		cursor: pointer;
	}
	.misc #misc-button,
	.theme #theme-button,
	.services #services-button,
	.warnings #warnings-button,
	.startPage #startPage-button {
		color: var(--font-color);
		cursor: normal;
	}

		section {
			margin: 1rem 0 2rem 0;
			display: none;
			grid-template-columns: min-content auto;
			grid-row-gap: 1rem;
			grid-column-gap: 0.8rem;
			align-items: center;
			font-size: 1.8rem;
		}
		.leftBar #leftBar-section,
		.rightBar #rightBar-section,
		.misc #misc-section,
		.theme #theme-section,
		.services #services-section,
		.warnings #warnings-section,
		.startpage #startpage-section {
			display: grid;
		}
			form {
				grid-column-start: 1;
				grid-column-end: 3;
				display: grid;
				grid-template-columns: min-content auto;
				grid-row-gap: 1rem;
				grid-column-gap: 0.8rem;
				align-items: center;
				margin-left: 2rem;
			}
			p {
				grid-column-start: 1;
				grid-column-end: 3;
				margin: 1rem 0 0 0;
			}
			label {
				justify-self: left;
			}
			input.text {
				width: 3rem;
				height: 1.6rem;
				padding: 0;
				margin: 0;
				border-color: transparent;
			}
			input[type="number"] {
				width: 5rem;
				height: 1.6rem;
				padding: 0;
				margin: 0;
				border-color: transparent;
			}
			input {
				justify-self: right;
				text-align: right;
			}
			input[type="file"] {
				display: none;
			}

footer {
	font-size: 1.6rem;
	text-align: right;
}
	footer>span {
		margin: 0.5rem 0 0.5rem 1rem;
		padding: 0.1rem 1rem;
		min-width: 4rem;
		border-style: solid;
		border-color: var(--border-color);
		border-width: 0.05rem;
		color: var(--font-color);
		cursor: pointer;
		text-align: center;
	}
	footer>span:hover {
		color: var(--font-color-active);
		border-color: var(--border-color-active);
	}