@font-face {
  font-family: 'Seagram';
  src: url('/assets/fonts/seagram.ttf') format('truetype');
  font-display: swap;
}

:root {
	color: #222;
	font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
	font-size: 16px;
}

.seagram {
	font-family: 'Seagram', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 1rem;
}

body {
	padding: 1rem;
	background-image: url("/assets/images/backgrounds/snowstorm.jpg");
}

i { font-style: italic; }
b { font-weight: bold; }

h1, h2, h3, h4, h5 {
	font-family: 'Seagram', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
	margin-bottom: 1rem;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.7rem; }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.1rem; }

p {
	margin-bottom: 1rem;
	&:last-child {
		margin-bottom: 0;
	}
}

div#container {
	max-width: 1024px;
	display: grid;
	grid-template-columns: 180px 1fr;
	margin: 0px auto;
	gap: 1rem;

	& > footer {
		grid-column: 1 / -1
	}
}

nav {
	border-right: 2px solid black;
	padding-bottom: 1rem;

	& > section {
		display: flex;
		flex-direction: column;
		padding-bottom: 1rem;
		margin-bottom: 1rem;
		border-bottom: 2px solid black;
	}
}

table {
	border-collapse: collapse;

	th, td {
		padding: 0.5rem;
		text-align: left;
		border: 1px solid rgba(0, 0, 0, 0.2);
	}

	th {
		background-color: rgba(0, 0, 0, 0.1);
	}

	tr:nth-child(even) {
		background-color: rgba(0, 0, 0, 0.05);
	}
}

a {
	color: #663300;
	text-decoration: none;
	font-weight: bold;
	cursor: pointer;

	&:hover {
		color: #330000;
	}
}

.small {
	font-size: 0.75rem;
}

.highlight {
	color: red;
}

.light {
	color: rgba(0, 0, 0, 0.35);
}

button.btn {
	font-family: inherit;
	font-size: 1rem;
	appearance: none;
	outline: none;
	background-color: #808080;
	background-image: url("/assets/images/overlay.png");
	border: 1px solid #808080;
	padding: 0.25rem 0.5rem;
	cursor: pointer;
	color: white;
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
	text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);

	&:hover {
		background-color: #909090;
	}

	&.btn-primary {
		color: rgba(0, 0, 0, 0.75);
		background-color: #F2994A;
		background-image: url("/assets/images/overlay.png"), linear-gradient(to bottom, #F2C94C, #F2994A);
		border-color: #F2994A;

		&:hover {
			background-color: #ffb574;
			background-image: url("/assets/images/overlay.png"), linear-gradient(to bottom, #ffd965, #ffb574);
		}
	}

	&.btn-blue {
		background-color: #00c6ff;
		background-image: url("/assets/images/overlay.png"), linear-gradient(to bottom, #00c6ff, #0072ff);
		border-color: #0072ff;

		&:hover {
			background-color: #49d6fd;
			background-image: url("/assets/images/overlay.png"), linear-gradient(to bottom, #49d6fd, #2987fa);
		}
	}
}

form.standard {
	& > div.row {
		display: flex;
		flex-direction: column;
		margin-bottom: 1.5rem;

		label {
			font-weight: bold;
		}
	}

	span.help {
		font-size: 0.8em;
		color: #555;
	}

	& > div.actions {
		margin-top: 1rem;
	}

	input.text {
		appearance: none;
		outline: none;
		border: 1px solid transparent;
		padding: 0.25rem 0.25rem;
		background-color: rgba(0, 0, 0, 0.4);
		color: white;

		&:hover {
			background-color: rgba(0, 0, 0, 0.5);
		}

		&:focus {
			background-color: rgba(0, 0, 0, 0.6);
			border-color: black;
		}

		&::placeholder {
			color: rgba(255, 255, 255, 0.6);
		}
	}

	textarea.text {
		appearance: none;
		outline: none;
		border: 1px solid transparent;
		padding: 0.25rem 0.25rem;
		background-color: rgba(0, 0, 0, 0.4);
		color: white;
		min-height: 100px;
		resize: vertical;

		&:hover {
			background-color: rgba(0, 0, 0, 0.5);
		}

		&:focus {
			background-color: rgba(0, 0, 0, 0.6);
			border-color: black;
		}

		&::placeholder {
			color: rgba(255, 255, 255, 0.6);
		}
	}
}

.w-full {
	width: 100%;
}

.mb-1 {
	margin-bottom: 1rem;
}