@import url(./reset-style.css);
@import url(./base-style.css);
@import url(./default-references.css);

.unscrollable {
	overflow: hidden;
}

.unscrollable-x {
	overflow-x: hidden;
}

.unscrollable-y {
	overflow-y: hidden;
}

/* Start þes Metro-Stylings */

#metro-pane {
	position: fixed;
	padding: 0;
	top: 0;
	right: 0;
	height: 100%;
	background-color: var(--metro-colours);
	border-style: solid;
	border-width: 0;
	border-left-width: 0.0625rem;
	border-color: var(--metro-colours-border);
	width: var(--metro-pane-width-default);
	max-width: 100vw;
	display: flex;
	flex-direction: column;
	color: var(--metro-font-colour);
	font-family: var(--metro-pane-font-family);
	animation-name: paneSlideIn;
	animation-duration: 0.3s;
	animation-timing-function: var(--metro-pane-sliding-animation);
	overflow-y: auto;
	overflow-x: hidden;
	user-select: none;
}

#metro-pane::selection {
	background-color: transparent;
}

#metro-pane > div {
	display: flex;
	flex-direction: column;
}

@keyframes paneSlideIn {
	0% {
		right: calc(var(--metro-pane-width-default) * -1)
	}

	100% {
		right: 0;
	}
}

#metro-pane > h2 {
	padding: var(--metro-pane-x-padding);
	padding-top: 1.85rem;
	padding-bottom: 0.875rem;
	font-size: 1.7rem;
	font-family: "Segoe UI Semilight";
	margin: 0;
}

#metro-pane button {
	text-align: start;
	font-size: var(--metro-pane-button-font-size);
	padding-left: var(--metro-pane-content-x-padding);
	padding-right: var(--metro-pane-content-x-padding);
	padding-top: var(--metro-pane-element-padding);
	padding-bottom: var(--metro-pane-element-padding);
	transform: var(--metro-pane-button-scale);
	transition-duration: 0.05s;
	transition-property: transform;
	transition-timing-function: ease-in-out;
}

#metro-pane .metro-toggle {
	padding-top: var(--metro-pane-element-padding);
	padding-bottom: var(--metro-pane-element-padding);
	font-size: 1rem;
	font-weight: 100;
	padding-left: var(--metro-pane-content-x-padding);
	padding-right : var(--metro-pane-content-x-padding);
}

#metro-pane button:hover {
	background-color: var(--metro-colours-hover);
}

#metro-pane button:active:hover {
	transform: var(--metro-pane-button-active-scale);
	transition-duration: 0.05s;
	transition-property: transform;
	transition-timing-function: ease-in-out;
}

/* Normally used by ID "site-title" */

#metro-pane button:disabled {
	background-color: unset;
	color: var(--metro-colours-hover);
}

#metro-pane button:active:disabled {
	transform: none;
}

#metro-pane button:focus-visible {
	outline-color: #ffffff;
	outline-width: 2px;
	outline-offset: -2px;
	outline-style: solid;
}

#metro-pane.closed {
	right: calc(var(--metro-pane-width-default) * -1);
	animation-name: paneSlideOut;
	animation-duration: 0.3s;
	animation-timing-function: var(--metro-pane-sliding-animation);
}

#metro-pane.never-called {
	display: none;
}

@keyframes paneSlideOut {
	0% {
		right: 0;
		display: flex;
	}

	100% {
		right: calc(var(--metro-pane-width-default) * -1);
		display: none;
	}
}

.checkbox-slot {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	height: var(--metro-pane-button-height);
}

.checkbox-slot > label {
	font-weight: bold;
	font-size: var(--metro-pane-button-font-size);
}

.checkbox-slot > .metro-check {
	margin-right: 0.75rem;
	padding: 0.0625rem;
}

.checkbox-slot > input[type="color"] {
	width: 100%;
}

.metro-check input[type="checkbox"] {
	opacity: 0;
	height: 0;
	width: 0;
	position: absolute;
}

.metro-check {
	position: relative;
	height: 1.1875rem;
	width: 3.125rem;
	border-width: 0.125rem;
	border-style: solid;
	border-color: hsl(0deg 100% 100% / 0.4);
}

.metro-check:focus-visible {
	outline-offset: 5px;
	outline-style: dotted;
}

/* The grey, hover-affected area */

.metro-check > span {
	display: block;
	background-color: var(--metro-colours-hover);
	height: 100%;
	width: 100%;
}

/* As long as the switch is off, and as long as the switch is on and being pressed, the slider should go all the way to the left. */

.metro-check > span:before,
.metro-check:active > input[type="checkbox"]:checked + span:before {
	position: absolute;
	background-color: #FFFFFF;
	content: "";
	height: 1.1875rem;
	width: 0.75rem;
	top: var(--metro-pane-toggle-slider-border-adjust);
	left: var(--metro-pane-toggle-slider-border-adjust);
}

/* As long as the switch is off and being hovered over, and as long as the switch is on and being hovered, turn the span grey. */

.metro-check:hover > span,
.metro-check:hover > input[type="checkbox"]:checked + span {
	background-color: var(--metro-colours-toggle-hover);
}

/* As long as the switch is on, and as long as the switch is off and being pressed, the slider should go to the right. */

.metro-check > input[type="checkbox"]:checked + span:before,
.metro-check:active > span:before {
	top: var(--metro-pane-toggle-slider-border-adjust);
	left: initial;
	right: var(--metro-pane-toggle-slider-border-adjust);
}

/* As long as the switch off, being pressed and being hovered over, and as long as the switch is on, the span should turn dark. */

.metro-check:active:hover > span,
.metro-check > input[type="checkbox"]:checked + span {
	background-color: var(--metro-colours-border);
}

button.metro-style {
	border-style: solid;
	border-width: 0.185em;
	border-color: #ffffff;
	padding: 0.25em 0.75em;
	background-color: var(--metro-colours);
	color: var(--metro-font-colour);
}

button.metro-style:hover {
	background-color: var(--metro-colours-hover);
}

button.metro-style:active {
	background-color: #ffffff;
	color: #000000;
}

.metro-colours-element {
	height: fit-content;
	width: fit-content;
	background-color: var(--metro-colours);
}

/* End þes Metro-Stylings */

#error {
	margin: 0.5rem 0rem;
	background-color: #8b1010;
	padding: 0.5rem;
	border-radius: 0.625rem;
	color:#FFFFFF;
	width: fit-content;
}

/* Only Classes and IDs should be used here.*/