*:not(head, script, svg),
*:not(head, script, svg)::before,
*:not(head, script, svg)::after {
	box-sizing: border-box;
	font-family: "Comic Neue", cursive;
}

body,
html {
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	height: auto;
	margin: 0;
}

a,
a:hover,
a:hover::before,
a:hover::after,
a::before,
a::after {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: all 0.3s ease-in-out;
}

::-webkit-scrollbar {
	width: 25px;
}

::-webkit-scrollbar-track {
	background: linear-gradient(130deg, red, orange, yellow, green, blue, violet);
}

::-webkit-scrollbar-thumb {
	background: deeppink;
}

::-webkit-scrollbar-thumb:hover {
	background: white;
}

::-webkit-scrollbar-thumb:active {
	background: #444;
}

::-webkit-scrollbar-button:single-button:vertical:decrement {
	height: 40px;
	width: 25px;
	background-color: black;
	background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' fill='lawngreen' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 512 512' xml:space='preserve'%3E%3Cpath d='M486.394 291.69L512 285.75l-7.543-32.529l-20.412 4.734c-2.477-17.576-6.872-35.028-13.06-51.972c18.364-51.938 20.35-112.093 5.451-170.588l-4.2-16.487l-16.404 4.509c-6.976 1.917-67.448 19.132-96.399 46.97c-4.213-2.438-8.487-4.749-12.835-6.904c-28.971-14.355-59.453-21.636-90.599-21.636c-31.146 0-61.627 7.279-90.599 21.636c-4.348 2.155-8.622 4.467-12.835 6.904c-28.951-27.838-89.425-45.052-96.4-46.97l-16.404-4.509L35.56 35.396c-14.901 58.495-12.915 118.65 5.451 170.588c-6.188 16.944-10.583 34.396-13.06 51.971l-20.407-4.733L0 285.752l25.602 5.938c0.09 32.296 6.875 62.006 19.974 88.297L0 390.555l7.544 32.529l56.806-13.175c8.598 11.122 18.581 21.398 29.918 30.734c37.727 31.069 88.738 49.42 145.034 52.449V383.018c-21.422-9.76-42.529-35.172-42.529-55.386c0-33.428 37.075-33.428 59.225-33.428c22.151 0 59.226 0 59.226 33.428c0 20.215-21.108 45.627-42.53 55.386v110.074c56.294-3.03 107.304-21.38 145.03-52.449c11.337-9.336 21.321-19.612 29.919-30.735l56.812 13.176l7.543-32.529l-45.58-10.571C479.519 353.695 486.304 323.984 486.394 291.69z M201.254 242.374c-11.902 0-21.588-9.782-21.588-21.847c0-12.068 9.686-21.841 21.588-21.841c11.918 0 21.601 9.773 21.601 21.841C222.855 232.593 213.172 242.374 201.254 242.374z M310.583 242.538c-12.018 0-21.766-9.854-21.766-22.011c0-12.157 9.748-22.011 21.766-22.011c12.002 0 21.75 9.854 21.75 22.011C332.334 232.683 322.587 242.538 310.583 242.538z'/%3E%3C/svg%3E");
	background-size: 20px;
	background-position: center;
	background-repeat: no-repeat;
}

