:root {
	/* red */
	--dr1: 111, 31, 31;
	--dr2: 96, 16, 16;
	--dr3: 57, 9, 9;
	--lr1: 177, 32, 32;
	--lr2: 144, 32, 32;
	--lr3: 106, 13, 13;
	/* orange */
	--do1: 111, 63, 31;
	--do2: 96, 48, 16;
	--do3: 57, 28, 9;
	--lo1: 177, 63, 31;
	--lo2: 144, 48, 16;
	--lo3: 106, 28, 9;
	/* yellow */
	--dy1: 111, 111, 0;
	--dy2: 96, 96, 0;
	--dy3: 57, 57, 0;
	--ly1: 177, 177, 0;
	--ly2: 144, 144, 0;
	--ly3: 106, 106, 0;
	/* green */
	--dg1: 63, 111, 31;
	--dg2: 48, 96, 16;
	--dg3: 28, 57, 9;
	--lg1: 145, 177, 32;
	--lg2: 104, 144, 32;
	--lg3: 86, 106, 13;
	/* cyan */
	--dc1: 31, 111, 111;
	--dc2: 16, 96, 96;
	--dc3: 9, 57, 57;
	--lc1: 32, 177, 177;
	--lc2: 32, 144, 144;
	--lc3: 13, 106, 106;
	/* blue */
	--db1: 31, 31, 111;
	--db2: 16, 16, 96;
	--db3: 9, 9, 57;
	--lb1: 32, 32, 177;
	--lb2: 32, 32, 144;
	--lb3: 13, 13, 106;
	/* purple */
	--dp1: 63, 31, 111;
	--dp2: 48, 16, 96;
	--dp3: 28, 9, 57;
	--lp1: 145, 32, 177;
	--lp2: 104, 32, 144;
	--lp3: 86, 13, 106;
}

* {
	margin: 0;
	padding: 0;
	scrollbar-width: none;
}

html,
body {
	scroll-behavior: smooth;
	height: 100%;
	color: white;
	font: min(2.31vh, 2.5vw) Consolas, sans-serif;
}

body {
	display: flex;
}

.background {
	background-color: #3b1900;
	width: 100%;
	height: 100%;
	position: absolute;
	padding: 0;
	margin: 0;
	left: 0px;
	top: 0px;
	z-index: -1000;
	overflow: hidden;
}

.homepagebg {
	width: 100vw;
	height: 100vh;
	object-fit: cover;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: -1000;
}

.overlay {
	position: fixed;
	z-index: -999;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	backdrop-filter: blur(5px) brightness(1);
	-webkit-backdrop-filter: blur(5px) brightness(1);
	background: -moz-linear-gradient(90deg, rgba(0, 0, 0, 0.93) 0%, rgba(0, 0, 0, 0.83) 8%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0.4) 100%);
	background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.93) 0%, rgba(0, 0, 0, 0.83) 8%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0.4) 100%);
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.93) 0%, rgba(0, 0, 0, 0.83) 8%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0.4) 100%);
}

.content {
	display: flex;
	flex: 1;
	flex-direction: column;
	height: auto;
}

nav {
	display: flex;
	position: fixed;
	top: 0;
	z-index: 11;
	width: 100%;
	padding: 0.9em 0;
	font-weight: bold;
	background-color: rgb(var(--dg3));
	border-bottom: 0.6em solid rgb(var(--lg3));
	-webkit-box-shadow: 0 0.15em 0 0 rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 0.15em 0 0 rgba(0, 0, 0, 0.3);
	box-shadow: 0 0.15em 0 0 rgba(0, 0, 0, 0.3);

	a {
		background: rgb(var(--dg2));
		color: rgb(var(--lg1));
		padding: 0.2em 0.6em;
		text-decoration: none;
		border: 0.15em solid rgb(var(--lg1));
		border-radius: 1.2em;
		transition: all 85ms ease-in-out;
		font-size: 2em;
	}

	a:hover {
		background: rgb(var(--lg2));
		color: white;
		border: 0.15em solid white;
	}
}

