<!doctype html>
<html lang="ru">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<link rel="shortcut icon" href="/art-favico.ico">
		<link rel="preconnect" href="https://fonts.googleapis.com">
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
		
		<link href="https://necolas.github.io/normalize.css/8.0.1/normalize.css" rel="stylesheet">
		<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400&display=swap" rel="stylesheet">
		
		<title>Art-Donetsk.com - Слава Україні!</title>
		<style>
			html, body{height: 100%; min-height: 100%}
			body{display: flex; flex-direction: column; background: #121212; color: #ffffff; font-family: 'Roboto Mono', sans-serif;}
			.wrap{position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100%;}
			.wrap::before, .wrap::after{position: absolute; display: block; content: ''; width: 10px; height: 50%; left: 0;  z-index: 1;}
			.wrap::before{top: 0; background: blue;}
			.wrap::after{bottom: 0; background: yellow;}
			.days{font-size: 70vh; line-height: 1em; letter-spacing: -0.005em; font-weight: 300;}
			.text{font-size: 18px; line-height: 1em; margin-top: 20px;}
			.bottom{display: flex; width: 100%; align-items: center; justify-content: center; gap: 50px; font-size: 18px; line-height: 1em; margin-top: 50px; padding-top: 50px; border-top: 1px solid rgba(255,255,255,.1)}
		
			@media (max-width: 1023px){
				.days{font-size: 45vw;}
				.bottom{flex-direction: column; gap: 20px;}
			}
		
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="days"></div>
			<div class="text"><span></span> триває війна в Україні</div>
			<div class="bottom">
			    <div>Путін &mdash; хуйло!</div>
				<div>Русня &mdash; не люди!</div>
				<div>Віримо в ЗСУ!</div>
				<div>Слава Україні!</div>
			</div>
		</div>
		
		<script>
			function days(date_1, date_2){
				let difference = date_2.getTime() - date_1.getTime();
				let TotalDays = Math.ceil(difference / (1000 * 3600 * 24));
				return TotalDays;
			}
			
			function enumerate (num, dec) {
				if (num > 100) num = num % 100;
				if (num <= 20 && num >= 10) return dec[2];
				if (num > 20) num = num % 10;
				return num === 1 ? dec[0] : num > 1 && num < 5 ? dec[1] : dec[2];
			}
			
			let totalDays = days(new Date('02/24/2022'), new Date())
			
			document.querySelector('.days').innerHTML = totalDays;
			document.querySelector('.text span').innerHTML = enumerate(totalDays, ["день", "дні", "днів"]);
		</script>
		
	</body>
</html>