:root {
	--primary-bg-color: #242730;
	--primary-text-color: #bbc2cf;
	--error-text-color: #ff665cc0;
	--ok-text-color: #7bc275c0;

	--primary-font-family: "Departure Mono", "Fira Code", monospace;
}

@font-face {
	font-family: "Fira Code";
	src: url("../fonts/FiraCodeNerdFont-Regular.woff2") format("woff2");
}

@font-face {
	font-family: "Departure Mono";
	src: url("../fonts/DepartureMono-Regular.woff2") format("woff2");
	unicode-range: U+0020-007E, U+00A0-00FF;
}

@font-face {
	font-family: "Reem Kufi";
	src: url("../fonts/ReemKufi-Regular.woff2") format("woff2");
}

* {
	font-size: 14px;
	color: var(--primary-text-color);
	font-family: var(--primary-font-family);
	box-sizing: border-box;
	max-width: 100%;
}

@media screen and (min-width: 460px) {
	* {
		font-size: 16px;
	}
}

p {
	line-height: 1.5;
}

body {
	background-color: var(--primary-bg-color);
	overflow-x: hidden;
}

#window {
	border: 2px solid #bbc2cf80;
	border-radius: 5px;
	height: auto;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 20px;
	background-color: var(--primary-bg-color);
	font-family: var(--primary-font-family);
	min-height: 100vh;
}

@media screen and (max-width: 460px) {
	#window {
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 10px;
	}
}

@media screen and (max-width: 542px) {
	* {
		font-size: 14px;
	}
	.title-card-small {
		font-size: 100px;
	}
	.title-card-large {
		font-size: 11px;
	}
}

.frames {
	container-type: inline-size;
}

.fancy-3d {
	font-size: 130px;
	margin: auto;
	word-break: break-word;
	overflow-wrap: break-word;
	hyphens: auto;
}

@media screen and (max-width: 740px) {
	.fancy-3d {
		font-size: 100px;
	}
}

@media screen and (max-width: 600px) {
	.fancy-3d {
		font-size: 50px;
	}
}

.sub-heading {
	font-size: min(10cqw, 98px);
}

.caption-body {
	font-size: max(45px, 3vw);
}

.clickable {
	display: inline-block;
	background-color: var(--primary-text-color);
	color: var(--primary-bg-color);
	transform: translateY(-3px);
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
	transition:
		transform 0.08s,
		box-shadow 0.08s;
	cursor: pointer;
}

.clickable:hover {
	transform: translateY(-3px);
	box-shadow:
		0 3px 0 rgba(0, 0, 0, 0.5),
		0 0 8px currentColor;
}

.clickable:active {
	transform: translateY(0px);
	box-shadow: none;
}

.clickable::before {
	content: "[";
}

.clickable::after {
	content: "]";
}

.pre {
	margin: auto;
	white-space: pre;
}

main {
	overflow: auto;
	box-sizing: border-box;
}

footer {
	height: 40vh;
}

a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}

.highlight {
	-webkit-animation: 1.5s highlight 1.5s 1 normal forwards;
	animation: 1.5s highlight 1.5s 1 normal forwards;
	background-color: none;
	background: linear-gradient(90deg, #5c5b5b 50%, rgba(255, 255, 255, 0) 50%);
	background-size: 200% 100%;
	background-position: 100% 0;
}

.highlight.copy-clip {
	-webkit-animation: 1.5s highlight 1.5s 1 normal forwards;
	animation: 1.5s highlight 1.5s 1 normal forwards;
	background-color: none;
	background: linear-gradient(90deg, #3c486b 50%, rgba(255, 255, 255, 0) 50%);
	background-size: 200% 100%;
	background-position: 100% 0;
}

@-webkit-keyframes highlight {
	to {
		background-position: 0 0;
		transform: none;
		text-shadow: none;
	}
}

@keyframes highlight {
	to {
		background-position: 0 0;
	}
}

table {
	border-collapse: collapse;
}

td {
	vertical-align: top;
	text-align: left;
	padding: 5px;
}

.hidden {
	display: none;
}

.image {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
}

@media screen and (max-width: 800px) {
	.image {
		align-items: center;
		justify-content: center;
	}
}
.section-gap {
	margin-top: 24px;
	margin-bottom: 0;
}