@font-face {
	font-family: 'Bagarozz';
	src: url("/s/f/bagarozz-webfont.woff");
}
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
	navigation: auto;
  }
}
html {
	--red: #d42127;
	--blue: #006e70;
	--bg: #f5f5f5;
	--text: rgba(75, 64, 64, 1);
	--border: rgba(51, 35, 30, .2);
	overflow-x: hidden;
}
body {
	font-family: georgia, serif;
	line-height: 1.5;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	background: var(--bg);
	color: var(--text);
	margin: 0;
	overflow-y: auto;
	overflow-x: hidden;
}

main a:link,
footer a:link {
	color: var(--blue);
	transition: .1s;
}
main a:visited,
footer a:visited {
	color: var(--text);
}
main a:hover,
footer a:hover{
	background: var(--blue);
	color: var(--bg);
}
main a:focus,
footer a:focus {
	background: var(--red);
	color: var(--bg);
	outline: 1px solid var(--red);
	outline-offset: 1px;
}



/* The Love Nonsense header */
header {
	grid-column-start: 1;
	grid-column-end: -1;
	text-align: center;
	font-size: 2.8em;
	margin: 0 0 1em;
	border-block-end: 1px solid var(--border);
	padding: .1em 0 .2em;
}
header > * {
	font: inherit;
	color: var(--red);
	margin: 0;
}
header a {
	color: inherit;
	text-decoration: none;
	display: block;
}

/* The main content */
main,
article {
	grid-column-start: 2;
	display: grid;
	grid-template-columns: 1fr auto;
	margin: 0 1em;
}
main > *,
article > * {
	max-width: 40rem;
	grid-column-start: 2;
	margin: 0 0 1em;
}

main:has(article) {
	display: block;
}
main:has(article) > * {
	max-width: initial;
}
h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
}

main h1,
article h2 {
	color: var(--blue);
	font-size: 2rem;
	border-block-end: 3px double var(--border);
}

iframe {
	width: 100%;
	aspect-ratio: 1;
	max-height: 80vh;
}


/* The Bagarozz figure */
main div[aria-hidden] {
	font-family: "Bagarozz";
	text-transform: lowercase;
	grid-column-start: 1;
	grid-row-start: 1;
	grid-row-end: 3;
	font-size: clamp(6em,25vw,12em);
	line-height: 1;
	width: 1em;
	scale: -1 1;
	color: rgba(75, 64, 64, 0.33);
	transition: .3s;
	position: relative;
	margin: 0;
}
main div[aria-hidden] span {
	animation-name: --appear;
	animation-duration: .1s;
	animation-fill-mode: forwards;
	opacity: 0;
}
main div[aria-hidden] span:nth-of-type(1) { animation-delay: .1s;}
main div[aria-hidden] span:nth-of-type(2) { animation-delay: .2s;}
main div[aria-hidden] span:nth-of-type(3) { animation-delay: .3s;}
main div[aria-hidden] span:nth-of-type(4) { animation-delay: .4s;}
main div[aria-hidden] span:nth-of-type(5) { animation-delay: .5s;}
main div[aria-hidden] span:nth-of-type(6) { animation-delay: .6s;}
main div[aria-hidden] span:nth-of-type(7) { animation-delay: .7s;}
main div[aria-hidden] span:nth-of-type(8) { animation-delay: .8s;}
main div[aria-hidden] span:nth-of-type(9) { animation-delay: .9s;}
main div[aria-hidden] span:nth-of-type(10) { animation-delay: 1s;}

@keyframes --appear {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* Lasers! */
div i {
	position: absolute;
	width: calc(50vw + 30em);
	height: .015em;
	box-shadow: 0 0 .01em .01em orange;
	background: red;
	border-radius: 2px;
	right: 0;
	translate: -0.42em 0.38em;
	max-width: 150vw;
	transform-origin: calc(100% - 0.007em) 50%;
	rotate: calc(var(--angle) * 1deg);
	opacity: 0;
	transition: opacity .2s;
	translate: -0.42em 0.378em;
}
div i:nth-of-type(3) { translate: -0.467em 0.333em; }
div i:nth-of-type(2) { translate: -0.532em 0.325em; }
div i:nth-of-type(1) { translate: -0.588em 0.355em; }

/* div {
	--angle: -42;
}
div i {
	opacity: 1;
} */
.laser i {
	opacity: 1;
	transition: opacity .2s .5s;
}
main div[aria-hidden] {
	transition-delay: .3s;
}
main div[aria-hidden].laser {
	transition-delay: 0s;
	color: rgba(75, 64, 64, .7);
	filter: drop-shadow(0 0 .01em #d4212790);
}


h1:hover + div {
	color: rgba(212, 33, 39,.66);
}
@media (width < 35em) {
	main,
	article {
		display: block;
		clear: left;
	}
	main div[aria-hidden] {
		float: left;
		border: 1px dashed var(--border);
		margin: .05em .1em .02em 0;
		border-radius: 3%;
		padding: .5rem;
	}
	main div[aria-hidden] + p {
		overflow: auto;
	}
	div i:nth-of-type(4) { translate: calc(-0.42em - .5rem) 0.378em; }
	div i:nth-of-type(3) { translate: calc(-0.467em - .5rem) 0.333em; }
	div i:nth-of-type(2) { translate: calc(-0.532em - .5rem) 0.325em; }
	div i:nth-of-type(1) { translate: calc(-0.588em - .5rem) 0.355em; }
}

/* Content */
p:has(+ h2) {
	margin: 0;
}
main h2 {
	margin: 1em 0 0;
}

body > footer {
	grid-column-start: 2;
}

/* Homepage */
article {
	position: relative;
	margin: 0 0 2em;
}
article h2 {
	color: var(--blue);
	font-size: 2rem;
	border-block-end: 3px double var(--border);
	margin: 0 0 1em;
}
article h2 a:link,
article h2 a:visited,
article h2 a:hover  {
	color: var(--blue);
}
article h2 a:hover,
article h2 a:focus {
	background: var(--bg);
}
article h2 a::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: var(--blue);
	opacity: 0;
	transition: .2s;
	z-index: 1;
}
article h2 a:hover::before,
article h2 a:focus::before {
	opacity: .1;
}


.printonly {
	display: none;
}
@media (print) {
	.dontprint {
		display: none;
	}
	.printonly {
		display: block;
	}
}