:root{
 --dark: #1b1b1b;
 --darkviolet: #210021;
 --violet: #180118;
 --darkred: #2f0202;
 --blue: #150ae6;
}

body
{
    background: var(--dark);
    font-size: 100%;
    color: blanchedalmond;
    font-family: 'Roboto Mono', monospace;
    
}

.footer
{
    text-align: center;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    text-decoration: none;
    color: #e90707;
    padding-top: 20px;
    padding-bottom: 20px;
}

#kontener
{
    padding: 0;
    margin: 0 auto;
}

#menu
{
background-color: var(--dark);
}

#tresc
{
display: center;
float: center;
padding-top: 5px;
padding-bottom: 5px;
margin:150px;
padding-left: 10px;
padding-right: 10px;
}


ul, ul li
{
display: block;
list-style: none;
margin: 0;
padding: 0;
}

ul a:link, ul a:visited
{
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
text-decoration: none;
display: block;
text-align: center;
background-color: var(--dark);
color: #e90707;
border: 2px outset #6b0202;
padding: 5px;
}

ul a:link, ul a:hover{color:aliceblue;}

img
{
max-width: 100%;
height: auto;
width: auto;
}


@media (min-width: 1050px)
{
#kontener
{
width: 1024px;
}
#menu
{
width: 100%;
}
ul li
{
float: left;
}

ul a:link, ul a:visited
{
width: 156px;
font-size: 24px;
}

#tresc
{
width: 70%;
}
}

@media (min-width: 520px) and (max-width: 1050px)
{
#kontener
{
width: 500px;
}
#menu
{
width: 100%;
}
ul li
{
float: left;
}
ul a:link, ul a:visited
{
width: 69px;
font-size: 12px;
}

#tresc
{
width: 50%;
}
}

@media (max-width: 800px)
{
    #kontener
    {
        width: 100%;
    }

    #menu
    {
            width: 100%;
    }

    ul a:link, ul a:visited
    {
        width: 96%;
        font-size: 18px;
    }

    #tresc
    {
        width: 10%;
    }

}

@media (max-width: 500px)
{
    #kontener
    {
        width: 100%;
    }

    #menu
    {
        width: 100%;
    }

    ul a:link, ul a:visited
    {
        width: 96%;
        font-size: 18px;
    }

    #tresc
    {
        width: 15%;
    }

}