.card {
	background-color: var(--darkest3);
	border: 2px var(--darkest4) solid;
	padding: 10px;
	border-radius: 0.5rem;
	box-shadow: 0 0 15px var(--darkest3);
	margin: 10px 0;
	text-align: center;
}

/* Checkbox styling */

input[type='checkbox'] {
	cursor: pointer;
	margin-left: 5px;
	box-shadow: 0 1px 3px 0 var(--darkest1);
}

/* The checkbox container */
.container {
	position: relative;
	padding-left: 40px;
	cursor: pointer;
	user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}
/* Create a custom checkbox */
.container .checkmark {
	position: absolute;
	top: -10px;
	left: -8px;
	height: 40px;
	width: 40px;
	transition:
		background-color 0.3s,
		box-shadow 0.3s;
	border-radius: 10px;
	box-shadow: 0 1px 3px 0 var(--darkest4);
	background-color: var(--darkest3);
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
	box-shadow: 0 0 10px 1px var(--darkest4);
}
.container input:checked ~ .checkmark:hover {
	box-shadow: 0 0 10px 1px var(--darkest4);
}
.container input:checked ~ .checkmark:active {
	background-color: var(--darkest2);
	box-shadow: 0 1px 3px 0 var(--darkest4);
}
.container:active input ~ .checkmark {
	background-color: var(--darkest4);
	box-shadow: 0 1px 3px 0 var(--darkest4);
}
.container input:checked ~ .checkmark {
	transition:
		background-color 0.3s,
		box-shadow 0.3s;
	border-radius: 10px;
	box-shadow: 0 1px 3px 0 var(--darkest1);
	background-color: var(--darkest4);
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
	content: '';
	position: absolute;
	display: block;
	transition:
		transform 0.2s var(--ease),
		border-width 0.2s var(--ease),
		opacity 0.1s;
	opacity: 0;
	transform: rotate(0deg);
	border-width: 0;

	left: 10px;
	top: 10px;
	width: 20px;
	height: 20px;
	border-radius: 3px;
	border: solid var(--blue2);
	box-shadow:
		0 0 6px 0 var(--blue2),
		inset 0 0 3px 0 var(--blue2);
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
	border-width: 6px;
	transform: rotate(45deg);
	opacity: 1;
}

/* More Info link labels */
.moreInfoBtn {
	display: inline-flex;
	position: relative;
	justify-content: center;
	cursor: context-menu;
	width: 1rem;
	right: 2px;
	bottom: 5px;
}

.moreInfo {
	border-radius: 7px;
	background-color: var(--darkest2);
	box-shadow:
		5px 4px 20px var(--darkest3),
		inset 11px 7px 20px 0px var(--darkest2),
		0px 20px 20px 5px inset var(--darkest1);
	min-width: 275px;
	position: absolute;
	overflow: auto;
	text-align: center;
	max-height: 150px;
	color: var(--lightest1);
	line-height: 1.2;
	font-size: 1em;
	border: 2px solid var(--blue2);
	z-index: 3;
	margin-top: 2rem;
}
.moreInfo:not(.imgInfo) {
	padding: 1rem;
}
.moreInfo.imgInfo {
	max-width: 275px;
	min-width: max-content;
}
.moreInfo img {
	box-shadow: -1px -1px 6px var(--darkest1);
	margin: auto;
	border-radius: 0.25rem;
}

.external {
	display: flex;
	align-items: center;
	width: fit-content;
}
.external::after {
	content: url('https://amazinaxel.com/media/icons/external.svg');
	display: flex;
	position: relative;
	width: 1rem;
	height: 1rem;
	left: 3px;
  	bottom: 10px;
}
.sectionHeader .external::after {
	opacity: 0.3;
	bottom: 5px;
}

/* Permafrost inline logo */
.permafrostHeader {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  justify-content: center;
}

.permafrostHeader::before {
  content: url('https://amazinaxel.com/media/icons/permafrost-logo.svg');
  display: inherit;
  transform: rotate(-5deg);
  width: 40px;
  height: 40px;
  filter: drop-shadow(0px 0px 10px #fff);
}

/* Underlined text */
#hero h1, .embla__slide h2 {
	text-decoration: underline;
  	text-decoration-thickness: 0.2rem;
	text-decoration-color: var(--blue2);
}

