:root {
	color-scheme: light dark;
}

body {
	margin: 0;
	padding: 0;
	font-family: Helvetica, Arial, sans-serif;
	color: #666;
	background: #f2f2f2; 
	font-size: 1em;
	line-height: 1.5em;
	margin-top: 6em;
}

header {
	background: #333;
	color: white;
	height: 6em;
	width: 100%;
	left: 0;
	top: 0;
	position: fixed;
	box-shadow: 0 0 0.5em rgba(0,0,0,0.8);
	z-index: 2;
}	
	header a {
		color: white;
		font-size: 2em;
	}

/*-- Make the footer go down even if the content is not enough to fill */
main {
	min-height: 100vh;
}
/*---------------------------------------------------------------------*/

section {
	width: 65%;
	max-width: 100%;
	margin: auto;
}

.front-page {
	width: 100%;
	position: relative;
}

	.front-page img {
		display: flex;
	}

	.front-page h1 {
		text-align: center;
		text-shadow: 0 0 0.125em rgba(0,0,0,1);
		display: flex;
		position: absolute;
		left: 50%;
		top: 50%;
		color: #f2f2f2;
		padding: 0;
		margin: 0;
		font-size: 3em;
		transform: translate(-50%, -50%);
	}

h1 {
	font-size: 3em;
	line-height: 1.5em;
	margin: 5% 0;
	text-align: center;
}

h2 {
	font-size: 2em;
	line-height: 1em;
	text-align: center;
}

p {
	font-size: 1em;
	margin: 0 0 1.5em 0;
}

img {
	max-width: 100%;
	border-radius: 2%;
	box-shadow: 0 0 0.5em rgba(0,0,0,0.8);
}

/*-- Image scroll animation --*/
@keyframes image-pop {
	from {
		opacity: 0;
		scale: 25%;
	}
	
	to {
		opacity: 1;
		scale: 100%;
	}
}

.popable-image {
	z-index: -1;
	view-timeline-name: --image;
	view-timeline-axis: block;
	animation-timeline: --image;
	animation-name: image-pop;
	animation-range: entry 25% cover 30%;
	animation-fill-mode: both;
}
/*----------------------------*/

/*-- Hide checkbox for menu--*/
#toggle {
	position: absolute;
	top: -20em;
}				
/*----------------------------*/

/*-- Navigation bar --*/
nav {
	padding: 0 5%;
}
	
	nav .logo {
		float: left;
		margin-top: 1em;
		align-items: center;
		display: flex;
		width: 40%;
		height: 100%;
		font-size: 2em;
		text-decoration: none;
	}
	
	nav ul {
		float: right;
		margin: 0;
		padding: 0;
		width: 60%;
		height: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		list-style-type: none;
	}
			
			nav ul a {
				padding: 2.1em;
				text-decoration: none;
				border-radius: 0.1%;
				font-size: 1em;
				text-align: center;
				display: block;
			}
			
				nav ul a:hover, nav ul a:active {
					border-bottom: 0.2em solid #f2f2f2;
				}
					
					nav .toggler-lines {
						display: none;
						float: right;
						right: 5%;
						top: 50%;
					}
						
						nav .toggler-lines .lines {
							font-size: 2em;
							transition: all .1s ease-in-out;
							margin-top: 1em;
						}
/*--------------------*/

/*-- Images carousel --*/
.carousel {
	position: relative;
	max-width: 100%;
	margin: 0 auto;
	text-align: center;
	transition: all 0.3s ease-in-out;
}

.carousel:hover, .carousel:active {
	transform: scale(1.05);
}

/* Image slider */
.slider {
	margin: 0;
	padding: 0;
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	box-shadow: 0 1.5rem 3rem -0.75rem hsla(0, 0%, 0%, 0.25);
	border-radius: 0.5rem;
	-ms-overflow-style: none; /* Hide scrollbar IE and Edge */
	scrollbar-width: none; /* Hide scrollbar Firefox */
}

	/* Hide scrollbar for Chrome, Safari and Opera */
	.slider::-webkit-scrollbar {
		display: none;
	}

	.slider li {
		list-style-type: none;
		flex: 0 0 auto;
		width: 100%;
		aspect-ratio: 16 / 9;
		position: relative;
	}

	.slider a {
		display: flex;
		width: 100%;
		height: 100%;
		text-decoration: none;
	}

	.slider p {
		text-align: center;
		text-shadow: 0 0 0.125em rgba(0,0,0,1);
		color: #f2f2f2;
		display: flex;
		position: absolute;
		left: 50%;
		top: 50%;
		padding: 0;
		margin: 0;
		font-size: 3em;
		transform: translate(-50%, -50%);
	}

	.slider img {
		width: 100%;
		height: 100%;
		scroll-snap-align: start;
		object-fit: cover;
		position: absolute;
	}

/* Carousel buttons */
.slider-nav {
	left: 50%;
	padding: 0;
	margin: 0;
	transform: translateX(-50%);
	display: flex;
	bottom: 2.5rem;
	column-gap: 1rem;
	position: absolute;
	z-index: 1;
}

	.slider-nav li {
		list-style-type: none;
	}

	.slider-nav a {
		font-size: 0.5em;
		text-decoration: none;
		background-color: #fff;
		border-radius: 100%;
		color: #fff;
		opacity: 0.75;
		transition: opacity ease 250ms;
	}

		.slider-nav a:hover {
			opacity: 1;
		}
/*------------------------------*/

footer {
	background: #333;
	color: white;
	text-align: center;
	padding: 3%;
	margin-top: 6%;
	box-shadow: 0 0 0.5em rgba(0,0,0,0.8);
	content-visibility: auto;
}
	footer p {
		margin: 0;
	}
	
	footer a {
		color: white;
	}
	
@media only screen and (max-width: 1355px) {
	section {
		width: 85%;
	}

	/*-- Navigation bar --*/
	nav .logo	{
		padding-left: 0em;
		width: auto;
	}
	
	nav ul {
		line-height: 1.5em;
		float: none;
		position: fixed;
		bottom: 100%;
		left: 0;
		right: 0;
		top: 6em;
		width: auto;
		height: auto;
		flex-direction: column;
		justify-content: space-evenly;
		overflow: hidden;
		transition: all .1s ease-in-out;
		background-color: rgba(0,0,0,0.8);
	}
		
		nav ul a {
			font-size: 1em;
		}
				
			nav :checked ~ ul {
				bottom: 0;
			}
					
				nav .toggler-lines {
					display: flex;	
					color: white;				
				}
	/*----------------------*/

}

@media only screen and (max-width: 900px) {
	.popable-image {
		animation-range: entry 25% cover 55%;
	}
}

@media only screen and (max-height: 450px) {
	nav ul {
		overflow: scroll;
	}
	
}