:root {
	font-family: system-ui;
}

@media (prefers-color-scheme: light) {
	:root {
		--primary-colour: #4cc3ff;
		--secondary-colour: #ff884c;
		--nutral-colour: #E5E7EB;
		--error_colour: #ff4e2f;
		--warning-colour: #ffbf00;
		--success-colour: #A5D601;
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--primary-colour: #0c88db;
		--secondary-colour: #db5f0c;
		--nutral-colour: #2D3138;
		--error_colour: #D93526;
		--warning-colour: #ff8d00;
		--success-colour: #8cae00;
	}
}

main {
	max-width: 78.125rem;
	margin: auto;
}

.main-section {
	visibility: hidden;
}

.main-section.show {
	visibility: visible;
}

.global-footer {
	font-size: 0.75rem;
	opacity: 0.7;
	text-align: center;
}

[inert] {
	opacity: 0.5;
}

/* Input Styles */
input[type=button], input[type=submit] {
	background-color: var(--primary-colour);
	border-radius: 0.25rem;
	border: none;
	cursor: pointer;
	font-weight: bold;
	margin: 0.25rem 0;
	padding: 0.5rem 1rem;
	text-decoration: none;
}

input[type=text], input[type=password], textarea {
	box-sizing: border-box;
	margin: 0.25rem 0;
	padding: 0.5rem;
}

fieldset {
	border: none;
}

/* Shared Classes */
.header-container {
	align-items: center;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	margin-bottom: 1rem;
}

.site-header {
	cursor: pointer;
	grid-column: 1;
	justify-self: left;
	text-align: left;
}

.page-header {
	grid-column: 2;
	justify-self: center;
	text-align: center;
}

.header-actions {
	display: flex;
	gap: 0.5rem;
	grid-column: 3;
	justify-self: end;
	visibility: hidden;
}

.header-actions.auth-ready {
	visibility: visible;
}

a {
	color: var(--primary-colour);
	font-weight: bold;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

.user-display {
	align-items: center;
	cursor: pointer;
	display: inline-flex;
	gap: 0.5rem;
}

.user-icon {
	border-radius: 0.25rem;
}

input.logout-button {
	background-color: var(--secondary-colour);
}

input.register-button {
	background-color: var(--secondary-colour);
}

/* Standard Layout Styles */
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 0.75rem; }
.mr-4 { margin-right: 1rem; }
.mr-5 { margin-right: 1.25rem; }
.mr-6 { margin-right: 1.5rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-3 { margin-left: 0.75rem; }
.ml-4 { margin-left: 1rem; }
.ml-5 { margin-left: 1.25rem; }
.ml-6 { margin-left: 1.5rem; }
.ma-1 { margin: 0.25rem; }
.ma-2 { margin: 0.5rem; }
.ma-3 { margin: 0.75rem; }
.ma-4 { margin: 1rem; }
.ma-5 { margin: 1.25rem; }
.ma-6 { margin: 1.5rem; }
.pt-1 { padding-top: 0.25rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-3 { padding-top: 0.75rem; }
.pt-4 { padding-top: 1rem; }
.pt-5 { padding-top: 1.25rem; }
.pt-6 { padding-top: 1.5rem; }
.pr-1 { padding-right: 0.25rem; }
.pr-2 { padding-right: 0.5rem; }
.pr-3 { padding-right: 0.75rem; }
.pr-4 { padding-right: 1rem; }
.pr-5 { padding-right: 1.25rem; }
.pr-6 { padding-right: 1.5rem; }
.pb-1 { padding-bottom: 0.25rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-3 { padding-bottom: 0.75rem; }
.pb-4 { padding-bottom: 1rem; }
.pb-5 { padding-bottom: 1.25rem; }
.pb-6 { padding-bottom: 1.5rem; }
.pl-1 { padding-left: 0.25rem; }
.pl-2 { padding-left: 0.5rem; }
.pl-3 { padding-left: 0.75rem; }
.pl-4 { padding-left: 1rem; }
.pl-5 { padding-left: 1.25rem; }
.pl-6 { padding-left: 1.5rem; }
.pa-1 { padding: 0.25rem; }
.pa-2 { padding: 0.5rem; }
.pa-3 { padding: 0.75rem; }
.pa-4 { padding: 1rem; }
.pa-5 { padding: 1.25rem; }
.pa-6 { padding: 1.5rem; }
.full-width { width: 100%; }

/* Snackbar */
#snackbar {
	border-radius: 0.25rem;
	bottom: 1.5rem;
	font-weight: bold;
	left: 50%;
	max-width: 90%;
	min-width: 15.625rem;
	opacity: 0;
	padding: 0.75rem 1rem;
	position: fixed;
	text-align: center;
	transform: translateX(-50%);
	visibility: hidden;
	z-index: 1000;
}

#snackbar.snackbar-success {
	background-color: var(--success-colour);
}

#snackbar.snackbar-warning {
	background-color: var(--warning-colour);
}

#snackbar.snackbar-error {
	background-color: var(--error_colour);
}

#snackbar.show {
	animation: snackbar-fade-in 0.25s ease-out forwards;
	bottom: 2rem;
	opacity: 1;
	visibility: visible;
}

#snackbar.hide {
	animation: snackbar-fade-out 0.25s ease-in forwards;
	visibility: visible;
}

@keyframes snackbar-fade-in {
	0% {
		opacity: 0;
		bottom: 1.5rem;
	}
	100% {
		opacity: 1;
		bottom: 2rem;
	}
}

@keyframes snackbar-fade-out {
	0% {
		opacity: 1;
		bottom: 2rem;
	}
	100% {
		opacity: 0;
		bottom: 1.5rem;
		visibility: hidden;
	}
}