/* ia-writer-mono-latin-400-normal */
@font-face {
	font-family: "iA Writer Mono";
	font-style: normal;
	font-display: swap;
	font-weight: 400;
	src: url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-400-normal.woff2)
			format("woff2"),
		url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-400-normal.woff)
			format("woff");
}

/* ia-writer-mono-latin-700-normal */
@font-face {
	font-family: "iA Writer Mono";
	font-style: normal;
	font-display: swap;
	font-weight: 700;
	src: url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-700-normal.woff2)
			format("woff2"),
		url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-700-normal.woff)
			format("woff");
}

/* ia-writer-mono-latin-400-italic */
@font-face {
	font-family: "iA Writer Mono";
	font-style: italic;
	font-display: swap;
	font-weight: 400;
	src: url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-400-italic.woff2)
			format("woff2"),
		url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-400-italic.woff)
			format("woff");
}

/* ia-writer-mono-latin-700-italic */
@font-face {
	font-family: "iA Writer Mono";
	font-style: italic;
	font-display: swap;
	font-weight: 700;
	src: url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-700-italic.woff2)
			format("woff2"),
		url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-700-italic.woff)
			format("woff");
}

:root {
	--white: #efefef;
	--transwhite: rgba(239, 239, 239, 0.7);
	--moretranswhite: rgba(239, 239, 239, 0.1);
	--black: #252525;
	--transblack: rgba(37, 37, 37, 0.7);
	--moretransblack: rgba(37, 37, 37, 0.1);
	--gray: #a4a4a4;
	--highlight: #e5ffc3;
	--red: #e4002b;
	--green: #24d05a;
	--pink: #eb4888;
	--blue: #10a2f5;
	--yellow: #e9bc3f;
}

html,
body {
	width: 100%;
	margin: 0;
	padding: 0;
	background: var(--white);
	color: var(--black);
}

body,
button {
	font-family: "iA Writer Mono", monospace;
}

::selection {
	background-color: var(--highlight);
	color: var(--black);
}

html:has(.dark-mode),
body.dark-mode,
body.dark-mode .go-home,
body.dark-mode a,
body.dark-mode .hubspot input,
body.dark-mode .hubspot label span {
	background: var(--black);
	color: var(--white);
}

body.dark-mode .hubspot input {
	border: 3px solid var(--white);
}

button {
	width: 120px;
	height: 30px;
	background: transparent;
	border: 2px solid var(--gray);
	border-radius: 15px;
	box-sizing: border-box;
	color: var(--gray);
	font-size: 1rem;
	overflow: auto;
	transition: 0.4s ease all;
}
button:hover {
	background: rgba(150, 151, 156, 0.1);
	cursor: pointer;
}

.container {
	margin: 50px auto;
	padding: 5px;
	max-width: 650px;
}
@media (max-width: 600px) {
	.container {
		padding: 20px;
	}
}

.header-section {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}

.header-frame {
	max-width: 350px;
}

.go-home {
	position: fixed;
	top: 5px;
	left: 20px;
	padding: 5px 5px 5px 0;
	background: var(--white);
	box-sizing: border-box;
}

.dark-mode-toggler {
	position: fixed;
	top: 5px;
	right: 20px;
}
.dark-mode-toggler label {
	position: relative;
}
.dark-mode-toggler input[type="checkbox"] {
	display: none;
}
.dark-mode-toggler input[type="checkbox"] + label::before {
	content: "";
	display: block;
	height: 26px;
	width: 60px;
	background: var(--white);
	border: 2px solid var(--gray);
	border-radius: 15px;
	position: absolute;
	top: 0px;
	left: -65px;
}
.dark-mode-toggler input[type="checkbox"] + label::after {
	content: "";
	display: block;
	height: 20px;
	width: 20px;
	background: var(--gray);
	border: 2px solid var(--white);
	border-radius: 50%;
	position: absolute;
	top: 3px;
	left: -62px;
	transition: all 0.4s ease-in;
}
.dark-mode-toggler input[type="checkbox"]:checked + label::before {
	background: var(--black);
	border: 2px solid var(--white);
}
.dark-mode-toggler input[type="checkbox"]:checked + label::after {
	left: -28px;
	background: var(--black);
	border: 2px solid var(--white);
	transition: all 0.4s ease-in;
}

h1 {
	font-weight: 400;
	margin: 0;
}

h2 {
	color: var(--gray);
	font-weight: 300;
	margin: 0 0 0.5em 0;
}

a {
	color: var(--black);
	text-decoration-thickness: 0.3ex;
	text-underline-offset: 0.3ex;
}
a:hover {
	font-weight: bold;
}

table {
	margin: 20px auto;
	border-collapse: collapse;
}

thead tr {
	border-bottom: 3px solid var(--black);
}

tbody tr:not(:last-child) {
	border-bottom: 2px solid var(--gray);
}

tr td {
	padding: 20px;
}

tr td:nth-child(1) {
	padding-left: 0;
	font-weight: bold;
}

tr td:nth-child(2) {
	padding-right: 0;
	text-align: right;
}

br {
	display: block;
	content: "";
	margin-bottom: 15px;
}

tr td br {
	margin-bottom: 0;
}

.img-frame {
	position: relative;
	width: 300px;
	height: 300px;
	margin: 0 0 10px 0;
	border-radius: 50%;
	overflow: hidden;
}
.img-frame img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	height: 100%;
}

.links {
	margin: 25px 0;
}
.links a:not(:last-child) {
	padding: 0 12px 0 0;
}

.newsletter-blurb {
	margin: 30px 0;
	line-height: 1.6;
}

.newsletter-blurb span {
	/* color: var(--pink); */
	text-shadow: 1px 1px 0 var(--pink);
	/* font-weight: bold; */
}

.newsletter-blurb span.green {
	text-shadow: 1px 1px 0 var(--green);
}

.newsletter-blurb span.blue {
	text-shadow: 1px 1px 0 var(--blue);
}

.newsletter-blurb span.yellow {
	text-shadow: 1px 1px 0 var(--yellow);
}

.newsletter-blurb .issue-links {
	text-align: center;
}

.hubspot label span {
	color: var(--black);
}

.hubspot input {
	padding: 5px;
	color: var(--black);
	font-family: "iA Writer Mono", monospace;
	font-size: 1em;
	border: 3px solid var(--black);
}

.hubspot input[type="submit"] {
	cursor: pointer;
}

.hubspot ul {
	padding: 0;
	color: var(--gray);
	font-size: 0.8em;
	list-style-type: none;
}

.hubspot .actions {
	margin: 1em 0;
}

.hubspot .submitted-message {
	color: var(--pink);
}

.sneaky-sponsor {
	color: var(--gray);
}

@media (max-width: 600px) {
	.links {
		text-align: center;
	}
}

.toggler {
	margin: 25px 0;
}
.toggler .show {
	border-color: var(--pink);
	color: var(--pink);
}
@media (max-width: 600px) {
	.toggler {
		text-align: center;
	}
	.toggler button {
		margin: 5px;
	}
}

.bio {
	display: none;
	line-height: 1.6;
	font-size: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
}
.bio.show {
	display: block;
}
img {
    pointer-events: none;
}