:root {
	--bottom-height: 65px;
	--global-header-height: 3.5rem;
	--navigation-drawer-width: 16rem;
	--sidebar-width: 21rem;
	--sidebar-entry-height-mobile: 3.5rem;
	--sidebar-entry-height-desktop: 4rem;
	--sidebar-header-height-mobile: 6rem;
	--sidebar-header-height-desktop: 5rem;
	--sidebar-header-border-radius: 20px;
	--primary-bg-color: #202124;
	--content-section-bg-color: #06080C;
	--nav-drawer-bg-color: #303134;
	--nav-drawer-item-hover-bg-color: #3c4043;
	--primary-border-color: #5f6368;
	--hover-highlight-bg-color: #36373A;
	--selected-item-bg-color: #64D2FF;
	--selected-item-text-color: #24242B;
	--selected-item-text-color-secondary: #2A586B;
	--highlight-text-color: var(--selected-item-bg-color);
	--secondary-text-color: #86888A;
	--hover-secondary-text-color: #B4B8C1;
	--highlight-red: #FF0000;
	--brand-accent-color: #79C447;
	--brand-accent-hover-color: #D2EBC1;
	--scrollbar-thumb-color: rgba(255, 255, 255, .2);
	--search-bar-bg: var(--hover-highlight-bg-color);
	--overlay-background: #000;
	--modal-content-color: #FFF;
	--destructive-button-color: #d32f2f;
	--destructive-button-hover-color: #e53935
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box
}

body,html {
	overflow: hidden;
	height: 100%
}

body {
	background-color: var(--primary-bg-color)
}

html body {
	font-family: Roboto,Helvetica Neue,Arial Nova,Nimbus Sans,Arial,sans-serif
}

button {
	all: unset;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: none;
	background: none;
	padding: 0;
	margin: 0;
	box-shadow: none;
	text-align: center;
	line-height: 1;
	box-sizing: border-box;
	cursor: pointer
}

@supports (-moz-appearance:none) {
	.custom-scroll {
		scrollbar-width: thin;
		scrollbar-color: var(--scrollbar-thumb-color) transparent
	}
}

.custom-scroll::-webkit-scrollbar {
	height: 1rem;
	width: .5rem
}

.custom-scroll::-webkit-scrollbar-thumb {
	background-color: var(--scrollbar-thumb-color);
	border-radius: 9999px
}

.custom-scroll::-webkit-scrollbar-track {
	background: transparent
}

.section-content {
	display: none;
	position: absolute;
	top: var(--global-header-height);
	width: 100%;
	height: calc(100% - var(--global-header-height));
	background-color: var(--content-section-bg-color);
	padding: 1rem;
	overflow-y: auto;
	z-index: 2000
}

.global-header,.sidebar-header,.sidebar-items {
	background-color: var(--primary-bg-color)
}

.global-header {
	position: relative;
	z-index: 500;
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: space-between;
	height: var(--global-header-height);
	padding: 0 1rem;
	border-bottom: 1px solid var(--primary-border-color)
}

.navigation-drawer {
	display: flex;
	overflow: auto;
	transition: transform .3s ease-in-out;
	position: fixed;
	top: 0;
	left: 0;
	width: var(--navigation-drawer-width);
	height: calc(100% - var(--global-header-height) + 1px);
	background-color: var(--nav-drawer-bg-color);
	padding: 0 .75rem 0 0;
	z-index: 3010;
	color: #fff;
	margin-top: calc(var(--global-header-height) - 1px);
	transform: translate(-100%)
}

.navigation-drawer-overlay {
	width: 100%;
	height: 100%;
	position: fixed;
	display: none;
	z-index: 3000
}

.drawer-content {
	display: flex;
	flex-direction: column;
	flex-grow: 1
}

.drawer-divider {
	border: none;
	border-bottom: 1px solid var(--primary-border-color);
	margin-right: -.75rem
}

.drawer-section-title {
	height: 3.5rem;
	padding: 0 1rem;
	font-size: 1.1rem;
	font-weight: 500;
	color: #fff;
	cursor: default;
	display: flex;
	align-items: center;
	line-height: 1.5
}

.navigation-drawer .icon {
	margin-right: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center
}

.logo {
	display: inline-flex
}

