:root
{
    --pozadie: #f6f4ef;
    --karta: #ffffff;
    --text: #222222;
    --okraj-karty: #e2ddd3;

    /*EDITS*/
    --link-color: #395372;
    --hero-background-color: black;
    --search-button-background-color: #225171;
    --graph-text-color: black;
    --date-color: #585858;
    --icon-color: black;
}

body.tmava
{
    --pozadie: #121212;
    --karta: #1e1e1e;
    --text: #e8e8e8;
    --okraj-karty: #3a3a3a;

    /*EDITS*/
    --link-color: #80b9ff;
    --graph-text-color: white;
    --date-color: white;
    --icon-color: white;
}

*
{
    box-sizing: border-box;
}

body
{
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--text);
    background: var(--pozadie);
    line-height: 1.5;
    font-size: 16px;
}

a
{
    color: var(--link-color);
    text-decoration: none;
}

    a:hover
    {
        text-decoration: underline;
    }

:focus-visible
{
    outline: none;
    box-shadow: 0 0 0 3px #1a5fb4;
}

h1, h2, h3
{
    line-height: 1.25;
}

.visually-hidden
{
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.preskocit
{
    position: absolute;
    left: 8px;
    top: -60px;
    background: #fff;
    color: #1f5f8b;
    padding: 8px 14px;
    z-index: 20;
}

    .preskocit:focus
    {
        top: 8px;
    }

header
{
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 12px 24px;
    background: var(--karta);
    border-bottom: 1px solid var(--okraj-karty);
}

    header img
    {
        display: block;
        background-color: black;
        padding: 10px;
        border-radius: 10px;
        box-sizing: content-box;
    }

nav ul
{
    display: flex;
    gap: 22px;
    list-style: none;
    margin: 0;
    padding: 0;
}

nav a
{
    font-weight: 700;
}

.tema
{
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 1px solid var(--okraj-karty);
    color: var(--text);
    padding: 6px 12px;
    border-radius: 4px;
    font: inherit;
    cursor: pointer;
}

    .tema svg path
    {
        fill: #333333;
    }

.novinky
{
    overflow: hidden;
    white-space: nowrap;
    background: #264653;
    color: #ffffff;
    padding: 8px 0;
}

    .novinky p
    {
        display: inline-block;
        margin: 0;
        padding-left: 100%;
    }


.hero
{
    background: url(img/kniznica.svg) center / cover;
    padding: 56px 24px;
}

    .hero h1
    {
        color: #ffffff;
        font-size: 34px;
        margin: 0 0 6px;
    }

    .hero p
    {
        color: #ffffff;
        font-size: 18px;
        margin: 0;
    }

.rozlozenie
{
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 28px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 24px;
}

.karta
{
    background: var(--karta);
    border: 1px solid var(--okraj-karty);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 24px;
}

    .karta h2
    {
        margin: 0 0 12px;
        font-size: 22px;
    }

.ciara
{
    border: 0;
    border-top: 1px solid #eeeeee;
    margin: 16px 0;
}

.hladat
{
    display: flex;
    gap: 8px;
}

    .hladat input
    {
        flex: 1;
        padding: 9px 10px;
        font: inherit;
        border: 1px solid #dddddd;
        border-radius: 4px;
        background: var(--karta);
        color: var(--text);
    }

        .hladat input::placeholder
        {
            color: #b0b0b0;
        }

    .hladat button
    {
        padding: 9px 16px;
        font: inherit;
        font-weight: 700;
        border: 0;
        border-radius: 4px;
        background: #1f5f8b;
        color: #ffffff;
        cursor: pointer;
    }

.tabulka-obal
{
    overflow-x: auto;
}

table
{
    border-collapse: collapse;
    width: 100%;
    min-width: 560px;
}

caption
{
    text-align: left;
    font-weight: 700;
    padding-bottom: 8px;
}

th, td
{
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--okraj-karty);
    vertical-align: middle;
}

tr.po-termine td
{
    background: #fde2e2;
    color: #9c0000;
}

.datum
{
    color: var(--date-color);
}

.predlzit
{
    padding: 6px 14px;
    border: 0;
    border-radius: 4px;
    background: #f0a020;
    color: #ffffff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

    .predlzit:disabled
    {
        opacity: .45;
        cursor: not-allowed;
    }

.legenda
{
    font-size: 14px;
    margin: 8px 0 0;
}

.nastroje-tabulky
{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.ikona-tlacidlo
{
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    cursor: pointer;
}

    .ikona-tlacidlo svg path
    {
        fill: #c8c8c8;
    }

.graf text
{
    fill: var(--graph-text-color);
    font-size: 13px;
}

.graf .os
{
    stroke: #333333;
}

.graf-legenda
{
    display: flex;
    gap: 18px;
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    font-size: 14px;
}

.stvorcek
{
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    vertical-align: -2px;
}

.odporucame
{
    color: #888888;
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 12px;
}

.knihy
{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

    .knihy li
    {
        background: var(--pozadie);
        border-radius: 6px;
        padding: 10px;
        text-align: center;
        transition: transform .4s;
    }

        .knihy li:hover
        {
            transform: scale(1.08) rotate(-2deg);
        }

.obalka
{
    height: 90px;
    border-radius: 3px;
    margin-bottom: 6px;
}

.podujatie
{
    height: 150px;
    overflow: hidden;
}

    .podujatie h3
    {
        margin: 0 0 4px;
        font-size: 18px;
    }

    .podujatie p
    {
        margin: 0;
    }

.suhlas
{
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

    .suhlas input
    {
        appearance: none;
        -webkit-appearance: none;
        width: 22px;
        height: 22px;
        flex: none;
        margin: 2px 0 0;
        border: 2px solid #dddddd;
        border-radius: 4px;
        background: #ffffff;
        cursor: pointer;
    }

        .suhlas input:checked
        {
            background: #2e7d32;
            border-color: #2e7d32;
        }

.akcia img
{
    max-width: 100%;
    height: auto;
    display: block;
}

footer
{
    padding: 24px;
    text-align: center;
    font-size: 14px;
}

/*EDITS*/
#hero-background
{
    background-color: var(--hero-background-color);
    padding: 10px;
    border-radius: 10px;
    box-sizing: content-box;
}

svg path
{
    fill: var(--icon-color) !important;
}