::-webkit-scrollbar-button:single-button:vertical:increment {
	height: 40px;
	width: 25px;
	background-color: black;
	background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' fill='lawngreen' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 512 512' xml:space='preserve'%3E%3Cpath d='M486.394 291.69L512 285.75l-7.543-32.529l-20.412 4.734c-2.477-17.576-6.872-35.028-13.06-51.972c18.364-51.938 20.35-112.093 5.451-170.588l-4.2-16.487l-16.404 4.509c-6.976 1.917-67.448 19.132-96.399 46.97c-4.213-2.438-8.487-4.749-12.835-6.904c-28.971-14.355-59.453-21.636-90.599-21.636c-31.146 0-61.627 7.279-90.599 21.636c-4.348 2.155-8.622 4.467-12.835 6.904c-28.951-27.838-89.425-45.052-96.4-46.97l-16.404-4.509L35.56 35.396c-14.901 58.495-12.915 118.65 5.451 170.588c-6.188 16.944-10.583 34.396-13.06 51.971l-20.407-4.733L0 285.752l25.602 5.938c0.09 32.296 6.875 62.006 19.974 88.297L0 390.555l7.544 32.529l56.806-13.175c8.598 11.122 18.581 21.398 29.918 30.734c37.727 31.069 88.738 49.42 145.034 52.449V383.018c-21.422-9.76-42.529-35.172-42.529-55.386c0-33.428 37.075-33.428 59.225-33.428c22.151 0 59.226 0 59.226 33.428c0 20.215-21.108 45.627-42.53 55.386v110.074c56.294-3.03 107.304-21.38 145.03-52.449c11.337-9.336 21.321-19.612 29.919-30.735l56.812 13.176l7.543-32.529l-45.58-10.571C479.519 353.695 486.304 323.984 486.394 291.69z M201.254 242.374c-11.902 0-21.588-9.782-21.588-21.847c0-12.068 9.686-21.841 21.588-21.841c11.918 0 21.601 9.773 21.601 21.841C222.855 232.593 213.172 242.374 201.254 242.374z M310.583 242.538c-12.018 0-21.766-9.854-21.766-22.011c0-12.157 9.748-22.011 21.766-22.011c12.002 0 21.75 9.854 21.75 22.011C332.334 232.683 322.587 242.538 310.583 242.538z'/%3E%3C/svg%3E");
	background-size: 20px;
	background-position: center;
	background-repeat: no-repeat;
}

::-webkit-scrollbar-button:single-button:vertical:decrement:hover,
::-webkit-scrollbar-button:single-button:vertical:increment:hover {
	background-color: #59b500;
}

::-webkit-scrollbar-button:single-button:vertical:decrement:active,
::-webkit-scrollbar-button:single-button:vertical:increment:active {
	background-color: #3d7d00;
}

figure {
	margin: 0;
}

main {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	background-color: orange;
	background-image: url("https://media3.giphy.com/media/qdmg2R4sMQrxS/giphy.gif");
	background-size: 350px;
	background-position: top;
	background-attachment: scroll;
	background-repeat: repeat;
}

header {
	position: sticky;
	top: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: auto;
	padding: 20px 40px;
	z-index: 999;
	max-width: 1200px;
	background: lawngreen;
}

header > a {
	width: auto;
	margin-right: 50px;
}