@media (min-width: 768px) {
	nav {
		border-bottom: 0.2em solid rgb(var(--lg3));
		padding: 0.3em 0;

		a {
			padding: 0.4em 0.6em;
			font-size: 1em;
			border: 0.2em solid rgb(var(--lg1));
		}

		a:hover {
			border: 0.2em solid white;
		}
	}
}

.navbar {
	display: flex;
	justify-content: space-evenly;
	gap: 0.9em;
	padding: 0 0.9em;
	width: 100%;
}

@media (min-width: 768px) {
	.navbar {
		display: none;
	}
}

.nav-title {
	display: flex;
	flex-grow: 1;
	padding-left: 1.54em;
	justify-content: center;
	align-items: center;
	color: rgb(var(--lg1));
	font-size: 3em;
}

/* Hide checkbox */
#menu-toggle {
	display: none;
}

/* Style for the menu label */
.menu-label {
	display: flex;
	width: 1.5em;
	height: 1.5em;
	background: rgb(var(--dg2));
	color: rgb(var(--lg1));
	font-size: 2em;
	justify-content: center;
	cursor: pointer;
	border: 0.2em solid rgb(var(--lg1));
	border-radius: 50%;
	z-index: 11;
}

.menu-icon {
	position: relative;
	margin: auto;
	height: 0.2em;
	width: 1.2em;
	background: rgb(var(--lg1));
	border-radius: 0.2em;

	&::before,
	&::after {
		background: rgb(var(--lg1));
		content: "";
		height: 100%;
		position: absolute;
		width: 0.72em;
		border-radius: 0.2em;
		left: 0.24em;
	}

	&::before {
		top: -0.4em;
	}

	&::after {
		top: 0.4em;
	}
}

#menu-toggle:checked ~ .menu-label .menu-icon {
	width: 0;
	height: 0.25em;
}

#menu-toggle:checked ~ .menu-label .menu-icon::before {
	transform: rotate(-45deg);
	top: 0;
	left: -0.6em;
	width: 1.2em;
}

#menu-toggle:checked ~ .menu-label .menu-icon::after {
	transform: rotate(45deg);
	top: 0;
	left: -0.6em;
	width: 1.2em;
}

.navmenu {
	display: none;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	gap: 0.7em;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	width: 100%;
	background-color: rgb(var(--dg3));
	border-bottom: 0.4em solid rgb(var(--lg3));
	z-index: 10;
	padding: 0.7em 0;
	font-size: 1.5em;
}

nav:has(#menu-toggle:checked) .navmenu {
	display: flex;
}

@media (min-width: 768px) {
	.navmenu {
		display: flex;
		flex-direction: row;
		align-items: normal;
		gap: 0.5em;
		position: relative;
		top: 0;
		border-bottom: none;
		padding: 0;
		font-size: 1em;
	}
}

.selected-page {
	display: none;

	a {
		background-color: rgb(var(--lg2));
		color: white;
		border: 0.2em solid rgb(var(--lg1));
	}
}

/* Responsive styles */
@media (min-width: 768px) {
	.selected-page {
		display: block;
	}
}

/* Responsive styles */
@media (min-width: 768px) {
	.menu-label {
		display: none;
	}
}

.about {
	display: flex;
	flex-direction: column;
	gap: 1em;
	padding: 1.5em 0;
	text-align: center;
	margin: 1.8em 4vw;
	font-size: 6vw;
}
@media (min-width: 768px) {
	.about {
		width: min(calc(100% - 6em), 1000px);
		margin: auto;
		text-align: justify;
		font-size: 1em;
		margin-top: 3em;
	}
}

.paragraph {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	padding: min(3vw, 3vh);
	background: rgba(var(--dg2));
	border: 0.2em solid rgba(var(--lg2));
	border-radius: 1em;
}

.title {
	text-align: center;
	font-size: 1.5em;
	font-weight: 700;
}

.text {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
	font-style: italic;
}

@media (min-width: 768px) {
	.text {
		text-indent: 2em;
	}
}

.bold {
	font-weight: 700;
	font-style: normal;
}

.link {
	text-decoration: underline;
	color: white;
	cursor: pointer;

	&::before {
		content: "🔗\00a0";
		font-size: 0.75em;
	}
}