.logo svg {
	width: auto;
	height: 2rem
}

.burger-menu {
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-right: 1rem
}

.burger-menu svg,.header-button svg,.search-back-button svg,.clear-button svg {
	fill: #fff
}

.burger-menu svg {
	pointer-events: none;
	display: inherit;
	width: 100%;
	height: 100%
}

.burger-menu {
	z-index: 500
}

.sidebar-content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100svw;
	height: 100svh;
	max-height: 100%;
	z-index: 20;
	display: flex;
	flex-direction: column;
	transform: translateY(calc(100svh - (var(--sidebar-header-height-mobile) + var(--global-header-height))));
	transition: transform .3s ease-in-out
}

.sidebar-header {
	color: #fff;
	height: var(--sidebar-header-height-mobile);
	width: 100%;
	display: grid;
	gap: 8px;
	grid-template-rows: auto 1fr auto;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid var(--primary-border-color);
	border-radius: var(--sidebar-header-border-radius) var(--sidebar-header-border-radius) 0 0;
	cursor: pointer;
	pointer-events: auto;
	position: relative;
	z-index: 100;
	flex-shrink: 0
}

.header-actions {
	position: relative;
	display: flex;
	align-items: center;
	margin-left: auto;
	gap: .25rem;
	padding-right: .5rem
}

.header-button {
	background: none;
	border: none;
	padding: 0 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	cursor: pointer
}

.random-button-header {
	z-index: 400
}

.search-button {
	position: relative;
	z-index: 700
}

.search-wrapper {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center
}

.app-container {
	display: flex;
	flex-direction: column;
	height: 100svh
}

.search-input {
	flex-grow: 1;
	border: none;
	outline: none;
	padding-right: 1rem;
	padding: .5rem 1rem;
	border-radius: 2rem;
	font-size: 1rem;
	background: transparent;
	color: #fff;
	font-family: inherit
}

.search-input:not(:placeholder-shown)~.clear-button {
	display: block
}

.search-input::placeholder {
	color: #fff9;
	opacity: 1
}

.search-input:focus {
	outline: none
}

.search-form {
	display: flex;
	align-items: center;
	width: 100%;
	margin-right: .75rem;
	justify-content: space-between;
	padding: .5rem;
	border-radius: 2rem;
	border: 1px solid rgba(255,255,255,.3);
	background-color: var(--search-bar-bg);
	position: relative;
	height: 2.5rem;
	max-height: 2.5rem
}

.search-toggle-content {
	position: absolute;
	right: 0;
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	background-color: var(--primary-bg-color);
	z-index: 600
}

.search-back-button {
	display: flex;
	margin-right: 10px;
	width: 1.5rem;
	height: 1.5rem;
	min-width: 1.5rem;
	min-height: 1.5rem;
	margin: 0 .75rem;
	padding: 0
}

.video-container {
	position: static;
	width: 100%;
	background-color: var(--primary-bg-color);
	border-radius: 0;
	transform: none;
	display: none;
	min-height: 56.25svw
}

.video-player-wrapper {
	position: relative;
	width: 100%;
	background-color: #000;
	overflow: hidden;
	aspect-ratio: 16 / 9
}

#video-player {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	display: none
}

.video-js {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9
}

.close-video {
	position: absolute;
	top: 6.5rem;
	right: .5rem;
	width: 1.625rem;
	height: 1.625rem;
	z-index: 1050;
	background-color: var(--highlight-red);
	color: #fff;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center
}

.favorite-toggle {
	position: absolute;
	top: 6.5rem;
	left: .5rem;
	width: 1.625rem;
	height: 1.625rem;
	background-color: var(--primary-bg-color);
	color: #fff;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
	z-index: 1045;
	transition: transform .2s ease
}

.mobile-handle {
	width: 1.5rem;
	height: 4px;
	background-color: #ffffff80;
	border-radius: 99px;
	align-self: end;
	justify-self: center;
	display: block;
	z-index: 2000
}

.local-time {
	text-align: right;
	min-width: 8ch
}

.sidebar {
	display: flex;
	flex-direction: column;
	height: 100svh;
	max-height: 100%;
	width: 100svw;
	max-width: 100%;
	color: #f1f1f1
}

.sidebar-items {
	flex-grow: 1;
	overflow: auto;
	padding: 0 12px
}

