@font-face {
  font-family: "KsConstellationSymbolsFV_zodiacs";
  src: url('/static/horoscope/font/KsConstellationSymbolsFV_zodiacs.woff2') format('truetype');
}


:root {
	--fire-color: 218, 79, 37;
	--earth-color: 145, 101, 31;
	--air-color: 82, 102, 103;
	--water-color: 49, 108, 160;
}


.fire_text {
	color: var(--fire-color);
}
.earth_text {
	color: var(--earth-color);
}
.air_text {
	color: var(--air-color);
}
.water_text {
	color: var(--water-color);
}

.fire_bg {
	background-color: var(--fire-color);
}
.earth_bg {
	background-color: var(--earth-color);
}
.air_bg {
	background-color: var(--air-color);
}
.water_bg {
	background-color: var(--water-color);
}

.fire_bg_trans {
	background-color: rgba(var(--fire-color), .5);
}
.earth_bg_trans {
	background-color: rgba(var(--earth-color), .2);
}
.air_bg_trans {
	background-color: rgba(var(--air-color), .5);
}
.water_bg_trans {
	background-color: rgba(var(--water-color), .3);
}

.fire_bg_dark_trans {
	background-color: rgba(var(--fire-color), .05);
}
.earth_bg_dark_trans {
	background-color: rgba(var(--earth-color), .05);
}
.air_bg_dark_trans {
	background-color: rgba(var(--air-color), .05);
}
.water_bg_dark_trans {
	background-color: rgba(var(--water-color), .05);
}




.astro_sign {
	position: relative;
	font-family: 'KsConstellationSymbolsFV_zodiacs';
	font-weight: bold;
	
	width: 6.5vw;
	aspect-ratio: 1;
	color: white;
	
	pointer-events: all;
}
.astro_sign[disabled] {
	color: #6f6f6f;

	pointer-events: none;
}

.astro_sign.badge {
	border-radius: 100%;
	border-style: solid;
	border-color: #ffffff1c;
	backdrop-filter: blur(.15em);
}
.astro_sign.badge.fancy {
	box-shadow: 0 0 1.25vw .125vw #0000008c;
	transition: box-shadow .4s;
}
.astro_sign.badge:not([disabled]).fancy:hover {
	box-shadow: 0 0 1vw white;
}
.astro_sign.badge[disabled] {
	filter: saturate(.1);
}

.astro_sign.big::after {
	position: absolute;
	font-size: 4vw;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.astro_sign.badge::after {
	filter: drop-shadow(0 0 .05em black);
}

.astro_sign.aries::after {
	content: "'";
}
.astro_sign.taurus::after {
	content: 'n';
}
.astro_sign.gemini::after {
	content: 'F';
}
.astro_sign.cancer::after {
	content: ',';
}
.astro_sign.leo::after {
	content: 'N';
}
.astro_sign.virgo::after {
	content: 'v';
}
.astro_sign.libra::after {
	content: 'Q';
}
.astro_sign.scorpio::after {
	content: 'i';
}
.astro_sign.sagittarius::after {
	content: 'h';
}
.astro_sign.capricorn::after {
	content: '0';
}
.astro_sign.aquarius::after {
	content: '$';
}
.astro_sign.pisces::after {
	content: 'b';
}

.astro_sign_card {
	position: absolute;
	width: 85%;
	padding: 3% 4% 1%;
	border-radius: 1.5em;
	color: white;
	backdrop-filter: blur(.2em);
	box-shadow: 0 0 1vw #00000054;
}

#main_container > .astro_sign_card {
	margin-top: 2vw;
}

.astro_sign_card .astro_sign_card_header {
	position: relative;
}

.astro_sign_card .astro_sign_details {
	margin-left: 1.5vw;
	font-size: 1.45em;
}

.astro_sign_card .astro_sign_title {
	font-family: serif;
	font-size: 1.7em;
}

.astro_sign_card .astro_sign_duration {
	font-size: 56%;
	color: #ffffffa3;
}

.astro_sign_card .astro_sign_descr {
	margin-top: 4%;
}

.astro_sign_card .horoscope_date {
	margin-top: 2%;
	color: #a4a4a4;
	text-shadow: #000000c2 0 0 10px;
	font-size: .85em;
}

.astro_sign_card .share_btns {
	text-align: right;
}
/*
.astro_sign_card .share_btns > .share_btn:not(:last-child) {
	margin-right: .2em;
}
*/


