@font-face {
    font-family: 'krkavec-ferda-pacifico';
    src: url('Pacifico-Regular.ttf');
    font-display: block;
}

@font-face {
    font-family: 'krkavec-ferda-josefin';
    src: url('JosefinSans-Regular.ttf');
    font-display: block;
}

body::-webkit-scrollbar {
    width: 0.1em;
}

body {
    display: block;    
    height: 100%;
    margin: 0px !important;
    background-color: rgb(17, 16, 41, 1); 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%235c5665' fill-opacity='0.4' fill-rule='nonzero'%3E%3Cpath d='M29 58.58l7.38-7.39A30.95 30.95 0 0 1 29 37.84a30.95 30.95 0 0 1-7.38 13.36l7.37 7.38zm1.4 1.41l.01.01h-2.84l-7.37-7.38A30.95 30.95 0 0 1 6.84 60H0v-1.02a28.9 28.9 0 0 0 18.79-7.78L0 32.41v-4.84L18.78 8.79A28.9 28.9 0 0 0 0 1.02V0h6.84a30.95 30.95 0 0 1 13.35 7.38L27.57 0h2.84l7.39 7.38A30.95 30.95 0 0 1 51.16 0H60v27.58-.01V60h-8.84a30.95 30.95 0 0 1-13.37-7.4L30.4 60zM29 1.41l-7.4 7.38A30.95 30.95 0 0 1 29 22.16 30.95 30.95 0 0 1 36.38 8.8L29 1.4zM58 1A28.9 28.9 0 0 0 39.2 8.8L58 27.58V1.02zm-20.2 9.2A28.9 28.9 0 0 0 30.02 29h26.56L37.8 10.21zM30.02 31a28.9 28.9 0 0 0 7.77 18.79l18.79-18.79H30.02zm9.18 20.2A28.9 28.9 0 0 0 58 59V32.4L39.2 51.19zm-19-1.4a28.9 28.9 0 0 0 7.78-18.8H1.41l18.8 18.8zm7.78-20.8A28.9 28.9 0 0 0 20.2 10.2L1.41 29h26.57z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

:root {
    --pozadi-barva: #111029;
    --pismo-1: 'krkavec-ferda-pacifico', cursive;
    --pismo-2: 'krkavec-ferda-josefin', sans-serif;
}

/* KONTEJNER */
.container {
    display: flex;
    position: absolute;
    max-width: 1000px;
    width: 96%;
    left: 50%;
    transform: translate(-50%, 0%);
    flex-direction: column;
    justify-content: center;
    background-color: rgb(0, 0, 0, 0.7);
    border: 0px none transparent;
    border-radius: 30px;
    padding: 0px 0px 0px 0px;
    margin: 20px auto 0px auto;    
}

/* Výchozí fontové velikosti pro větší obrazovky */

/* NADPIS (KRKAVEC FERDA) */
.headline {
    font-family: var(--pismo-1);
    font-size: 4.0rem;
    color: rgb(255, 255, 255, 1);
    text-align: center;
    margin: 10px 30px 10px 30px;
}

/* NADPIS ODSTAVCE */
.paragraph-headline {
    font-family: var(--pismo-2);
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: 2px;
    color: rgb(255, 255, 255, 1);
    line-height: 130%;
    text-align: left;
    padding: 0% 12% 0% 12%;
    margin: 0px 0px 30px 0px;
}

/* ODSTAVEC */
.paragraph {
    font-family: var(--pismo-2);
    font-size: 1.0rem;
    letter-spacing: 2px;
    color: rgb(255, 255, 255, 1);
    line-height: 130%;
    text-align: justify;
    padding: 0% 15% 0% 15%;
    margin: 0px 0px 30px 0px;
}

/* TELEFONNÍ ČÍSLO */
.phone-number {
    font-family: var(--pismo-2);
    font-size: 1.8em;
    letter-spacing: 2px;
    color: rgb(255, 255, 255, 1);
    line-height: 130%;
    text-align: center;
    margin: 0px 30px 50px 30px;
}

/* CENTROVANÉ SOUŘADNICE POD MAPOU */
.paragraph-center {
    font-family: var(--pismo-2);
    font-size: 1.4em;
    letter-spacing: 2px;
    color: rgb(255, 255, 255, 1);
    line-height: 130%;
    text-align: center;
    padding: 0% 15% 0% 15%;
    margin: 0px 0px 30px 0px;
}

/* Pro mobilní zařízení */
@media screen and (max-width: 768px) {
    
    /* NADPIS (KRKAVEC FERDA) */
    .headline {
        font-size: 3.7em;
    }

    /* NADPIS ODSTAVCE */
    .KF-paragraph-over-head {
        font-size: 1.4em;
        padding: 0 10%;
    }
    
    /* ODSTAVEC */
    .paragraph {
        font-size: 1.0em;
        line-height: 1.6em;
        padding: 0 10%;
    }

    .phone-number {
        font-size: 1.4em;
        line-height: 1.8em;
    }

    .paragraph-center {
        font-size: 1.2em;
        line-height: 1.7em;
    }    
}






.gallery-container   {
    display: flex;
    flex-direction: row;
    flex-wrap:wrap;
    justify-content: center;
    gap: 20px;
    margin: 20px 0px 60px 0px;
}

.gallery-container > * {
    width: 300px; 
    z-index: 500;
    margin: 0px 0px 0px 0px;
}

/* logo hry */
.logo {
    display: block;
    width: 350px;
    margin: 50px auto 50px auto;
}