.sidebar-header-container {
	display: flex;
	align-items: center;
	justify-items: space-around
}

.header-info {
	display: grid;
	grid-template-columns: 1fr auto;
	width: 100%;
	height: 100%;
	padding: 0 1.5rem;
	line-height: 1.5rem
}

.hidden {
	display: none
}

.header-title {
	font-size: 1.5rem;
	line-height: 2rem;
	grid-column: 1 / -1;
	color: var(--highlight-text-color);
	align-self: flex-end
}

.back-to-country-list-button {
	top: 1.25rem;
	right: var(--sidebar-width);
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	border: none;
	position: static;
	width: 2.5rem;
	height: 3rem;
	padding: 0;
	border-radius: 0 100% 100% 0;
	background: var(--brand-accent-color);
	cursor: pointer;
	pointer-events: auto
}

.back-to-country-list-button svg {
	fill: var(--primary-bg-color);
	width: 2rem;
	height: 2rem
}

.clear-button {
	display: none;
	width: 1.5rem;
	height: 1.5rem;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	position: relative;
	right: 3rem;
	top: 0;
	grid-column: 1;
	transform: translateY(0)
}

.globe-container {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden
}

.globe-viz {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10
}

.globe-interaction-blocker {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	z-index: 15;
	display: none
}

.loader-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: calc(100% - var(--sidebar-header-height-desktop) + var(--sidebar-header-border-radius));
	z-index: 10
}

.loader-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--overlay-background)
}

.loader-icon {
	border: 4px solid rgba(255,255,255,.3);
	border-top: 4px solid var(--highlight-text-color);
	border-radius: 50%;
	width: 40px;
	height: 40px;
	animation: spin 2s linear infinite;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%)
}

.video-loading-overlay {
	display: none
}

.play-button-overlay {
	display: none
}

.play-icon-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--brand-accent-color);
	border-radius: 50%;
	width: 3rem;
	height: 3rem
}

.play-icon-wrapper:hover {
	background: var(--brand-accent-hover-color);
	transform: scale(1.04)
}

.icon-wrapper {
	width: 1.5rem;
	height: 1.5rem
}

.play-icon {
	fill: var(--overlay-background);
	-webkit-user-select: none;
	user-select: none
}

.text-content h2,.text-content h3 {
	font-size: 1.75rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: .015625rem;
	margin: 3rem 0 .75rem
}

.text-content h2 {
	margin-top: 0
}

.text-content {
	width: 100%;
	max-width: 73ch;
	padding: 0;
	padding-bottom: 3rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: .0125rem;
	color: #fff
}

.loading-indicator {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: var(--brand-accent-color);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .5s ease-out;
	z-index: 1000
}

.drawer-menu-button {
	height: 3.5rem;
	width: 100%;
	display: block;
	padding: 0 1rem;
	text-align: left;
	background-color: transparent;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center
}

.menu-logo-container {
	display: flex;
	align-items: center
}

.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10
}

.media-container {
	display: flex;
	position: relative;
	overflow: hidden;
	max-height: 100%;
	height: 100%;
	width: 100%;
	background-color: var(--content-section-bg-color)
}

.section-close {
	justify-self: end;
	color: #fff;
	font-size: 2.5rem;
	cursor: pointer;
	line-height: 1.5
}

.overlay,.nav-toggle {
	display: none
}

.main {
	display: flex;
	flex-grow: 1;
	overflow: hidden;
	position: relative
}

.main-content {
	display: flex;
	flex-grow: 1;
	overflow: auto
}

.content-container {
	display: grid;
	grid-template-rows: auto 1fr;
	height: 100%
}

.text-content a {
	color: var(--highlight-text-color)
}

.text-content ol,.text-content ul {
	margin: 1rem 0;
	padding-left: 1rem
}

.text-content ol {
	list-style-type: decimal
}

.text-content ul {
	list-style-type: disc
}

.modal,.backdrop {
	display: none
}

.modal-header {
	background-color: var(--primary-bg-color);
	display: grid;
	grid-template-rows: auto auto auto;
	padding: 20px;
	align-items: center;
	justify-items: center;
	border-top-left-radius: 25px;
	border-top-right-radius: 25px
}

.modal-icon-wrapper {
	display: flex;
	justify-content: center
}

