body {
    font-family: bahnschrift;
    background: #E1F4FF;
    overflow-x: hidden;
    /*background-image: url(plochaJS2.webp);*/
    Background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='69.141' height='40' patternTransform='scale(5) rotate(90)'><rect x='0' y='0' width='100%' height='100%' fill='%23fff4e0ff'/><path d='M69.212 40H46.118L34.57 20 46.118 0h23.094l11.547 20zM57.665 60H34.57L23.023 40 34.57 20h23.095l11.547 20zm0-40H34.57L23.023 0 34.57-20h23.095L69.212 0zM34.57 60H11.476L-.07 40l11.547-20h23.095l11.547 20zm0-40H11.476L-.07 0l11.547-20h23.095L46.118 0zM23.023 40H-.07l-11.547-20L-.07 0h23.094L34.57 20z'  stroke-width='1' stroke='%23ffffffff' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(-690,-125)' fill='url(%23a)'/></svg>")
}

.nadpis {
    background: #FAB95B;
    color: #09144b;
    width: 250px;
    font-size: 2rem;
    border-radius: 12px;
    box-shadow: 7px 7px #de9f57;
    margin-left: clamp(0px, 2vw, 5px);
    font-weight: bold;
}

p {
    padding: 15px;
}

.seznam {
    background: #FAB95B;
    color: #09144b;
    min-height: 75%;
    height: 75vh;
    width: 21%;
    border-radius: 12px;
    margin-right: 10px;
    position: fixed;
    top: 133px;
    left: 10px;
    z-index: 10;
    overflow-y: auto;
}

.hlavni {
    width: 76%;
    min-height: 75%;
    height: 75vh;
    background: #95b5ce;
    margin: 0 10px;
    border-radius: 12px;
    position: relative;
    margin-left: calc(21% + 30px);
    overflow-x: hidden;
    overflow-y: auto;
    color: #121d3e;
}

.podnadpis {
    font-size: 1.5rem;
    margin-top: -4px;
    border-bottom: #09144b solid 1px;
    width: 75%;
    margin-left: 10px;
    padding-bottom: 6px;
    text-align: center;
}

.kapitoly {
    display: none;
    background-color: #fab048;
    padding-left: 8px;
    margin: 15px 15px 0 15px;
    padding-top: 10px;
}

.kapitolky {
    font-size: 15px;
    color: #09144b;
    display: block;
    width: 100%;
    text-align: left;
    cursor: pointer;
    border: none;
    background: none;
    padding: 6px 0 0 3px;
    margin: -4px;
    font-family: bahnschrift;

}

.kapitolky:hover {
    background-color: #ee9548;
}

.nadkapitola {
    padding: 6px 8px 6px 16px;
    font-size: 20px;
    color: #09144b;
    display: block;
    width: 100%;
    text-align: left;
    cursor: pointer;
    border: none;
    background: none;
    font-family: bahnschrift;
}

.sipka {
    font-size: 0.7rem;
    margin-left: 8px;
    position: relative;
    top: -3px;
    display: inline-block;
    transition: transform 0.3s;
}

.aktivni {
    background-color: #c15711;
}

.nadkapitola.active .sipka {
    transform: rotate(180deg);
}

.vrchniCast {
    display: block;
    position: static;
    width: auto;
    height: auto;
}

.menu {
    display: none;
}

.nadpiss {
    font-size: 3rem;
    color: #121d3e;
    margin: 10px;
}

.kontent {
    padding: 5px 5px 0 8px;
    overflow: auto;
}

.vstup,
.vystup {
    background: white;
    border: 3px solid #863434;
    border-radius: 12px;
    padding: 12px;
    min-height: 150px;
    width: 45%;
    margin: 2.5px;
}

.vystup {
    position: relative;
    overflow-y: hidden;
    overflow-x: auto;
}

.vstup {
    font-family: monospace;
    font-size: 14px;
    white-space: pre;
    overflow: auto;
    background: #121d3e;
    color: white;
}

.vstup[contenteditable="true"]:focus {
    outline: none;
    border: 3px solid #ffc51a;
}

.spodniCast {
    display: flex;
    align-items: flex-start;
    padding-bottom: 10px;
    position: relative;
    bottom: -20%;
    left: 1.6%;
}

