* {
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
}

.grid_container {
    /*pozadi*/
    max-width: 80%;
    background-color: aliceblue;
    margin: 0 auto;
    padding: 64px 16px;

    /*mrizka pro obrazky*/
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, 200px);
    justify-content: center;
}

/* protoze na mobilu to s 80% vypada fakt spatne a s 90% v pohode*/
@media (orientation: portrait) {
    .grid_container {
        max-width: 90%;
    }
}

/*casopis*/
.casopis {
    display: inline-block;
    position: relative;
    height: 280px;
    width: 198px;
}

.casopis img {
    display: block;
    transition: transform .15s linear;
    box-shadow: 6px 6px 12px 2px #0008;
}

.casopis:hover img {
    transform: scale(1.05);
}

.gradient {
    display: block;
    position: absolute;
    inset: 0;
    opacity: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 25%, black 75%, black 100%);
    transition: opacity .15s linear;
    transition: transform .15s linear;
}

.casopis:hover .gradient {
    opacity: 1;
    transform: scale(1.05);
}

.info_text {
    position: absolute;
    color: white;
    top: 75%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    opacity: 0;
    font-size: 16px;
    text-align: center;
}

.casopis:hover .info_text {
    opacity: 1;
}

/*otvirani link*/
.info_link {
    display: inline-flex;
    position: absolute;
    top: 90%;
    left: 100%;
    transform: translate(-110%, 0%);
    white-space: nowrap;
    opacity: 0;
    font-size: 16px !important;
    color: white !important;
    border-bottom: 1px solid currentColor;
    align-items: center;
    gap: 4px;
}

.info_link:hover {
    cursor: pointer;
}

.casopis:hover .info_link {
    opacity: 1;
}

.sipka {
    width: 12px;
    height: 12px;
    vertical-align: middle;
}

/*tiraz*/
.overlay {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: #0008;
    z-index: 9999;
}

.info_popup {
    position: fixed;
    width: 40%;
    max-height: 90%;
    padding: 16px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border: 1px solid #000;
    z-index: 10000;
    overflow: auto;
}

.tiraz {
    list-style-type: none;
    list-style-position: inside;
}

li {
    margin: 4px;
}

.subsety_redakce {
    list-style-type: none;
    list-style-position: outside;
    margin-left: 20px;
}

