html {
    font-size: 12px;
    position: relative;
    min-height: 100%;
    margin: 7px;
    box-sizing: border-box;
}

body {
    color-scheme: dark;
    background-color: color-mix(in srgb, Canvas, CanvasText 2.5%);
    color: color-mix(in srgb, CanvasText, Canvas 15%);
    font-family: 'Ubuntu',Verdana;
    max-width: 600px;
}

h1 {
    font-size: 150%;
}
h2 {
    font-size: 120%;
    border-bottom: 1px dashed cadetblue;
    width: 30%;
}
h3 {
    font-size: 100%;
    color: cadetblue;
}
hr {
    border: 1px dashed cadetblue;
}

a:link, a:visited {
    color: cadetblue;
    padding: 5px 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border: thin;
    border-color: darkslategray;
}
a:hover, a:active {
    background-color: lightslategrey;
    color: white;
}


table, th, td {
    border: 1px solid ;
    border-collapse: collapse;
    padding: 5px;
}

.bloklar {
    display: inline-block;
    float: left;
    text-align: left;
}

.ana {
    width: 100%;
    height: auto;
    float: left;
}

@media (max-width: 500px) {
    div, nav, article, bloklar {
        width: 100%;
        height: auto;
    }
}

header, footer {
    width: 100%;
}

footer {
    font-size: 80%;
}