@font-face { font-family: input; font-weight: normal; src: url(font/Input-Regular.ttf); }
@font-face { font-family: input; font-weight: bold; src: url(font/Input-Bold.ttf); }
@font-face { font-family: input; font-weight: normal; font-style: italic; src: url(font/Input-Italic.ttf); }
@font-face { font-family: input; font-weight: bold; font-style: italic; src: url(font/Input-BoldItalic.ttf); }

maslo-slide {
	display: flex;
	flex-direction: column;

	width: var(--width);
	aspect-ratio: var(--aspect-ratio);
	overflow: hidden;
	position: relative; /* anchor for potentially absolute content */

	font-size: 32px;
	line-height: 1.5;

	&:state(before) { counter-increment: slide slide-before; }
	&:state(current) { counter-increment: slide slide-current; }
	&:state(after) { counter-increment: slide slide-after; }

	code {
		font-family: input, monospace;
		font-weight: bold;
		font-size: 87.5%;
		line-height: calc(48/28);
	}

	pre {
		tab-size: 2;
		counter-reset: line;

		.line {
			&::before {
				font-weight: normal;
				content: ""; // empty need some content as well to be visible
				text-align: right;
				display: inline-block;
				width: 3ch;
				padding-right: 1ch;
			}

			&:not(:empty) {
				counter-increment: line;
				&::before { content: counter(line) "."; }
			}
		}
	}

	blockquote {
		p::before { content: open-quote; }
		p::after { content: close-quote; }

		& + p {
			text-align: right;
			&::before { content: "— "; }
		}
	}

	@media print {
		position: relative; // anchor for absolute elements; is absolute itself for screen media
		margin: auto;
		page-break-inside: avoid;
	}
}