:root {
	/* CSS HEX */
	--midnight-violet: #32213aff;
	--space-indigo: #383b53ff;
	--blue-slate: #66717eff;
	--sand-dune: #d4d6b9ff;
	--dry-sage: #d1caa1ff;
}

html {
	height: 100%;
	background-color: var(--midnight-violet);
	font-family: Lucida Console, Monaco5, monospace;
}

body {
	height: 100%;
	margin: 0;
}

.title {
	text-align: center;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-right: 10%;

	img {
		height: 5rem;
		padding-left: 26px;
		padding-top: 12px;
	}
}

.contact-data {
	width: 90%;
	bottom: 5%;
	text-align: center;
}

.main-content {
	height: 100%;
	background-color: white;
	border-radius: 10px;
}

.description {
	padding: 10px;
}

.content {
	display: flex;
	justify-content: center;
	padding-top: 10%;
}

@media only screen and (min-width: 1000px) {
	.content {
		padding-top: 50px;
	}
}

.carousel {
	position: relative;
	width: 100%;
	height: 30%;
	overflow: hidden;
	border-radius: 10px;
}

.carousel input[type="radio"] {
	display: none;
}

.slides {
	display: flex;
	width: 1900%;
	height: 100%;
	transition: transform 0.6s ease-in-out;
	align-items: center;
}

.slide {
	width: calc(100% / 19);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 48px;
	color: white;
	font-weight: bold;

	.image {
		width: 65vw;
		height: calc(65vw * 0.75);
		object-fit: fill;
		border-radius: 10px;
	}


	@media only screen and (max-width: 600px) {
		.image {
			width: 91vw;
			height: calc(91vw * 0.66);
		}
	}

	@media only screen and (min-width: 1300px) {
		.image {
			width: 844px;
			height: 633px;
		}
	}
}

#slide1:checked ~ .slides { transform: translateX(0%); }
#slide2:checked ~ .slides { transform: translateX(calc(100% / 19 * -1)); }
#slide3:checked ~ .slides { transform: translateX(calc((100% / 19) * -2)); }
#slide4:checked ~ .slides { transform: translateX(calc((100% / 19) * -3)); }
#slide5:checked ~ .slides { transform: translateX(calc((100% / 19) * -4)); }
#slide6:checked ~ .slides { transform: translateX(calc((100% / 19) * -5)); }
#slide7:checked ~ .slides { transform: translateX(calc((100% / 19) * -6)); }
#slide8:checked ~ .slides { transform: translateX(calc((100% / 19) * -7)); }
#slide9:checked ~ .slides { transform: translateX(calc((100% / 19) * -8)); }
#slide10:checked ~ .slides { transform: translateX(calc((100% / 19) * -9)); }
#slide11:checked ~ .slides { transform: translateX(calc((100% / 19) * -10)); }
#slide12:checked ~ .slides { transform: translateX(calc((100% / 19) * -11)); }
#slide13:checked ~ .slides { transform: translateX(calc((100% / 19) * -12)); }
#slide14:checked ~ .slides { transform: translateX(calc((100% / 19) * -13)); }
#slide15:checked ~ .slides { transform: translateX(calc((100% / 19) * -14)); }
#slide16:checked ~ .slides { transform: translateX(calc((100% / 19) * -15)); }
#slide17:checked ~ .slides { transform: translateX(calc((100% / 19) * -16)); }
#slide18:checked ~ .slides { transform: translateX(calc((100% / 19) * -17)); }
#slide19:checked ~ .slides { transform: translateX(calc((100% / 19) * -18)); }

.navigation {
	position: absolute;
	bottom: 10%;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
}

.navigation label {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: rgba(255,255,255,0.5);
	cursor: pointer;
	transition: background 0.3s;
}

@media only screen and (max-width: 600px) {
	.navigation label {
		width: 8px;
		height: 8px;
	}
}

.navigation label:hover {
	background: rgba(255,255,255,0.8);
}

#slide1:checked ~ .navigation label[for="slide1"],
#slide2:checked ~ .navigation label[for="slide2"],
#slide3:checked ~ .navigation label[for="slide3"],
#slide4:checked ~ .navigation label[for="slide4"],
#slide5:checked ~ .navigation label[for="slide5"],
#slide6:checked ~ .navigation label[for="slide6"],
#slide7:checked ~ .navigation label[for="slide7"],
#slide8:checked ~ .navigation label[for="slide8"],
#slide9:checked ~ .navigation label[for="slide9"],
#slide10:checked ~ .navigation label[for="slide10"],
#slide11:checked ~ .navigation label[for="slide11"],
#slide12:checked ~ .navigation label[for="slide12"],
#slide13:checked ~ .navigation label[for="slide13"],
#slide14:checked ~ .navigation label[for="slide14"],
#slide15:checked ~ .navigation label[for="slide15"],
#slide16:checked ~ .navigation label[for="slide16"],
#slide17:checked ~ .navigation label[for="slide17"],
#slide18:checked ~ .navigation label[for="slide18"],
#slide19:checked ~ .navigation label[for="slide19"] {
	background: white;
}

.arrows {
	position: absolute;
	top: 50%;
	width: 100%;
	display: flex;
	justify-content: space-between;
	transform: translateY(-50%);
	padding: 0 20px;
	box-sizing: border-box;
}

.arrows label {
	cursor: pointer;
	background: rgba(0,0,0,0.5);
	color: white;
	padding: 10px 15px;
	border-radius: 50%;
	user-select: none;
	transition: background 0.3s;
}

.arrows label:hover {
	background: rgba(0,0,0,0.8);
}