.text > ul > li::marker {
	content: "♥ ";
}

.text > ul > li {
	text-indent: 0;
}

.text > ul {
	padding-left: 2em;
	text-align: left;
}

@media (min-width: 768px) {
	.text > ul {
		padding-left: 5em;
	}
}

.cards {
	display: flex;
	flex: 1;
	justify-content: center;
	align-items: center;
	margin-top: 3em;

	div {
		display: flex;
		flex-direction: column;
		height: auto;
		width: auto;
		gap: 1em;
		justify-content: center;
		padding: 1em 0;
	}
}

.card {
	--_cardbg: var(--cardbg, var(--lg1));
	--_cardborder: var(--cardborder, var(--dg1));
	--_cardtext: var(--cardtext, var(--dg2));
	--_carda: var(--carda, 1);

	display: flex;
	align-content: center;
	justify-content: center;
	background: rgba(var(--_cardbg), var(--_carda));
	border: 0.2em solid rgb(var(--_cardborder));
	border-radius: 5rem;
	height: 4em;
	cursor: pointer;
	text-decoration: none;
	font-size: 1.5em;
	transition: 85ms ease-out;

	img {
		flex: initial;
		height: 75%;
		margin: 0.5em;
	}

	.card-info {
		flex: 1;
		color: rgb(var(--_cardtext));
		font-size: 1.368em;
		font-weight: bold;
		text-decoration: none;
		text-align: center;
		margin-right: 0.75em;
	}
}

@media (min-width: 768px) {
	.card {
		font-size: 1em;
	}
}

.card-email:hover {
	--cardbg: 0, 0, 0;
	--cardborder: 255, 255, 255;
	--cardtext: 255, 255, 255;
}

.card-instagram:hover {
	--cardbg: 184, 0, 176;
	--cardborder: 255, 208, 31;
	--cardtext: 255, 255, 255;
}

.card-facebook:hover {
	--cardbg: 92, 137, 234;
	--cardborder: 50, 68, 104;
	--cardtext: 50, 68, 104;
}

.card-tiktok:hover {
	--cardbg: 0, 0, 0;
	--cardborder: 110, 255, 250;
	--cardtext: 255, 0, 79;
}

.events {
	display: flex;
	flex-direction: column;
	flex: 1;
	overflow: scroll;
	scroll-behavior: smooth;
	width: 100vw;
}

.past-events {
	margin-top: 7.2em;
}

@media (min-width: 768px) {
	.past-events {
		margin-top: 4.2em;
	}
}

.past-events,
.upcoming-events {
	display: flex;
	width: 100%;
	flex-direction: column;
	flex: 1;
	align-content: center;
	gap: 1em;
	padding-bottom: 1em;
}

#Upcoming,
.year {
	padding-top: 1.6em;
	margin-top: -1.7em;
}

@media (min-width: 768px) {
	#Upcoming,
	.year {
		padding-top: 0.8em;
		margin-top: -0.95em;
	}
}

.bigcard {
	--_cardbg: var(--cardbg, var(--lg1));
	--_cardborder: var(--cardborder, var(--dg1));
	--_cardtext: var(--cardtext, var(--dg2));

	table-layout: fixed;
	background: rgba(var(--_cardbg), 0.85);
	border: 0.2em solid rgb(var(--_cardborder));
	border-radius: 2.5em;
	width: min(calc(100% - 10em), 1000px);
	height: auto;
	margin: auto;
	padding: 1em;
	z-index: 1;
	transition: 85ms ease-out;
}

