:root {
	--primary: #7733FF;
	--primary-dark: #5511DD;
	
	--secondary: #FF3377;
	--secondary-dark: #DD1155;
	--secondary-light: #FFE5F0;

	--tertiary: #FF7700;
	--tertiary-dark: #DD5500;

	--quaternary: #00CCCC;
	--quaternary-dark: #00AAAA;

	--white: #FFFFFF;
	--black: #000000;
	--gray: #CCCCCC;
	--light-gray: #E7E7E7;

	--contrast-10: #FFFFFF;
	--contrast-10-10: #FFFFFF1A;
	--contrast-10-25: #FFFFFF3F;
	--contrast-11: #EEEEEE;
	--contrast-20: #CCCCCC;
	--contrast-21: #444444;
	--contrast-30: #111111;
	--contrast-30-10: #1111111A;
	--contrast-30-25: #1111113F;
	--contrast-01: #EEEEEE;
	--contrast-02: #FFFFFF;
	--contrast-03: #CCCCCC;
	--header: #111111;
	--console: #222233;
	/*Dont forget to set these in index.html*/

	--contrast-10-light: #FFFFFF;
	--contrast-10-10-light: #FFFFFF1A;
	--contrast-10-25-light: #FFFFFF3F;
	--contrast-11-light: #EEEEEE;
	--contrast-20-light: #CCCCCC;
	--contrast-21-light: #444444;
	--contrast-30-light: #111111;
	--contrast-30-10-light: #1111111A;
	--contrast-30-25-light: #1111113F;
	--contrast-01-light: #EEEEEE;
	--contrast-02-light: #FFFFFF;
	--contrast-03-light: #DDDDDD;
	--contrast-04-light: #CCCCCC;
	--header-light: #111111;
	--console-light: #222233;

	--contrast-10-dark: #111111;
	--contrast-10-10-dark: #1111111A;
	--contrast-10-25-dark: #1111113F;
	--contrast-11-dark: #222222;
	--contrast-20-dark: #444444;
	--contrast-21-dark: #DDDDDD;
	--contrast-30-dark: #FFFFFF;
	--contrast-30-10-dark: #FFFFFF1A;
	--contrast-30-25-dark: #FFFFFF3F;
	--contrast-01-dark: #000000;
	--contrast-02-dark: #444444;
	--contrast-03-dark: #111111;
	--contrast-04-dark: #000000;
	--header-dark: #000000;
	--console-dark: #000000;

	--theme-transition: none;

	--corner-path-large: polygon(
		0 0,
		calc(100% - 1.5rem) 0,
		100% 1.5rem,
		100% 100%,
		1.5rem 100%,
		0 calc(100% - 1.5rem)
	);
	--corner-path-large-inner: polygon(
		0 0,
		calc(100% - 1.3586rem) 0,
		100% 1.3586rem,
		100% 100%,
		1.3586rem 100%,
		0 calc(100% - 1.3586rem)
	);
	--corner-path-small: polygon(
		0 0,
		calc(100% - 0.5rem) 0,
		100% 0.5rem,
		100% 100%,
		0.5rem 100%,
		0 calc(100% - 0.5rem)
	);
	--corner-path-small-outer-0125: polygon(
		0 0,
		calc(100% - 0.5707rem) 0,
		100% 0.5707rem,
		100% 100%,
		0.5707rem 100%,
		0 calc(100% - 0.5707rem)
	);
	--corner-path-small-outer-025: polygon(
		0 0,
		calc(100% - 0.6414rem) 0,
		100% 0.6414rem,
		100% 100%,
		0.6414rem 100%,
		0 calc(100% - 0.6414rem)
	);

	--transition-timing: cubic-bezier(.17,.84,.44,1);
}

/*########################==========================########################*/
/*########################		Fonts				########################*/
/*########################==========================########################*/