.vrchni_radek_popupu {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.zavrit_popup:hover {
    cursor: pointer;
}

.krizek {
    width: 12px;
    height: 12px;
}

/*credits*/
.credits_container {
    max-width: 80%;
    padding: 64px 16px;
    margin: 0 auto;
    background-color: aliceblue;
}

/* protoze na mobilu to s 80% vypada fakt spatne a s 90% v pohode*/
@media (orientation: portrait) {
    .credits_container {
        max-width: 90%;
    }
}

.credits {
    text-align: center;
}

/*zobrazovani popupu*/
#cudlik89:checked ~ #overlay89 { display: block; }
#cudlik88:checked ~ #overlay88 { display: block; }
#cudlik87:checked ~ #overlay87 { display: block; }
#cudlik86:checked ~ #overlay86 { display: block; }
#cudlik85:checked ~ #overlay85 { display: block; }
#cudlik84:checked ~ #overlay84 { display: block; }
#cudlik83:checked ~ #overlay83 { display: block; }
#cudlik82:checked ~ #overlay82 { display: block; }
#cudlik81:checked ~ #overlay81 { display: block; }
#cudlik80:checked ~ #overlay80 { display: block; }
#cudlik79:checked ~ #overlay79 { display: block; }
#cudlik78:checked ~ #overlay78 { display: block; }
#cudlik77:checked ~ #overlay77 { display: block; }
#cudlik76:checked ~ #overlay76 { display: block; }
#cudlik75:checked ~ #overlay75 { display: block; }
#cudlik_koronapzeen:checked ~ #overlay_koronapzeen { display: block; }
#cudlik74:checked ~ #overlay74 { display: block; }
#cudlik73:checked ~ #overlay73 { display: block; }
#cudlik72:checked ~ #overlay72 { display: block; }
#cudlik71:checked ~ #overlay71 { display: block; }
#cudlik70:checked ~ #overlay70 { display: block; }
#cudlik69:checked ~ #overlay69 { display: block; }
#cudlik68:checked ~ #overlay68 { display: block; }
#cudlik67:checked ~ #overlay67 { display: block; }
#cudlik66:checked ~ #overlay66 { display: block; }
#cudlik65:checked ~ #overlay65 { display: block; }
#cudlik64:checked ~ #overlay64 { display: block; }
#cudlik63:checked ~ #overlay63 { display: block; }
#cudlik62:checked ~ #overlay62 { display: block; }
#cudlik61:checked ~ #overlay61 { display: block; }
#cudlik60:checked ~ #overlay60 { display: block; }
#cudlik59:checked ~ #overlay59 { display: block; }
#cudlik58:checked ~ #overlay58 { display: block; }
#cudlik57:checked ~ #overlay57 { display: block; }
#cudlik56:checked ~ #overlay56 { display: block; }
#cudlik55:checked ~ #overlay55 { display: block; }
#cudlik54:checked ~ #overlay54 { display: block; }
#cudlik53b:checked ~ #overlay53b { display: block; }
#cudlik53:checked ~ #overlay53 { display: block; }
#cudlik52:checked ~ #overlay52 { display: block; }
#cudlik51:checked ~ #overlay51 { display: block; }
#cudlik50:checked ~ #overlay50 { display: block; }
#cudlik49:checked ~ #overlay49 { display: block; }
#cudlik48:checked ~ #overlay48 { display: block; }
#cudlik47:checked ~ #overlay47 { display: block; }
#cudlik46:checked ~ #overlay46 { display: block; }
#cudlik45:checked ~ #overlay45 { display: block; }
#cudlik44:checked ~ #overlay44 { display: block; }
#cudlik43:checked ~ #overlay43 { display: block; }
#cudlik42:checked ~ #overlay42 { display: block; }
#cudlik41:checked ~ #overlay41 { display: block; }
#cudlik40:checked ~ #overlay40 { display: block; }
#cudlik39:checked ~ #overlay39 { display: block; }
#cudlik38:checked ~ #overlay38 { display: block; }
#cudlik37:checked ~ #overlay37 { display: block; }
#cudlik36:checked ~ #overlay36 { display: block; }
#cudlik35:checked ~ #overlay35 { display: block; }
#cudlik34:checked ~ #overlay34 { display: block; }
#cudlik33:checked ~ #overlay33 { display: block; }
#cudlik32:checked ~ #overlay32 { display: block; }
#cudlik31:checked ~ #overlay31 { display: block; }
#cudlik30:checked ~ #overlay30 { display: block; }
#cudlik29:checked ~ #overlay29 { display: block; }
#cudlik28:checked ~ #overlay28 { display: block; }
#cudlik27:checked ~ #overlay27 { display: block; }
#cudlik26:checked ~ #overlay26 { display: block; }
#cudlik25:checked ~ #overlay25 { display: block; }
#cudlik24:checked ~ #overlay24 { display: block; }
#cudlik23:checked ~ #overlay23 { display: block; }
#cudlik22:checked ~ #overlay22 { display: block; }
#cudlik21:checked ~ #overlay21 { display: block; }
#cudlik20:checked ~ #overlay20 { display: block; }
#cudlik19:checked ~ #overlay19 { display: block; }
#cudlik18:checked ~ #overlay18 { display: block; }
#cudlik17:checked ~ #overlay17 { display: block; }
#cudlik16:checked ~ #overlay16 { display: block; }
#cudlik15:checked ~ #overlay15 { display: block; }
#cudlik14:checked ~ #overlay14 { display: block; }
#cudlik13:checked ~ #overlay13 { display: block; }
#cudlik12:checked ~ #overlay12 { display: block; }
#cudlik11:checked ~ #overlay11 { display: block; }
#cudlik10:checked ~ #overlay10 { display: block; }
#cudlik9:checked ~ #overlay9 { display: block; }
#cudlik8:checked ~ #overlay8 { display: block; }
#cudlik7:checked ~ #overlay7 { display: block; }
#cudlik6:checked ~ #overlay6 { display: block; }
#cudlik5:checked ~ #overlay5 { display: block; }
#cudlik4:checked ~ #overlay4 { display: block; }
#cudlik3:checked ~ #overlay3 { display: block; }
#cudlik2:checked ~ #overlay2 { display: block; }
#cudlik1:checked ~ #overlay1 { display: block; }