@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@600;800&display=swap');
:root {
	--barva-modra:rgb(0,85,153);
	--barva-zluta:yellow;

	--barva-bg: #F6F6FF;
	--barva-bg-main:#FFF;
	--barva-dr:#c03;
	--barva-st:#565;
	--barva-oz:#940;
	--barva-dv:#193;
	--barva-g:#990;
	--barva-k:var(--barva-modra);

	--barva:var(--barva-modra);

	--radius:.3rem;
	
}
* { margin:0;padding:0; box-sizing: border-box;}
html, body {height:100%;}
body {
	font-family:'Raleway',sans-serif;
    padding:0; margin:0;
}
.pruh {
	padding: 0 calc((100% - 1000px) / 2 - 1vmin);
}
.nahore {
	background-color: var(--barva-modra);
	color:var(--barva-bg);
    width: 100%;
}

header {padding:1rem 0;position:relative; background: url("snehulak.png") no-repeat right 1rem center / 48px;}
header p {padding:0;margin:1rem;line-height:1rem;}
header p:nth-child(1) {font-size:2em;line-height:2rem;font-weight:bold;}
header p:nth-child(2) {font-size:0.9em;}
header p:nth-child(3) {font-size:2em;position:absolute;right:calc(3rem + 48px);top:2rem;line-height:2rem;}
header a {color:var(--barva-bg);text-decoration:none;}

nav {flex-grow:1;}
nav a {padding:1rem;display:block;font-weight:bold;height:100%;border:solid var(--barva-modra);border-bottom-color:transparent;border-width:0px 1px 2px 1px;background-color: white;color: var(--barva);}
nav a {border-bottom-color:var(--barva-modra);}
nav a:hover { background-color:var(--barva);color:white; }
@media only screen and (min-width: 1001px) {
	nav li:first-child a {border-radius: var(--radius) 0 0 0;}
	nav li:last-child a {border-radius: 0 var(--radius) 0 0;}
    h1 {border-radius: 0 0 var(--radius) var(--radius);}
}
nav ul { display:flex; flex-wrap:wrap; }
nav li { flex-grow: 1; list-style-type:none;text-align:center;min-width: calc(100vmin / 6);}
nav a {}

#domaci-remeslnik, .dr {--barva: var(--barva-dr);}
#stinici-technika, .st {--barva: var(--barva-st);}
#oblozkove-zarubne, .oz {--barva: var(--barva-oz);}
#dvere-zamky-kovani, .dv {--barva: var(--barva-dv);}
#galerie, .g  {--barva: var(--barva-g);}
#kontakty, .k  {--barva: var(--barva-k);}

h1 {background-color: var(--barva);margin-bottom:1em;}

header, nav a {text-decoration: none;}

h1, h2 {padding:0.5rem 1rem;color:var(--barva-bg);}
h1 {font-size: 1.5rem;padding: 1rem; letter-spacing:3px; text-align:center; }
h2 {font-size: 1.2rem;margin: 1rem 0;}

main {background-color:rgba(255,255,255,0.8);}
main p {line-height: 1.5em;margin:0.5em;}
main ul {padding-left: 2em;margin:0.5em 0;}

main li {line-height: 1.8em;list-style-type:square;padding-left:0.5em;}
main li > p {margin:0;}

main > p:first-of-type {margin-top:1em;}
main:last-child {min-height:calc(100vh);}
main > *:not(h1) { margin-left:1rem;margin-right:1rem; }
main > a.nahoru {color:rgb(0,85,153);text-align:right;display:block;text-decoration:none;padding:1rem;}
address {font-style:normal;line-height:1.5rem;}

@media only screen and (min-width: calc(1000px + 1vmin)) {
	#domaci-remeslnik nav a {border-bottom-color:var(--barva-dr);}
	#stinici-technika nav a {border-bottom-color:var(--barva-st);}
	#oblozkove-zarubne nav a {border-bottom-color:var(--barva-oz);}
	#dvere-zamky-kovani nav a {border-bottom-color:var(--barva-dv);}
	#galerie nav a {border-bottom-color:var(--barva-g);}
	#kontakty nav a {border-bottom-color:var(--barva-k);}
}

@media only screen and (max-width: 640px) {
	header p:nth-child(3) {top:1rem;right:calc(2rem + 48px);}
}
@media only screen and (max-width: 500px) {
	header p:nth-child(3) {font-size:1.5em;}
}
@media only screen and (max-width: 440px) {
	header p:nth-child(3) {position: static;}
}
@media only screen and (max-width: 400px) {
	header {background-position: right 1em bottom 1em; background-size: 36px;}
}