style.css

body, html {
	padding: 0;
	margin: 0;
}

body {
	background-color: #222222;
}

.titlebar {
	user-select: none;
	-webkit-app-region: drag;

	margin: 0;
	padding: 0;

	width: 100%;
	height: 32px;
	background-color: #303030;

	display: flex;
}

.titlebar__title {
	color: #dddddd;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;

	margin: auto 0 auto 10px;
}

.config {
	margin: 15px;
}

.config__pathto {
	width: 512px;

	border-radius: 16px;
	border-style: none;

	padding: 5px 10px;
	margin: 5px 0;
}

.config__pathto:focus {
	outline-width: 0;
}

.config__pathto__header {
	color: #dddddd;
	font-family: 'Montserrat', sans-serif;

	margin: 5px 0;
}

.config__save_button {
	border-radius: 16px;
	border-style: none;

	padding: 5px 10px;
}

.config__save_button:hover {
	background-color: #e0e0e0;
}

.config__save_button:active {
	background-color: #afafaf;
}

/* Content Window */

.content {
	padding: 0;
	margin: 15px;
}

.content__header {
	color: #dddddd;
	font-family: 'Montserrat', sans-serif;

	margin: 5px 0;
}

.content__newcontent_button {
	border-radius: 16px;
	border-style: none;

	margin: 10px 0;
	padding: 5px 10px;
}

.content__newcontent_button:hover {
	background-color: #e0e0e0;
}

.content__newcontent_button:active {
	background-color: #afafaf;
}

.content__list {
	display: inline;
}

.content__pathto {
	width: 512px;

	border-radius: 16px;
	border-style: none;

	padding: 5px 10px;
	margin: 5px 0;
}

.content__pathto:focus {
	outline-width: 0;
}

.content__newcontent_toggle {
	vertical-align: middle;
	margin: auto 0;
	appearance: none;
	width: 32px;
	height: 16px;
	outline: none;
	border-radius: 8px;
	background: #aaa;
	transition: 0.5s;
}

.content__newcontent_toggle:checked {
	background: #5aaf4f;
}

.content__newcontent_toggle::before {
	content: '';
	position: absolute;
	width: 16px;
	height: 16px;
	border-radius: 8px;
	background: #fff;
	transform: scale(1.1);
	transition: 0.2s;
}

.content__newcontent_toggle:checked::before {
	transform: translateX(16px) scale(1.1);
}

/* Start */

.start {
	margin: 15px;

	position: absolute;
	bottom: 0px;
}

.start__button {
	border-radius: 12px;
	border-style: none;

	padding: 10px 10px;

	font-family: 'Montserrat', sans-serif;

	background-color: #414141;
	color: #e0e0e0;
}

.start__button:hover {
	background-color: #363636;
}

.start__button:active {
	background-color: #303030;
}

/* Error */

.error {
	min-width: 128px;
	min-height: 64px;

	margin: 10px;

	position: absolute;
	bottom: 0px;
	right: 0px;

	border-radius: 16px;
	border-style: none;

	padding: 15px;

	background-color: #303030;
	color: #e74c4c;

	font-family: 'Montserrat', sans-serif;
	font-size: 14px;

	visibility: hidden;
}

/* Loading */

.loading {
	position: fixed;

	width: 100%;
	height: 100%;

	margin: 0;
	padding: 0;
	display: flex;
}

.loading__text {
	color: #e0e0e0;
	font-family: 'Montserrat', sans-serif;
	font-size: 25px;

	margin: auto;
}