:root {
	--text-color: #000;
	--bg-color: #fff;
	--bg-color-2: #ccc;
}

@media (prefers-color-scheme: dark) {
	:root {
		--text-color: #bbb;
		--bg-color: #1a1a1a;
		--bg-color-2: #333;
	}
}





html {
	font-size: 2vh;
	color: var(--text-color);
	scroll-behavior: smooth;
}

body {
	margin: 0;
	padding: 0;
	width: 100%;
	display: block;
	background-color: var(--bg-color);
}

#main {
	margin: 1vw;
	margin-top: 8vh;
}



#images {
	margin: 0;
	width: 100%;
	scroll-margin-top: 7vh;
}

#nav {
	margin: 0;
	background-color: var(--bg-color-2);
	width: 100%;
	top: 0;
	position: fixed;
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-end;
	height: 6vh;
}

.nav-el {
	padding-left: 1vw;
	padding-right: 1vw;
	margin-top: auto;
	margin-bottom: auto;
}

h4 {
	margin: 0;
	font-size: 2.4vh;
	text-transform: uppercase;
}

#home {
	scroll-margin-top: 7vh;
}

#location {
	scroll-margin-top: 7vh;

}

#cene-razp {
	scroll-margin-top: 7vh;

}

#contact {
	scroll-margin-top: 7vh;

}

#cene-razp {
	display: flex;
	align-items: center;
	flex-direction: column;
}

#cene-razp-bl {
	display: flex;
	align-items: center;
	flex-direction: column;
}

a {
	color: var(--text-color);
	text-decoration: none;

}

#nav-en {
	margin-right: 2vw;
}

#en {
	position: fixed;
	top: 2vh;
	right: 4vw;
	background-color: var(--bg-color-2);
	padding: 1vw;
}

#contact {
	background-color: var(--bg-color-2);
	width: 100%;
	text-align: center;
}

#contact-block {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}

.contact-div {
	display: flex;
	flex-direction: column;
	margin-bottom: 3vh;
}

.contact-p {
	text-align: center;
	margin: 3px;
}

@media (max-aspect-ratio: 3/4) {
	#nav {
		display: none;
	}

	#main {
		margin-top: 1vh;
	}
	
	#img {
		width: 100%;
	}

	#all-img {
		height: 15vh;
		width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		box-sizing: border-box;
	}

	.img {
		height: 90%;
		margin: 5px;
	}
}

@media (min-aspect-ratio: 3/4) {
	#img {
		height: 85vh;
		margin: auto;
		display: block;
	}

	#en {
		display: none;
	}
}


@media (min-aspect-ratio: 3/4) and (max-aspect-ratio: 5/6) {
	#all-img {
		height: 15vh;
		width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		box-sizing: border-box;
	}

	.img {
		height: 90%;
		margin: 5px;
	}
}

@media (min-aspect-ratio: 5/6) {
	#images {
		display: flex;
		align-items: start;
		justify-content: center;
	}
	#img {
		margin-right: 1vw;
	}
	#all-img {
		height: 85vh;
		width: 15vh;
		overflow-x: hidden;
		overflow-y: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		box-sizing: border-box;
		margin-left: 1vw;
		margin-right: auto;
	}

	.img {
		width: 90%;
		margin: 5%;
	}
}


@media (max-aspect-ratio: 1) {
	#nav-img {
		display: none;
	}
}

@media (max-aspect-ratio: 545/628) {
	#nav-loc {
		display: none;
	}
}