
@font-face {
  font-family: "social_icons_1";
  src: url('/static/core/font/social_icons_1.ttf') format('truetype');
}


:root {
	--noise: url('data:image/webp;base64,UklGRmACAABXRUJQVlA4WAoAAAAAAAAAMQAAMQAAVlA4IOwBAABQCwCdASoyADIAPp1CnEuloyKhqBgKALATiWk8MqN/4fJykIsIUymBMz8rruhgexNbJcb7LZdsRbkA+61PUzmMOy9HYBqBKIdE/fC5EQNMrImpxq+lOhxlvYert218pZygeUAA/TCXmEiLkXLffElsHxNRCux3VkztJpqhCEwfXFAlyojODfUGNq71lEF8Ccf2XwBEWdaJZyc60g30nECEJthzwtJMGmjMvsC2h9fDEUx7HUmXCekVKCZmDEuTsT6Qbzjf7eh62HnfyaLt9Oq3WvCfOx/Qy1mJb42s+SFuR11l4ikW0K5QOTpzeqGg+g9th0pjc5fvxGIkgf7Ov3EOFbAZnO3tzwQRw5shJJBcgHqeFRns8Z2iy+m/xgRsuX2GNZ1gqWBw6EsL+I19cJTWtXulWyKvd5OlA6DOvmZeQ4zxjcxCSbQQx0nQp8c5zGF2Y3qwZN/fu8RwyuzyXBNMmiAmJ3K1K1+7VYqOIv/pdqqb4YHbKo38lTXFa3v4qovvRkV96VXj9eZUP+PQ5Ec7FS88B4XAwrnnajHmxxpsGIxHJrHvKTvCu+4ip7HzVDpl8k3KeRG+dU+s5cKmTN/tVIMOjgPEOfMl1EfRhzt1x4D2FBL6fcFGznkZRvf0N32AnPzalJmzC+AAAABQU0FJTgAAADhCSU0D7QAAAAAAEABIAAAAAQACAEgAAAABAAI4QklNBCgAAAAAAAwAAAACP/AAAAAAAAA4QklNBEMAAAAAAA5QYmVXARAABgBGAAAAAA==');
	
	--sidebar-bg-color: #13071a;
}


* {
	margin: 0;
	padding: 0;
	display: block;
	box-sizing: border-box;
}

.inline_content > * {
	display: inline-block;
}

.fit_content {
	width: fit-content;
	height: fit-content;
}

.h_center, .h_center_text {
	left: 50%;
	transform: translateX(-50%);
}
.h_center_text {
	text-align: center;
}
.v_center, .v_center_text {
	top: 50%;
	transform: translateY(-50%);
}
.h_center.v_center, .h_center_text.v_center, .h_center_.v_center_text, .h_center_text.v_center_text {
	transform: translateX(-50%) translateY(-50%);
}

.info {
	height: 100%;
	padding: 7%;
	overflow-y: scroll;
	scrollbar-width: none;
	color: white;
}
.info > *:not(:first-child) {
	margin-top: 4%;
}
.info_section > *:not(:first-child) {
	margin-top: .75%;
}
.info_subsection, .info_subsection .subsection_paragraphs:not(:only-child) {
	padding-left: 3%;
}

.url {
	word-break: break-all;
	color: #25b7ff;
}

.error {
	color: #ff8686;
}

.home_btn {
	width: 21%;
	aspect-ratio: 1;
	background-image: url('/static/core/media/icon_1.webp');
	background-size: contain;
	filter: saturate(0);
	opacity: .75;
	
	transition: opacity .5s, filter .5s;
}
.home_btn:hover {
	opacity: 1;
	filter: saturate(.5);
}
#right_sidebar_container > .home_btn {
	position: absolute;
	bottom: 4%;
	right: 10%;
}


html {
	height: 100%;
	width: 100%;
	overflow: hidden;
}

head {
	display: none;
}

body {
	/*background-color: #030e1b;*/
	background-color: #394d5f;
	/*background-image: url('/static/horoscope/media/bg_1.jpg');*/
	/*background-size: 598px;*/
	background-image: var(--noise);
	background-blend-mode: multiply;
	background-size: 6.5%;
	
	height: 100%;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
}

body > * {
	white-space: initial;
}

header, footer {
	display: none;
}

title {
	display: none;
}


#left_sidebar_container, #right_sidebar_container, #main_container {
	position: absolute;
	width: 100%;
	height: 100%;
}

#left_sidebar, #right_sidebar {
	position: relative;
	display: inline-block;
	width: 25%;
	height: 100%;
	background-color: var(--sidebar-bg-color);
	color: white;
}

