@view-transition {
	navigation: auto;
}

#post-title-async-stack { view-transition-name: post-title-async-stack; }
#post-title-dashmips    { view-transition-name: post-title-dashmips; }
#post-title-c-koans     { view-transition-name: post-title-c-koans; }
#post-title-moon        { view-transition-name: post-title-moon; }
#post-title-wolfie-ball { view-transition-name: post-title-wolfie-ball; }
#post-title-nfc-cards   { view-transition-name: post-title-nfc-cards; }
#post-title-web-socket  { view-transition-name: post-title-web-socket; }

@font-face {
	font-family: 'SpaceMono Nerd Font';
	src: url('./fonts/SpaceMonoRegular.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'SpaceMono Nerd Font';
	src: url('./fonts/SpaceMonoItalic.woff2') format('woff2');
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

:root {
	max-width: 100ch;
	padding: 2em 1em;
	margin: auto;
	line-height: 1.75;
	overflow-x: hidden;

	--default-font: Verdana, Geneva, Tahoma, sans-serif;
	--header-font: 'SpaceMono Nerd Font', monospace;

	font-family: var(--default-font);

	/* Variables — dark theme is default */
	--primary-color: #b1d6ff;
	--secondary-color: #00bfff;
	--font-color: white;
	--body-color: rgb(39, 39, 39);
	--shadow-color: #b1d6ffb3;
	--pulse-color: rgba(4, 168, 4, 0.8);
}

#theme-switch {
	display: none;
}

#theme-switch + label {
	font-size: 1.3rem;
}

#theme-switch + label:after {
	content: '🌞';
}

#theme-switch:checked + label:after {
	content: '🌙';
}

[data-theme='light'] {
	--primary-color: #335b7f;
	--secondary-color: #0080a0;
	--font-color: black;
	--body-color: white;
	--shadow-color: rgba(0, 0, 0, 0.2);
	--pulse-color: rgba(0, 105, 0, 0.8);
}

body {
	font-family: var(--default-font);
	background-color: var(--body-color);
	color: var(--font-color);
}

a:hover {
	font-style: normal;
	text-decoration: underline double;
}

#resume_link {
	font-size: 1.3em;
}

figure {
	margin-block-start: 0;
	margin-inline-start: 0;
}

img {
	max-width: 78ch;
}

code,
pre {
	font-family: var(--header-font);
}

main {
	max-width: 50rem;
	padding: 2rem;
	padding-top: 0;
	margin: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 1em 0 1em;
}

p,
ul,
ol {
	margin-bottom: 2em;
	color: var(--font-color);
	font-family: var(--default-font);
	list-style-type: none;
}

.projects > * > h1,
h2,
h3 {
	font-family: var(--header-font);
}

a {
	color: var(--primary-color);
	text-decoration: none;
	font-style: italic;
}

.post-title {
	font-family: var(--header-font);
	color: var(--primary-color);
	text-decoration: underline double;
}

.post-preview h2 a {
	font-style: normal;
	text-decoration: underline double;
}

.post-preview h2 a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.post-preview {
	/* Add shadows to create the "card" effect */
	position: relative;
	box-shadow: 0 4px 8px 0 var(--shadow-color);
	transition: 0.3s;
	padding: 2px 16px;
	margin-bottom: 15px;
}

.post-preview > * > h1,
h2,
h3,
h4 {
	font-family: var(--header-font);
}

.post-preview > time {
	color: var(--secondary-color);
	float: right;
	font-family: var(--header-font);
}

.post-preview:hover {
	box-shadow: 0 8px 16px 0 var(--shadow-color);
}

button {
	padding: 0.35em 1.2em;
	border: 0.1em solid black;
	margin: 0 0.3em 0.3em 0;
	border-radius: 0.12em;
	transition: all 0.15s;
	font-size: 1.12rem;

	&:disabled {
		color: gray;
		background-color: darkslategray;
	}
}

@media all and (max-width: 30em) {
	button {
		margin: 0.4em auto;
		padding: 0.8em;
	}
}

.pulse {
	animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
	0% {
		box-shadow: 0 0 0 0px var(--pulse-color);
	}
	100% {
		box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
	}
}

.animate {
	animation-duration: 0.75s;
	animation-delay: 0.5s;
	animation-name: animate-fade;
	animation-timing-function: cubic-bezier(0.26, 0.53, 0.74, 1.48);
	animation-fill-mode: backwards;
}

/* Flip In */
.animate.flip {
	animation-name: animate-flip;
	transform-style: preserve-3d;
	perspective: 1000px;
}

@keyframes animate-flip {
	0% {
		opacity: 0;
		transform: rotateX(-120deg) scale(0.9, 0.9);
	}
	100% {
		opacity: 1;
		transform: rotateX(0deg) scale(1, 1);
	}
}

/*  0. BEFORE-OPEN STATE   */
/*  Starting point for the transition */
@starting-style {
	.playingcard {
		opacity: 0;
		transform: rotateX(-120deg) scale(0.9, 0.9);
	}
}

/*  1. IS-OPEN STATE   */
/*  The state at which the element is open + transition logic */
.playingcard {
	background-color: beige;
	border: 0.1em solid black;
	border-radius: 0.5em;
	padding-inline-start: 10px;
	position: absolute;
	height: 10em;
	width: 5em;
	top: 10px;
	right: 10px;

	overflow: hidden;
	transition:
		opacity 0.5s,
		transform 0.5s,
		height 0.5s,
		display 0.5s allow-discrete;
}

/*  2. EXITING STATE   */
/*  While it is deleting, before DOM removal in JS, apply this
    transformation for height, opacity, and a transform which
    skews the element and moves it to the left before setting
    it to display: none */
.is-deleting {
	opacity: 0;
	height: 0;
	display: none;
	transform: skewX(50deg) translateX(-25vw);
}

@media screen and (prefers-reduced-motion: reduce) {
	* {
		animation: none !important;
	}
}

thead {
	font-style: italic;
	font-weight: bold;
	text-decoration: underline double;
}

tbody td + td {
	padding: 0.75em;
	border-left: 1px dotted var(--font-color);
}

#lock {
	font-size: 1.7em;
}