@import "mixins.less";

.google-font("Lora");

@layer maslo {
	maslo-deck[skin=light] {
		--bg: #ed9;
		--color: hsl(20, 100%, 20%);
		color: #111;
		font-family: Lora, serif;

		@version: "11.10.0";
		@import (less) url("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/@{version}/styles/googlecode.min.css");

		::marker, pre div::before  { color: rgba(0 0 0 / 0.6); }

		maslo-slide > * { margin-bottom: 0; }
		li + li, li ul, li ol, h1 { margin-top: 0.5em; }

		h1 {
			color: var(--color);
			font-size: 200%;
			line-height: 1;
		}

		pre {
			box-shadow: -4px 0 0 var(--color);
			--tint: rgba(0 0 0 / 0.1);
			background-color: var(--tint);
			div:hover { background-color: var(--tint); }
		}

		.padding-lr(80px);
		.fancy-link(var(--color), var(--bg));
		.progress(var(--color));
	}
}