:root {
	--primary-color: #b919e1;
	--primary-shaded-color: #7a0f95;
	--destructive-color: #e12019;
	--destructive-shaded-color: #981712;
	--background-color: #111;
	--container-background-color: #222;
}

@font-face {
	font-family: "Roboto";
	src: url("../fonts/Roboto-Regular.ttf");
	font-weight: normal;
}

@font-face {
	font-family: "Roboto";
	src: url("../fonts/Roboto-Bold.ttf");
	font-weight: bold;
}

/* Body */

body {
	background-color: var(--background-color);
	color: #FFF;
	padding: 0;
	margin: 0;
	grid-template-columns: 100%;
	grid-template-areas: "nav";
	font-family: "Roboto", serif;
}

body #content {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	padding: 0 1rem 0 1rem;
	box-sizing: border-box;
}

/* Nav */

nav {
	background-color: var(--container-background-color);
	padding: 1rem;
	margin-bottom: .5rem;
	box-sizing: border-box;
	grid-area: nav;
}

nav a {
	padding: 0 1rem 0 1rem;
	font-size: 1.2rem;
	text-decoration: none;
}

nav a:hover {
	text-decoration: underline;
}

/* Dialog */

dialog {
	background-color: var(--container-background-color);
	border: 2px solid var(--primary-color);
	border-radius: 3px;
}

dialog::backdrop {
	background-color: rgba(0, 0, 0, .5);
}

dialog label {
	color: #FFF;
}

/* Elements */

a {
	color: #FFF;
}

button {
	background-color: var(--primary-color);
	border: 2px solid var(--primary-color);
	border-radius: 3px;
	color: #FFF;
	cursor: pointer;
	padding: .2rem .5rem .2rem .5rem;
}

button:hover {
	background-color: var(--primary-shaded-color);
	border-color: var(--primary-shaded-color);
}

button.icon {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-content: center;
	padding: .3rem;
}

button.icon img {
	width: 100%;
	height: 100%;
}

button.destructive {
	background-color: var(--destructive-color);
	border-color: var(--destructive-color);
}

button.destructive:hover {
	background-color: var(--destructive-shaded-color);
	border-color: var(--destructive-shaded-color);
}