/* RESET */
* { 
	margin:0;
	padding:0;
	box-sizing: border-box;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
input, select, textarea, button { font-size: inherit; font-family: inherit; border: 0; background: none; }
button { cursor: pointer; }

a { text-decoration: none; }
p { margin-bottom: 1rem; line-height: 140%; }
p:last-child { margin-bottom:0; }
/* END OF RESET */



:root {
	--cherniy: 	#00313C;
	--riziy: 	#FD5A42;
	--riziy2: 	#E04E39;
	--zeleniy: 	#77E2C3;
}


@font-face {
	font-family: 'YFF RARE';
	font-weight: normal;
	src: url('fonts/YFFRARE-HyperRegular.otf'); /* IE 9 Compatibility Mode */
	src: url('fonts/YFFRARE-HyperRegular.otf?#iefix') format('embedded-opentype'), /* IE < 9 */
		url('fonts/YFFRARE-HyperRegular.woff2') format('woff2'), /* Super Modern Browsers */
		url('fonts/YFFRARE-HyperRegular.woff') format('woff'), /* Firefox >= 3.6, any other modern browser */
		url('fonts/fYFFRARE-HyperRegular.ttf') format('truetype'); /* Chrome < 4, Legacy iOS */
}
@font-face {
	font-family: 'YFF RARE';
	font-weight: bold;
	src: url('fonts/YFFRARE-MegaBlack.otf'); /* IE 9 Compatibility Mode */
	src: url('fonts/YFFRARE-MegaBlack.otf?#iefix') format('embedded-opentype'), /* IE < 9 */
		url('fonts/YFFRARE-MegaBlack.woff2') format('woff2'), /* Super Modern Browsers */
		url('fonts/YFFRARE-MegaBlack.woff') format('woff'), /* Firefox >= 3.6, any other modern browser */
		url('fYFFRARE-MegaBlack.ttf') format('truetype'); /* Chrome < 4, Legacy iOS */
}



html { font-family: 'YFF RARE';  font-size: 20px; }
body { min-width: 320px; color: var(--cherniy); overflow: hidden;}

h1 { font-size: 4.5rem; font-weight: bold; line-height: 110%; margin-bottom: 1.5rem; text-transform: uppercase; }
h2 { font-size: 3.2rem; font-weight: 600; line-height: 110%; margin-bottom: 0;  }
h3 { font-size: 1.9rem; font-weight: 500; line-height: 110%; margin-bottom: 1.5rem;  }


button, a.rating_link { 
	font-weight: bold;
	font-size: 0.9rem;
	line-height: 100%;
	min-width: 19rem; 
	padding: 0 2rem;
	height: 2.9rem;
	text-align: center; 
	border-radius: 1.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
	border: none;
	background: var(--cherniy);
	color: white;
	transition: 500ms;
}
button:hover { background: var(--zeleniy); }



#bg { position: fixed; width: 100%; z-index: 1; height: 100vh; height: 100dvh; }
#bg::after { content: ''; display: block; position: absolute; height: 100%; width: 100%; outline: solid 1px white; z-index: 2; }
#bg video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    pointer-events: none;	
}

main { position: relative; z-index: 2; }

.wrapper { margin: 0 auto; max-width: 1760px; padding: 2rem 4vw;  position: relative; display: flex; justify-content: center; }


header { position: absolute; width: 100%; z-index: 10; }
header .wrapper  {  }
header article { display: flex; justify-content: space-between; align-items: center; width: 100%; }
header img#logo { height: 2rem; z-index: 3; position: relative; }