/* Inputs */
textarea {
	resize: none;
	background: var(--darkest2);
	border: 5px solid var(--darkest4);
	box-shadow: 1px 1px 9px var(--darkest2);
	border-radius: 5px;
}
textarea:focus-visible,
input:not([type='range']):focus-visible {
	outline: 3px solid var(--blue2);
}

input[type='range']:hover {
	border: 2px solid var(--blue3);
}

::placeholder {
	color: #cdcdcd;
}

.coverCard.innerCard {
	text-align: center;
	position: relative;
}

a .coverCard.innerCard,
a .imgCard {
	scale: 1;
	transition: scale 0.2s var(--ease);
}

a .coverCard.innerCard:hover,
a .imgCard:hover {
	scale: 0.99;
}

a .coverCard.innerCard:active,
a .imgCard:active {
	scale: 0.95;
}

.coverCard::after {
	content: '';
	height: var(--size);
	width: var(--size);
	position: absolute;
	z-index: 1;
	left: calc(var(--size) / 4 * -1);
	background-size: cover;
	top: calc(var(--size) / 4 * -1);
	transform: rotateZ(-10deg);
	display: inline-block;
	background-image: var(--bg);
	filter: invert(50%) sepia(5%) saturate(2000%) hue-rotate(180deg) brightness(87%) blur(1px);
	opacity: 1;
	transition: 0.3s opacity;
}

.innerCard * {
	z-index: 2;
	position: inherit;
}

a:hover {
	text-decoration: underline;
	text-decoration-color: var(--blue1);
}

/* Image cards */
.imgCard {
	position: relative;
	overflow: hidden;
	height: 8rem;
	width: calc(100% - 4rem);
}

.imgCard h3 {
	white-space: nowrap;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
}
.imgCard .contentFader {
	height: 4rem;
}

.imgCard img {
	margin: -10px;
	width: calc(100% + 20px);
	max-width: calc(100% + 20px);
	height: 100%;
	object-fit: cover;
}

.imgCard picture::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 10rem;
	background-image: linear-gradient(to bottom, transparent, var(--darkest3) 100%);
}
/* Popups */

.popupBg {
	z-index: 10;
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: var(--darkest4);
	opacity: 0.8;
}

.popup {
	transform: translate(-50%, -50%);
	height: 30rem;
	width: 750px;
	position: fixed;
	left: 50%;
	top: 50%;
	z-index: 11;
	overflow-y: scroll;
}

/* Buttons */
.button,
button:not(.nostyle) {
	background-image: linear-gradient(220deg, var(--blue2) 0%, var(--blue3) 100%);
	border-radius: 5px;
	box-shadow: 0 0 10px 0 var(--blue2);
	padding: 10px;
	color: white;
	cursor: pointer; /* For <button> elements */
	text-decoration: none;
	transition:
		scale 0.3s cubic-bezier(0, 1.4, 0.5, 1.3),
		box-shadow 0.15s ease;
	border: 0;
	min-width: 15%;
	margin: 5px;
	border: 3px solid #ffffff5c;
}

.button:hover,
button:not(.nostyle):hover {
	scale: 1.02;
	box-shadow: 0 0 10px 3px var(--blue2);
}
.button:active,
button:not(.nostyle):active {
	scale: 0.98;
}

/* codeblocks */
pre,
:not(pre) > code {
	/* Applied to small & large codeblocks */
	background-color: var(--darkest2);
	padding: 1px 5px 2px 5px;
	border-radius: 5px;
	border: 2px solid var(--darkest4);
	color: var(--lightest1);
	line-height: 23px;
	transition:
		color 0.2s ease,
		background-color 0.2s ease,
		border 0.2s ease,
		box-shadow 0.2s ease;
}

pre {
	/* Applied only to large codeblocks */
	padding: 10px 8px 10px 8px;
	text-align: left;
	box-shadow: 3px 6px 14px var(--darkest2);
	margin-bottom: 10px;
	overflow-x: auto;
}