.event-title {
	display: flex;
	position: relative;
	flex-direction: column;
	flex: 1;
	top: -0.3em;
	text-align: center;
	font-size: 2.8em;
	color: rgb(var(--dg2));
	font-weight: bold;

	&::after {
		content: "";
		display: block;
		height: 0.1em;
		width: 80%;
		margin: 0 10%;
		background: -webkit-linear-gradient(90deg, rgba(var(--dg2), 0) 0%, rgb(var(--dg2)) 20%, rgb(var(--dg2)) 80%, rgba(var(--dg2), 0) 100%);
		background: -moz-linear-gradient(90deg, rgba(var(--dg2), 0) 0%, rgb(var(--dg2)) 20%, rgb(var(--dg2)) 80%, rgba(var(--dg2), 0) 100%);
		background: -o-linear-gradient(90deg, rgba(var(--dg2), 0) 0%, rgb(var(--dg2)) 20%, rgb(var(--dg2)) 80%, rgba(var(--dg2), 0) 100%);
		background: -ms-linear-gradient(90deg, rgba(var(--dg2), 0) 0%, rgb(var(--dg2)) 20%, rgb(var(--dg2)) 80%, rgba(var(--dg2), 0) 100%);
		background: linear-gradient(90deg, rgba(var(--dg2), 0) 0%, rgb(var(--dg2)) 20%, rgb(var(--dg2)) 80%, rgba(var(--dg2), 0) 100%);
	}
}

.event-row {
	display: flex;
	flex-direction: row;
	flex: 1;
}

.event-info-l {
	width: 21%;
	padding: 0 0.2em 0 0.4em;
	text-align: right;
	color: rgb(var(--lg1));
	background: rgb(var(--dg1));
	font-weight: bold;
	font-size: max(1em, 1.5vh);
	border-bottom: 0.1em solid rgb(var(--lg2));
}

.event-info-r {
	padding-left: 0.3em;
	text-align: left;
	flex: 1;
	color: rgb(var(--dg2));
	background: rgba(var(--lg1), 0.85);
	font-weight: bold;
	font-size: max(1em, 1.5vh);
	border-bottom: 0.1em solid rgb(var(--lg2));

	a {
		color: rgb(var(--dg2));
	}
}

.event-row:nth-child(2) .event-info-l {
	border-radius: 1.5em 0 0 0;
}

.event-row:nth-child(2) .event-info-r {
	border-radius: 0 1.5em 0 0;
}

.event-row:last-child .event-info-l {
	border-radius: 0 0 0 1.5em;
	border-bottom: none;
}

.event-row:last-child .event-info-r {
	border-radius: 0 0 1.5em 0;
	border-bottom: none;
}

.bigcard:hover {
	border-color: #ffffff;
}

.year {
	display: flex;
	flex-direction: column;
	text-align: center;
	font-size: 4em;
	width: 60%;
	margin-left: auto;
	margin-right: auto;
	line-height: 83%;

	> a {
		text-decoration: none;
		color: #ffffff;
		cursor: help;
	}

	&::after {
		content: "";
		display: block;
		height: 0.08em;
		width: 80%;
		margin: 0 10%;
		background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 20%, rgb(255, 255, 255) 80%, rgba(255, 255, 255, 0) 100%);
		background: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 20%, rgb(255, 255, 255) 80%, rgba(255, 255, 255, 0) 100%);
		background: -o-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 20%, rgb(255, 255, 255) 80%, rgba(255, 255, 255, 0) 100%);
		background: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 20%, rgb(255, 255, 255) 80%, rgba(255, 255, 255, 0) 100%);
		background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 20%, rgb(255, 255, 255) 80%, rgba(255, 255, 255, 0) 100%);
	}
}

.event-quicknav {
	display: flex;
	position: fixed;
	top: 15vh;
	bottom: 50vh;
	left: -42vw;
	width: 50vw;
	transition: all 0.5s;
	overflow: auto;
	background-color: rgba(var(--dg3), 0.95);
	border-width: 0.2em 0.2em 0.2em 0;
	border-style: solid;
	border-color: rgb(var(--lg1));
	border-top-right-radius: 1.5em;
	border-bottom-right-radius: 1.5em;
	z-index: 10;
}

@media (min-width: 768px) {
	.event-quicknav {
			top: 4.5em;
			bottom: 1em;
			left: -11.75em;
			width: 15em;
	}
}

.event-quicknav:hover {
	left: 0;
}