button.music { display: block; width: 3.2rem; height: 3.2rem; border-radius: 50%; border: solid 1px white; background: #eee; transition: 300ms; position: relative; padding: 0; min-width: initial; position: relative;	 }
button.music:hover { background: #ddd; cursor: pointer; }
button.music::after { content: ''; display: block; height: 100%; width: 100%; position: absolute;	background: url('images/music_on.svg') center center / cover no-repeat; left:0; top:0; }
button.music.off::after { background-image: url('images/music_off.svg'); }


section { padding-top: 7rem; padding-bottom: 7rem; z-index: 5; }
section .wrapper { padding-top: 0; padding-bottom: 0; display: flex; }
section article { position: relative; z-index: 1; }


body,
	main, 
	#countdown { height: 100vh; height: 100dvh; }

#countdown { position: fixed;  z-index: 2; display: flex; align-items: center; width: 100%; justify-content: center; }
#countdown .wrapper { align-items: center; }

.wrapper {  gap: 4vw; }

#countdown article { width: 40%; }
#countdown article p { font-size: 1.5rem; line-height: 110%; margin-bottom: 1.5rem; }
#countdown article p:last-child { margin-bottom: 0; }

#countdown aside { position: relative; height: 90vh; height: 90dvh; width: 60%; display: flex; align-items: center;  justify-content: center; }
#countdown aside img { max-height: 100%; max-width: 100%; display: block; }

.countdown { position: absolute; top: 50%; left: 50%; transform: translate3d(-50%,-50%,0); color: white; padding-bottom: 1rem; }

footer {  position: absolute;  }


#intro .wrapper { justify-content: center; }
#intro .wrapper > div {  max-width: 44rem; }
#intro article { padding: 2.5rem; border-radius: 1.5rem; background: var(--zeleniy);  }
#intro article p { font-size: 1.2rem; letter-spacing: 1%; line-height: 110%; }





#game .swiper-wrapper { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
#game .swiper-slide { display: flex; flex-direction: column; gap: 0.5rem; max-width: 19rem; }
#game .title { background: linear-gradient(to right, #008C95, #00313C ); color: white; height: 2.7rem; font-weight: bold; letter-spacing: 1%; display: flex; align-items: center; justify-content: center; border-radius: 1.5rem; }
#game .list { padding: 0.8rem; border-radius: 0.8rem; background: white; flex: 1 1 0; }

#final h2 div:last-child { color: var(--riziy); }






footer { font-size: 0.7rem; bottom: 0; width: 100%; z-index: 10;}
footer .wrapper { overflow: hidden; display: flex; justify-content: space-between; align-items: center; padding-top: 1.5rem; padding-bottom: 1.5rem; }
footer .copy { display: flex; align-items: center; }
footer .copy a { display: inline-block; margin-right: 5px; }
footer .copy a img { display: block; height: 1.208rem; }
footer .copy span { display: inline-block; margin: 0 5px; }

footer a { color: white; } 
footer a:hover { text-decoration: underline; }




nowrap { white-space: nowrap; }

@media (max-width: 1800px), (max-height: 1000px){
	html { font-size: 19px; }
}
@media (max-width: 1600px), (max-height: 950px){
	html { font-size: 18px; }
}
@media (max-width: 1400px), (max-height: 900px){
	html { font-size: 17px; }
}
@media (max-width: 1200px), (max-height: 850px){
	html { font-size: 16px; }
}
@media (max-width: 999px), (max-height: 800px){
	html { font-size: 15px; }
}
@media (max-width: 750px), (max-height: 750px){
	html { font-size: 14px; }
}
@media (max-width: 359px){
	html { font-size: 13px; }
}
@media (max-height: 640px){
	html { font-size: 12px; }
}




@media (max-width: 1600px){
	h1 { font-size: 4rem; margin-bottom: 1.2rem; }
	#countdown article p { font-size: 1.3rem; }
	h2 { font-size: 3rem; }
}
@media (max-width: 1350px){
	.wrapper { padding: 2rem 3rem; gap: 3rem; }
}
@media (max-width: 1100px){
	h1 { font-size: 3.5rem; margin-bottom: 1rem; }
	h2 { font-size: 2.7rem; }
	#countdown article p { font-size: 1.1rem; }
}

@media (max-width: 999px) and (orientation: portrait){
	.wrapper { padding: 2rem 2rem; }

	section { padding-top: 5rem; padding-bottom: 3rem; }

	#countdown .wrapper { flex-direction: column; }
	#countdown article { width: 70%; }
	#countdown aside { height: auto; width: 70%; }
}

@media (max-width: 750px) and (orientation: portrait){
	#countdown article { width: 100%; }
	#countdown aside { width: 120%; position: relative; justify-content: center; }
	#countdown aside img {  max-height: 50vh; max-height: 50dvh; }
}


@media (max-width: 499px) {
	.wrapper { padding: 1.5rem; }
	section { padding-bottom: 3rem; }
	footer .wrapper { padding-top: 1rem; padding-bottom: 1rem; }

	#countdown .wrapper { gap: 1.5rem; }
	
	.two_cols aside > div { aspect-ratio: initial; width: 100%; }
}

@media (max-width: 399px){
	
	@media (max-height: 680px){
		html { font-size: 13px; }
	}
}



@media (max-width: 359px){

}