@font-face
{
	font-family: Bahnschrift;
	src: url('bahnschrift.ttf');
}

body {
	font-family: Bahnschrift, Arial;
	font-size: 16px;
	line-height: 1.5;
	color: #222; 
}

h1, h2, h3, h4, h5, h6 {
	margin-top: 0.5rem;
	margin-bottom: 0rem;
	font-weight: 300; 
}

h1 { 
	font-size: 2.4rem; 
	border-bottom: solid 1px #08e8c0;
}

h2 { 
	font-size: 2.0rem; 
	text-align: center;
}

.container {
	display: flex;
	gap: 20px;
}

.left {
	flex: 0 0 240px;
}

.right {
	flex: 1;
	max-width: 920px;
}

.vertical-menu a {
	background-color: #88ffe8;
	color: black;
	display: block;
	padding: 12px;
	text-decoration: none;
}

.vertical-menu a:hover {
	background-color: #08e8c0;
}

.vertical-menu a.active {
	background-color: #08c0e8;
	color: white;
}

.shift {
	padding: 12px 6px;
	background-color: #08e8c0;	
	display: flex;
	justify-content: space-between;
}

.mezera {
	margin-top: 24px;
}

.celkem {
	text-align: center;
	font-size: 1.2em;
	background-color: #cef4fd;
	padding: 12px;
	margin: 6px;
}

.download {
	color: #078dab;
	font-weight: bold; 
}

.upload {
	color: #f96c6c;
	font-weight: bold; 
}

@media (max-width: 768px) {

	.container {
		flex-direction: column;
	}

	.left {
		width: 100%;
	}

	.right {
		width: 100%;
		max-width: 100%;
	}

}