.event-quicknav-info {
	position: sticky;
	top: 0;
	right: 0;
	width: 2em;
	height: 100%;
	font-size: min(4.5vw, 3vh);
	line-height: 2.25em;
	writing-mode: vertical-lr;
	text-orientation: mixed;
	text-align: center;
	background: -webkit-linear-gradient(90deg, rgba(var(--dg1), 0) 0%, rgba(var(--dg1), 1) 10%);
	background: -o-linear-gradient(90deg, rgba(var(--dg1), 0) 0%, rgba(var(--dg1), 1) 10%);
	background: -moz-linear-gradient(90deg, rgba(var(--dg1), 0) 0%, rgba(var(--dg1), 1) 10%);
	background: linear-gradient(90deg, rgba(var(--dg1), 0) 0%, rgba(var(--dg1), 1) 20%);
}

@media (min-width: 768px) {
	.event-quicknav-info {
			width: 2.5em;
			line-height: 3em;
			font-size: 1.5em;
	}
}

.event-list {
	display: flex;
	flex-direction: column;
	gap: 0.4em;
	margin: 0 0.75em;
	font-size: 2em;
	flex: 1;
	overflow-y: scroll;
}

@media (min-width: 768px) {
	.event-list {
			font-size: 1em;
	}
}

.event-list-item {
	text-align: center;
	text-decoration: none;
	color: #ffffff;
	font-size: 1.5em;
	border-radius: 0.8em;
	cursor: pointer;
	background-color: rgb(var(--dg1));
	border: 0.15em solid rgb(var(--lg1));
	padding: 0.1em 0.6em;
	transition: all 70ms ease-out;
}

.event-list-item:first-child {
	margin-top: 0.5em;
}

.event-list-item:last-child {
	margin-bottom: 0.5em;
}

.event-list-item:hover {
	border: 0.15em solid #ffffff;
	background-color: rgb(var(--lg2));
}

#top {
	display: flex;
	position: fixed;
	bottom: 0.67em;
	right: 0.67em;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 2em;
	color: rgb(var(--lg1));
	text-decoration: none;
	text-align: center;
	background-color: rgb(var(--dg1));
	border: rgb(var(--lg1)) 0.13em solid;
	border-radius: 50%;
	padding: 0.4em;
	height: 1.33em;
	width: 1.33em;
	z-index: 1;
	transition: all 85ms ease-in-out;
}

#top:hover {
	color: white;
	background: rgb(var(--lg2));
	border-color: white;
}

.newsletter-tree {
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 7em;
	bottom: 1em;
	left: 0;
	width: 8.3em;
	overflow: scroll;
	background-color: rgba(var(--dg1), 0.72);
	border-width: 0.2em 0.2em 0.2em 0;
	border-style: solid;
	border-color: rgb(var(--lg1));
	border-top-right-radius: 1.5em;
	border-bottom-right-radius: 1.5em;
}

@media (min-width: 768px) {
	.newsletter-tree {
		top: 4.5em;
	}
}

.newsletter-list{
	display: flex;
	flex-direction: column;
	margin: 0.75em 0.75em -0.75em 0;
	padding-bottom: 0.75em;
}

@media (min-width: 768px) {
	.newsletter-list {
		margin-left: 0.75em;
	}
}

.list-header {
	cursor: pointer;
	text-align: center;
	margin-bottom: 0.2em;
	font-size: 1.5em;
}

@media (min-width: 768px) {
	.list-header {
		font-size: 1.25em;
	}
}

.newsletter-sublist {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
}

.newsletter-list-item {
	border-radius: 0.8em;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	cursor: pointer;
	background-color: rgb(var(--dg1));
	border: 0.15em solid rgb(var(--lg1));
	border-left: none;
	padding: 0.1em 0.6em 0.1em 0.2em;
	font-size: 1.5em;
	transition: all 70ms ease-out;
}

.newsletter-list-item:hover {
	border: 0.15em solid #ffffff;
	background-color: rgb(var(--lg2));
}

@media (min-width: 768px) {
	.newsletter-list-item {
		border-radius: 0.8em;
		border: 0.15em solid rgb(var(--lg1));
		padding: 0.1em 0.6em;
		font-size: 1em;
	}
}