/* License: /fonts/anta-OFL.txt */
@font-face {
	font-family: 'anta';
	src: url('fonts/anta-regular-webfont.woff2') format('woff2'),
		 url('fonts/anta-regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

/* License: /fonts/iceberg-OFL.txt */
@font-face {
	font-family: 'iceberg';
	src: url('fonts/iceberg-regular-webfont.woff2') format('woff2'),
		 url('fonts/iceberg-regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

/* License: /fonts/iceland-OFL.txt */
@font-face {
	font-family: 'iceland';
	src: url('fonts/iceland-regular-webfont.woff2') format('woff2'),
		 url('fonts/iceland-regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

/* License: /fonts/michroma-OFL.txt */
@font-face {
	font-family: 'michroma';
	src: url('fonts/michroma-regular-webfont.woff2') format('woff2'),
		 url('fonts/michroma-regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}


/* License: /fonts/tektur-OFL.txt */
@font-face {
	font-family: 'tektur';
	src: url('fonts/tektur-webfont.woff2') format('woff2');
	font-weight: 400 900;
	font-stretch: 75% 100%;
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

/*########################==========================########################*/
/*########################		Base				########################*/
/*########################==========================########################*/
* {
	user-select: none;
	box-sizing: border-box;
	margin: 0;
	padding: 0;

	font-family: 'tektur', sans-serif;
	font-variation-settings: 'wght' 600;

	transition: var(--theme-transition);
}

html {
	font-size: 125%;
}
body {
	background: var(--contrast-11);
	height: 100vh;
	min-height: 100vh;
}

.app-content {
	display: flex;
	flex-direction: column;
	height: 100%;
}

#app-main {
	flex: 1;
	overflow: hidden;
}

label {
	display: block;
	margin-bottom: 0.5rem;
	font-weight: 600;
	color: var(--contrast-21);
}

.hidden {
	display: none;
}
.soft-hidden {
	opacity: 0;
}

.container {
	max-width: 75rem;
	margin: 0 auto;
	padding: 2rem;
}

.logo {
	width: 2rem;
	height: 2rem;
	margin-right: 1rem;
}

.logo-colored{
	width: 2rem;
	height: 2rem;
	margin-right: 1rem;
	background-color: var(--contrast-30);

	mask-image: url('/MNet.svg');
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;

	/* Webkit fallback */
	-webkit-mask-image: url('/MNet.svg');
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
}

.link-no-style {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

.center {
	left: 50%;
	transform: translateX(-50%);
}

/*########################==========================########################*/
/*########################		Old buttons			########################*/
/*########################==========================########################*/
/*.btn-border {
	width: auto;
	background-color: var(--primary);
	padding: 0.25rem;
	clip-path: var(--corner-path-small-outer-025);
	box-sizing: border-box;
	margin-top: 1rem;
	margin-right: 1rem;
	display: inline-block;
	transition: transform 0.2s var(--transition-timing);
}

button {
	padding: 0.35rem 1.25rem;
	background-color: var(--primary);
	border: none;
	color: var(--contrast-10);
	font-size: 1rem;
	clip-path: var(--corner-path-small);
	cursor: pointer;
}

.btn-border:has(button:hover) {
	transform: scale(1.05);
}
button:hover {
	background-color: var(--primary-dark);
}*/
/*########################==========================########################*/
/*########################		Buttons				########################*/
/*########################==========================########################*/
.btn-wrapper {
	position: relative;
	display: inline-block;
	overflow: visible;
}
.btn-margin {
		margin: 1rem 3rem 0 0;
}
.btn-wrapper::before,
.btn-wrapper::after {
	content: "";
	position: absolute;
	top: 50%;
	z-index: 0;
	width: 5rem;
	height: 2rem;
	background:
		repeating-linear-gradient(
			-45deg,
			transparent 0,
			var(--primary) 0.03rem,
			var(--primary) 0.18rem,
			transparent 0.21rem,
			transparent 0.51rem
		);
	mask-image: linear-gradient(to right, transparent, black 30%, black 70%, transparent);
	mask-mode: alpha;
	mask-repeat: no-repeat;
	mask-size: 100% 100%;

	/* WebKit fallback */
	-webkit-mask-image: linear-gradient(to right, transparent, black 30%, black 70%, transparent);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	transform: translateY(-50%);
	transition: clip-path 0.2s var(--transition-timing);
}
.btn-wrapper::before {
	left: calc(100% - 1rem);
	clip-path: inset(0 5rem 0 0);
}

.btn-wrapper::after {
	right: calc(100% - 1rem);
	clip-path: inset(0 0 0 5rem);
}

.btn-wrapper:has(button:hover)::before,
.btn-wrapper:has(button:hover)::after {
	clip-path: inset(0);
}

button {
	cursor: pointer;
	border: none;
	z-index: 1;
	position: relative;
	padding: 0.25rem;
	background-color: var(--primary);
	clip-path: var(--corner-path-small-outer-025);
	box-sizing: border-box;
	transition: transform 0.2s var(--transition-timing);
}
button:hover {
	transform: scale(1.05);
}

button:active {
	transform: scale(0.95);
}

button div {
	display: block;
	position: relative;
	padding: 0.35rem 1.25rem;
	background-color: var(--primary);
	color: var(--white);
	font-size: 1rem;
	clip-path: var(--corner-path-small);
	transition: background-color 0.2s var(--transition-timing);
}
button div svg {
	display: block;
	margin: auto;
}
.btn-square div {
	padding: 0.35rem 0.35rem;
	width: 2rem;
	height: 2rem;
}
.btn-square-small div {
	padding: 0.1rem;
	width: 1.75rem;
	height: 1.75rem;
}
button:hover div {
	background-color: var(--primary-dark);
}

.btn-w-secondary::before,
.btn-w-secondary::after {
	background:
		repeating-linear-gradient(
			-45deg,
			transparent 0,
			var(--secondary) 0.03rem,
			var(--secondary) 0.18rem,
			transparent 0.21rem,
			transparent 0.51rem
		);
}

.btn-w-tertiary::before,
.btn-w-tertiary::after {
	background:
		repeating-linear-gradient(
			-45deg,
			transparent 0,
			var(--tertiary) 0.03rem,
			var(--tertiary) 0.18rem,
			transparent 0.21rem,
			transparent 0.51rem
		);
}

.btn-w-quaternary::before,
.btn-w-quaternary::after {
	background:
		repeating-linear-gradient(
			-45deg,
			transparent 0,
			var(--quaternary) 0.03rem,
			var(--quaternary) 0.18rem,
			transparent 0.21rem,
			transparent 0.51rem
		);
}

.btn-w-white::before,
.btn-w-white::after {
	background:
		repeating-linear-gradient(
			-45deg,
			transparent 0,
			var(--white) 0.03rem,
			var(--white) 0.18rem,
			transparent 0.21rem,
			transparent 0.51rem
		);
}

.btn-w-contrast::before,
.btn-w-contrast::after {
	background:
		repeating-linear-gradient(
			-45deg,
			transparent 0,
			var(--contrast-30) 0.03rem,
			var(--contrast-30) 0.18rem,
			transparent 0.21rem,
			transparent 0.51rem
		);
}

.btn-w-medium::before {
	width: 3rem !important;
	clip-path: inset(0 3rem 0 0);
}
.btn-w-medium::after {
	width: 3rem !important;
	clip-path: inset(0 0 0 3rem);
}

.btn-w-small::before {
	width: 2rem !important;
	clip-path: inset(0 2rem 0 0);
}
.btn-w-small::after {
	width: 2rem !important;
	clip-path: inset(0 0 0 2rem);
}



/*########################==========================########################*/
/*########################		Errors				########################*/
/*########################==========================########################*/
.error {
	color: var(--secondary);
	background-color: var(--secondary-light);
	font-size: 0.9rem;
	text-align: center;
	padding: 0.5rem;
	clip-path: var(--corner-path-small);
}
.error-border {
	background-color: var(--secondary);
	padding: 0.15rem;
	clip-path: var(--corner-path-small-outer-0125);
	box-sizing: border-box;
	margin-bottom: 1rem;
}


/*########################==========================########################*/
/*########################		Header				########################*/
/*########################==========================########################*/
.header {
	background-color: var(--header);
	height: 4rem;
	color: var(--white);
	padding: 1rem 2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	box-shadow: 0 0.125rem 0.5rem var(--contrast-30-10);
	flex-shrink: 0;
}

.header .brand {
	display: flex;
	align-items: center;
}

.header .btn-wrapper {
	display: flex;
	align-items: center;
}

.header h1 {
	font-size: 1.5rem;
	margin: 0;
}

.nav {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 1.5rem;
	align-items: center;
	text-align: center;
}

.nav a {
	color: var(--white);
	text-decoration: none;
	font-weight: 500;
	transition: color 0.2s var(--transition-timing);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.nav a:hover {
	color: var(--primary);
}
/*################################################==========================################################################*/
/*################################################		Cards				################################################*/
/*################################################==========================################################################*/

.card {
	background-color: var(--contrast-10);
	clip-path: var(--corner-path-large);
	padding: 1rem;
	margin-bottom: 2rem;
}

.card h2 {
	color: var(--contrast-30);
	margin-bottom: 1rem;
	font-size: 1.25rem;
	display: flex;
	align-items: center;
}

.card p {
	color: var(--contrast-21);
	line-height: 1.6;
}




/*########################==========================########################*/
/*########################		Styling/colors		########################*/
/*########################==========================########################*/
.primary {
	color: var(--primary);
}


.secondary {
	color: var(--secondary);
}
.btn-secondary {
	background-color: var(--secondary) !important;
}

.btn-secondary:hover div {
	background-color: var(--secondary-dark) !important;
}

.btn-secondary div {
	background-color: var(--secondary) !important;
}

.tertiary {
	color: var(--tertiary);
}
.btn-tertiary {
	background-color: var(--tertiary) !important;
}

.btn-tertiary:hover div {
	background-color: var(--tertiary-dark) !important;
}

.btn-tertiary div {
	background-color: var(--tertiary) !important;
}

.quaternary {
	color: var(--quaternary);
}
.btn-quaternary {
	background-color: var(--quaternary) !important;
}

.btn-quaternary:hover div {
	background-color: var(--quaternary-dark) !important;
}

.btn-quaternary div {
	background-color: var(--quaternary) !important;
}


.btn-white {
	background-color: var(--white) !important;
}

.btn-white div {
	background-color: var(--white) !important;
	color: var(--black) !important;
}

.btn-white:hover div {
	background-color: var(--gray) !important;
}


.btn-contrast {
	background-color: var(--contrast-30) !important;
}

.btn-contrast div {
	background-color: var(--contrast-30) !important;
	color: var(--contrast-01) !important;
}

.btn-contrast:hover div {
	background-color: var(--contrast-21) !important;
}



/*########################==========================########################*/
/*########################		Login modal			########################*/
/*########################==========================########################*/

.modal {
	margin-top: 4rem;
	inset: 0;
	z-index: 10;
	position: fixed;
	width: 100%;
	height: 100%;
	display: none;
	align-items: center;
	justify-content: center;
}
.modal.block-content {
	background-color: var(--contrast-30-10);
	-webkit-backdrop-filter: blur(6px) saturate(140%);
	backdrop-filter: blur(6px) saturate(140%);
	will-change: backdrop-filter;
}
.modal.show {
	display: flex;
}

.login-container {
	position: relative;
	margin: 0 auto;
	max-width: 20rem;
	left: auto;
	top: auto;
	margin-bottom: 8rem;
	background-color: var(--contrast-10);
	clip-path: var(--corner-path-large);
}

.login-header {
	background-color: var(--header);
	padding: 1rem;
	position: relative;
}

.login-header .logo {
	position: absolute;
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
	width: 2rem;
	height: 2rem;
}

.login-header h2 {
	margin: 0;
	text-align: center;
	color: var(--white);
	font-size: 1.5rem;
}

.login-body {
	padding: 2rem;
}

.login-body .btn-wrapper {
	display: block;
	margin: 2rem auto 0;
	width: max-content;
}


input[type="text"],
input[type="password"] {
	width: 100%;
	padding: 0.6rem;
	clip-path: var(--corner-path-small);
	border: none;
	outline: none;
	font-size: 1rem;
	background-color: var(--contrast-10);
	color: var(--contrast-30);
}

input[type="text"]:focus,
input[type="password"]:focus {
	border: none;
	outline: none;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
	-webkit-box-shadow: 0 0 0px 1000px var(--contrast-11) inset;
	-webkit-text-fill-color: var(--contrast-21);
}

.input-border {
	background-color: var(--contrast-20);
	padding: 0.15rem;
	clip-path: var(--corner-path-small-outer-0125);
	box-sizing: border-box;
	margin-bottom: 1rem;
	transition: background-color 0.2s var(--transition-timing);
}

.input-border:has(input:focus) {
	background-color: var(--primary);
}



/*########################==========================########################*/
/*########################		Console				########################*/
/*########################==========================########################*/
.console {
	margin: 0 1rem;
	background-color: var(--console);
	color: var(--white);
	clip-path: var(--corner-path-large);
	padding: 1rem;
	padding-top: 0;
	line-height: 1.1;
	font-size: 0.9rem;
	height: 20rem;
	white-space: nowrap;
}

.status-tag {
	display: inline-block;
	position: relative;
	width: 6ch;
	text-align: center;
	white-space: nowrap;
	margin-right: 0.25rem;
}

/* inject the brackets */
.status-tag::before {
	content: "[";
	position: absolute;
	left: 0;
}

.status-tag::after {
	content: "]";
	position: absolute;
	right: 0;
}