:root {
    --highlight:#a37e63; 
   
	
	
}


.odkazy1:hover 
{
	color:#88664e; 
}
.odkazy2:hover 
{
	color:#88664e; 
}

.kontakty:hover 
{
	color:#88664e; 
}

@font-face {
	src: url('../fonts/Underdog-Regular.ttf');
	font-family:"Underdog";
	font-style: normal;
	src: url('../fonts/Alfarn\ W05\ Regular.ttf');
	font-family:"Alfarn";
	font-style: normal;
}

#whole 
{
    width: 100%; 
    margin: 0%;
	
}

html
{
	font-family: "Underdog", sans-serif;
}


body
{	
	background-color: var(--bg-color);
	background-size: cover;
	background-repeat: no-repeat;
	background-repeat: center;
	color: var(--highlight);
	margin: 0;
}

nav
{
	
	box-shadow: 3px 3px 3px rgba(rgb(0, 0, 0, 0,1), green, blue, alpha)
}

nav ul
{
	width: 100%;
	list-style: none;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

nav li 
{
	height: 20px;
	
}

nav a 
{
	height:100%;
	text-decoration: none;
	display: flex;
	align-items: center;
	color: rgb(54, 38, 38);

	
}
.titul 

{
	
	color:black;
}
.sidebar
{
	position: fixed;
	right: 0;
	height: 100px;
	width: 100px;
	z-index: 999;
	background-color: #a37e6356;
	backdrop-filter: blur(10px);
	box-shadow: -10px 0 10px rgba(0, 0, 0, 0.1);
	display: none; 
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	
	


}

.sidebar li 
{
	width: 100%;
}
.sidebar a 
{
	width: 100%;
}



header
{
	color: black;
	display: flex;
	position: fixed;
	width: calc(100% - 3em);


	background-color: var(--highlight);
	color: var(--bg-color);
	padding: 10px 30px;
}
.podhlavninadpis
{
	display:flex;
	text-align: center;
	
	
}

.logo
{
	width: 5%;
	font-weight: 800;
	color: black;
	
}

#menu
{
	width: 60%;
	text-align: right;
	
}



#container
{
	padding: 4em 4em 4em 4em;
}

#menuList
{
	list-style-type: none;
  	padding: 0;
  	margin: 0;

  	display: center;
  	justify-content: flex-end;
	text-align: center;
	
}

#menuList li
{
	width: 20%;
	text-align: center;
	
}

h1
{
	src: url('../fonts/Alfarn\ W05\ Regular.ttf');
	font-family:"Alfarn";
	font-style: normal;
	font-size: 3em;
	text-align: center;
	display: center;
	
	
	
}
h4
{
	font-size: 1em;
	text-align: center;
	margin: .1em .5em .5em .5em;
	margin-bottom: 4em;
	

}

h2
{
	font-size: 2em;
	text-align: center;
	margin: .1em .8em .8em .8em;
	margin-bottom: 10px;
	
	
}

h3
{
	font-size: 2em;
	text-align: center;
	margin: .1em .5em .5em .5em;
	margin-bottom: 1em;
	margin-top: 2em;
	
	
}



.container 
{
	width: 100%;
	min-height: 50vh;
	align-items: center;
	justify-content: center;
	text-align: center;
	
}
.gallery
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	grid-gap: 30px;
	margin-bottom: 10px;
	margin: 0px 0 60vw 0px;
	align-items: center;
	display: center;

}

.gallery img
{
	width: 100%;
	object-fit: cover;
	aspect-ratio: 1;
	margin-bottom: 10px;
	
	
}
.mainInfo
{
	font-size: 1em;
	text-align: center;
	margin-bottom: 10px;
	
}

.odkazy1
{
	font-size: 2em;
	
	text-align: center;
	margin-top: 5em;
	margin-bottom: 1em;
	text-decoration: underline;
	color:#c4c4c4;

	
	
}

.odkazy2
{
	font-size: 2em;
	
	text-align: center;
	margin-top: 1em;
	margin-bottom: 10px;
	text-decoration: underline;
	color:#c4c4c4;

	
	
}

.scroll
{
	scroll-margin-top: 3em;
}

.footername
{
	display: center;
	align-items: center;
}

.footerContainer
	{
		
		display: center;
		text-align: center;
	}

.footer
	{
	
		display: center;
	}


