/* Orbitron / Bungee / Audiowide -> Dobri izbori za font*/
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
:root {
	--primary: #05f385; /* Background/Headers */
	--secondary: #212529; /* Panels/Sections */
	--lightest: #f8f8ff; /* text/highlights */
}

* {
	font-family: "Press Start 2P", Verdana, Geneva, Tahoma, sans-serif;
	padding: 0;
	margin: 0;
}
html,
body {
	display: flex;
	flex-direction: column;
	height: 100%;
	font-size: 1.3vw;
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: var(--secondary);
	color: var(--lightest);
	text-transform: uppercase;
	padding: 0.2em 1em;
}

.logo {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 10px;
}

.logo > img {
	width: 1.2em;
}
.logo > div {
	font-size: 0.5em;
	color: var(--primary);
}
.navMain {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1.5em;
}
.navMain > div {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
}
.navMain > div > img {
	width: 1.2em;
}
.navMain > div > a,
.header > a {
	text-decoration: none;
	color: var(--lightest);
}
.navMain > div > a {
	font-size: 0.7em;
}

.header > a:hover {
	opacity: 0.6;
}

.navMain > div:hover {
	filter: drop-shadow(0 3px 2px var(--primary));
}
.navMain > div:active {
	transform: translateY(5px);
}

.kontaktBtn {
	padding: 0.4em;
	background-color: var(--primary);
	border: none;
	border-radius: 5px;
	color: var(--secondary) !important;
	font-size: 0.8em !important;
}

.kontaktBtn:active {
	transform: translateY(5px);
}

a {
	text-decoration: none;
}

main {
	background-image: url(../slike/background.jpg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	flex-grow: 1;
	filter: contrast(1.1);
	display: flex;
	flex-direction: column;
}

footer {
	background-color: var(--secondary);
	color: var(--lightest);
	text-align: center;
	padding: 10px;
}