/* Inner card */

.innerCard {
	padding: 20px;
	background-color: var(--darkest2);
	border-radius: 5px;
	border: 3px solid var(--darkest4);
	text-align: left;
	margin-top: 15px;
	box-shadow:
		0 0 2rem var(--darkest2),
		inset 0rem -1rem 5rem 0px var(--darkest3);
	transition:
		background-color 0.2s ease,
		border 0.2s ease,
		box-shadow 0.2s ease;
	overflow: hidden;
}

.innerCard p:last-child {
	margin-bottom: 0;
}

/* Forms */

input:not([type='range']),
textarea {
	padding: 10px;
	background-color: var(--darkest3);
	border-radius: 5px;
	border: 0;
	margin: 10px;
	transition:
		background-color 0.2s ease,
		box-shadow 0.2s ease,
		color 0.2s ease;
	max-width: -webkit-fill-available;
	max-height: 400px;
	color: var(--complimentary);
	box-shadow: 0 0 10px var(--darkest3);
}

textarea {
	min-width: 200px;
	min-height: 100px;
}

label.heavy {
	display: block;
	font-weight: bold;
	font-size: 20px;
}

label {
	color: var(--complimentary);
	transition: color 0.2s ease;
}

/* Sticky admonitions */
.stickyAdmonition {
	display: flex;
	position: fixed;
	scale: 1;
	right: 1rem;
	z-index: 5;
	bottom: 1rem;
	background: var(--green);
	padding: 0.5rem;
	border-radius: 0.2rem;
	box-shadow: 0px 0px 20px 0px var(--green);
	transition: scale 0.05s ease-out;
}

.stickyAdmonition::before {
	content: url(https://amazinaxel.com/media/icons/check.svg);
	margin-right: 4px;
	height: 0;
}

.stickyAdmonition.alreadyCopied {
	scale: 1.05;
}

/* Subtext */
sub {
	color: var(--blue1);
}
sub a {
	color: var(--blue2) !important;
}

/* Admonitions */
.error {
	background-color: var(--red);
	border: 3px solid #cf7f87;
	box-shadow: 0 0 2rem 0 var(--red);
}

.warning {
	background-color: var(--orange);
	border: 3px solid #d9a393;
	box-shadow: 0 0 2rem 0 var(--orange);
}

.important {
	background-color: var(--blue3);
	border: 3px solid var(--blue2);
	box-shadow: 0 0 2rem 0 var(--blue3);
}

.note {
	background-color: var(--blue2);
	border: 3px solid var(--blue1);
	box-shadow: 0 0 2rem 0 var(--blue2);
}

.info {
	background-color: var(--darkest1);
	border: 3px solid var(--darkest2);
	box-shadow: 0 0 2rem 0 var(--darkest2);
}

.error.coverCard::after,
.warning.coverCard::after,
.important.coverCard::after,
.note.coverCard::after,
.info.coverCard::after {
	opacity: 0.3;
	filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) blur(2px);
}

/* Block quote styling */
blockquote {
	padding: 60px 80px 40px;
	position: relative;
	color: var(--lightest1);
	transition:
		color 0.2s ease,
		padding 0.2s ease;
	font-size: 35px;
	font-weight: 700px;
	text-align: center;
}

blockquote::before {
	content: '“';
	color: white;
	position: absolute;
	font-size: 16rem;
	left: 2rem;
	top: -3rem;
	transform: rotate(354deg);
	filter: invert(50%) sepia(5%) saturate(2000%) hue-rotate(180deg) brightness(87%) blur(1px);
	z-index: 0;
}

blockquote::after {
	content: '';
	bottom: 20px;
	margin-left: -100px;
	position: absolute;
	border-bottom: 4px solid var(--blue2);
	border-radius: 3px;
	width: 200px;
}

blockquote p {
	position: relative;
	z-index: 1;
}

.quoteParent.visible {
	display: block;
	padding: 10px;
	opacity: 1;
	scale: 1;
	margin-bottom: 15px;
	max-height: 1000px;
}