.menuMobile
{
	
	text-align: right;
}

.menuDesktop
{
	display: flex;
	color: black;
}


.video
{
		
	margin: 0vw 0 10vw 0vw;
	align-items: center;
	display: center;

}



#mojevideo
{
		
	width: 60vw;
	align-items: center;
	display: center;
	margin: 0vw 0 10vw 0vw;
	margin-left: auto;
	margin-right:auto;

}

.autor 
{
		
	margin: 0vw 0 20vw 0vw;
	align-items: center;
	display: center;
	
	

}

.fotkautor
{
		
	display: block;
	margin-left: auto;
	margin-right:auto;
	width: 10vw;
	align-items: center;
	display: center;
	margin-top: 20vw;

}

.kontakty
{	
	
	font-size: 2em;
	text-align: center;
	margin-bottom: 10px;
	text-decoration: underline;
	color: #c4c4c4;
	
	
	
}




.download-btn
{
	text-decoration: underline;
	display: block;
	align-items: center;
	color:#4e3c38
	
}




	.hideOnPc 
	{ 

	display: none;

	}
	







a:visited, a:link, a:hover
{
	color: var(--bg-color);
	text-decoration: none;
}

@media screen and (max-width: 800px) 
{



.hideOnMobile { 
	display: none;
}
	
	
	h1
	{
		
		display: center;
		
		
	}
	
	h2
	{
	
		display: center;
	}
	
	

	h4
	{
		font-size: 1em;
		position:center;
		
		
	}
	.mainInfo
	{
		font-size: 1em;
		position: center;
		top: 50vw;
		left: 50vw;
		right: 50vw;
		bottom: 10vw;
		

	}
	#menuList li
	{
		width: 10%;
	}

	
	.gallery
	{
		
		margin: 0vw 0 60vw 0vw;
		align-items: center;
		display: center;
		

	}
	.gallery img
	{
	align-items: center;
	display: center;
	}

	.odkazy1:hover 
{
	color:#88664e; 
}
.odkazy2:hover 
{
	color:#88664e; 
}
	

	


	.autor 
	{
		
		margin: 0vw 0 60vw 0vw;
		align-items: center;
		display: center;
		

	}

	#mojevideo
	{
		
	width: 60vw;
	align-items: center;
	display: center;
	margin: 0vw 0 60vw 0vw;
	margin-left: auto;
	margin-right:auto;

	}

	.fotkautor
	{
		
	
	margin-left: auto;
	margin-right:auto;
	width: 50vw;
	align-items: center;
	display: center;
	color:rgb(0, 0, 0);
}

	.footerContainer
	{
		
		display: center;
		text-align: center;
	}

.footer
	{
	
		display: center;
	}



.hideOnPc 
	{ 
	
		display: block;
	}
	

	

}

@media screen and (max-width: 1280px) 
{
¨
.hideOnPc 
	{ 
	
		display: none;
	}
	
	body
	{
		background-color: #4e3c38;
	}
	h1
	{
		font-size: 2em;
	
	h2
	{
		font-size: 1em;
	
	}

	h3
	{
		font-size: 1em;
		
	} 

	h4
	{
		font-size: 1em;
	} 
	
	.mainInfo
	{
		font-size:1em;
		text-align: center;
		margin-bottom: 10px;
	}
	#menuList li
	{
		width: 7%;
		text-align: right;
	}
	
	
	.menuMobile
	{
		
		text-align: right;
	}

	.menuDesktop
	{
		color: black;
		display: block;
		text-align: center;
	}

	
	
	.footerContainer
	{
		
		display: center;
		text-align: center;
	}
	
	.footer
	{
	
		display: center;
	}

	.hideOnPc 
	{ 

	display: none;

	}
	

	
}
}

@media screen and (min-width: 2000px) 
{
	.hideOnPc 
	{ 
	
		display: none;
	}
	

	
	
	.mainInfo
	{
		font-size: 4em;
		text-align: center;
		
	}

	#menuList li
	{
		width: 5%;
	}

	.menuMobile
	{
		
		text-align: right;
	}

	.menuDesktop
	{
		color: black;
		display: flex;
		text-align: center;
	}

	.footer
	{
	
		display: block;
		text-align: center;
	}

	#mojevideo
{
		
	display: flex;
	
	

}

	

	
		

	
	

	
}