@import url("/pages/styles/base.css");

.banner {
	width: 100vw;
	height: fit-content;
	color: var(--primary-inv);
}

.banner img {
	height: auto;
	width: 100vw;
	border-radius: 0 0 12.136vw 12.136vw;
}

.banner-text {
	left: calc(4.854vw - 100vw);
	top: 14.831vh;
	position: relative;
	flex-direction: column;
}

.banner-text::before {
	content: "";
	width: 100%;
	height: 100%;
	filter: blur(30px);
	background-color: rgba(0, 0, 0, 0.2);
	position: absolute;
}

.banner-text h1 {
	font-family: "TT Tsars B";
	text-wrap: nowrap;
	white-space: nowrap;
	font-size: var(--h1);
	width: fit-content;
	text-transform: uppercase;
	line-height: 120%;
	z-index: 1;
}

.banner-text h2 {
	padding-top: 0.872vh;
	line-height: 120%;
	font-family: "Muller";
	text-wrap: nowrap;
	white-space: nowrap;
	font-size: var(--text);
	width: fit-content;
	z-index: 1;
}

.pages-list {
	position: relative;
	width: 100%;
}

.background {
	background-color: var(--globe-color);
	border-radius: 0 0 12.136vw 12.136vw;
	width: 100%;
	flex-direction: column;
	z-index: 0;
}

.header {
	flex-direction: column;
	gap: 5.825vw;
}

.header h1 {
	text-transform: uppercase;
	font-family: "TT Tsars B";
	font-size: var(--h2);
	color: var(--primary-color);
	line-height: 120%;
}

.header > span {
	font-family: "Muller";
	color: var(--secondary-color);
	font-size: var(--text);
	line-height: 120%;
}

.block {
	margin: 5.234vh 5.825vw 0 5.825vw;
	flex-direction: column;
}

.content {
	margin-top: 4.362vh;
	gap: 5.825vw;
}

.item {
	text-transform: uppercase;
	flex-direction: column;
	text-decoration: none;
	width: 41.262vw;
	gap: 1.745vh;
	font-family: "Muller";
	font-weight: bold;
	font-size: var(--h4);
	line-height: 120%;
	color: var(--secondary-color);
}

.item img {
	border-radius: 6.068vw;
	width: 100%;
}

.single {
	width: calc(100vw - 5.234vh);
}

.afisha .header {
	gap: 1.309vh;
}

.afisha {
	padding: 2.617vh 3.883vw 2.617vh 3.883vw;
	width: calc(100vw - (5.825vw * 2) - (3.883vw * 2));
	margin-bottom: 5.234vh;
}

.afisha h1 {
	font-family: "Muller";
	color: var(--secondary-color);
}

.afisha a {
	font-size: var(--text);
	font-family: "Muller";
	font-weight: bold;
	color: var(--primary-inv);
	text-transform: uppercase;
	background-color: var(--accent);
	border-radius: 6.068vw;
	padding: 1.309vh 0 1.309vh 0;
	text-align: center;
	margin-top: 5.234vh;
	text-decoration: none;
}

