@font-face {
	font-family: "Limkin";
	src: url("https://toomuchtype.com/fonts/limkin/variable/TMT-LimkinVF.ttf") format(truetype),
		 url("https://toomuchtype.com/fonts/limkin/variable/TMT-LimkinVF.woff") format(woff),
		 url("https://toomuchtype.com/fonts/limkin/variable/TMT-LimkinVF.woff2") format(woff2);
	font-weight: 100 900;
}
:root {
	--black: #000;
	--offblack: hsl(0, 0%, 10%);
	--white: #fff;
	--offwhite: hsl(0, 0%, 90%);
	--pink: #ff0055;
	--yellow: #ffd400;
	--green: #00ff80;
	--blue: #2b00ff;
	--background: linear-gradient(145deg, var(--white) 0%, var(--offwhite) 100%);
	--background-dark: linear-gradient(145deg, hsl(0, 0%, 15%) 0%, var(--offblack) 100%);
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	scroll-behavior: smooth;
}
body {
	background: var(--background);
	background-size: 100vw 100vh;
	background-attachment: fixed;
	font-variation-settings: "wght" 400, "SRFF" 0;
	font-weight: 400;
	font-family: "Limkin", sans-serif;
}
a {
	text-decoration: none;
	color: var(--pink);
}
.container {
	display: grid;
	grid-template-columns: 540px 1fr;
}
.content {
	display: flex;
	flex-direction: column;
	gap: 30px;
	background: white;
	z-index: 9;
	position: relative;
	box-shadow: 4px 4px 8px rgba(0,0,0,.01), 8px 8px 16px rgba(0,0,0,.02);
}
@media only screen and (max-width: 1000px) {
	.container {
		display: grid;
		grid-template-columns: 400px 1fr;
	}
}
@media only screen and (max-width: 800px) {
	.container {
		display: grid;
		grid-template-columns: 320px 1fr;
	}
}
@media only screen and (max-width: 600px) {
	.container {
		display: grid;
		grid-template-columns: 1fr;
	}
}

/* Header */
.header {
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding: 30px 30px 0 30px;
}
.header-heading {
	font-size: 32px;
	letter-spacing: -0.04em;
	font-variation-settings: "wght" 600, "SRFF" 0;
	font-weight: 600;
	text-wrap: pretty;
	line-height: 1.1em;
}
.header-heading a {
	color: var(--pink);
	transition: color .1s, opacity .1s;
}
.header-heading a:hover {
	color: black;
}
.header-heading a:active {
	opacity: .5;
}
@media only screen and (max-width: 800px) {
	.header-heading {
		font-size: 24px;
	}
}
@media only screen and (max-width: 600px) {
	.header-heading {
		font-size: 32px;
	}
	.header {
		padding: 20px;
	}
}

/* Header social */
.header-social {
	display: flex;
	gap: 15px;
	flex-wrap: wrap;
}
.header-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	fill: black;
	transition: fill .1s, opacity .1s;
}
.header-social a svg {
	display: block;
	height: 20px;
	width: 20px;
}
.header-social a:hover {
	fill: var(--pink);
}
.header-social a:active {
	opacity: .25;
}

/* Heaver nav */
.header-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	padding-top: 5px;
}
.header-nav a {
	padding: 15px;
	background-color: var(--white);
	font-size: 10px;
	border-radius: 20px;
	color: var(--black);
	text-transform: uppercase;
	letter-spacing: .1em;
	border: 1px solid rgba(0,0,0,.1);
	padding: calc(.2em + 4px) calc(15px - .1em) 4px 15px;
	line-height: 1.2em;
	font-variation-settings: "wght" 700, "SRFF" 0;
	font-weight: 700;
	transition: background-color .1s, color .1s, opacity .1s;
}
.header-nav a:hover {
	background-color: var(--black);
	color: var(--white);
}
.header-nav a:active {
	opacity: .5;
}

/* Section */
.section {
	display: flex;
	flex-direction: column;
	gap: 15px;
	align-items: start;
	margin-top: 15px;
}
.section-heading {
	position: sticky;
	top: 0;
	padding: calc(.2em + 5px) calc(30px - .1em) 5px 30px;
	font-variation-settings: "wght" 700, "SRFF" 0;
	font-weight: 700;
	font-size: 10px;
	line-height: 1em;
	background-color: var(--white);
	z-index: 1;
	letter-spacing: .1em;
	text-transform: uppercase;
	width: 100%;
	border-bottom: 1px solid rgba(0,0,0,.1);
}
.section-desc {
	padding: .2em calc(30px - .1em) 30px 30px;
	font-size: 14px;
	line-height: 1.4em;
	text-wrap: pretty;
}
@media only screen and (max-width: 600px) {
	.section {
		margin-top: 0;
	}
	.section-heading {
		padding: calc(.2em + 5px) calc(20px - .1em) 5px 20px;
	}
	.section-desc {
		padding: .2em calc(20px - .1em) 20px 20px;
	}
}