#wheels_container {
	position: relative;
	width: 100%;
	height: 100%;
}

/*
#astro_wheel {
	position: absolute;
	width: 60%;
	aspect-ratio: 1;
	border-radius: 50%;
}
*/

#wheel_info {
	position: absolute;
	text-align: center;
	width: 35%;
	aspect-ratio: 1;
	font-size: 1.2vw;
	
	cursor: default;
}
#wheel_info:not(.error) {
	color: white;
}

#wheel_overall {
	margin-top: 2.5%;
	text-shadow: 0 0 10px black;
	max-height: 71%;
	overflow-y: scroll;
	scrollbar-width: none;
}

#wheel_date {
	margin-top: 4.5%;
	color: #a4a4a4;
	text-shadow: #000000c2 0 0 10px;
}

#astro_signs.wheel {
    position: absolute;
	width: 62%;
	aspect-ratio: 1;
}

#astro_signs.wheel > .astro_sign_item {
	position: absolute;
	width: 100%;
	height: 100%;
	
	pointer-events: none;
}

/*
#astro_sign_texts.wheel {
    position: absolute;
	width: 79%;
	aspect-ratio: 1;
	
	pointer-events: none;
}

#astro_sign_texts.wheel > .astro_sign_text_item {
	position: absolute;
	width: 100%;
	height: 100%;
}

.astro_sign_text {
	position: relative;
	font-size: 1.4vw;
	color: white;
}
*/

#astro_signs.wheel > .astro_sign_item:nth-child(1) {
    transform: translateY(calc(cos(1 * 180deg / 6) * -50%)) translateX(calc(sin(1 * 180deg / 6) * 50%));
}
#astro_signs.wheel > .astro_sign_item:nth-child(2) {
    transform: translateY(calc(cos(2 * 180deg / 6) * -50%)) translateX(calc(sin(2 * 180deg / 6) * 50%));
}
#astro_signs.wheel > .astro_sign_item:nth-child(3) {
    transform: translateY(calc(cos(3 * 180deg / 6) * -50%)) translateX(calc(sin(3 * 180deg / 6) * 50%));
}
#astro_signs.wheel > .astro_sign_item:nth-child(4) {
    transform: translateY(calc(cos(4 * 180deg / 6) * -50%)) translateX(calc(sin(4 * 180deg / 6) * 50%));
}
#astro_signs.wheel > .astro_sign_item:nth-child(5) {
    transform: translateY(calc(cos(5 * 180deg / 6) * -50%)) translateX(calc(sin(5 * 180deg / 6) * 50%));
}
#astro_signs.wheel > .astro_sign_item:nth-child(6) {
    transform: translateY(calc(cos(6 * 180deg / 6) * -50%)) translateX(calc(sin(6 * 180deg / 6) * 50%));
}
#astro_signs.wheel > .astro_sign_item:nth-child(7) {
    transform: translateY(calc(cos(7 * 180deg / 6) * -50%)) translateX(calc(sin(7 * 180deg / 6) * 50%));
}
#astro_signs.wheel > .astro_sign_item:nth-child(8) {
    transform: translateY(calc(cos(8 * 180deg / 6) * -50%)) translateX(calc(sin(8 * 180deg / 6) * 50%));
}
#astro_signs.wheel > .astro_sign_item:nth-child(9) {
    transform: translateY(calc(cos(9 * 180deg / 6) * -50%)) translateX(calc(sin(9 * 180deg / 6) * 50%));
}
#astro_signs.wheel > .astro_sign_item:nth-child(10) {
    transform: translateY(calc(cos(10 * 180deg / 6) * -50%)) translateX(calc(sin(10 * 180deg / 6) * 50%));
}
#astro_signs.wheel > .astro_sign_item:nth-child(11) {
    transform: translateY(calc(cos(11 * 180deg / 6) * -50%)) translateX(calc(sin(11 * 180deg / 6) * 50%));
}
#astro_signs.wheel > .astro_sign_item:nth-child(12) {
    transform: translateY(calc(cos(12 * 180deg / 6) * -50%)) translateX(calc(sin(12 * 180deg / 6) * 50%));
}

