@layer framework,
components,
layout;

@import url('https://cdn.jsdelivr.net/npm/open-props@1.7.16/open-props.min.css') layer(framework.open-props);
@import url('https://cdn.jsdelivr.net/npm/open-props@1.7.16/gray-hsl.min.css') layer(framework.open-props);
@import url('https://cdn.jsdelivr.net/npm/open-props@1.7.16/borders.min.css') layer(framework.open-props);
@import url('https://cdn.jsdelivr.net/npm/open-props@1.7.16/normalize.light.min.css') layer(framework.open-props);
@import url('https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.css') layer(components.leaflet);
@import url('https://cdn.jsdelivr.net/npm/unpoly@3.7.3/unpoly.min.css') layer(components.unpoly);
@import url('https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css') layer(components.swiper);
@import url('https://fonts.googleapis.com/css?family=Overpass') layer(layout);

/* Control layer order based on screen size */
@media (min-width: 768px) {
	@layer mobile, desktop;
	/* On desktop, mobile comes first, then desktop overrides */
}

@media (max-width: 767px) {
	@layer desktop, mobile;
	/* On mobile, desktop comes first, then mobile overrides */
}

/**
 * Reset some stuff from open props that interferes with kint
 */
.kint-rich * {
	font-size: unset;
	max-inline-size: unset;
}

:where(svg:not([fill])) {
	fill: currentColor;
}


/*
 * Base Styles
 */

html {
	scroll-padding-top: 6rem;
	scroll-behavior: smooth;
}

.offline-banner {
	display: none;
	font-size: 70%;
}

.offline .hero-figure {
	filter: grayscale(1);
}

.offline .offline-banner {
	display: block;
}

.d-none {
	display: none !important;
}

:where(:not(pre)>code)
{
	background-color: transparent;
	color: var(--green-8);
	text-decoration: none;
}


h1 {
	font-size: clamp(var(--font-size-5), 6cqw, var(--font-size-4));
	font-weight: var(--font-weight-7);

	.heading-permalink {
		display: none;
	}
}

h1+small {
	margin-left: var(--size-3);
	margin-right: var(--size-3);
}

h2 {
	font-size: clamp(var(--font-size-3), 4cqw, var(--font-size-3));
	font-weight: var(--font-weight-6);
}

h3 {
	font-size: clamp(var(--font-size-2), 3cqw, var(--font-size-2));
	font-weight: var(--font-weight-5);
}

.heading-permalink {
	font-size: .5em;
	margin-left: 10px;
	text-decoration: none;
	color: transparent;
}

*:hover>.heading-permalink,
.heading-permalink:hover {
	text-decoration: none;
	color: #eee;
}

.u-photo.rounded-circle {
	inline-size: var(--size-5);
	aspect-ratio: var(--ratio-square);
	border-radius: var(--radius-round);
	object-fit: cover;
}

hr.spacer {
	background-color: var(--surface-3);
	height: var(--border-size-0);
	margin-block: var(--size-fluid-3);
}

.markdown>*+* {
	margin-block-start: var(--space-flow, 1em);
}

/**
 * Layout
 */

.grid-container {
	container: container / inline-size;
	display: grid;
}

@media (min-width: 992px) {
	.grid-container {
		grid-template-columns:
			[full-start] 5vw
			[margin-start] 1fr
			[wide-start] 1fr
			[outdent-start] 1fr
			[content-start] minmax(auto, var(--max-width, 36rem))
			[content-end] 1fr
			[outdent-end] 1fr
			[wide-end] 1fr
			[margin-end] 5vw
			[full-end];
	}
}

.grid-container>* {
	grid-column: content-start / content-end;
}

main>.wide, 
main>pre, 
main>figure, 
main>[class*="language-"], 
.wide {
	grid-column: wide-start / wide-end !important;
}


.page-header {
	display: grid;
	gap: var(--size-4);

	margin-block-start: var(--size-8);
	margin-block-end: var(--size-8);

	text-align: center;

	.header-title {
		font-size: 2rem;
		font-weight: bold;
	}

	.header-subtitle {
		font-size: 1rem;
		color: #686e73;
	}
}

.main-nav .list-group {
	display: flex;
	flex-direction: row;
	gap: var(--size-4);
	justify-content: center;
}

.main-nav .list-group .list-group-item {
	width: 4rem;
	text-align: center;

	svg,
	img {
		margin: auto;
		width: 16px;
		height: 16px;
	}
}

.page-footer {
	margin-top: var(--size-8);
	margin-bottom: var(--size-8);

	display: flex;
	flex-direction: column;
	gap: var(--size-3);

	.legal {
		font-size: var(--font-size-0);
	}
}

main>h1:not(.page-title h1),
.page-title {
	display: flex;
	align-items: center;
	margin-bottom: var(--size-4);
	padding-bottom: var(--size-6);
	border-bottom: var(--border-size-1) solid var(--gray-3);

	div {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		margin-left: auto;
	}
}

