/* latin-ext */
	@font-face {
	  font-family: 'Inter';
	  font-style: normal;
	  font-weight: 100 900;
	  font-display: swap;
	  src: url(/fonts/UcCo3FwrK3iLTcvsYwYL8g.woff2) format('woff2');
	  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
	}
	/* latin */
	@font-face {
	  font-family: 'Inter';
	  font-style: normal;
	  font-weight: 100 900;
	  font-display: swap;
	  src: url(/fonts/UcCo3FwrK3iLTcviYwY.woff2) format('woff2');
	  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}
	
	/* cyrillic-ext */
	@font-face {
	  font-family: 'Inter';
	  font-style: normal;
	  font-weight: 100 900;
	  font-display: swap;
	  src: url(/fonts/UcCo3FwrK3iLTcvvYwYL8g.woff2) format('woff2');
	  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
	}
	/* cyrillic */
	@font-face {
	  font-family: 'Inter';
	  font-style: normal;
	  font-weight: 100 900;
	  font-display: swap;
	  src: url(/fonts/UcCo3FwrK3iLTcvmYwYL8g.woff2) format('woff2');
	  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
	}

	html {
		scrollbar-color: #888 #ffffff;
		scrollbar-gutter: stable;
	}
	
	html:has(body.forcedark) {
		scrollbar-color: #888 #141414;
	}
	
	body.forcedark select {
		color-scheme: dark;
	}
	
	body:not(.forcedark) select {
		color-scheme: light;
	}

	.searchInput input {
		background: #e6e6e6;
		color: black;
	}
	
	.searchContainer {
		background: rgba(0, 0, 0, .9);
		background-image: linear-gradient(-180deg, #302f35 10%, rgba(26, 26, 26, 0) 100%);
		width: 100.0dvw;
		height: 100.0dvh;
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 10;
		display: none;
		overflow: auto;
		transition: opacity 0.2s linear;
		opacity: 0;
	}

	.searchInput {
		max-width: 640px;
		margin-right: auto;
		margin-left: auto;
		margin-top: 45px;
		position: relative;
		padding: 0px 20px;
	}

	.searchInput input {
		width: calc(100% - 40px);
		height: 50px;
		font-family: Inter;
		font-size: 1rem;
		border-radius: 5px;
		padding: 0px 15px 0px 25px;
		border: none;
		font-weight: 500;
	}

	.searchInput input:focus {
		outline: none;
	}
	
	textarea::placeholder, input.comment::placeholder {
		color: #030303;
	}

	.searchItem div.extra img {
		width: 28px;
		margin-bottom: -10px;
		margin-right: -4px;
		margin-left: -3px;
	}
	
	.searchItem div.extra {
		display: inline-block;
		background: #fbfbfb;
		width: fit-content;
		padding: 5px 10px 5px 6px;
		border-radius: 5px;
		text-align: center;
		font-size: 1.1rem;
		margin-bottom: 5px;
		transition: background-color 0.2s linear;
		cursor: pointer;
		user-select: none;
	}
	
	.searchItem div.extra {
		color: black;
		background: #e8e8e8;
	}

	.searchInput span {
		position: absolute;
		top: 7px;
		right: 26px;
		background: #c62929;
		border-radius: 4px;
		height: 37px;
		text-align: center;
		width: 49px;
		justify-content: center;
		align-items: center;
		display: flex;
	}

	.searchInput img {
		width: 31px;
		cursor: pointer;
	}

	.searchItems {
		max-width: 640px;
		margin-right: auto;
		margin-left: auto;
		margin-top: 20px;
		padding: 0px 20px;
		-webkit-tap-highlight-color: transparent;
	}

	.searchItem > a {
		color: white;
		text-decoration: none;
		border-bottom: 2px solid #454545;
		border-radius: 5px;
		display: block;
		transition: background-color 0.2s linear;
	}

	.searchItemText {
		display: block;
		position: relative;
		top: 11px;
		left: 36px;
		overflow: hidden;
		text-overflow: ellipsis;
		width: calc(100% - 80px);
		white-space: nowrap;
		margin-bottom: 19px;
		font-size: 1.1rem;
	}

	.searchItem .extraItems {
		text-align: left;
		margin-right: 4px;
	}
	
	.searchItem div.extra:not(last-child) {
		margin-left: 5px;			
	}

	.searchItem:not(:first-child) {
		margin-top: 10px;
	}

	.searchItemIMG {
		margin-top: 10px;
		width: 31px;
		position: absolute;
	}

	.searchItem > a:hover {
		background-color: #4d4d4d;
	}

	.searchItem:last-child {
		margin-bottom: 25px;
	}

	.no-scroll {
	  overflow: hidden;
	  height: 100vh;
	}
	
	header {
		background-color: #02696d;
		background: linear-gradient(to left, #0092a2, #02696d);
		box-shadow: 0px 3px 8px #7d7d7d;
	}

	.navbar {
		height: 70px;
		padding: 0 24px;
		color: white;
		display: flex;
		align-items: center;
	}

	.navbar__brand {
		font-size: 1.4rem;
		font-weight: 700;
		letter-spacing: 0.5px;
		margin-left: 20px;
		color: white;
		position: relative;
		height: 49px;
	}
	
	.navbar__brand span {	
		display: block;
		position: relative;
		top: -5px;
		margin-top: -5px;
		font-size: 0.8rem;
		text-align: center;
	}

	.navbar__menu {
		display: flex;
		align-items: center;
		gap: 28px;
	}

	.navbar__link {
		color: white;
		text-decoration: none;
		font-size: 18px;
		font-weight: 500;
		position: relative;
		transition: color 0.25s ease;
	}

	.navbar__link::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: -6px;
		width: 0;
		height: 2px;
		background: #38bdf8;
		transition: width 0.25s ease;
	}

	.navbar__link:hover,
	.navbar__link.active {
		color: white;
	}

	.navbar__link:hover::after,
	.navbar__link.active::after {
		width: 100%;
	}

	.navbar__toggle {
		display: none;
		border: none;
		background: transparent;
		color: white;
		font-size: 1.8rem;
		cursor: pointer;
	}

	.overlay {
		display: none;
	}
	
	.logoIMG {
		top: 0;
		position: relative;
		width: 100%;
		border-radius: 4px;
		background: white;
		padding: 4px 0px;
		opacity: 0.95;
		box-shadow: 0px 0px 4px 2px #78a6a8;
		display: none;
	}

	@media (max-width: 768px) {
		.navbar__toggle {
			display: block;
		}

		.navbar__menu {
			position: fixed;
			top: 0;
			left: -330px;
			width: 280px;
			max-width: min(calc(100dvw - 150px), 75dvw);
			height: 100vh;
			background: #02696d;
			flex-direction: column;
			align-items: flex-start;
			padding: 10px 24px 24px 24px;
			gap: 18px;
			transition: left 0.3s ease;
			z-index: 6;
			text-align: left;
		}

		.navbar__menu.open {
			left: 0;
		}

		.navbar__link {
			width: 100%;
			padding: 12px 0;
			border-bottom: 1px solid rgba(255, 255, 255, 0.06);
		}

		.overlay {
			display: none;
			position: fixed;
			inset: 0;
			background: rgba(0, 0, 0, 0.45);
			z-index: 5;
		}

		.overlay.show {
			display: block;
		}
		
		.logoIMG {
			display: block;
		}
	}
	
	.navbar__menu img {
		top: 4px;
		position: relative;
	}
	
	body.forcedark header {
		background: linear-gradient(to left, #01454c, #003343);
	}
		
	@media (max-width: 768px) {
		body.forcedark .navbar__menu {
			background: #002e30;
		}
		
		body.forcedark .navbar__link {
			border-bottom: 1px solid rgb(255, 255, 255, 0.29);
		}
	}
	
	/*************** Stars ***************/
	.switch {
		position: absolute;
		display: inline-block;
		width: 60px;
		height: 34px;
		top: 18px;
		right: 10px;
	}

	.switch #inputdarkner {
		opacity: 0;
		width: 0;
		height: 0;
	}
	
	.slider {
		position: absolute;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #2196f3;
		-webkit-transition: 0.4s;
		transition: 0.4s;
		z-index: 0;
		overflow: hidden;
	}
	
	.slider.round {
		border-radius: 34px;
	}
	
	.sun-moon {
		position: absolute;
		content: "";
		height: 26px;
		width: 26px;
		left: 4px;
		bottom: 4px;
		background-color: yellow;
		-webkit-transition: 0.4s;
		transition: 0.4s;
	}
	
	.slider.round .sun-moon {
		border-radius: 50%;
	}
	
	#inputdarkner:checked+.slider .sun-moon {
		-webkit-transform: translateX(26px);
		-ms-transform: translateX(26px);
		transform: translateX(26px);
		background-color: white;
		-webkit-animation: rotate-center 0.6s ease-in-out both;
		animation: rotate-center 0.6s ease-in-out both;
	}
	
	.stars {
		transform: translateY(-32px);
		opacity: 0;
		transition: 0.4s;
	}
	
	.star {
		fill: white;
		position: absolute;
		-webkit-transition: 0.4s;
		transition: 0.4s;
		animation-name: star-twinkle;
		animation-duration: 2s;
		animation-iteration-count: infinite;
	}
	
	#star-1 {
		width: 20px;
		top: 2px;
		left: 3px;
		animation-delay: 0.3s;
	}
	
	#star-2 {
		width: 6px;
		top: 16px;
		left: 3px;
	}

	#star-3 {
		width: 12px;
		top: 20px;
		left: 10px;
		animation-delay: 0.6s;
	}

	#star-4 {
		width: 18px;
		top: 0px;
		left: 18px;
		animation-delay: 1.3s;
	}

	@keyframes star-twinkle {
		0% {
			transform: scale(1);
		}

		40% {
			transform: scale(1.2);
		}

		80% {
			transform: scale(0.8);
		}

		100% {
			transform: scale(1);
		}
	}

	#inputdarkner:checked+.slider .stars {
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
	
	#inputdarkner:checked+.slider {
		background-color: black;
	}
	
	#inputdarkner:checked+.slider .sun-moon .moon-dot {
		opacity: 1;
	}
	
	.moon-dot {
		opacity: 0;
		transition: 0.4s;
		fill: gray;
	}
	
	#moon-dot-1 {
		left: 10px;
		top: 3px;
		position: absolute;
		width: 6px;
		height: 6px;
		z-index: 4;
	}
	
	#moon-dot-2 {
		left: 2px;
		top: 10px;
		position: absolute;
		width: 10px;
		height: 10px;
		z-index: 4;
	}
	
	#moon-dot-3 {
		left: 16px;
		top: 18px;
		position: absolute;
		width: 3px;
		height: 3px;
		z-index: 4;
	}
	
	#light-ray-1 {
		left: -8px;
		top: -8px;
		position: absolute;
		width: 43px;
		height: 43px;
		z-index: -1;
		fill: white;
		opacity: 10%;
	}
	
	#light-ray-2 {
		left: -50%;
		top: -50%;
		position: absolute;
		width: 55px;
		height: 55px;
		z-index: -1;
		fill: white;
		opacity: 10%;
	}
	
	#light-ray-3 {
		left: -18px;
		top: -18px;
		position: absolute;
		width: 60px;
		height: 60px;
		z-index: -1;
		fill: white;
		opacity: 10%;
	}
	
	#cloud-1 {
		left: 30px;
		top: 15px;
		width: 40px;
	}
	
	#cloud-2 {
		left: 44px;
		top: 10px;
		width: 20px;
	}
	
	#cloud-3 {
		left: 18px;
		top: 24px;
		width: 30px;
	}
	
	#cloud-4 {
		left: 36px;
		top: 18px;
		width: 40px;
	}
	
	#cloud-5 {
		left: 48px;
		top: 14px;
		width: 20px;
	}
	
	#cloud-6 {
		left: 22px;
		top: 26px;
		width: 30px;
	}
	
	.cloud-dark {
		position: absolute;
		fill: #ccc;
		animation-name: cloud-move;
		animation-duration: 6s;
		animation-iteration-count: infinite;
		animation-delay: 1s;
	}

	.cloud-light {
		position: absolute;
		fill: #eee;
		animation-name: cloud-move;
		animation-duration: 6s;
		animation-iteration-count: infinite;
	}
	
	@keyframes cloud-move {
		0% {
			transform: translateX(0px);
		}

		40% {
			transform: translateX(4px);
		}

		80% {
			transform: translateX(-4px);
		}

		100% {
			transform: translateX(0px);
		}
	}
	
	.latest {
		margin-bottom: 0px;
		padding-bottom: 13px;
		background: #ffffff;
		padding-left: 10px;
		padding-top: 15px;
		max-width: 1000px;
		margin-left: auto;
		margin-right: auto;
		border-radius: 4px;		
	}
	
	.latestItem {
		display: inline-block;
		width: calc(33.3% - 12px);
		margin-bottom: -4px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		cursor: pointer;
		padding-right: 5px;
		color: black;
	}
	
	.latestItem:before {
		content: '';
		display: inline-block;
		border-radius: 50%;
		height: 5px;
		width: 5px;
		border: 2px solid #838383;
		transition: background-color 0.2s linear;
	}
	
	.latestItem:hover {
		
	}
	
	.latestItem:hover:before, .latestItem:active:before, .latestItem:focus:before, .latestItem:visited:before {
		 background-color: #838383;
	}
	
	.latestTItle {
		color: black;
		margin-bottom: 12px;
	}
	
	.latestTItle img {
		width: 36px;
		margin-bottom: -11px;
		position: relative;
		top: -1px;
		margin-right: -5px;
		margin-left: -5px;
	}
	
	body.forcedark .latest {
		background-color: #1a1a1b;
	}
	
	body.forcedark .latestItem {
		color: white;
	}
	
	body.forcedark .latestTItle {
		color: white;
	}
	
	body.forcedark .latest img {
		background: #ffffff;
		border-radius: 15%;
		padding: 1px;
		width: 34px;
		margin-left: 0px;
		margin-right: 3px;
	}
	
	@media (min-width: 1000px) {
		.latest {
			margin-bottom: 20px;
		}
	}
	
	/******* Language System *********/
	.lang {
		position: fixed;
		bottom: 10px;
		left: 10px;
		border: 3px solid #f0f0f0;
		border-radius: 50%;
		height: 35px;
		width: 35px;
		overflow: hidden;
		box-shadow: 0px 0px 10px 3px #b2b2b2;
		transition: transform 0.2s linear;
		box-sizing: content-box;
	}
	
	.lang:hover {
		box-shadow: 0px 0px 10px 3px #49a1dc;
	}
	
	
	.flag {
		position: absolute;
		display: inline-block;
		top: 0px;
		left: 0px;
		transition: opacity 0.2s linear;
		cursor: pointer;
	}
	
	.flag img {	
		width: 35px;
		height: 35px;		
	}
	
	.flag.active {
		z-index: 2;
	}
	
	.flag.active:hover {
		opacity: 0;
	}