@import url("base.css");

.content {
	height: fit-content;
	display: flex;
	width: calc(100% - 12.125 * 2);
	flex-direction: column;
	border-radius: 0 0 12.136vw 12.136vw;
	background-color: var(--globe-color);
	height: fit-content;
	display: flex;
	padding: 6.761vh 5.825vw 0 5.825vw;
	gap: 4.362vh;
	align-items: center;
}

.what {
	width: 100%;
	height: fit-content;
	gap: 2.617vh;
	display: flex;
	flex-direction: column;
}

.what div:first-child {
	font-family: "TT Tsars B";
	font-weight: bold;
	font-size: var(--h2);
	color: var(--primary-color);
	text-transform: uppercase;
}

.what div:last-child {
	display: flex;
	flex-direction: column;
	font-family: "Muller";
	font-weight: normal;
}

.what div:last-child h4 {
	display: none;
	font-size: var(--h4);
	text-transform: uppercase;
	font-weight: bold;
	color: var(--secondary-color);
	font-family: "Muller";
}

.what div:last-child p {
	font-size: 4.369vw;
	color: var(--secondary-color);
}

.how {
	width: 100%;
	height: fit-content;
	display: flex;
	flex-direction: column;
	gap: 4.362vh;
	font-family: "Muller";
}

.form {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.745vh;
	color: var(--tetriary-color);
	width: 100%;
}

.how input {
	font-size: var(--h3);
	color: var(--tetriary-color);
	text-anchor: middle;
	text-align: center;
	padding: 0.709vh 0;
	box-sizing: border-box;
	border-radius: 1.942vw;
	border-width: 0.291vw;
	letter-spacing: 1rem;
	-webkit-appearance: none;
}

.how input {
	transform: scale(1);
}

.how button {
	width: 100%;
	border-radius: 6.068vw;
	border-style: none;
	background-color: var(--accent);
	padding: 1.309vh 0;
	font-family: "Muller";
	font-weight: normal;
	font-size: var(--text);
	color: var(--primary-inv);
}

button:hover {
	background-color: #2e7066;
	color: var(--secondary-inv);
}

.how > div > div {
	flex-direction: column;
	box-sizing: border-box;
	width: 100%;
	font-size: var(--text);
}

.how p {
	color: var(--secondary-color);
	font-size: var(--text);
}

.content img {
	width: 57.852vw;
	height: auto;
	z-index: 1;
}

@media screen and (orientation: landscape) {
	.content {
		border-radius: 0 0 3.906vw 3.906vw;
		padding: 7.212vh 0 calc(39.964vh + 5.769vh) 0;
		gap: 0;
		position: relative;
	}

	.what {
		width: 62.5vw;
		gap: 5.769vh;
	}

	.what div:last-child {
		gap: 2.885vh;
	}

	.what div:last-child h4 {
		display: flex;
		font-size: var(--h4);
	}

	.what div:last-child p {
		font-size: 1.406vw;
		color: var(--secondary-color);
		font-family: "Muller";
		font-weight: normal;
		line-height: 150%;
	}

	.how {
		width: 62.5vw;
		flex-direction: column-reverse;
		margin-top: 2.163vh;
		gap: 5.769vh;
		align-items: center;
	}

	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
		-webkit-appearance: none;
	}

	input[type="number"] {
		-moz-appearance: textfield;
		appearance: textfield;
	}

	.form {
		width: 30.547vw;
		gap: 1.923vh;
		padding: 0 2.734vw;
	}

	.how label {
		font-size: var(--text);
		margin-bottom: 0.962vh;
	}

	.how input {
		padding: 1.743vh 6.719vw;
		border-radius: 0.625vw;
		border-color: rgba(20, 20, 20, 0.8);
		border-width: 0.094vw;
	}

	.how button {
		width: 14.297vw;
		font-size: 1.406vw;
		padding: 1.442vh 3.75vw;
	}

	.how p {
		font-size: 1.406vw;
		line-height: 150%;
	}

	.content img {
		position: absolute;
		height: 62.538vh;
		width: auto;
		bottom: 0;
		left: 8.75vw;
	}
}