.stretched-link::after {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	content: "";
}

.post-listing>.post-year {
	font-size: var(--font-size-3);
	font-weight: var(--font-weight-5);
	color: var(--gray-5);
	margin-top: var(--size-4);
	margin-bottom: var(--size-4);
}

.post-listing>.post-year:first-of-type {
	margin-top: 0;
}

.post-listing>.post-listing-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--size-4);
	margin-top: var(--size-2);
	position: relative;

	a {
		display: block;
	}

	time {
		text-wrap: nowrap;
		color: var(--gray-5);
	}
}

.page-microblog.post-listing {
	display: grid;
	gap: var(--size-10);
}

.page-footer-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--size-4);
	position: relative;

	background-color: var(--gray-1);
	padding: var(--size-3);

	img {
		inline-size: var(--size-5);
		aspect-ratio: var(--ratio-square);
		border-radius: var(--radius-round);
		object-fit: cover;
	}
}

.page-footer-nav .pager {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    gap: var(--size-4);

	&>div {
		flex: 1;
		position: relative;
	}

	div:last-child {
		text-align: right;
	}
}

.content {
	display: grid;
	gap: var(--size-4);
	row-gap: var(--size-7);

	pre {
		background-color: var(--gray-1);
		padding: var(--size-3);
		max-inline-size: none;
	}

	pre code {
		background-color: transparent;
	}
}

/* FAB */

.FAB {
	position: fixed;
	bottom: 30px;
	right: 30px;
	width: 56px;
	z-index: 2;

	display: none;

	&.skype {
		display: block;
	}
}

@media (min-width: 768px) {
	.FAB {
		right: 60px;
	}
}

.FAB__action-button,
.FAB__mini-action-button {
	cursor: pointer;
	position: absolute;
}

.FAB__action-button {
	bottom: 0;
	right: 0;
}

.FAB__action-button:hover .action-button__icon {
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.14), 0 8px 8px*2 rgba(0, 0, 0, 0.28);
}

.FAB__mini-action-button {
	bottom: 0;
	right: 49px;
}

.FAB .video-window {
	display: none;
}

.FAB.skype .action-button__icon {
	transition: all .2s;
	width: 10px;
	height: 10px;
	padding: 0;
}

.FAB.skype .action-button__icon * {
	display: none;
}

.FAB.skype .video-window {
	display: block;
	position: absolute;
	bottom: -10px;
	left: -40px;
	width: 100px;
	transition: all 1s;
}

.FAB.skype figure.html-video {
	margin-bottom: 0;
	display: inline-block;
	font-size: 0;
	overflow: hidden;
	position: relative;
	max-width: 100%;
	box-sizing: border-box;
	border: 1px solid black;
	border-radius: 5px;
	transition: all 1s;
}

.FAB.skype figure.html-video * {
	box-sizing: inherit;
}

.FAB.skype .no-js figure.html-video:after {
	display: none;
}

.FAB.skype figure.html-video[loaded=true]:after {
	opacity: 0;
	visibility: hidden;
}

.action-button__icon {
	transition: all .2s;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 4px*2 rgba(0, 0, 0, 0.28);
	background-color: #ff4081;
	background-color: #cb0703;
	border-radius: 50%;
	color: #fff;
	padding: 16px;
	display: block;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 70px;
	height: 70px;
	text-align: center;
	line-height: 1.25;
}

.action-button__icon:hover {
	text-decoration: none;
	color: #eee;
}

.action-button__icon svg {
	width: 34px;
	height: 34px;
}

.action-button__icon svg path {
	fill: #fff;
}

.action-button__text--hide {
	display: none;
}

.action-button__text--show {
	background-color: #212121;
	border-radius: 3px;
	color: #fff;
	right: 75px;
	font-size: 14px;
	font-family: "Helvetica Neue";
	opacity: .8;
	padding: 5px 9px;
	position: absolute;
	top: 2px;
	white-space: nowrap;
}

#visualization {
	margin-bottom: 1.5em;
}

/* Animation */

.FAB.skype .action-button__icon {
	transition: all .2s;
	animation-name: flash;
	animation-duration: 1s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
}

.FAB.skype figure.html-video {
	animation-name: bounceInUp;
	animation-duration: 1s;
	animation-fill-mode: both;
}

@keyframes flash {

	from,
	50%,
	to {
		opacity: 1;
	}

	25%,
	75% {
		opacity: 0;
	}
}

.flash {
	animation-name: flash;
}

@keyframes bounceInUp {

	from,
	60%,
	75%,
	90%,
	to {
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}

	from {
		opacity: 0;
		transform: translate3d(0, 3000px, 0);
	}

	60% {
		opacity: 1;
		transform: translate3d(0, -20px, 0);
	}

	75% {
		transform: translate3d(0, 10px, 0);
	}

	90% {
		transform: translate3d(0, -5px, 0);
	}

	to {
		transform: translate3d(0, 0, 0);
	}
}

.bounceInUp {
	animation-name: bounceInUp;
}