.newsletter-none {
	text-decoration: line-through;
	color: rgb(195, 195, 195);
	cursor: no-drop !important;
	font-size: 0.75em;
	margin-bottom: 0.33em !important;
	background-color: #696969 !important;
	border: 0.15em solid #696969 !important;
}

.newsletter-iframe-container {
	position: fixed;
	top: 7em;
	bottom: 1em;
	right: 0;
	left: 9.5em;
	height: auto;
	box-sizing: border-box;
	background-color: rgba(var(--dg1), 0.72);
	border-width: 0.2em 0 0.2em 0.2em;
	border-style: solid;
	border-color: rgb(var(--lg1));
	border-top-left-radius: 1.3em;
	border-bottom-left-radius: 1.3em;
}

@media (min-width: 768px) {
	.newsletter-iframe-container {
		top: 4.5em;
	}
}

.page-iframe {
	width: 100%;
	height: 100%;
	border-top-left-radius: 1.1em;
	border-bottom-left-radius: 1.1em;
}

.template {
	display: none;
}

.colours {
	display: flex;
	width: calc(100vw - 2em);
	height: calc(100vh - 2em);
	flex-direction: row;
	gap: 1em;
	padding: 1em;
}

.colourlist {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 1em;
	background-color: black;
	padding: 0.5em;
	border: 0.2em solid black;
	border-radius: 1.5em;
	transition: border 85ms ease-in-out;

	&:hover {
		border: 0.2em solid white;
	}
}

