header { overflow-x: hidden; overflow-y: hidden; position: relative; background: var(--red); color: white; }
header .wrapper { overflow-x: visible; overflow-y: visible; padding-top: 2rem; padding-bottom: 7.5rem; }
header article { position: relative; z-index: 2; padding: 3.5rem 0 0 0; width: 41rem; }

header h2 { font-weight: 500; font-size: 1.7rem; margin-bottom: 1.2rem; }

header article p { font-size: 1rem; font-weight: 500; max-width: 85%; }
header article form { margin-top: 2.5rem; } 

header a.rating_link { color: var(--red); background: white;  }
header a.rating_link:hover { color: white; background: black; }

img#logo 	{ width: 8rem; position: relative; }

header .wrapper > img,
	#vote .wrapper > img { position: absolute; z-index: 1; display: block; }

#george { height: 100%; right: 0rem; top:0; }
#robo 	{ width: 7.3rem; right: -5rem; top: 1.5rem; }
#heart 	{ width: 7rem; right: 14rem; top: 1.5rem; }
#kubik 	{ width: 5.5rem; right: 10rem; bottom: 1.5rem; }
#fish 	{ width: 7rem; left: 29%; bottom: 7.5rem; }
#ai 	{ width: 26.5rem; right: 17rem; bottom: 0; }

#ai2 	{ width: 16rem; right: 25%; bottom: -3.6rem; }

#stars5 	{ width: 15rem; left: -16.5rem; top: 4rem; }
#point_lt 	{ width: 0.85rem; left: -14rem; top: 22.5rem; }
#saturn 	{ width: 3.0rem;  left: -5rem; top: 26.5rem; }
#atom 		{ width: 10.5rem; left: -18rem; top: -2rem; z-index: 2; }
#point_lb 	{ width: 1.3rem;  left: -1rem; top: 37rem; }
#ufo_left 	{ width: 11rem;   left: -13rem; bottom: 3rem; }


#ufo_center { width: 3.5rem;  right: 30%; top: 2.4rem; }
#star_ct 	{ width: 1.9rem;  left: 28%;  top: 4.8rem;  transform: rotate(42deg); }
#point_ct 	{ width: 0.85rem; left: 46%; top: 3.1rem; }
#point_cb 	{ width: 0.9rem;  right: 22%; bottom: 3.4rem; }
#troe 		{ width: 21rem;   left: 12%;   bottom: 0; }

#stars3 	{ width: 15rem;   right: -15rem; top: 16rem; transform: rotate(-34deg); }
#star_rt 	{ width: 1.8rem;  right: -14rem;  top: 4.5rem; }
#point_rc 	{ width: 0.85rem; right: -12rem; top: 31rem; }
#ufo_right 	{ width: 3.5rem;  right: -5rem; bottom: 1rem; }
#star_rb 	{ width: 3.2rem;  right: -16rem; top: 2rem; }
#jupiter 	{ width: 2rem; 	  right: -5rem;  top: 10rem; }
#point_rb 	{ width: 1.2rem;  right: -13rem; top: 13rem; }




aside img { max-width: 100%; }


#vote { background: var(--red); overflow-x: hidden; }
#vote .wrapper { padding-top: 0; }
#vote .wrapper > div { display: flex; gap: 2rem; align-items: center; padding: 2rem; background: #6A4DFF; border-radius: 1.2rem; color: white; position: relative; z-index: 20; }
#vote article { width: 65%;  padding-bottom: 0; }
#vote aside { width: 35%; text-align: left; }
#vote aside img { width: 13rem; }





#serial { overflow: hidden; }
#serial .wrapper { padding-bottom: 0; }
#serial article { display: flex; justify-content: space-between; align-items: end; margin-bottom: 2rem; }
#serial article h2 { margin-bottom: 1.2rem; }
#serial article p {  font-weight: 500; }



.boxes {  margin-bottom: 1rem; position: relative; }

