@font-face {
	font-family: comissioner;
	src: url("/fonts/commissioner.ttf") format("ttf");
	font-weight: normal;
	font-style: normal;
}

:root {
	--button-light-red-active: #eee4e4;
	--button-light-red-hover: #ddcbcb;
	--button-light-red: #eadada;
	--background-light: #fff;
	--background: #f00;
	--background-dark: #000;
	--text: #020202;
	--text-light: #fafafa;
	--text-hover: #fff;
	--text-active: #d0d0d0;
	--red-light-1: #dc4343;
	--red-light: #bf3737;
	--red: #a43333;
	--red-dark: #8d2a2a;
}

* {
	text-decoration: none;
	outline: none;
	border: none;
	color: var(--text);
	font-family: commissioner, Roboto, sans-serif;
	transition: 0.1s ease-out;
}

.unselectable {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

a {
	color: var(--red-light);
}

a:hover {
	color: var(--red-light-1);
}

a:active {
	color: var(--red-dark);
}

button {
	cursor: pointer;
	background-color: var(--button-light-red);
}

button:hover {
	background-color: var(--button-light-red-hover);
}

button:active {
	background-color: var(--button-light-red-active);
}

button[disabled]:is(:hover, :active) {
	cursor: unset;
	background-color: var(--button-light-red);
}

body {
	margin: 0;
	padding-top: calc(20vh + 394px);
	padding-bottom: 10vh;
	display: flex;
	flex-direction: column;
	background-color: var(--background);
}

aside {
	z-index: 500;
}

div#wrap {
	margin-top: -394px;
	margin-left: 50vw;
	position: absolute;
}

div#wrap > a > img#masha {
	z-index: 800;
	left: 0;
	bottom: 0;
	width: 333px;
	height: 394px;
	position: relative;
	cursor: pointer;
	animation-direction: alternate;
	animation-name: koshka_dancing;
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);
}

:is(div#wrap > a > img#masha, div#wrap > a > #masha_hand):hover {
	animation-play-state: paused;
}

div#wrap > a > #masha_hand {
	left: 0;
	bottom: 0;
	position: absolute;
	cursor: pointer;
	animation-direction: alternate;
	animation-name: hand_dancing;
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);
}

div#wrap > a > #masha_hand > img#hand {
	z-index: 500;
	left: -30px;
	bottom: -5px;
	width: 70px;
	height: 88px;
	position: absolute;
}

div#wrap > a > #masha_hand > img#knife {
	z-index: 100500;
	left: calc(-112px + 70px - 40px);
	bottom: calc(-273px + 88px + 35px);
	width: 112px;
	height: 273px;
	position: absolute;
}

header {
	z-index: 5000;
	width: 800px;
	height: 100px;
	margin: 0 auto;
	display: flex;
	border-radius: 3px 3px 0 0;
	background-color: var(--background-dark);
}

header > h1 {
	margin: auto;
	font-size: 2.5rem;
	color: var(--text-light);
}

main {
	z-index: 1000;
	width: 800px;
	margin: 0 auto;
	border-radius: 0 0 3px 3px;
	background-color: var(--background-light);
}

main > ol {
	margin: 50px 100px;
	font-size: 1.2rem;
}

main > ol > small {
	margin-left: 10px;
	margin-top: 20px;
	margin-bottom: 8px;
	display: block;
}

main > ol > li {
	padding-left: 40px;
	margin-bottom: 8px;
	display: flow-root list-item;
}

main > ol > li::marker {
	/* font-size: 1.3rem; */
}

main > ol > li :has(img) {
	display: flow-root list-item;
}

main > ol > li > img {
	float: left;
	margin-top: 5px;
	max-height: 150px;
}

footer {
	z-index: 3000;
}

@media (max-width: 800px) {
	body {
		padding-bottom: unset;
	}
}