@media screen and (orientation: landscape) {
	.background {
		display: flex;
		justify-content: space-between;
		border-radius: 0 0 3.906vw 3.906vw;
		padding: 7.212vh 2.422vw 12.74vh 0;
		flex-direction: row;
		z-index: 1;
	}

	.banner-container {
		width: 100%;
		justify-content: space-between;
		z-index: 1;
		position: relative;
	}

	.pages {
		flex-direction: column;
		gap: 0.962vh;
		margin-top: 12.5vh;
		font-family: "Muller";
		text-transform: uppercase;
		font-size: var(--h3);
		color: var(--primary-inv);
		width: fit-content;
		position: relative;
		z-index: 10;
	}

	.pages > a,
	.pages details {
		text-decoration: none;
		background-color: var(--accent);
		border-radius: 0 2.344vw 2.344vw 0;
		text-wrap: nowrap;
		width: fit-content;
		color: var(--primary-inv);
		font-family: "Muller";
		font-weight: bold;
	}

	.pages details {
		height: auto;
		font-size: var(--h3);
	}

	.pages summary {
		gap: 0.313vw;
	}

	.pages details .urls {
		font-size: 1.563vw;
		flex-direction: column;
		gap: 0.493vh;
		padding: 0;
		margin-left: 3.125vw;
	}

	.pages details[open] a:last-child {
		margin-bottom: 2.956vh;
	}

	.pages details .urls a {
		color: var(--secondary-inv);
		text-decoration: none;
	}

	.pages details .urls a:hover {
		color: var(--secondary);
	}

	.pages details img {
		width: 1.406vw;
		height: auto;
		padding: 1.368vh 0.555vw;
	}

	@keyframes tourists {
		0% {
			padding: 1.724vh 1.25vw 1.232vh 2.578vw;
			font-size: var(--h3);
		}

		100% {
			padding: 1.727vh 1.348vw 1.727vh 2.578vw;
			font-size: 2.5vw;
		}
	}

	#tourists summary {
		padding: 1.724vh 1.25vw 1.232vh 2.578vw;
	}

	#tourists:hover summary {
		animation: tourists 300ms ease-in-out both;
	}

	@keyframes about {
		0% {
			padding: 1.601vh 1.25vw 1.601vh 2.344vw;
			font-size: var(--h3);
		}

		100% {
			font-size: 2.5vw;
			padding: 1.829vh 2.677vw;
		}
	}

	#about {
		padding: 1.601vh 2.344vw 1.601vh 2.344vw;
	}

	#about:hover {
		animation: about 300ms ease-in-out both;
	}

	@keyframes selfie {
		0% {
			padding: 1.601vh 2.578vw;
			font-size: var(--h3);
		}

		100% {
			font-size: 2.5vw;
			padding: 1.724vh 2.109vw 1.724vh 2.578vw;
		}
	}

	#selfie {
		padding: 1.601vh 2.578vw;
	}

	#selfie:hover {
		animation: selfie 300ms ease-in-out both;
	}

	@keyframes afisha {
		0% {
			font-size: var(--h3);
		}

		100% {
			font-size: 2.5vw;
		}
	}

	#afisha {
		padding: 1.601vh 2.891vw 1.601vh 2.578vw;
	}

	#afisha:hover {
		animation: afisha 300ms ease-in-out both;
	}

	.banner {
		width: fit-content;
		height: fit-content;
		position: relative;
	}

	.banner-text {
		position: absolute;
		left: calc(2.188vw - 0.391vw);
		top: 33.654vh;
		font-size: var(--h1);
		padding: 0.601vh 0.391vw;
		text-align: center;
	}

	.banner-text h2 {
		font-size: var(--h3);
	}

	.ship {
		display: unset;
		position: absolute;
		width: 100%;
		bottom: 0;
		z-index: 2;
	}

	.block {
		display: none;
	}
}

@media screen and (max-width: 768px) and (orientation: landscape) {
	#banner-image {
		height: 50.2vh;
		border-radius: 3.906vw;
		width: auto;
	}

	.banner {
		height: 50.2vh;
	}

	.ship {
		transform: translateY(-20%);
	}
}

@media screen and (min-width: 769px) and (orientation: landscape) {
	#banner-image {
		height: 68.51vh;
		border-radius: 3.906vw;
		width: auto;
	}

	.banner {
		height: 68.51vh;
		border-radius: 3.906vw;
		width: auto;
	}

	.ship {
		transform: translateY(0);
	}
}

@media screen and (min-width: 1281px) and (orientation: landscape) {
	#banner-image {
		height: 80vh;
		border-radius: 3.906vw;
		width: auto;
	}

	.banner {
		height: 80vh;
	}

	.ship {
		transform: translateY(5%);
	}
}