:root {
    color-scheme: dark;
    --tema: dark;

    --bPoudarek: rgba(67, 166, 255, 1);
    --bPoudarekProsojno: rgba(153, 178, 255, 0.7);
    --bOzadje: #121212;
    --bOzadjeNaprej: rgba(60, 60, 60, 1);
    --bOzadjePoudarek: rgba(40, 50, 80, 1);
    --bOspredje: #eee;
    --bOspredjeNazaj: rgba(163, 163, 163, 1);
    --bNazaj: rgba(100, 100, 100, 1);
    
    --vsebina: 50em;
}

.light {
    color-scheme: light;
    --tema: light;

    --bPoudarek: rgba(0, 86, 163, 1);
    --bPoudarekProsojno: rgba(49, 99, 255, 0.7);
    --bOzadje: white;
    --bOzadjeNaprej: rgba(207, 207, 207, 1);
    --bOzadjePoudarek: rgba(160, 184, 255, 1);
    --bOspredje: #121212;
    --bOspredjeNazaj: rgba(88, 88, 88, 1);
    --bNazaj: rgba(160, 160, 160, 1);
}

html {
    scrollbar-width: normal;
    scrollbar-color: #777 #5555;
}
::-webkit-scrollbar {
    width: 1em;
}
::-webkit-scrollbar-thumb {
    background-color: #7775;
}
/*::-webkit-scrollbar-thumb:hover {
    background-color: #777;         
}*/
::-webkit-scrollbar-track {
    background-color: #5555;
}

html, body {
    margin: 0;
    padding: 0;
    /*height: 100%;*/
    transition: all 0.2s;
}
body{
	margin:auto;
    height: 100vh;
    width: 100vw;
    font-family: sans-serif;
    background: var(--bOzadje);
    color: var(--bOspredje);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
main {
    width: 100vw;
    max-height: 100vh;
    flex-grow: 1;
}
nav {
    width: 100%;
    display: flex;
    height: 1.5em;
    flex-shrink: 0;
    /*flex-direction: row;
    overflow: auto;*/
    justify-content: center;
    align-items: center;
}
#hamburger {
    position: fixed;
    top: 0;
    left: 0;
    font-size: 1.5em;
    cursor: pointer;
    z-index: 20;
    color: white;
    padding-left: 0.1em;
    padding-right: 0.1em;
    background-color: initial;
    border: none;
    display: none;
}
@media (max-width: 34ch) {
    nav {
        display: none;
    }
    nav.open {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        position: fixed;
        background: #222;
        width: 100%;
        height: max-content;
        padding: 0.5em;
    }
    #hamburger {
        display: block;
    }
}

footer {
    text-align: center;
    padding: 1em;
}
a {
    color: var(--bPoudarek);
    cursor: pointer;
    text-decoration: none;
    cursor: pointer;
}
nav a, nav button {
    padding: 0;
    padding-left: 0.5ch;
    padding-right: 0.5ch;
}
button {
    cursor: pointer;
}

/*#datum {
    font-size: small;
    text-align: center;
    padding-left: 0.5em;
    padding-right: 0.5em;
}*/


#nebo, #nastavitve, #pisno {
    color: var(--bPoudarek);
    font-size: 1em;
    background-color: initial;
    border: none;

}