:root {
	--background: #13131E;
	--bg-raised: #171625;
	--text: #E0DFFE;

	--link: #FFC53D;
	--link-hover: #e28d0e;

	--button-color: #B1A9FF;
	--button-bg: #202248;
	--button-border: #5B5BD6;
	--button-bg-hover: #7E451D;

	background-color: var(--background);
	color: var(--text);
	font-family: Inter, sans-serif;
	scrollbar-width: thin;
}

code {
	font-family: "Iosevka Web", monospace;
	font-size: 11pt;
}

a[href],
a[href]:visited {
	color: var(--link);

	&:hover {
		color: var(--link-hover);
	}
}

body {
	display: flex;
	flex-direction: column;
}

nav {
	display: flex;
	width: 100%;
	background-color: var(--bg-raised);

	& a {
		flex: 1;
		display: flex;
		text-decoration: none;
		padding: 5px 8px;
		justify-content: center;
		max-width: 100px;
		box-shadow: inset 0 -2px var(--button-bg);
		font-size: 11pt;
		text-transform: uppercase;

		&[href],
		&[href]:visited {
			color: var(--button-color);
		}

		&:hover {
			background-color: #1E160F;
			box-shadow: inset 0 -2px var(--button-bg-hover);
		}
	}
}


main {
	padding: 10px;
}

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

button {
	background-color: var(--button-bg);
	color: var(--button-color);
	border: 1px solid var(--button-border);
	padding: 4px 8px;
	border-radius: 3px;

	&:hover {
		cursor: pointer;
		background-color: var(--button-bg-hover);
		color: var(--link-hover);
		border-color: var(--link-hover);
	}
}

table.table {
	background-color: var(--bg-raised);
	border: 3px solid #5958B1;
	border-radius: 3px;

	& th,
	& td {
		padding: 3px 5px;
	}

	& th {
		font-weight: bold;
	}

	& thead {
		background-color: #202248;
	}
}

.full-width {
	width: 100%;
	flex: 1;
}

input,
textarea {
	border: 1px solid #5958B1;
	border-radius: 3px;
	background-color: var(--bg-raised);
	color: var(--text);
	padding: 4px;
}

pre {
	margin: 0;
	padding: 0;
}