body{padding:0px;background-color:black;}
a{color:white;text-decoration:none;}
/***********************/
#uvod.dole{position:absolute;top:0px;bottom:0px;left:0px;right:0px;transition:1s}
#uvod.dole #nadpis, #uvod.dole #info{color:white;transition:color 1s;}
#uvod.dole #kota{color:rgba(255,255,255,0);transition:color 1s;z-index:-1;}
#uvod.dole #button{color:white;border:5px solid white;transition:color 1s, border-color 1s;}
#uvod.nahore{position:absolute;top:0px;bottom:0px;left:0px;right:0px;transition:1s}
#uvod.nahore #nadpis, #uvod.nahore #info{color:rgba(255,255,255,0);transition:color 1s;}
#uvod.nahore #kota{color:white;transition:color 1s;}
#uvod.nahore #button{color:rgba(255,255,255,0);border:5px solid rgba(255,255,255,0);transition:color 1s, border-color 1s;}
#uvod.nahore ~ #historie{position:absolute;top:0px;bottom:0px;left:0px;right:0px;transition:1.5s;color:white;font-family:tahoma;padding-left:15%;padding-right:15%;}
#uvod.dole ~ #historie{position:fixed;top:-150%;height:100%;bottom:0px;left:0px;right:0px;transition:1.5s;color:rgba(255,255,255,0);z-index:-1;overflow:hidden}
#uvod.dole ~ #prechod{top:-100%;transition:1s top;}
#uvos.dole ~ #copy, #uvos.dole ~ #admin{color:white;transition: color 1s;}
#uvod.nahore ~ #prechod{top:0px;transition:1s top;}
#uvod.nahore ~ #copy, #uvod.nahore ~ #admin{color:rgba(0,0,0,0);transition:color 1s;}
/***********************/
#pozadi{
z-index:-1;
margin:0px;
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
width:100%;
height:100%;
background-image:url("img/hapalka_640.jpg");
background-position:center center;
}
#prechod{
z-index:-1;
margin:0px;
position:fixed;
bottom:0px;
left:0px;
right:0px;
width:100%;
height:200%;
background-image:linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0));
overflow:hidden;
} 
#admin{
position:fixed;
color:white;
font-family:tahoma;
//font-size:10px;
bottom:10px;
left:10px;
cursor:pointer;
}
#admin:hover{
color:blue;
}
#copy{
position:fixed;
color:white;
font-family:tahoma;
//font-size:10px;
bottom:10px;
right:10px;
}
#nadpis{
position:fixed;
font-family:tahoma;
text-align:center;
z-index:100;
//color:white;
width:100%;
letter-spacing:4px;
line-height:1.5;
}
#button{
text-transform:uppercase;
position:absolute;;
bottom:0px;
font-family:tahoma;
text-align:center;
z-index:100;
width:100%;
letter-spacing:4px;
line-height:1.5;
font-weight:bold;
margin-left:auto;
margin-right:auto;
cursor:pointer;
outline:none;
}
#info, #kota{
position:absolute;
font-family:tahoma;
text-align:center;
width:100%;
letter-spacing:4px;
line-height:1.5;
font-weight:bold;
margin-left:auto;
margin-right:auto;
cursor:pointer;
outline:none;
}
#info{
z-index:100;
bottom:0px;
}
#kota{
z-index:300;
}
#button:target, #button:focus, #button:hover {
background-image:linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.25));

}
#info:target, #info:focus, #info:hover, #kota:target, #kota:focus, #kota:hover{
text-decoration:underline;
}
#historie{z-index:200;text-align:justify}
     

@media (min-width: 2000px) AND (min-height: 1500px) {
#pozadi{background-image:url("img/hapalka.jpg");}}

@media (min-width: 1000px) AND (min-height: 750px) {
#pozadi{background-image:url("img/hapalka_2000.jpg");}}
@media (min-width: 640px) AND (min-height: 480px) {
#pozadi{background-image:url("img/hapalka_1100.jpg");}}