@font-face {
    font-family: 'kocka-terezka';
    src: url('YanoneKaffeesatz-VariableFont_wght.ttf');
    font-display: block;
}

:root {
    --kocka-terezka: 'kocka-terezka';
}

/*body {
    display: block; height: 100%;
    background-color: rgb(62, 33, 3 ,1);
    margin: 0px !important;
}*/

body {
    height: 100%;
    margin: 0 !important;
    background-color: rgb(62, 33, 3);
    
}



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

/* KONTEJNER */
.container {
    display: flex;
    position: absolute;
    max-width: 1000px;
    width: 96%;
    flex-direction: column;
    justify-content: center;
    background-color: rgb(122, 84, 46, 1);
    background-image: url('img/cat-footprint.svg'); /* cesta k souboru */
    background-repeat: repeat;                      /* opakování v obou směrech */
    background-size: 200px;                          /* velikost každé tlapky */
    background-position: top left;                  /* výchozí zarovnání */
    border: 0px none transparent;
    border-radius: 30px;
    padding: 0px 0px 0px 0px;
    margin: 20px auto 0px auto;
    left: 50%;
    transform: translate(-50%, 0%);
}

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

/* NADPIS (KRKAVEC FERDA) */
.headline {
    font-family: var(--kocka-terezka);
    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(--kocka-terezka);
    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(--kocka-terezka);
    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(--kocka-terezka);
    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(--kocka-terezka);
    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 */
    .paragraph-headline {
        font-size: 1.4em;
        padding: 0 10%;
    }
    
    /* ODSTAVEC */
    .paragraph {
        font-size: 1.0em;
        line-height: 1.6em;
        padding: 0 10%;
    }

    /* TELEFONN=I ČÍSLO */
    .phone-number {
        font-size: 1.4em;
        line-height: 1.8em;
    }

    /* CENTROVANÉ SOUŘADNICE POD MAPOU */
    .paragraph-center {
        font-size: 1.2em;
        line-height: 1.7em;
    }    
}

/* OBRÁZKOVÝ KONTEJNER (MAPA A SCREENSHOTY */
.container-gallery   {
    display: flex;
    flex-direction: row;
    flex-wrap:wrap;
    justify-content: center;
    gap: 20px;
    margin: 20px 0px 20px 0px;
}

/* OBRÁZEK - MAPKA */
.img-map {
    max-width: 90%;
    height: auto;
    object-fit: contain;
    display: block;    
}

.screen {
    width: 300px; 
    z-index: 500;
    margin: 0px 0px 0px 0px;
}

.imgO {
    display: block;
    width: 350px;
    margin: 50px auto 50px auto;
}