.debug {
    color: rgb(0, 132, 158)
}

body {
    background: url(./00001.jpg) repeat center center fixed;
    background-size: auto 100%;
    font-size: 1.1em;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    text-shadow: 1px 1px 1px rgb(255, 255, 255);
    color: black;
    -webkit-font-smoothing: subpixel-antialiased;
    width: 1500px;
    margin: auto;
}
body.dark {
    background: url(00001_dark.jpg) repeat-y center center fixed;
    background-size: 100% 100%;
    color: white;
    text-shadow: 1px 1px 1px rgb(0, 0, 0);
}

@media (min-width:320px)  { body{width: 100%; margin: auto;} .debug{color:rgb(150, 105, 0)}}/* smartphones, iPhone, portrait 480x320 phones */ 
@media (min-width:481px)  { body{width: 100%; margin: auto;}.debug{color:rgb(255, 204, 0)}}/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
@media (min-width:920px)  { body{width: 920px; margin: auto;}.debug{color:rgb(21, 0, 255)}}/* tablet, landscape iPad, lo-res laptops ands desktops */ 
@media (min-width:1260px) and (max-width: 1379){ body{width: 100vw; margin: auto; }.debug{color:rgb(162, 0, 255)} .clanek{width: 390px !important;max-width: 430px !important; margin: 10px !important;padding: 15px !important;}}/* big landscape tablets, laptops, and desktops */ 
@media (min-width:1380px) { body{width: 1380px; margin: auto; }.debug{color:rgb(0, 208, 17);}}/* hi-res laptops and desktops */ 
@media (width: 980px) and (min-height: 649px) and (max-height: 651px) {    body {        width: calc(980px - 98px) !important;        max-width: calc(980px - 98px) !important;}    .debug {        color: cyan    }    /* Nintendo 3DS (sice ma jen 400x240p display, ale ten browser viewport je 980x650? ︎︎︎︎🤨︎︎︎︎*/}

.center{
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    margin: auto;
}
.space{
    height: 100vh;
}
.zahlavi{
    background: url("./stranka_pozadi_dark.jpg") no-repeat;
    background-size: 100% 100%;


    min-height: fit-content !important;
    margin-top: 0px;
}
.zahlavi h1{
    margin-top: 20px;
    margin-bottom: -5px;
}

.zahlavi.light, .zahlavi.dark.konami{
    background: url("./stranka_pozadi.jpg") no-repeat;
    background-size: 100% 100%;
    color: white;
    text-shadow: 1px 1px 1px rgb(0, 0, 0);
}

.container_clanky{
    display: inline-block;
    float: left;
    align-items: center;
}
.clanek{
    display: inline-block;
    float: right;
    align-items: center;
}

@media (max-width: 920px){
    .container_clanky{
        justify-content: space-evenly;
    }
}
@supports (display: flex) {
    .container_clanky {
        display: flex;
        flex-wrap: wrap;
        justify-content: first baseline;
        float: unset;
        align-items: normal;
    }
    .clanek{
        display: block;
        float: unset;
        align-items: normal;
    }
}

.clanek{
    width: 400px;
    background: url('./overlay9.png');
    background-size: cover;
    background-blend-mode: screen;
    background-color: #00000005;

    padding: 20px;
    margin: 10px;

    /*blur background behind the element*/
    backdrop-filter: blur(15px);

    border-radius: 15px;
}
.clanek.light{
    background: url('./overlay_light2.png');
    background-size: cover;
}
.clanek:hover{
    transform: scale(1.048)
}
.chrome_warn{
    visibility: hidden;
    position: absolute;
    top: 30px;
    left: 30px;
    width: 100%;
    height: 100%;
    z-index: 999;
    font-size: 1em;
    
    max-width: 360px;
    height:fit-content;
    color: white;
    background-color: rgb(0, 0, 0, 0.5)
}

.clanek:hover .chrome_warn{
    /*visibility: visible;*/
}
.datum{
    margin-top: 20px;
    color: hsl(0, 0%, 60%);
}
.datum.dark{
    color: hsl(0, 0%, 50%);
}

.nadpis{
    margin-top: 0px;
    margin-bottom: 0px;
}

.autor{
    position: relative;
    display: block;
    width: 100%;
    height: 60px;
    margin-top: 10px;
}
.autor span{
    position: absolute;
    top: 0px;
    left: 70px;
}
.avatar{
    position: absolute;
    top: 2.8px;
    left: 3px;
    width: 54px;
    height: 54px;
}
.avatar_frame{
    position: absolute;
    top: 0px;
    left: 0px;
    width:80px;
    height: 80px;
    z-index: 999;
    margin-left: -10px;
    margin-top: -10px;
}

.media{
    position: relative;
    display: block;
    width: 340px;
    width: calc(100% - 60px);
    max-width: 400px;
    height: auto;
    max-height: 300px;
    margin-right: 0px;
    margin-left:auto;
    image-rendering: pixelated;
}

.text{
    width: calc(100% - 70px);
    margin-left: 70px;
}