.colour {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	font-size: 2em;
	border-radius: 0.75em;
	cursor: pointer;
	transition: border 85ms ease-in-out;

	&.dr1 {
		background-color: rgb(var(--dr1));
		border: rgb(var(--dr1)) solid 0.1em;
	}
	&.dr2 {
		background-color: rgb(var(--dr2));
		border: rgb(var(--dr2)) solid 0.1em;
	}
	&.dr3 {
		background-color: rgb(var(--dr3));
		border: rgb(var(--dr3)) solid 0.1em;
	}
	&.lr1 {
		background-color: rgb(var(--lr1));
		border: rgb(var(--lr1)) solid 0.1em;
	}
	&.lr2 {
		background-color: rgb(var(--lr2));
		border: rgb(var(--lr2)) solid 0.1em;
	}
	&.lr3 {
		background-color: rgb(var(--lr3));
		border: rgb(var(--lr3)) solid 0.1em;
	}
	&.do1 {
		background-color: rgb(var(--do1));
		border: rgb(var(--do1)) solid 0.1em;
	}
	&.do2 {
		background-color: rgb(var(--do2));
		border: rgb(var(--do2)) solid 0.1em;
	}
	&.do3 {
		background-color: rgb(var(--do3));
		border: rgb(var(--do3)) solid 0.1em;
	}
	&.lo1 {
		background-color: rgb(var(--lo1));
		border: rgb(var(--lo1)) solid 0.1em;
	}
	&.lo2 {
		background-color: rgb(var(--lo2));
		border: rgb(var(--lo2)) solid 0.1em;
	}
	&.lo3 {
		background-color: rgb(var(--lo3));
		border: rgb(var(--lo3)) solid 0.1em;
	}
	&.dy1 {
		background-color: rgb(var(--dy1));
		border: rgb(var(--dy1)) solid 0.1em;
	}
	&.dy2 {
		background-color: rgb(var(--dy2));
		border: rgb(var(--dy2)) solid 0.1em;
	}
	&.dy3 {
		background-color: rgb(var(--dy3));
		border: rgb(var(--dy3)) solid 0.1em;
	}
	&.ly1 {
		background-color: rgb(var(--ly1));
		border: rgb(var(--ly1)) solid 0.1em;
	}
	&.ly2 {
		background-color: rgb(var(--ly2));
		border: rgb(var(--ly2)) solid 0.1em;
	}
	&.ly3 {
		background-color: rgb(var(--ly3));
		border: rgb(var(--ly3)) solid 0.1em;
	}
	&.dg1 {
		background-color: rgb(var(--dg1));
		border: rgb(var(--dg1)) solid 0.1em;
	}
	&.dg2 {
		background-color: rgb(var(--dg2));
		border: rgb(var(--dg2)) solid 0.1em;
	}
	&.dg3 {
		background-color: rgb(var(--dg3));
		border: rgb(var(--dg3)) solid 0.1em;
	}
	&.lg1 {
		background-color: rgb(var(--lg1));
		border: rgb(var(--lg1)) solid 0.1em;
	}
	&.lg2 {
		background-color: rgb(var(--lg2));
		border: rgb(var(--lg2)) solid 0.1em;
	}
	&.lg3 {
		background-color: rgb(var(--lg3));
		border: rgb(var(--lg3)) solid 0.1em;
	}
	&.dc1 {
		background-color: rgb(var(--dc1));
		border: rgb(var(--dc1)) solid 0.1em;
	}
	&.dc2 {
		background-color: rgb(var(--dc2));
		border: rgb(var(--dc2)) solid 0.1em;
	}
	&.dc3 {
		background-color: rgb(var(--dc3));
		border: rgb(var(--dc3)) solid 0.1em;
	}
	&.lc1 {
		background-color: rgb(var(--lc1));
		border: rgb(var(--lc1)) solid 0.1em;
	}
	&.lc2 {
		background-color: rgb(var(--lc2));
		border: rgb(var(--lc2)) solid 0.1em;
	}
	&.lc3 {
		background-color: rgb(var(--lc3));
		border: rgb(var(--lc3)) solid 0.1em;
	}
	&.db1 {
		background-color: rgb(var(--db1));
		border: rgb(var(--db1)) solid 0.1em;
	}
	&.db2 {
		background-color: rgb(var(--db2));
		border: rgb(var(--db2)) solid 0.1em;
	}
	&.db3 {
		background-color: rgb(var(--db3));
		border: rgb(var(--db3)) solid 0.1em;
	}
	&.lb1 {
		background-color: rgb(var(--lb1));
		border: rgb(var(--lb1)) solid 0.1em;
	}
	&.lb2 {
		background-color: rgb(var(--lb2));
		border: rgb(var(--lb2)) solid 0.1em;
	}
	&.lb3 {
		background-color: rgb(var(--lb3));
		border: rgb(var(--lb3)) solid 0.1em;
	}
	&.dp1 {
		background-color: rgb(var(--dp1));
		border: rgb(var(--dp1)) solid 0.1em;
	}
	&.dp2 {
		background-color: rgb(var(--dp2));
		border: rgb(var(--dp2)) solid 0.1em;
	}
	&.dp3 {
		background-color: rgb(var(--dp3));
		border: rgb(var(--dp3)) solid 0.1em;
	}
	&.lp1 {
		background-color: rgb(var(--lp1));
		border: rgb(var(--lp1)) solid 0.1em;
	}
	&.lp2 {
		background-color: rgb(var(--lp2));
		border: rgb(var(--lp2)) solid 0.1em;
	}
	&.lp3 {
		background-color: rgb(var(--lp3));
		border: rgb(var(--lp3)) solid 0.1em;
	}
	&:hover {
		border: white solid 0.1em;
	}
}

#notification {
	visibility: hidden;
	background-color: rgb(var(--dg1));
	color: white;
	text-align: center;
	border: rgb(var(--lg1)) solid 0.2em;
	border-radius: 1.5em;
	padding: 0.5em;
	position: fixed;
	z-index: 1;
	right: 0.5em;
	top: 0.5em;
	font-size: 2em;
	font-weight: 700;
}

#notification.show {
	visibility: visible;
	-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
	animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
	from {
		right: 0;
		opacity: 0;
	}
	to {
		right: 0.5em;
		opacity: 1;
	}
}

@keyframes fadein {
	from {
		right: 0;
		opacity: 0;
	}
	to {
		right: 0.5em;
		opacity: 1;
	}
}

@-webkit-keyframes fadeout {
	from {
		right: 0.5em;
		opacity: 1;
	}
	to {
		right: 0;
		opacity: 0;
	}
}

@keyframes fadeout {
	from {
		right: 0.5em;
		opacity: 1;
	}
	to {
		right: 0;
		opacity: 0;
	}
}