.box { position: relative; width: 16.33rem; }
.box i { display: flex;  width: 100%; aspect-ratio: 558/318; overflow: hidden; background: #F0F1F2; border-radius: 1.2rem; align-items: center; justify-content: center; font-style: normal; flex-direction: column; color: #6e6f77; position: relative; }
.box i img { width: 100%; border-radius: 0.6rem; display: block; }
.box i b { display: block; font-family: 'Styrene B LC'; font-weight: bold; font-size: 3.5rem; margin-bottom: -0.3rem; }
.box i span { font-family: 'Styrene B LC'; font-weight: normal; font-size: 1.2rem; }
.box i iframe { width: 100%; height: 100%; }

.likes { display: flex; gap: 1rem; margin: 1rem 0 0.7rem 0; }
.likes > span { display: flex; gap: 0.3rem; align-items: center; }
.likes > span > img { filter: grayscale(1); transition: 300ms; height: 1.5rem; }
.opened .likes > span > img:hover { cursor: pointer; scale: 1.1; }
.opened .likes > span > img.active { filter: grayscale(0); }
.likes > span > span { min-width: 1.5rem; font-size: 0.8rem; }

.box h4 { line-height: 100%; }
.box p { font-family: 'Styrene B LC'; font-weight: normal; }

.future .likes { opacity: 0.5; }
.future p  { opacity: 0.5; margin-top: 1.3rem; }

#soon article { border-radius: 1.2rem; padding: 1rem; background: #A8F000; display: flex; align-items: center; margin-bottom: 2rem; justify-content: space-between; }
#soon article > div { padding: 1rem 2rem; }
#soon article h2 { line-height: 100%; margin-bottom: 1.5rem; }
#soon article p { font-weight: 500; margin-bottom: 1.8rem; }
#soon article h4 { font-family: 'Styrene A LC'; font-size: 1.9rem; margin-bottom: 0.2rem; }
#soon article img { width: 44%; }
#soon aside { text-align: center; font-weight: 500; font-size: 0.9rem; }


#job { background: var(--red); color: white; }
.actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
#job  h4 { font-size: 1.45rem; margin: 0.6rem 0; }
#job  p { font-family: 'Styrene B LC'; font-size: 0.9rem; line-height: 120%; display: block; }
#job  i { border-radius: 1rem; overflow: hidden; display: block; }
#job  img { width: 100%; height: auto; max-width: 20rem; display: block; margin: -1px auto; }

.actions > div:nth-child(1) i { background: #9933FF; }
.actions > div:nth-child(2) i { background: #A8F000; }
.actions > div:nth-child(3) i { background: #00E8F0; }


#join .wrapper { padding-top: 2rem; padding-bottom: 2rem; }
#join .wrapper > div { display: flex; gap: 1rem; align-items: center; }
#join article { width: 55%;  padding-bottom: 0; }
#join aside { width: 45%; text-align: center; }
#join aside img { width: 19rem; }
#join p { font-size: 1.3rem; margin-bottom: 2rem; }

#join a.rating_link { margin-top: 1rem; }

#join small { font-size: 0.7rem; color: #83838A; display: block; clear: both; margin-bottom: 1.5rem; }
#join small a { color: #83838A; text-decoration: underline; }
#join small a:hover { text-decoration: none; }

#join article small { margin-top: 3rem; }

#join .wrapper > small { display: none; }





@media (max-width: 999px){
	header .wrapper { padding-bottom: 12rem; }
	
	img#logo { width: 6.6rem; left: 50%; margin-left: -3.3rem; }
	#george { display: none; }
	#robo  { width: 14%; right: 0; top: -2rem; max-width: 10rem; }
	#heart { width: 10%; right: auto; top: 1rem; left: 0.5rem; }
	
	#stars5 {  width: 7rem;left: -3rem; top: 1.5rem; }
	#ufo_center { display: none; }
	#point_ct { width: 0.5rem; left: 25%; top: 5rem; }
	#point_cb { width: 0.5rem; right: 5%; top: 17rem; }
	#star_ct { left: 5%; top: 16rem; }
	
	#point_lt { left: 10%; top: 30rem; width: 0.5rem; }
	#fish { left: 20%; right: auto; }
	
	#ai2 { right: 3rem; }
	/*
	#kubik { width: 18%;  right: auto; bottom: 19%; left: 10%; max-width: 7rem; }
	#fish  { width: 27%; right: auto; bottom: 22%; left: 38%; max-width: 11rem; }
	#ai { position: relative; width: 85%; right: -14%; max-width: 40rem; margin-top: 1rem; }
	*/
	header article { text-align: center; width: 100%; }
	header article p { max-width: 100%; padding: 0 1rem; }


}




@media (max-width: 750px){
	header h2 { font-size: 1.375rem; }
	header p br { display: none; }
	
	#troe 	{ max-width: 55%; max-height: 7rem; left: 1rem; bottom: -0.2rem; }
	#ai2 	{ max-width: 40%; max-height: 14rem; right: 0.5rem; width: auto; bottom: -2.5rem; }
	/*#fish 	{ width: 22%; right: auto; bottom: 22%; left: 28%; max-width: 11rem; }*/
	#fish 	{ max-width: 22%; }
	
	#vote .wrapper > div { flex-direction: column; gap: 1.2rem; padding: 1.1rem; }
	#vote article, #vote aside { width: 100%; }
	#vote aside { text-align: center; }
	#vote aside img { width: auto; max-width: 11rem; }

	#serial article { flex-direction: column; justify-content: initial; gap: 1rem; align-items: start; }
	#serial .swiper-buttons::before { content: ''; flex: 1 1 0; }
	#serial .swiper-buttons { align-items: end; width: 100%; }
	#serial article p { font-size: 0.85rem; }
	#serial article p br { display: none; }
	
	
	#soon article { flex-direction: column; gap: 2rem; padding: 1.3rem 1rem; }
	#soon article div { padding: 0rem; }
	#soon article img { width: 100%; max-width: 25rem; }
	

	#join article br { display: none; }
	#join aside { margin-bottom: 1.5rem; }
	#join img { width: 100%; margin-top: 0rem; max-width: 14rem; }
	
	#join a.rating_link { margin-bottom: 1.5rem; }
	#join .wrapper > small { display: block; }
	#join .wrapper article > small { display: none; }
	
	.actions { display: flex; flex-direction: column; gap: 2rem; }
	.actions br { display: none; }

}

@media (max-width: 599px){
	header article { padding: 2.5rem 0 0 0; }
	h1 { line-height: 100%; }
	h1 span { display: block; line-height: 100%; }
	h1 br { display: none; }
	header h2 { font-size: 1.375rem; max-width: 20rem; margin-left: auto; margin-right: auto; }
	header article p { font-size: 1.1rem; }
	header article form { margin-top: 2rem; }

	

	#robo  { width: 22%; top: -1rem; right: -0.5rem; }
	#heart { width: 20%; }

	#kubik { bottom: 15%; }
	#fish { bottom: 17%; }

	#join .wrapper > div { flex-direction: column; gap: 1rem; }
	#join article, #join aside { width: 100%; }
	
}

@media (max-width: 499px){

	#kubik { bottom: 9%; }
	#fish { bottom: 12%; }

	#vote article h6 br { display: none; }

	header article p { padding: 0; }

	#job span { font-size: 1rem; }

	#soon article h2 { /*font-size: 2rem;*/ margin-bottom: 1.3rem; }
	#soon article p { font-size: 0.85rem; }
	#soon article h4 { font-size: 1.3rem; }
	#soon p br { display: none; }
	

}

@media (max-width: 399px){
	#point_lt { top: 35rem; }
}

@media (max-width: 359px){

}