@font-face {
    font-family: 'Verb';
    src: url('/fonts/VerbExtralight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Verb';
    src: url('/fonts/VerbExtralight-Italic.woff2') format('woff2');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}


@font-face {
    font-family: 'Verb';
    src: url('/fonts/VerbLight.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Verb';
    src: url('/fonts/VerbLight-Italic.woff2') format('woff2');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}



@font-face {
    font-family: 'Verb';
    src: url('/fonts/VerbRegular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Verb';
    src: url('/fonts/VerbRegular-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}



@font-face {
    font-family: 'Verb';
    src: url('/fonts/VerbMedium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Verb';
    src: url('/fonts/VerbMedium-Italic.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}



@font-face {
    font-family: 'Verb';
    src: url('/fonts/VerbSemibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Verb';
    src: url('/fonts/VerbSemibold-Italic.woff2') format('woff2');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}



@font-face {
    font-family: 'Verb';
    src: url('/fonts/VerbRegular-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Verb';
    src: url('/fonts/VerbRegular-BoldItalic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}



@font-face {
    font-family: 'Verb';
    src: url('/fonts/VerbExtrabold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Verb';
    src: url('/fonts/VerbExtrabold-Italic.woff2') format('woff2');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}



@font-face {
    font-family: 'Verb';
    src: url('/fonts/VerbBlack.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Verb';
    src: url('/fonts/VerbBlack-Italic.woff2') format('woff2');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}



@font-face {
    font-family: 'Verb';
    src: url('/fonts/VerbUltra-Italic.woff2') format('woff2');
    font-weight: 1000;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Verb';
    src: url('/fonts/VerbUltra.woff2') format('woff2');
    font-weight: 1000;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'VerbCond';
    src: url('/fonts/VerbCondExtralight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'VerbCond';
    src: url('/fonts/VerbCondExtralight-Italic.woff2') format('woff2');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}



@font-face {
    font-family: 'VerbCond';
    src: url('/fonts/VerbCondLight.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'VerbCond';
    src: url('/fonts/VerbCondLight-Italic.woff2') format('woff2');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}



@font-face {
    font-family: 'VerbCond';
    src: url('/fonts/VerbCondRegular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'VerbCond';
    src: url('/fonts/VerbCondRegular-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}



@font-face {
    font-family: 'VerbCond';
    src: url('/fonts/VerbCondMedium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'VerbCond';
    src: url('/fonts/VerbCondMedium-Italic.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}



@font-face {
    font-family: 'VerbCond';
    src: url('/fonts/VerbCondSemibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'VerbCond';
    src: url('/fonts/VerbCondSemibold-Italic.woff2') format('woff2');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}



@font-face {
    font-family: 'VerbCond';
    src: url('/fonts/VerbCondRegular-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'VerbCond';
    src: url('/fonts/VerbCondRegular-BoldItalic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}



@font-face {
    font-family: 'VerbCond';
    src: url('/fonts/VerbCondExtrabold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'VerbCond';
    src: url('/fonts/VerbCondExtrabold-Italic.woff2') format('woff2');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}



@font-face {
    font-family: 'VerbCond';
    src: url('/fonts/VerbCondBlack.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'VerbCond';
    src: url('/fonts/VerbCondBlack-Italic.woff2') format('woff2');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}



@font-face {
    font-family: 'VerbCond';
    src: url('/fonts/VerbCondUltra.woff2') format('woff2');
    font-weight: 1000;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'VerbCond';
    src: url('/fonts/VerbCondUltra-Italic.woff2') format('woff2');
    font-weight: 1000;
    font-style: italic;
    font-display: swap;
}
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

body, 
h1, 
h2, 
h3, 
h4, 
p,
figure, 
blockquote, 
dl, 
dd,
ul,
ol {
	margin: 0;
}

ul[role="list"],
ol[role="list"] {
	list-style: none;
}

body {
	min-height: 100vh;
	line-height: 1.5;
}

h1, 
h2, 
h3, 
h4,
button, 
input, 
label {
	line-height: 1.1;
}

a:not([class]) {
	color: currentColor;
}

img,
picture {
	max-width: 100%;
	display: block;
	height: auto;
}

input, 
button,
textarea, 
select {
	font: inherit;
}

textarea:not([rows]) {
	min-height: 10em;
}

:target {
	scroll-margin-block: 5ex;
}
:root {
	--cyan: #00fafb;
	--magenta: #db0072;
	--yellow: #ffe53e;
	--black: #000000;
	--dark-gray: #1A1A1A;
	--gray: #333333;
	--white: #ffffff;
	--green: #00ff00;

	--site-background-color: var(--black);
	--link-hover-color: var(--cyan);
	--link-color: var(--yellow);
	--text-color: var(--white);
	--focus-outline-color: var(--green);
	--separator-color: var(--gray);
	--card-background-color: var(--dark-gray);
	--footer-background-color: transparent;

	--copy-font-family: "Verb", -apple-system, BlinkMacSystemFont,
		"Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif,
		"Apple Color Emoji", "Segoe UI Emoji";
	--header-font-family: "VerbCond", -apple-system, BlinkMacSystemFont,
		"Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif,
		"Apple Color Emoji", "Segoe UI Emoji";

	--spacing-3xs: clamp(.3125rem,.2483rem + .321vw,.5625rem);
	--spacing-2xs: clamp(.5625rem,.418rem + .7223vw,1.125rem);
	--spacing-xs: clamp(.875rem,.6663rem + 1.0433vw,1.6875rem);
	--spacing-s: clamp(1.125rem,.8361rem + 1.4446vw,2.25rem);
	--spacing-m: clamp(1.6875rem,1.2541rem + 2.1669vw,3.375rem);
	--spacing-l: clamp(2.25rem,1.6722rem + 2.8892vw,4.5rem);
	--spacing-xl: clamp(3.375rem,2.5082rem + 4.3339vw,6.75rem);
	--spacing-2xl: clamp(4.5rem,3.3443rem + 5.7785vw,9rem);
	--spacing-3xl: clamp(6.75rem,5.0165rem + 8.6677vw,13.5rem);
	--spacing-3xs-2xs: clamp(.3125rem,.1038rem + 1.0433vw,1.125rem);
  --spacing-2xs-xs: clamp(.5625rem,.2736rem + 1.4446vw,1.6875rem);
  --spacing-xs-s: clamp(.875rem,.5219rem + 1.7657vw,2.25rem);
  --spacing-s-m: clamp(1.125rem,.5472rem + 2.8892vw,3.375rem);
  --spacing-m-l: clamp(1.6875rem,.9652rem + 3.6116vw,4.5rem);
  --spacing-l-xl: clamp(2.25rem,1.0943rem + 5.7785vw,6.75rem);
  --spacing-xl-2xl: clamp(3.375rem,1.9304rem + 7.2231vw,9rem);
  --spacing-2xl-3xl: clamp(4.5rem,2.1886rem + 11.557vw,13.5rem);
  --spacing-s-l: clamp(1.125rem,.2582rem + 4.3339vw,4.5rem);

	--font-size-small-10: clamp(.875rem,.8462rem + .1439vw,1rem);
	--font-size-small-20: clamp(1rem,.9712rem + .1439vw,1.125rem);
	--font-size-small-30: clamp(1.125rem,1.0818rem + .2158vw,1.3125rem);
	--font-size-small-40: clamp(1.25rem,1.1349rem + .5755vw,1.75rem);
	--font-size-medium-10: clamp(1.5rem,1.3273rem + .8633vw,2.25rem);
	--font-size-medium-20: clamp(1.75rem,1.5773rem + .8633vw,2.5rem);
	--font-size-medium-30: clamp(2rem,1.7698rem + 1.1511vw,3rem);
	--font-size-medium-40: clamp(2.25rem,1.7176rem + 2.6619vw,4.5625rem);
	--font-size-large-10: clamp(2.625rem,1.6754rem + 4.7482vw,6.75rem);
	--font-size-large-20: clamp(3rem,.0504rem + 14.7482vw,15.8125rem);
	--font-size-large-30: clamp(3.8125rem,.0427rem + 18.8489vw,20.1875rem);

	--root-font-size: 100%;

	--line-height-10: 1;
	--line-height-20: 1.1;
	--line-height-30: 1.25;
	--line-height-40: 1.5;

	--font-weight-regular: 400;
	--font-weight-bold: 600;
	--font-weight-ultra: 800;

	--border-radius-10: 0.25rem;
	--border-radius-20: 0.5rem;
	--border-radius-30: 0.75rem;
	--border-radius-40: 1rem;

	--border-width-10: 0.075rem;
	--border-width-20: 0.125rem;
	--border-width-30: 0.25rem;

	--container-fluid-width: 100%;
	--container-large-max-width: 100rem;
	--container-medium-max-width: 80rem;
	--container-small-max-width: 60rem;
	--grid-gap-s: var(--spacing-s);
	--grid-gap-m: var(--spacing-m);
	--grid-gap-l: var(--spacing-l);
	--grid-gap-xl: var(--spacing-xl);

	--status-width: 40rem;

	--flow-space-10: 0.75em;
	--flow-space-20: 1em;
	--flow-space-30: 2em;

	--layout-breakdown-limit: 48rem;

	--shadow-small: 0 0.075rem 0.15rem rgba(0, 0, 0, 0.08),
		0 0.15rem 0.3rem rgba(0, 0, 0, 0.04);
	--shadow-medium: 0 0.15rem 0.3rem rgba(0, 0, 0, 0.08),
		0 0.3rem 0.6rem rgba(0, 0, 0, 0.04);
	--shadow-large: 0 0.3rem 0.6rem rgba(0, 0, 0, 0.08),
		0 0.6rem 1.2rem rgba(0, 0, 0, 0.04);
}
html,
body {
    width: 100%;
}

html {
    font-family: var(--copy-font-family);
    font-size: var(--root-font-size);
    line-height: 1.5;
    background-color: var(--site-background-color);
    color: var(--text-color);
    text-shadow: 1px 1px 0 var(--black);
}

body {
	padding: var(--spacing-s) var(--spacing-s-l);
	display: grid;
	grid-template-rows: min-content 1fr;
	grid-gap: var(--spacing-l);
	font-size: var(--font-size-small-40);
	container-type: inline-size;
}

main {
	container-type: inline-size;
}

a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--link-color);
    text-decoration-thickness: 0.08em;
    text-decoration-skip-ink: none;
		text-underline-offset: 0.25em;

    &:hover {
        animation-name: link-hover;
        animation-duration: 2000ms;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
    }

    &:focus {
    	color: var(--focus-outline-color);
     	text-decoration-color: var(--focus-outline-color);
    }
}

figcaption {
	font-size: var(--font-size-small-30);
}

@keyframes link-hover {
	0% {
		text-decoration-color: #FFE53E;
		color: #FFE53E;
	}

	3.33333% {
		text-decoration-color: #E8E74F;
		color: #E8E74F;
	}

	6.66666% {
		text-decoration-color: #D1E960;
		color: #D1E960;
	}

	10% {
		text-decoration-color: #B9EB72;
		color: #B9EB72;
	}

	13.33333% {
		text-decoration-color: #A2ED83;
		color: #A2ED83;
	}

	16.66666% {
		text-decoration-color: #8BEF94;
		color: #8BEF94;
	}

	20% {
		text-decoration-color: #74F0A5;
		color: #74F0A5;
	}

	23.33333% {
		text-decoration-color: #5DF2B6;
		color: #5DF2B6;
	}

	26.66666% {
		text-decoration-color: #46F4C7;
		color: #46F4C7;
	}

	30% {
		text-decoration-color: #2EF6D9;
		color: #2EF6D9;
	}

	33.33333% {
		text-decoration-color: #17F8EA;
		color: #17F8EA;
	}

	36.66666% {
		text-decoration-color: #00FAFB;
		color: #00FAFB;
	}

	40% {
		text-decoration-color: #14E3EF;
		color: #14E3EF;
	}

	43.33333% {
		text-decoration-color: #28CDE2;
		color: #28CDE2;
	}

	46.66666% {
		text-decoration-color: #3CB6D6;
		color: #3CB6D6;
	}

	50% {
		text-decoration-color: #509FC9;
		color: #509FC9;
	}

	53.33333% {
		text-decoration-color: #6488BD;
		color: #6488BD;
	}

	56.66666% {
		text-decoration-color: #7772B0;
		color: #7772B0;
	}

	60% {
		text-decoration-color: #8B5BA4;
		color: #8B5BA4;
	}

	63.33333% {
		text-decoration-color: #9F4497;
		color: #9F4497;
	}

	66.66666% {
		text-decoration-color: #B32D8B;
		color: #B32D8B;
	}

	70% {
		text-decoration-color: #C7177E;
		color: #C7177E;
	}

	73.33333% {
		text-decoration-color: #DB0072;
		color: #DB0072;
	}

	76.66666% {
		text-decoration-color: #DE156D;
		color: #DE156D;
	}

	80% {
		text-decoration-color: #E22A69;
		color: #E22A69;
	}

	83.33333% {
		text-decoration-color: #E53E64;
		color: #E53E64;
	}

	86.66666% {
		text-decoration-color: #E8535F;
		color: #E8535F;
	}

	90% {
		text-decoration-color: #EB685A;
		color: #EB685A;
	}

	93.33333% {
		text-decoration-color: #EF7D56;
		color: #EF7D56;
	}

	96.66666% {
		text-decoration-color: #F29251;
		color: #F29251;
	}

	100% {
		text-decoration-color: #F8BB47;
		color: #F8BB47;
	}
}

:focus-visible {
    outline-width: 3px;
    outline-style: solid;
    outline-color: var(--focus-outline-color);
    outline-offset: 3px;
    transition:
    	outline-offset linear 0.15s,
     	outline-color linear 0.15s;
}

:not(:focus-visible) {
	outline-offset: 16px;
	outline-color: rgba(0, 0, 0, 0);
	transition:
    	outline-offset linear 0.15s,
     	outline-color linear 0.15s;
}

h1,
h2,
h3,
h4 {
    font-family: var(--header-font-family);
}

ul,
ol {
    padding-left: 1em;
}

hr {
    height: 3px;
    background-color: var(--separator-color);
    border: none;
    margin-block: var(--spacing-m);
    border-radius: 3px;
}

::selection,
::-moz-selection {
    background-color: var(--yellow);
    color: black;
    text-shadow: none;
}

* {
    scrollbar-color: var(--link-color) var(--site-background-color);
    scrollbar-width: auto;
}
@property --a {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

.container {
	margin: 0 auto;
	width: var(--container-fluid-width);
	max-width: var(--container-small-max-width);
	container-type: inline-size;
}

.main-container {
	padding-block: var(--spacing-m);
}

.grid {
	display: grid;
	width: 100%;
	grid-gap: var(--grid-gap-m, 1rem);
	container-type: inline-size;

	&.grid-no-gap {
		grid-gap: unset;
	}

	&.grid-tight {
		grid-gap: var(--grid-gap-s, 1rem);
	}

	&.grid-loose {
		grid-gap: var(--grid-gap-l, 1rem);
	}

	&.grid-extra-loose {
		grid-gap: var(--grid-gap-xl, 1rem);
	}

	&.grid-auto {
		grid-template-columns: repeat(auto-fit, minmax(16em, 1fr));
	}

	&.grid-two {
		grid-template-columns: 1fr 1fr;
	}

	&.grid-three {
		grid-template-columns: 1fr 1fr 1fr;
	}

	&.grid-two-plus-one {
		grid-template-columns: 2fr 1fr;
	}

	&.grid-one-plus-two {
		grid-template-columns: 1fr 2fr;
	}

	&.grid-three-plus-one {
		grid-template-columns: 3fr 1fr;
	}

	&.grid-one-plus-three {
		grid-template-columns: 1fr 3fr;
	}

	@container (width < 52rem) {
		grid-template-columns: 100% !important;
	}
}

.flow {
	--flow-space: var(--flow-space-20);
	
	&.flow-tight {
		--flow-space: var(--flow-space-10);
	}

	&.flow-loose {
		--flow-space: var(--flow-space-30);
	}

	& > * + * {
		margin-block-start: var(--flow-space);
	}
}

.card {
	--card-padding: var(--spacing-m);
	--card-border-radius: var(--border-radius-30);
	background-color: var(--card-background-color);
	padding: var(--card-padding);
	border-radius: var(--card-border-radius);
	margin-block-end: var(--spacing-s);
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.75);
	border: 2px solid var(--separator-color);
	container-type: inline-size;

	&.special-card {
		border: 3px solid transparent;
		background-clip: padding-box;
		position: relative;
		max-width: 100rem;
		margin-inline: auto;
		padding: var(--spacing-m);
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: var(--spacing-xl);

			&::before {
					z-index: -1;
					content: "";
					display: block;
					top: 0;
					bottom: 0;
					right: 0;
					left: 0;
					position: absolute;
					margin: -3px;
					border-radius: inherit;
					animation-name: special-card-gradient;
					animation-duration: 20000ms;
					animation-iteration-count: infinite;
					animation-fill-mode: forwards;
					animation-timing-function: linear;
					background: conic-gradient(
							from var(--a),
							var(--cyan) 0%,
							var(--magenta) 33%,
							var(--yellow) 66%,
							var(--cyan) 100%
					);
			}
	}
}

@container (width < 52rem) {
	.card {
		--card-padding: var(--spacing-s);
		--card-border-radius: var(--border-radius-20);
		margin-inline: 0;
	}
}

@container (width < 52rem) {
	.card.special-card {
		grid-template-columns: 100%;
	}
}



.panel {
	display: block;
	width: 100%;
	padding: var(--spacing-m);
	background-color: var(--site-background-color);
	color: var(--text-color);
}

.cover {
	display: block;
	width: 100%;
	height: 100vh;
	padding: var(--spacing-m);

	&.cover-centered {
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

.presentation-text {
	
}

.current-things {

}

.editorial-layout {
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-gap: var(--spacing-s);
	padding-block-end: var(--spacing-xl);
	width: 100%;
	max-width: 100rem;
	margin-inline: auto;
	container-type: inline-size;
}

@container (width < 64rem) {
	.editorial-layout {
		grid-template-columns: 100%;
		grid-gap: var(--spacing-xl);
	}
}

.block-section {
	background-color: var(--card-background-color);
	padding: var(--spacing-s);
}

.rounded-image img {
	border-radius: 30rem;
	overflow: hidden;
	margin-inline: auto;
}

#about-me {
	& h1 {
		font-size: var(--font-size-medium-40);
		font-weight: var(--font-weight-ultra);
	}
}

#random-facts-about-me {
	padding-inline: var(--spacing-s);
	display: grid;
	grid-template-columns: 100%;
	grid-gap: var(--spacing-m);
	align-content: start;

	& h2 {
		font-size: var(--font-size-medium-10);
		font-weight: var(--font-weight-bold);
	}

	ul {
		font-size: var(--font-size-small-30);
	}
}

@container (width < 64rem) {
	#random-facts-about-me {
		grid-template-columns: 1fr 2fr;
	}
}

@container (width < 32rem) {
	#random-facts-about-me {
		grid-template-columns: 100%;
	}
}

#summary-section {
    margin-block-end: var(--spacing-m);
}

@keyframes special-card-gradient {
	from {
		--a: 0deg;
	}

	100% {
		--a: 360deg;
	}
}
strong,
b {
    font-weight: var(--font-weight-bold);
}

h2 {
	font-size: var(--font-size-medium-20);
	font-weight: var(--font-weight-ultra);
}

h3 {
	font-size: var(--font-size-medium-10);
	font-weight: var(--font-weight-ultra);
}

.page-title {
    font-size: var(--font-size-large-10);
    font-weight: var(--font-weight-ultra);
    text-align: center;
    letter-spacing: -0.01em;
    white-space: collapse;

    &::after {
        content: "";
        display: block;
        margin-block-start: var(--spacing-s);
        height: 4px;
        border-radius: 2px;
        width: 100%;
        background: linear-gradient(
            to right,
            var(--cyan),
            var(--magenta),
            var(--yellow)
        );
    }
}

.front-page-title {
	font-weight: var(--font-weight-ultra);
	font-size: var(--font-size-large-10);
	text-align: center;
	margin-block-end: var(--spacing-m);
	letter-spacing: -0.02em;
}

.inline-page-title {
    font-size: var(--font-size-large-10);
    font-weight: var(--font-weight-ultra);
}

.lead-text {
    font-size: 1.125em;
}

.skip-to-main-content {
	display: block;
	width: 100%;
    padding: var(--spacing-xs);
    font-size: var(--font-size-small-40);
    font-weight: var(--font-weight-bold);
    background-color: var(--black);
    margin-block-end: var(--spacing-s);

    &:not(:focus) {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }

    &:focus {
    	outline-offset: 0;
    }
}

.facts-list {
    & li + li {
        margin-block-start: 0.25em;
    }
}

.current-things {
	& h2 {
		font-size: var(--font-size-medium-10);
	}
}

.right-now {
	background-color: var(--separator-color);
	padding: var(--spacing-xs);
	border-radius: var(--border-radius-30);
	margin-block-start: var(--spacing-xs);
	margin-block-end: var(--spacing-l);
	position: relative;

	&::before {
        content: "";
        height: 0;
        width: 0;
        position: absolute;
        display: block;
        margin-left: 0;
        bottom: 100%;
        background-color: transparent;
        border: var(--spacing-2xs) solid rgba(0, 0, 0, 0);
        border-bottom-color: var(--separator-color);
    }
}
.page-header {
	width: 100%;
	font-size: var(--font-size-small-40);
	container-type: inline-size;

	& nav {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font-family: var(--header-font-family);

		& a {
			padding: var(--spacing-2xs) var(--spacing-xs);
			display: flex;
			justify-content: flex-start;
			align-items: center;
			gap: var(--spacing-2xs);
			margin-inline-end: var(--spacing-2xs);
			font-weight: var(--font-weight-bold);

			&.logo {
				margin-inline-end: auto;
				padding: 0;
				line-height: 0;
			}

			&:last-child {
				margin-inline-end: 0;
			}

			&:focus {
				color: var(--focus-outline-color);
			}
		}

		@container (width < 420px) {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-row-gap: var(--spacing-xs);
			font-size: var(--font-size-small-30);

			& .logo {
				grid-column: span 3;
				margin: 0;
				width: 100%;
			}

			& a {
				display: block;
				text-align: center;
				margin: 0;
			}
		}
	}
}

.logo {
	& svg {
		height: 4cap;
		width: 4cap;
		color: var(--site-background-color);
		background-color: var(--link-color);
		border-radius: 64px;
		transition:
			background-color linear 0.15s,
			color linear 0.15s,
			transform linear 0.15s;
	}

	&:hover {
		svg {
			transform: scale(1.33);
			background-color: rgba(0, 0, 0, 0);
			color: var(--link-color);
			transition:
				background-color linear 0.15s,
				color linear 0.15s,
				transform linear 0.15s;
		}
	}

	&:focus {
		svg {
			background-color: var(--focus-outline-color);
			color: var(--site-background-color);
		}
	}
}

#about-me-link {
	text-decoration-color: var(--cyan);
}

#status-link {
	text-decoration-color: var(--magenta);
}
.page-footer {
	text-align: center;
	font-family: var(--header-font-family);
	padding: var(--spacing-m);
	background-color: var(--footer-background-color);
	font-size: 0.8em;
	font-weight: var(--font-weight-bold);
}
.mikro-title {
	font-weight: var(--font-weight-ultra);
	font-size: var(--font-size-medium-20);
}

.metadata {
	font-size: 0.8em;
	font-weight: var(--font-weight-bold);
}

.separator-over::before {
	content: "";
	display: block;
	width: 100%;
	height: 3px;
	background-color: var(--separator-color);
	margin-block: var(--spacing-m) var(--spacing-s);
	border-radius: 3px;
}

.separator-under::after {
	content: "";
	display: block;
	width: 100%;
	height: 3px;
	background-color: var(--separator-color);
	margin-block: var(--spacing-s) var(--spacing-m);
	border-radius: 3px;
}

.mikro {
	container-type: inline-size;

	figure {
		border: var(--font-size-small-20) solid black;
		border-radius: var(--border-radius-10);

		img {
			border-radius: calc(var(--border-radius-10) / 2);
		}
	}

	@container (width < 720px) {
		figure {
			border: var(--font-size-small-20) solid black;
		}
	}
}
.pagination {
	display: flex;
	font-weight: var(--font-weight-bold);

	& .next-page-link {
		margin-left: auto;
	}

	& .previous-page-link {
		justify-self: flex-start;
	}

	&.pagination--small {
		max-width: var(--status-width);
		margin-inline: auto;
	}
}
.status {
    margin-inline: auto;
    padding: 0;
    width: 100%;
    max-width: var(--status-width);
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns:
        [status-start] var(--card-padding)
        [content-start] 1fr
        [content-end] var(--card-padding)
        [status-end];

    & + .status {
        margin-block-start: var(--spacing-l);
    }

    & + .pagination {
        margin-block-start: var(--spacing-l);
    }

    &::before {
        content: "";
        height: 0;
        width: 0;
        position: absolute;
        display: block;
        margin-left: 0;
        top: 100%;
        left: var(--spacing-m);
        background-color: transparent;
        border: var(--spacing-xs) solid rgba(0, 0, 0, 0);
        border-top-color: var(--separator-color);
    }

    &::after {
        content: "";
        height: 0;
        width: 0;
        position: absolute;
        display: block;
        margin-left: 3px;
        top: 100%;
        left: var(--spacing-m);
        background-color: transparent;
        border: calc(var(--spacing-xs) - 3px) solid rgba(0, 0, 0, 0);
        border-top-color: var(--card-background-color);
    }

    & .status-content {
        grid-column: content;
        font-size: var(--font-size-small-50);

        &:first-child {
            padding-block-start: var(--card-padding);
        }
    }

    & .status-title {
        grid-column: content;
        font-weight: var(--font-weight-bold);
        font-size: var(--font-size-small-30);
        padding-block-end: var(--card-padding);

        &::before {
            content: "";
            display: block;
            background-color: var(--separator-color);
            width: 100%;
            height: 3px;
            border-radius: 3px;
            margin-block: var(--spacing-m) var(--spacing-s);
        }
    }

    & figure {
        overflow: hidden;
        border-top-left-radius: calc(var(--card-border-radius) - 2px);
        border-top-right-radius: calc(var(--card-border-radius) - 2px);
        border-bottom: 2px solid var(--separator-color);
        grid-column: status;

        & + * {
            margin-block-start: calc(1em + var(--spacing-m));
        }
    }
}
.list {
    * + h2 {
        margin-block-start: 2em;
    }
}

.list-content {

}

.list-ordered h2 {
    counter-increment: count 1;

    &::before {
        content: counter(count, decimal) ': ';
    }
}

.list-of-lists {
    & ul {
        list-style: none;
        padding: 0;
    }

    & li {
        background-color: var(--dark-gray);
        border-radius: var(--border-radius-20);
        padding: var(--spacing-xs) var(--spacing-s);
    }

    & a {
        display: block;
        font-family: var(--header-font-family);
        font-weight: var(--font-weight-bold);
        font-size: var(--font-size-medium-10);
        margin-block-end: 0.5em;
    }

    & span {
        display: block;
    }
}