/* Section links */
.section-links {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.section-link {
	display: grid;
	grid-template-columns: 100px 1fr;
	padding: 15px 30px 15px 30px;
	gap: 20px;
	transition: opacity .1s, color .1s, background-color .1s;
	align-items: start;
	color: var(--black);
}
.section-link[data-active="1"] {
	background: rgba(0,0,0,.1);
}
.section-link:hover {
	background: var(--pink);
	color: var(--white);
}
.section-link-thumbnail {
	border-radius: 5px;
	overflow: hidden;
	border: 1px solid rgba(0,0,0,.1);
	transition: border .1s;
}
.section-link:hover .section-link-thumbnail {
	border: 1px solid rgba(255,255,255,.1);
}
.section-link-thumbnail img {
	display: block;
	width: 100%;
}
.section-link-info {
	position: relative;
	font-size: 14px;
	line-height: 1.4em;
	text-wrap: pretty;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.section-links a:nth-last-child(1) {
	border-bottom: unset;
}
.section-link-info h3 {
	font-variation-settings: "wght" 600, "SRFF" 0;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.4em;
	flex-shrink: 0;
	text-wrap: balance;
}
.section-link-info h3::after {
	content: "↗";
	padding-left: .25em;
	color: var(--pink);
	transition: color .1s;
}
.section-link-info p {
	text-wrap: pretty;
	opacity: .25;
	transition: opacity .1s;
}
.section-link-info ul {
	list-style: none;
	font-size: 8px;
	letter-spacing: .1em;
	line-height: 1em;
	font-variation-settings: "wght" 650, "SRFF" 0;
	font-weight: 650;
	text-transform: uppercase;
	opacity: .25;
	margin-top: 4px;
	display: flex;
	flex-wrap: wrap;
	gap: 5px 10px;
}
.section-link-info ul li {
	/* background-color: var(--black); */
	color: var(--black);
	/* padding: .4em .9em .2em 1em; */
	border-radius: 10px;
}
.section-link:hover .section-link-info h3::after {
	color: var(--white);
}
.section-link[data-active="1"] .section-link-info p,
.section-link:hover .section-link-info p {
	opacity: 1;
}
.section-link:active {
	opacity: .5;
}
@media only screen and (max-width: 600px) {
	.section-link {
		grid-template-columns: 80px 1fr;
		padding: 15px 20px;
	}
}

/* Footer */
.footer {
	text-align: center;
	text-wrap: balance;
	background: var(--background-dark);
	padding: calc(.2em + 30px) calc(30px - .1em) 30px 30px;
	font-size: 14px;
	line-height: 1.4em;
	text-wrap: pretty;
	color: var(--white);
	font-variation-settings: "wght" 600, "SRFF" 0;
	font-weight: 600;
}
.footer a {
	color: var(--pink);
	text-decoration: none;
	transition: color .1s, opacity .1s;
}
.footer a:hover {
	color: var(--white);
}
.footer a:active {
	opacity: .5;
}

/* Preview */
.preview {
	height: 100dvh;
	position: sticky;
	top: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.preview-text {
	font-size: 14px;
	line-height: 1.2em;
	opacity: .25;
	transition: opacity .2s;
	max-width: 320px;
	text-wrap: balance;
	padding: 30px;
}
.preview-notice {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	opacity: 0;
	transition: opacity .2s;
	font-size: 14px;
	line-height: 1.2em;
	padding: 30px;
	max-width: 320px;
	text-wrap: balance;
}
.preview[data-newtab="1"] .preview-text,
.preview[data-active="1"] .preview-text {
	opacity: 0;
	transition: opacity .2s;
}
.preview[data-newtab="1"] .preview-notice {
	opacity: 1;
	transition: opacity .2s;
}
.preview a {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transition: opacity .2s;
	background-color: white;
	width: 100%;
	height: 100%;
	transform: scale(1) translate(-50%, -50%);
	transform-origin: top left;
}
.preview a iframe {
	border: unset;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
}
.preview a[data-active="0"] {
	opacity: 0;
}
@media only screen and (max-width: 800px) {
	.preview a {
		width: 150%;
		height: 150%;
		transform: scale(.667) translate(-50%, -50%);
	}
}
@media only screen and (max-width: 600px) {
	.preview {
		display: none;
	}
}