#left_sidebar::before, #right_sidebar::before {
	content: ' ';
	width: 100%;
	height: 100%;
	background-color: var(--sidebar-bg-color);
	position: absolute;
	z-index: -1;
}
/*
#left_sidebar::before {
	transform: skewX(4deg);
	left: 8%;
}
#right_sidebar::before {
	transform: skewX(-4deg);
	left: -8%;
}
*/

main {
	position: relative;
	display: inline-block;
	height: 100%;
	width: 50%;
	font-size: 1.1em;
}


.bottom_info {
	font-family: Arial;
	font-size: 1vw;
	font-weight: unset;
}

#left_sidebar_container .bottom_info {
	position: relative;
	top: 92%;
	text-align: center;
}

.bottom_info > .website_domain {
	word-spacing: .4vw;
	color: #5a5a5a;
    font-size: 1em;
	
	cursor: default;
}

.bottom_info > .bottom_links {
	margin-top: 1%;
	font-size: .95vw;
	word-spacing: .3vw;
}
.bottom_info > .bottom_links > * {
	color: #acacac;
	text-decoration: none;
	word-spacing: initial;
	
	transition: color .2s;
}
.bottom_info > .bottom_links > *:hover {
	color: white;
}


.share_btn {
	position: relative;
	width: 1.5vw;
	aspect-ratio: 1;
	font-family: social_icons_1;
	text-decoration: none;
	color: white;
}
.share_btn::after {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
	font-size: 1.2em;
}
.share_btn.facebook::after {
	content: "f";
}
.share_btn.whatsapp::after {
	content: "w";
}
/*
.share_btn.twitter::after {
	content: "t";
}
*/
.share_btn.telegram::after {
	content: "t";
}
.share_btn.twitter_x::after {
	content: "x";
}
.share_btn.reddit::after {
	content: "r";
}
.share_btn.facebook.colored {
	color: #0866ff;
}
.share_btn.whatsapp.colored {
	color: #25d366;
}
/*
.share_btn.twitter.colored {
	color: #1da1f2;
}
*/
.share_btn.telegram.colored {
	color: #2aabee;
}
.share_btn.twitter_x.colored {
	color: #f7f9f9;
}
.share_btn.reddit.colored {
	color: #ff4500;
}

.share_btn.desaturated {
	transition: color .2s, filter .2s;
}

.share_btn.facebook.desaturated {
	filter: saturate(.3) brightness(1.3);
}
.share_btn.whatsapp.desaturated {
	filter: saturate(.3) brightness(1.2);
}
/*
.share_btn.twitter.desaturated {
	filter: saturate(.4) brightness(1);
}
*/
.share_btn.telegram.desaturated {
	filter: saturate(.4) brightness(1);
}
.share_btn.twitter_x.desaturated {
	filter: brightness(.7);
}
.share_btn.reddit.desaturated {
	filter: saturate(.5) brightness(1.1);
}

.share_btn.facebook.desaturated:hover {
	filter: saturate(.3) brightness(2);
}
.share_btn.whatsapp.desaturated:hover {
	filter: saturate(1) brightness(2);
}
/*
.share_btn.twitter.desaturated:hover {
	filter: saturate(.5) brightness(1.5);
}
*/
.share_btn.telegram.desaturated:hover {
	filter: saturate(.5) brightness(1.5);
	color: #0087ff;
}
.share_btn.twitter_x.desaturated:hover {
	filter: brightness(2);
}
.share_btn.reddit.desaturated:hover {
	filter: saturate(1.5) brightness(2);
}



@media only screen and (max-width: 1000px) {
	.info {
		font-size: .7em;
	}
}

@media only screen and (max-width: 1000px) and (orientation: portrait) {
	:root {
		--vertical_bars_height: 20%;
	}
	
	* {
		-webkit-tap-highlight-color: transparent;
	}
	
	html {
		position: fixed;
	}
	
	body {
		background-size: 12.5vw;
	}
	
	#left_sidebar, #right_sidebar {
		display: none;
	}
	
	header, footer {
		width: 100%;
		height: var(--vertical_bars_height);
		
		background-color: var(--sidebar-bg-color);
	}
	header {
		display: none;
	}
	footer {
		display: block;
		padding-top: 3%;
	}
	
	main {
		width: 100%;
		/*height: calc(100% - (var(--vertical_bars_height) * 2));*/
		height: calc(100% - var(--vertical_bars_height));
	}
	
	.bottom_info {
		text-align: center;
	}
	.bottom_info > .website_domain {
		font-size: 3vw;
	}
	.bottom_info > .bottom_links {
		font-size: 3vw;
	}
	
	footer > .home_btn {
		position: relative;
		width: 15%;
		margin-top: 6%;
	}
}