.spustit {
    border: #121d3e 3px solid;
    border-radius: 12px;
    background: #121d3e;
    font-size: 1.5rem;
    color: #fbf0d5;
    z-index: 3;
    padding: 7px 8px 8px 7px;
    position: absolute;
    font-family: bahnschrift;
    left: 0.5%;
    bottom: 105%;
}

.spustit:hover {
    background: #78add0;
    color: #121d3e;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    transition: background-color 0.5s;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
}

.nadpis a {
    text-decoration: none;
    color: #121d3e;
}

.prepnoutNaJs {
    border: #121d3e 3px solid;
    border-radius: 12px;
    background: #121d3e;
    font-size: 1.5rem;
    color: #fbf0d5;
    z-index: 3;
    padding: 7px 8px 8px 7px;
    position: absolute;
    font-family: bahnschrift;
    right: 1.5%;
    position: absolute;
}

.prepnoutNaJs:hover {
    background: #78add0;
    color: #121d3e;
}

.mobil {
    display: none;
}

form {
    margin-left: 20px;
}

.kredit {
    position: absolute;
    bottom: 2vh;
}

/*responzivnost pro mobily*/

@media only screen and (max-width: 1080px) {

    body {
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .vrchniCast {
        width: 95%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: relative;
        padding: 10px;
    }

    .nadpis {
        width: 180px;
        height: 125px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding-left: 10px;
    }

    .seznam {
        display: none;
        position: absolute;
        top: 20%;
        left: 35%;
        width: 65%;
        height: 75%;
        z-index: 20;
        background: #FAB95B !important;
        min-height: 300px;
    }

    .hlavni {
        width: 90%;
        height: auto;
        min-height: 75vh;
        margin: 10px 0;
        top: 30px;
        left: 5px;
        right: 5px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
        overflow-y: auto;
        overflow-x: auto;
        font-size: 1.5rem;
    }

    .menu {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50px;
        height: 50px;
        background: #FAB95B;
        font-size: 2rem;
        cursor: pointer;
        margin: 10px auto;
        position: absolute;
        right: 3%;
        bottom: 1%;
        border-radius: 8px;
    }

    .spustit {
        width: 100px;
        height: 50px;
        position: static;
        white-space: nowrap;
        margin-left: 15%;
    }

    .prepnoutNaJs {
        position: static;
        align-self: center;
        white-space: nowrap;
    }

    .prepnoutNaJs:not(.mobil) {
        display: none;
    }

    .mobil {
        display: block;
    }

    .nadpiss {
        text-align: center;
        margin-top: 5px;
        font-size: 3.2rem;
    }

    .kontent {
        width: 100%;
        padding: 10px;
    }

    .vstup,
    .vystup {
        position: relative;
        min-width: 75%;
        max-width: 95%;
        margin: 10px auto;
        left: 10%;
        min-height: 150px;
    }

    .spodniCast {
        flex-direction: column;
        align-items: flex-end;
        margin-left: -100px;
        max-width: 100%;
    }

    .tlacitka {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
    }

    form {
        margin-bottom: 20px;
    }

    .kredit {
        position: relative;
    }
}


/*tablety*/

@media only screen and (min-width: 1081px) and (max-width: 1400px) {

    .hlavni {
        margin-left: 28%;
        min-height: 77vh;
    }

    .seznam {
        width: 25%;
        left: 1%;
    }

    .vstup,
    .vystup {
        width: 43%;
        font-size: 13px;
    }

    .spustit {
        font-size: 1.3rem;
        bottom: 105%;

    }

}

pre code {
    background: none !important;
}

a {
    text-decoration: none;
    color: #fbf0d5;
}

/*upravy v textu*/

.jstext {
    color: #b0875c;
    background: #121d3e;
    padding: 2px;
}

.let {
    color: #a54563;

}

.text {
    color: #6fb988;
    background: #121d3e;
    padding: 2px;
}

.nadpisvtextu {
    font-weight: bold;
}

.fce {
    color: #96be56;
    background: #121d3e;
    padding: 2px;
}

.fce2 {
    color: #7658b9;
    background: #121d3e;
    padding: 2px;
}

.cislo {
    color: #bfbf65;
    background: #121d3e;
    padding: 2px;
}

.textik {
    color: white;
}

hr {
    border: 0;
    clear: both;
    display: block;
    width: 100%;
    background-color: #121d3e;
    height: 1px;
}