header > a mark {
	font-family: "Rock Salt", cursive;
	color: transparent;
	font-size: 24pt;
	line-height: 40pt;
	font-weight: 900;
	background: url("https://i.makeagif.com/media/11-25-2015/QWAdxg.gif");
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

header > nav {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	flex-grow: 1;
}

header > nav ul {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	list-style: none;
	width: 100%;
	padding: 0;
}

header > nav > a {
	display: none;
}

nav ul li {
	background: linear-gradient(
		90deg,
		#6f00ff,
		#8e00fc,
		#a700f8,
		#bc00f4,
		#cf00f1,
		#e100ed,
		#f000e9,
		#ff00e6
	);
	border: 6px solid teal;
	border-style: outset;
	animation: hue-rotate 4s linear infinite;
}

@keyframes hue-rotate {
	0% {
		filter: hue-rotate(0deg);
	}
	100% {
		filter: hue-rotate(360deg);
	}
}

nav ul li:hover {
	cursor: pointer;
}

nav ul li a {
	padding: 20px 30px;
	width: 100%;
	height: 100%;
	font-size: 12pt;
	font-weight: 700;
	color: white;
}

main > figure {
	width: 100%;
	min-height: 500px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	background: url("/img/umnovosite.gif");
	background-size: 400px;
	background-repeat: repeat;
	background-attachment: fixed;
	background-position: top left;
	margin: 0;
}

main > figure div {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: auto;
	max-width: 1200px;
	background: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(6px);
	border: 15px solid teal;
	border-style: outset;
	padding: 10px;
}

main > figure img {
	width: 100%;
	max-width: 250px;
	height: auto;
	margin: 10px;
}

main > figure div h1 {
	text-align: center;
	font-size: 40pt;
	line-height: 50pt;
	margin: 0;
	color: purple;
	font-weight: 900;
	padding: 0px 15px;
	word-spacing: 20px;
	text-transform: capitalize;
}

main > figure div h1 span {
	font-family: "Asset", cursive;
	animation: hue-rotate 1s linear infinite;
}

main > figure div h1 span:nth-child(even) {
	text-transform: uppercase;
}

main > figure div h1 span:nth-child(2) {
	animation-delay: 0.1s;
}

main > figure div h1 span:nth-child(3) {
	animation-delay: 0.2s;
}

main > figure div h1 span:nth-child(4) {
	animation-delay: 0.3s;
}

main > figure div h1 span:nth-child(5) {
	animation-delay: 0.4s;
}

main > figure div h1 span:nth-child(6) {
	animation-delay: 0.5s;
}

main > figure div h1 span:nth-child(7) {
	animation-delay: 0.6s;
}

main > figure div h1 span:nth-child(8) {
	animation-delay: 0.7s;
}

main > figure div h1 span:nth-child(9) {
	animation-delay: 0.8s;
}

main > figure div h1 span:nth-child(10) {
	animation-delay: 0.9s;
}

main > figure div h1 span:nth-child(11) {
	animation-delay: 1s;
}

main > figure div h1 span:nth-child(12) {
	animation-delay: 1.1s;
}

main > figure div h1 span:nth-child(13) {
	animation-delay: 1.2s;
}

main > figure div h1 span:nth-child(14) {
	animation-delay: 1.3s;
}

main > figure div h1 span:nth-child(15) {
	animation-delay: 1.4s;
}

main > figure div h1 span:nth-child(16) {
	animation-delay: 1.5s;
}

main > figure div h1 span:nth-child(17) {
	animation-delay: 1.6s;
}

main > figure div h1 span:nth-child(18) {
	animation-delay: 1.7s;
}

main > figure div h1 span:nth-child(19) {
	animation-delay: 1.8s;
}

main > figure div h1 span:nth-child(20) {
	animation-delay: 1.9s;
}
main > figure div h1 span:nth-child(21) {
	animation-delay: 2s;
}

main > figure div h1 span:nth-child(22) {
	animation-delay: 2.1s;
}

main > figure div h1 span:nth-child(23) {
	animation-delay: 2.2s;
}

main > figure div h1 span:nth-child(24) {
	animation-delay: 2.3s;
}

main > figure div h1 span:nth-child(25) {
	animation-delay: 2.4s;
}

main > figure div h1 span:nth-child(26) {
	animation-delay: 2.5s;
}

main > figure div h1 span:nth-child(27) {
	animation-delay: 2.6s;
}

article {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	width: 100%;
	max-width: 1200px;
	height: auto;
}

article section {
	position: relative;
	width: 70%;
	background-color: darkorange;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 40px 60px 40px;
	background-image: url("https://web.archive.org/web/20090808094737/http://www.geocities.com/foxtrot19852005/line_of_fire.gif");
	background-position: bottom;
	background-size: 100%;
	background-attachment: scroll;
	background-repeat: no-repeat;
}

article:nth-child(3) > section:nth-child(1) img {
	max-width: 350px;
}

article section:nth-child(2) {
	background-color: dodgerblue;
}

article section:nth-child(3) {
	background-color: purple;
}

article aside {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	position: absolute;
	width: 30%;
	height: 100%;
	right: 0;
	background: black;
}

article aside img {
	outline: none;
	outline-offset: unset;
	margin: 1px;
}

article:nth-child(3) section img {
	width: 70%;
	height: auto;
}

article section p {
	font-size: 20pt;
	color: lawngreen;
	line-height: 26pt;
	font-weight: 900;
	text-shadow: 1px 1px 0px black, 2px 2px 0px black, 3px 3px 0px black;
	margin: 40px 0px;
	animation: hue-rotate 10s linear infinite;
}

article section a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 70%;
	height: auto;
	padding: 20px 10px;
	background: linear-gradient(135deg, red, orange, yellow, green, blue, violet);
	background-position: center;
	color: white;
	text-shadow: 1px 1px 0px black, 2px 2px 0px black;
	border: 10px solid blue;
	border-style: outset;
	margin-bottom: 30px;
	font-size: 30pt;
	text-align: center;
}

article section a:hover {
	background-size: 200%;
}

article:nth-child(4) {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
	max-width: unset;
	padding: 40px 0px;
	background: linear-gradient(
		135deg,
		#ff000066,
		#ff990066,
		#f7ff0066,
		#02ff0066,
		#0e00ff66,
		#b400ff66
	);
	backdrop-filter: blur(6px);
}