.quoteParent {
	transition:
		padding 0.7s cubic-bezier(0.5, 0, 0.2, 1.1),
		opacity 0.5s cubic-bezier(0.5, 0, 0.2, 1.1),
		margin-bottom 0.7s cubic-bezier(0.5, 0, 0.2, 1.1),
		scale 0.4s cubic-bezier(0.5, 0, 0.2, 1.1),
		max-height 0.7s cubic-bezier(0.5, 0, 0.2, 1.1);

	padding: 0;
	overflow: hidden;
	opacity: 0;
	scale: 0.9;
	max-height: 0;
}

img:not(.noImgStyle),
video:not(.noImgStyle) {
	border-radius: 10px;
	box-shadow:
		8px 14px 38px var(--darkest2),
		1px 3px 8px var(--darkest1);
	border: 5px solid var(--darkest4);
	transition:
		border 0.2s ease,
		box-shadow 0.2s ease;
	width: 100%;
}

hr {
	border-style: solid;
	color: var(--darkest4);
	background-color: var(--darkest4);
	border-radius: 1rem;
	transition: color 0.2s ease;
	height: 0.2rem;
}

/* Scrollbar & text selection styles */
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
::-webkit-scrollbar-corner {
	background: var(--darkest1);
}
::-webkit-scrollbar-track {
	background: var(--darkest1);
	border-radius: 10px;
}
::-webkit-scrollbar-thumb {
	background: var(--darkest3);
	border-radius: 4px;
	box-shadow: 0 1px 3px 0 var(--darkest3);
}
::selection {
	background-color: var(--blue2);
	color: var(--lightest1);
}

.card:target,
.innerCard:target {
	animation: animateTarget 1.5s cubic-bezier(0, 2, 1, 1);
}
@keyframes animateTarget {
	0% {
		position: relative;
		transform: scale(1);
	}
	70% {
		transform: scale(1.05);
	}
	100% {
		transform: scale(1);
	}
}

/* Skip to content accessibility button */
#skipToContent {
	position: absolute;
	top: -100px;
	padding: 15px;
	font-family: var(--headerFont);
}
#skipToContent:focus {
	top: 0;
}

/* Show more button */
a.showMoreBtn {
	display: flex;
	line-height: 1.5rem;
	text-decoration: none !important;
	justify-content: flex-end;
	margin: 0 0 1.5rem;
}
.showMoreBtn.otherWay {
	justify-content: left;
	flex-direction: row-reverse;
	gap: 5px;
}
.showMoreBtn::after {
	content: url(https://amazinaxel.com/media/icons/arrow-right.svg);
	margin-left: 4px;
	height: 0;
	filter: brightness(0) saturate(100%) invert(90%) sepia(22%) saturate(96%) hue-rotate(181deg)
		brightness(98%) contrast(88%);
	transition: transform 0.3s var(--ease);
}
.showMoreBtn:hover::after {
	transform: translateX(2px);
}
.showMoreBtn:active::after {
	transform: translateX(5px);
}

.showMoreBtn.otherWay::after {
	content: url(https://amazinaxel.com/media/icons/arrow-left.svg);
}
.otherWay:hover::after {
	transform: translateX(-2px);
}
.otherWay:active::after {
	transform: translateX(-5px);
}

/* Lists */
ul {
	list-style-type: square;
	padding-left: 1.5rem;
}
ul ul {
	list-style-type: circle;
}
ul::marker {
	color: var(--blue1);
}

input[type='range'] {
	appearance: none;
	height: 5px;
	opacity: 0.7;
	border-radius: 5px;
	width: 20%;
}

input[type='range']::-webkit-slider-thumb {
	appearance: none;
	width: 15px;
	height: 15px;
	background: var(--blue2);
	cursor: pointer;
	border-radius: 50%;
}

input[type='range']:hover {
	opacity: 1;
}

input::-webkit-slider-thumb,
input[type='range'] {
	transform: scale(1);
	transition: transform 0.3s var(--ease);
}

input:hover::-webkit-slider-thumb {
	transform: scale(1.5);
}