/*
#astro_sign_texts.wheel > .astro_sign_text_item:nth-child(1) {
    transform: translateY(calc(cos(1 * 180deg / 6) * -50%)) translateX(calc(sin(1 * 180deg / 6) * 50%));
}
#astro_sign_texts.wheel > .astro_sign_text_item:nth-child(2) {
    transform: translateY(calc(cos(2 * 180deg / 6) * -50%)) translateX(calc(sin(2 * 180deg / 6) * 50%));
}
#astro_sign_texts.wheel > .astro_sign_text_item:nth-child(3) {
    transform: translateY(calc(cos(3 * 180deg / 6) * -50%)) translateX(calc(sin(3 * 180deg / 6) * 50%));
}
#astro_sign_texts.wheel > .astro_sign_text_item:nth-child(4) {
    transform: translateY(calc(cos(4 * 180deg / 6) * -50%)) translateX(calc(sin(4 * 180deg / 6) * 50%));
}
#astro_sign_texts.wheel > .astro_sign_text_item:nth-child(5) {
    transform: translateY(calc(cos(5 * 180deg / 6) * -50%)) translateX(calc(sin(5 * 180deg / 6) * 50%));
}
#astro_sign_texts.wheel > .astro_sign_text_item:nth-child(6) {
    transform: translateY(calc(cos(6 * 180deg / 6) * -50%)) translateX(calc(sin(6 * 180deg / 6) * 50%));
}
#astro_sign_texts.wheel > .astro_sign_text_item:nth-child(7) {
    transform: translateY(calc(cos(7 * 180deg / 6) * -50%)) translateX(calc(sin(7 * 180deg / 6) * 50%));
}
#astro_sign_texts.wheel > .astro_sign_text_item:nth-child(8) {
    transform: translateY(calc(cos(8 * 180deg / 6) * -50%)) translateX(calc(sin(8 * 180deg / 6) * 50%));
}
#astro_sign_texts.wheel > .astro_sign_text_item:nth-child(9) {
    transform: translateY(calc(cos(9 * 180deg / 6) * -50%)) translateX(calc(sin(9 * 180deg / 6) * 50%));
}
#astro_sign_texts.wheel > .astro_sign_text_item:nth-child(10) {
    transform: translateY(calc(cos(10 * 180deg / 6) * -50%)) translateX(calc(sin(10 * 180deg / 6) * 50%));
}
#astro_sign_texts.wheel > .astro_sign_text_item:nth-child(11) {
    transform: translateY(calc(cos(11 * 180deg / 6) * -50%)) translateX(calc(sin(11 * 180deg / 6) * 50%));
}
#astro_sign_texts.wheel > .astro_sign_text_item:nth-child(12) {
    transform: translateY(calc(cos(12 * 180deg / 6) * -50%)) translateX(calc(sin(12 * 180deg / 6) * 50%));
}
*/





@media only screen and (max-width: 1000px) {
	.astro_sign_card_header {
		font-size: .7em;
	}
}

@media only screen and (max-width: 1000px) and (orientation: landscape) {
	#wheel_info {
		font-size: 1.5vw;
	}
	
	#wheel_date {
		font-size: 1.7vw;
	}
	
	.astro_sign_card {
		font-size: 80%;
	}
	
	.share_btn::after {
		font-size: 1em;
	}
	.astro_sign_card .share_btns > .share_btn:not(:last-child) {
		margin-right: .35em;
	}
	
	.astro_sign_card .horoscope_date {
		font-size: .8em;
	}
}

@media only screen and (max-width: 1000px) and (orientation: portrait) {
	.astro_sign {
		width: 20%;
	}
	
	.astro_sign.big::after {
		font-size: 10vw;
	}
	
	#astro_signs.wheel {
		width: 72.5%;
	}
	
	#wheel_info {
		width: 40%;
		font-size: .7em;
	}

	#wheel_title {
		font-size: 1.4em;
	}
	
	#main_container > .astro_sign_card {
		margin-top: 12%;
	}
	
	.astro_sign_card {
		padding: 5%;
	}
	
	.astro_sign_card .astro_sign_descr {
		margin-top: 5%;
	}
	
	.astro_sign_card .horoscope_date {
		font-size: .8em;
	}
	
	.astro_sign_card .astro_sign_duration {
		font-size: 69%;
	}
	
	.astro_sign_card .share_btns > .share_btn:not(:last-child) {
		margin-right: 3.25vw;
	}
	.astro_sign_card .share_btn {
		font-size: 4vw;
	}
}