article:nth-child(4) > figure {
	background: linear-gradient(150deg, red, orange, yellow, green, blue, violet);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 1200px;
	height: auto;
	padding: 30px 60px;
	border: 6px solid teal;
	border-style: outset;
}

article:nth-child(4) > figure img {
	width: 100%;
	height: auto;
}

article:nth-child(4) > figure figcaption {
	color: red;
	font-size: 20pt;
	line-height: 26pt;
	font-weight: 900;
	text-align: center;
	padding: 20px 30px;
}

article:nth-child(4) > section {
	flex-direction: row;
	flex-wrap: wrap;
	padding: 0px;
	width: 100%;
	max-width: 1200px;
	background: url("https://web.archive.org/web/20090829162930/http://geocities.com/westhollywood/heights/1472/rainbow.gif");
	background-size: 80%;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

article:nth-child(4) > section img {
	filter: drop-shadow(1px 1px 10px black);
	margin: 20px;
	max-width: 100%;
	height: auto;
}

article:nth-child(5) {
	padding: 60px 0px;
	background: red;
	align-items: center;
	justify-content: center;
}

article:nth-child(5) table {
	width: 90%;
	height: auto;
	background: cyan;
	border: 6px solid yellow;
	border-style: outset;
	color: white;
}

article:nth-child(5) h2 {
	font-size: 60pt;
	line-height: 70pt;
	color: white;
	margin: 0;
	margin-bottom: 10px;
	text-align: center;
	padding: 0px 20px;
}

article:nth-child(5) > img {
	max-width: 100%;
	height: auto;
	margin-bottom: 10px;
}

article:nth-child(5) table tr {
	background: green;
	border: 3px solid deeppink;
	border-style: outset;
}

article:nth-child(5) table tr th {
	font-size: 30pt;
	line-height: 40pt;
	color: white;
	background: mediumspringgreen;
	border: 2px solid orange;
	border-style: outset;
	color: red;
	border: 3px solid beige;
	border-style: outset;
}

article:nth-child(5) table tr td {
	width: 33%;
	font-size: 18pt;
	text-align: center;
	padding: 20px;
	line-height: 24pt;
	color: white;
	font-weight: 900;
}

article:nth-child(5) table tr td img {
	max-width: 100%;
	height: auto;
	border: 4px solid teal;
	border-style: outset;
}

footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
	min-height: 400px;
	background: red;
	color: white;
	font-size: 100pt;
	font-weight: 900;
	background: url("https://i.giphy.com/media/UvPvsX9oMlMWs/giphy.webp");
	background-size: 200px;
	background-repeat: repeat;
	background-position: center;
}

@media (max-width: 1165px) {
	::-webkit-scrollbar {
		width: 15px;
	}
	header {
		padding: 20px;
	}
	header > nav {
		align-items: flex-end;
	}
	header > nav > ul {
		display: none;
	}
	header > nav > a {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: auto;
		height: auto;
	}
	header > nav > a svg {
		width: 40px;
		height: auto;
		fill: black;
	}
	main > figure div {
		flex-direction: column;
		margin: 150px 20px;
	}
	main > figure img {
		width: 100%;
	}
	main > figure div h1 {
		margin: 20px 0px;
		font-size: 30pt;
		line-height: 40pt;
	}
	article section a {
		width: 90%;
	}
	article:nth-child(3) section img {
		width: 100%;
		height: auto;
	}
	article:nth-child(5) h2 {
		font-size: 40pt;
		line-height: 50pt;
	}
	footer {
		font-size: 60pt;
	}
}

@media (max-width: 470px) {
	header > a {
		margin-right: 25px;
	}
	header > a mark {
		font-size: 18pt;
	}
	article section {
		padding: 20px 20px 40px 20px;
	}
	article section p {
		font-size: 16pt;
		line-height: 22pt;
	}
	article:nth-child(4) > figure {
		padding: 30px 20px;
	}
	tr {
		display: block;
		float: left;
	}
	th,
	td {
		display: block;
	}
	article:nth-child(5) table tr td {
		width: 100%;
	}
	footer {
		font-size: 32pt;
	}
}

@media (max-width: 360px) {
	header > a mark {
		font-size: 16pt;
	}
}