body {
	font-family: 'Arbutus Slab', serif;
	padding: 30px 50px;
	background-color: #0b1f1f;
	background-image:
		repeating-linear-gradient(
			0deg,
			rgba(94, 234, 212, 0.03) 0px,
			rgba(94, 234, 212, 0.03) 1px,
			transparent 1px,
			transparent 3px
		);
	color: #b0e0e0;
	max-width: 650px;
	margin: 0 auto;
	letter-spacing: 0.02em;
	line-height: 1.6;
	font-size: 1.3rem;
}

a {
	text-decoration: none;
	color: #5eead4;
	border-bottom: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='3' viewBox='0 0 6 3'%3E%3Cpath d='M0 1.5 Q 1.5 0 3 1.5 T 6 1.5' fill='none' stroke='%232d6a6a' stroke-width='1'/%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-position: 0 100%;
	background-size: 6px 3px;
	padding-bottom: 2px;
	transition: color 0.2s ease, background-image 0.2s ease;
}

a:hover {
	text-decoration: none;
	color: #7fffd4;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='3' viewBox='0 0 6 3'%3E%3Cpath d='M0 1.5 Q 1.5 0 3 1.5 T 6 1.5' fill='none' stroke='%237fffd4' stroke-width='1'/%3E%3C/svg%3E");
}

h1, h2, h3 {
	line-height: 1.1;
	color: #ccfbf1;
	font-weight: 400;
}

h1 {
	font-family: 'Jacquard 24 Charted', system-ui;
	text-align: left;
	color: #5eead4;
	letter-spacing: 0.05em;
	font-size: 3.5rem;
	text-shadow: 2px 2px 0 #1a3a3a, 4px 4px 0 rgba(94, 234, 212, 0.15);
	margin-bottom: 1.8rem;
	margin-top: 0.5rem;
}

.link {
	font-family: 'Reddit Mono', sans-serif;
	text-align: right;
	font-size: 0.85rem;
	margin-bottom: 1.8rem;
	letter-spacing: 0.05em;
}

.link a {
	color: #99f6e4;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='3' viewBox='0 0 6 3'%3E%3Cpath d='M0 1.5 Q 1.5 0 3 1.5 T 6 1.5' fill='none' stroke='%232d6a6a' stroke-width='1'/%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-position: 0 100%;
	background-size: 6px 3px;
	padding-bottom: 2px;
}

.link a:hover {
	color: #ccfbf1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='3' viewBox='0 0 6 3'%3E%3Cpath d='M0 1.5 Q 1.5 0 3 1.5 T 6 1.5' fill='none' stroke='%23ccfbf1' stroke-width='1'/%3E%3C/svg%3E");
}

h3 {
	font-family: 'Libre Barcode 128 Text', cursive;
	font-size: 2rem;
	margin: 0 0 0.5rem 0;
	font-weight: 400;
	letter-spacing: 0.05em;
}

h3 a {
	font-family: 'Libre Barcode 128 Text', cursive;
	color: #99f6e4;
	background-image: none;
	border-bottom: none;
	letter-spacing: 0.05em;
	padding-bottom: 0;
}

h3 a:hover {
	color: #ccfbf1;
	background-image: none;
	border-bottom: none;
	text-shadow: 1px 1px 0 #1a3a3a;
}

.thought {
	position: relative;
	padding: 14px 16px;
	background: #132b2b;
	border-radius: 2px;
	margin-bottom: 12px;
	border: 1px solid transparent;
	box-shadow: 3px 3px 0 #0a1919;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.thought::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 2px;
	padding: 1px;
	background-image:
		repeating-linear-gradient(
			45deg,
			#2d6a6a 0px,
			#2d6a6a 2px,
			#5eead4 2px,
			#5eead4 4px,
			#2d6a6a 4px,
			#2d6a6a 6px,
			#1e4040 6px,
			#1e4040 8px
		);
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

.thought:hover {
	transform: translate(-1px, -1px);
	box-shadow: 4px 4px 0 #0a1919;
}

.thought:target {
	padding: 13px 15px;
	border-radius: 2px;
	background: #1a3a3a;
	box-shadow: 3px 3px 0 #5eead4, 0 0 0 1px #5eead4 inset;
}

.thought:target::before {
	display: none;
}

hr {
	border: none;
	height: 1px;
	background: repeating-linear-gradient(
		90deg,
		#2d6a6a 0px,
		#2d6a6a 6px,
		transparent 6px,
		transparent 12px
	);
	margin: 35px 0 20px;
}

p {
	color: #b0e0e0;
	line-height: 1.7;
}

p a {
	color: #5eead4;
}

p a:hover {
	color: #7fffd4;
}

.back-to-top {
	text-align: center;
	margin-top: 20px;
	margin-bottom: 10px;
	font-family: 'Tiny5', sans-serif;
	font-size: 0.9rem;
	letter-spacing: 0.1em;
}
.back-to-top a {
	color: #5eead4;
	border-bottom: none;
	background-image: none;
	transition: color 0.2s ease, text-shadow 0.2s ease;
}

.back-to-top a:hover {
	color: #7fffd4;
	border-bottom: none;
	background-image: none;
	text-shadow: 0 0 8px rgba(94, 234, 212, 0.5);
}