.modal-icon {
	width: 4rem;
	height: 4rem;
	color: var(--modal-content-color)
}

.modal-title {
	font-size: 1.625rem;
	font-weight: 500;
	color: var(--modal-content-color);
	margin-top: .5rem
}

.modal-message {
	font-size: 1rem;
	line-height: 1.45;
	color: var(--modal-content-color);
	max-width: 85%;
	margin: .5rem auto
}

.modal-footer {
	background-color: var(--hover-highlight-bg-color);
	display: flex;
	justify-content: center;
	align-items: center;
	border-bottom-left-radius: 25px;
	border-bottom-right-radius: 25px
}

.modal-button {
	color: var(--modal-content-color);
	font-size: 1.5rem;
	width: 100%;
	height: 100%;
	cursor: pointer
}

.modal-button:focus {
	outline: none
}

@keyframes spin {
	0% {
		transform: translate(-50%,-50%) rotate(0)
	}

	to {
		transform: translate(-50%,-50%) rotate(360deg)
	}
}

@media only screen and (min-width: 601px) {
	.text-content {
		padding: 1rem;
		font-size: 1.25rem
	}

	.text-content h2,.text-content h3 {
		margin: 4.375rem 0 1.25rem;
		font-size: 2.75rem
	}

	.text-content h2 {
		margin-top: 0
	}

	.clear-button {
		position: absolute;
		right: 50px;
		top: 50%;
		transform: translateY(-50%);
		background: transparent;
		border: none;
		cursor: pointer;
		color: #fff;
		display: none
	}

	.back-to-country-list-button:hover {
		background: var(--brand-accent-hover-color)
	}

	.back-to-country-list-button {
		position: absolute;
		width: auto;
		height: 2.5rem;
		padding-left: .275rem;
		border-radius: 40% 0 0 40%
	}

	.header-info {
		padding: 0
	}

	.sidebar-header-container {
		align-items: normal
	}

	.loader-wrapper {
		height: 100%
	}

	.mobile-handle {
		display: none
	}

	.close-video {
		z-index: 1020;
		width: 2rem;
		height: 2rem;
		top: -1.35rem;
		right: -1rem
	}

	.favorite-toggle {
		width: 2rem;
		height: 2rem;
		top: -1.35rem;
		right: 1.45rem;
		left: auto
	}

	.video-container {
		display: none;
		position: absolute;
		z-index: 1010;
		width: calc(80svw - var(--sidebar-width));
		padding: 20px;
		background-color: #000000b3;
		border-radius: 10px;
		box-shadow: 0 4px 6px #0000001a;
		align-items: center;
		justify-content: center;
		pointer-events: auto;
		top: calc(50svh - var(--global-header-height) - (80svw * 9 / 32) + (var(--sidebar-width) * 9 / 32));
		left: calc((100svw - var(--sidebar-width)) / 2 - ((80svw - var(--sidebar-width)) / 2));
		min-height: calc((80svw - var(--sidebar-width)) * 9 / 16)
	}

	.search-back-button {
		display: none
	}

	.search-toggle-content {
		width: 19rem
	}

	.search-form {
		margin-right: 0
	}

	.search-input {
		margin-right: 8px
	}

	.search-wrapper {
		position: relative
	}

	.header-actions {
		gap: .5rem
	}

	.global-header {
		position: relative
	}

	.drawer-menu-button:hover {
		background-color: var(--nav-drawer-item-hover-bg-color);
		border-radius: 0 3.125rem 3.125rem 0
	}

	.sidebar-content {
		position: static;
		width: var(--sidebar-width);
		transform: none
	}

	.sidebar-header {
		height: var(--sidebar-header-height-desktop);
		padding: 0 24px;
		gap: 10px;
		grid-template-rows: none;
		border-radius: 0;
		align-items: stretch;
		cursor: default;
		pointer-events: none
	}

	.modal {
		width: 40svw;
		max-width: 500px;
		height: auto;
		max-height: 80svh
	}

	.modal-title {
		font-size: 2rem;
		font-weight: 500;
		text-align: center
	}

	.modal-message {
		font-size: 1.25rem;
		line-height: 1.55
	}

	.modal-button:hover {
		background-color: var(--nav-drawer-item-hover-bg-color)
	}
}