/* Body */
body {
	background-color: var(--background-color);
	background-image: var(--background-image);
}
p,
div,
a {
	color: var(--text-color) !important;
}
a.button {
	background-color: var(--text-color) !important;
	color: white !important;
}

.title {
	text-align: center;
}

/* Image Tags */
.hd-image {
	aspect-ratio: 16 / 9;
	width: 100%;
}
.tv-image {
	aspect-ratio: 4 / 3;
	width: 100%;
}
.mini-image {
	aspect-ratio: auto;
	width: 20%;
}

/* Hero */
.hero {
	position: relative;
	margin-bottom: -30px;
	min-height: 500px;
}
.hero-body {
	z-index: 1;
	padding-bottom: 30px !important;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}
.hero .title {
	text-align: center;
	font-family: serif;
	text-shadow: 1px 1px 1px var(--accent-color),
		-1px -1px 1px var(--accent-color), -1px 0px 1px var(--accent-color),
		0px -1px 1px var(--accent-color);
}
.hero .title span {
	font-size: 2em;
}
.hero .logo {
	width: 15vw;
}

/* Navigation buttons */
.desktop-navigation {
	display: inherit;
	margin-top: 30px !important;
	margin-bottom: 20px !important;
}
.phone-navigation {
	margin-top: 10px !important;
	display: none !important;
	text-align: center;
}
#nav {
	margin-top: 10px !important;
	margin-bottom: 20px !important;
}
#nav.hidden {
	display: none;
}

/* Sections */
.section {
	margin-top: 0px !important;
	padding-top: 0px !important;
	background-color: var(--section-color);
}
.subtitle {
	padding-bottom: 18px !important;
}

/** Buttons */
a.button {
	margin: 0.5rem !important;
	text-decoration: none !important;
	background-color: var(--button-background-color) !important;
	color: var(--button-text-color) !important;
}

/*  Columns */
.columns {
	margin: 0 !important;
}
.column {
	padding: 10px !important;
}

/*  Images */
.has-image {
	text-align: center;
}
.has-image > img {
	max-width: 100%;
}

/*  Fonts */
.has-font-impact {
	font-family: "impact", sans-serif;
}
.has-font-arial {
	font-family: "arial", sans-serif;
}

/* Progress bars */
.progress {
	margin-top: 18px !important;
	margin-bottom: 18px !important;
}
.progress::-webkit-progress-value {
	background-color: var(--accent-color) !important;
}

.progress::-moz-progress-bar {
	background-color: var(--accent-color) !important;
}

.progress::-ms-fill {
	background-color: var(--accent-color) !important;
}

.progress::indeterminate {
	background-image: linear-gradient(
		to right,
		rgba($color: #YOURVALUES, $alpha: 1) 30%,
		#ededed 30%
	);
}