:root {
     /*barva těla*/
     --body: black;

    /*barvy navigace*/
    --navbar: red;
    --text-navigace: black;
    --text-navigace-hover: snow;
    --pozadí-textu-navigace-hover:wheat;

    
    /*barvy headeru*/
    --header: orange;
    --text-nadpisu: darkblue;

    /*barvy hlavního tlačítka*/
    --tlačítko: coral;
    --text-tlačítka: dodgerblue ;
    --text-tlačítka-hover: white;
    --pozadí-textu-tlačítka-hover:aqua;
    
    /*barvy sekcí*/
    --sekce: yellow;
    --text-sekce:dimgrey ;
    
    /*barvy karet*/
    --karta: darkviolet;
    --text-karty: aquamarine;

    /*barvy patičky*/
    --patička: lime;
    --text-patičky: midnightblue;
}

* {
    /*nevystupování z borderu*/
    box-sizing: border-box; 
}

/*tělo*/
body {
    background-color: var(--body);

    /*posunutí dolů kůly navigaci*/
    padding-top: 56px;
    
}


/*navigace*/
.navbar {
    background-color: var(--navbar);
    color: var(--text-navigace);
    padding: 0.5rem 1rem;
}

/*odkaz v navigaci*/
.nav-item a{
    border-radius: 10px;
    transition: 0.25s !important;
}

/*co se stane s odkazem v navigaci, když na něj najedu kurzorem*/
.nav-item a:hover{
    color: var(--text-navigace-hover);
    background-color: var(--pozadí-textu-navigace-hover);
    transition: 0.5s;
}


/*hlavní nadpis*/
header {
    background-color: var(--header);
    color: var(--text-nadpisu)
}

/*tlačítko na haderu*/
.btn-main {
    background-color: var(--tlačítko) !important;
    color: var(--text-tlačítka) !important;
}

/*tlačítko na haderu při najtí kurzorem*/
.btn-main:hover {
    background-color: var(--pozadí-textu-tlačítka-hover) !important;
    color: var(--text-tlačítka-hover) !important;
}


/*sekce*/
.sekce {
    background-color: var(--sekce);
    color: var(--text-sekce)
}

/*Obrázek v galerii*/
.galerie img {
    border-radius: 25px;
}

/*Mapa*/
iframe {
    height: 250px;
    width: 80%;
    border-radius: 25px;
    filter: invert(100%); /*invertuje barvy pro futuristický styl*/
}



/*popisek na kartě*/
.card-body{
    background-color: var(--karta);
    color: var(--text-karty) !important;
}

/*patička*/
footer {
    background-color: var(--patička);
    color: var(--text-patičky)
}