body 
{
     background: #4682B4;
     color: #000;
     font-family: Arial, sans-serif;
     margin: 10px;
     padding: 0;
     min-width: 400px;
}
#header 
{
     background:#FFD700;
     margin:10px auto 10px;
     box-shadow: 5px 5px 3px 1px;
     border-radius: 20px;
     width: 90%;
     height: *;
}
#container 
{
     background: #4682B4;
     width: 100%;
     height: 100%;
}
#navigation
{
     position:sticky;
     top: 0;
     background: #FE9798;
     margin:10px auto 10px;
     border-radius: 20px;
     width: 90%;
     height: 25%;
     box-shadow: 5px 5px 3px 1px;
     z-index: 1000;
}
#sidebar 
{
     background: #40E0D0;
     position: fixed;
     float:right;
     right: 10px;
     border-radius: 20px;
     box-shadow: 5px -5px 3px 1px;
     width: %;
     height: %;
     display:block;
     z-index: 1001;
}
#content 
{
     background: #DCDCDC;
     margin:10px auto 10px;
     border-radius: 20px;
     width: 90%;
     /*min-height:100%;*/
     line-height: 2;
}
#footer 
{
    background: #FFD700;
    margin:10px auto 10px;
    border-radius: 20px;
    box-shadow: 5px -5px 3px 1px;
    width: 90%;
    height: 150px;
}



@media screen and (max-width: 600px) 
{
   
    .raz 
    {
        font-size: 20px;
    }
    
    #navigation
    {
        font-size: 17px;
    }
            

}



















#zatemnenie 
{
    background: rgba(102, 102, 102, 0.5);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: none;
}
#okno 
{
    width: 50%;
    height: 360px;
    max-height: 380px;
    text-align: center;
    padding: 15px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 100px auto;
}
#zatemnenie:target 
{
    display: block;
}
.close 
{
    display: inline-block;
    border: 1px solid #0000cc;
    color: #0000cc;
    padding: 0 12px;
    margin: auto 10px;*/
    text-decoration: none;
    background: #f2f2f2;
    cursor:pointer;
}
.close:hover 
{
    background: #e6e6ff;
}