h1{
    font-family: 'Josefin Sans', sans-serif;
}
h2{
    font-family: 'Radio Canada', sans-serif;
    
}
h3{
    font-family: 'Macondo', cursive;
}
p{
    font-family: 'Roboto', sans-serif;
}
a{
    text-decoration: none;
    color: rgb(224, 28, 28);
}
.zdjela{
    background: url(../images/bcg.png);
    background-repeat: no-repeat;
    background-size: cover;/* da prekrije cijelu površinu diva (u ovom slučaju fluid) */
    background-position: center; /* centriranje slike */
}
.bijela{
    background-color: white;
    background-clip: content-box; /* poništiće padding kolone i neće biti pozadinska boja na cijelu pozadinu */
    padding-bottom: 30px;
}
.bijela1 h3{
    font-family: 'Macondo', cursive;
    color: red;

}
.bijela1 img{
    margin-bottom: 30px;
}
.krompiric{
    border-bottom: dashed 1px black;
}
.navbar{
    background-color: rgb(55, 36, 167);
    padding: 0;
}
.navbar-brand img{
    height: 45px;
}
.navbar-light .navbar-nav .nav-link {
    color:white;
    padding: 20px;
}
.navbar-light .navbar-nav .nav-link.active{
    color:white;
    background: rgb(34,193,195);
background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(102,191,149,1) 31%, rgba(138,191,111,1) 35%, rgba(117,191,138,1) 38%, rgba(253,187,45,1) 100%);
} 
.navbar-light .navbar-nav .nav-link:hover{
    color:brown;
}
.dropdown-menu{
    background-color: rgb(48, 128, 102);
}
.dropdown-item{
    color:white;

}
.dropdown-item:hover{
    color:brown;
    background: transparent;
}
.btn-outline-success{
    color:white;
    border-color: white;
}
.hamburger{
    overflow: hidden;/* da se sakrije višak slike koja izlazi iz klase hamburger koja zauzima  kolona/ može biti i scroll */
}
.ruka{
    background-color:rgb(105, 97, 96);
    color:white
}

i{
    color: red;
    
}
.corba h2{
    color:red;
    font-family: 'Macondo', cursive;
}
.corba img{
    margin-bottom: 20px;
}
.corba i{
    margin-bottom: 20px;
}
.pica h1, .pica h2,.pica h3{
    color: red;
}

.naslov h3{
    padding: 20px 20px;
}
.pica i{
    border: 1px solid red;
    border-radius: 50%; /* zaobljene ivice bordera, 50% za krug */
    padding: 5px 7px; /* da ne bude jajast oblik već okrugao */
}
.pica a:hover i{/* a:hover znači da na enkor (prva vrijednost) nanosimo miša a promjena se dešava na ikoni odnosno i (druga vrijednost) */
    background: red;
    color:white;
}
.pica a:hover{
    color:white;
}
.adresa{
    background-color: beige;
}
.poziv{
    background-color:rgb(53, 138, 161)
}
.mejl{
    background-color:rgb(40, 38, 38)
}
.posalji a{
    padding: 50px 0;
    display: block;
}
.adresa i, .adresa h2{
    color:rgb(53, 138, 161)
}
/* razmak u css-u znači hijerarhija roditelj dijete, sve iza razmaka podrazumjeva dijete prethodnika, zarez potpuno novi selektor i sve ispred zareza eliminiše */
.poziv i, .poziv h2, .mejl i, .mejl h2{
    color:white
}
.adresa a:hover i, .adresa a:hover h2, .adresa a:hover p,
.poziv a:hover i, .poziv a:hover h2, .poziv a:hover p,
.mejl a:hover i, .mejl a:hover h2, .mejl a:hover p
{
    color:red;
}
.col-12 h1, .col-12 h2, .col-12 p{
    padding: 20px 0 ;
}
.col-12 h2{
    color: red;
}
.slanje h1{
    text-align: center;
    color: red;
}
.poruka input{
    display: block;
    width: 100%;
    margin-bottom:10px;
}
.poruka textarea{
    width: 100%;
    height: 200px;
    text-align: start;
}
.Pošalji{
    background: rgb(34,193,195);
    background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(45,87,253,1) 100%);
    color: white;
}

.Pošalji:hover{
    background: rgb(238,174,202);
    background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(186,35,74,1) 100%);
}
.pozadina input{
    background: rgb(34,193,195);
    background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(45,87,253,1) 100%);
}
.pozadina input:hover{
    background: rgb(238,174,202);
    background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(186,35,74,1) 100%);
}
label{
    font-weight: 700;
}

/* linear gradient generator sajt za gradaciju boja za pozadinu */

.roditelj{
    width: 600px;
    height: 600px;
    background-color: crimson;
    position: relative;  /* roditelj uvijek relative */
}
.dijete{
    width: 300px;
    height: 300px;
    background-color: rgb(48, 114, 168);
    position:absolute;/* dijete uvijek absolute */
    right: 0; /* koordinate */
    bottom: 0;/* koordinate */
}
.palacinka img{
    width: 35%;

}
.zavicaj h3{
    color: red;
}
.truba{
    position: relative;
    overflow: hidden; /* sakrivamo višak slike */
    padding: 100px 15px;
    
}
.teta{
    position: absolute;
    top:0%;
    left: 0%;
    z-index: -1;/* uštimavanje slojeva */
    opacity: 0.2; /* posvjetljavanje slike */
}
.linija{
    position: relative;
}
.linija::after{ /* znači dodaj ne[to poslije */ /* ovo je pseudo-element (::after) */
    content: ""; /* znači sadržaj */
    position:absolute;
    width: 70%;
    height: 3px;
    background-color: red;
    bottom: 0;
    left: 0%;
}
.crta{
    position: relative;

}
.crta::after{
    content: "";
    position: absolute;
    height: 3px;
    background-color: red;
    bottom: 0%;
    left: 20%; /* lefti right isto yadam bri[em width da dobijem centrrano */
    right: 20%;
    background-position: center;
    
}

.ponuda h3{
    color: red
}
.ispit{
    background-color: rgb(140, 195, 195);
    background-clip: content-box;
}
.nav-tabs .nav-link{
    color: red;
}
.accordion-button{
    background-color: rgb(74, 157, 157);
}
.accordion-button:not(.collapsed) {
   
    background-color: rgb(74, 157, 157);
    
}
.accordion{
    -webkit-box-shadow: 21px 6px 10px 5px rgba(0,0,0,0.52); 
box-shadow: 21px 6px 10px 5px rgba(0,0,0,0.52); 

}/* sjenka pomoću https://html-css-js.com/css/generator/box-shadow/ */

.hrana{
    position: relative;
}
.mufon{
    position: absolute;
    top: 0%;
    left:0%;
    z-index: -1;

}
.mufon img{
    width: 98%;
}
.hrana p{
    width: 90%;
    color: white;
}
.hrana h3{
    color: white;
    margin-top: 40px;
}
.hrana a{
    margin-top: 20px;
    margin-left: 20px;
    
}
.najbolji img{
    border: 4px solid rgb(147, 137, 164);
    border-radius: 50%; /* zaobljene ivice bordera, 50% za krug */
    padding: 5px 7px; /* da ne bude jajast oblik već okrugao */
    -webkit-box-shadow: 5px 5px 15px 5px #000000; 
box-shadow: 5px 5px 15px 5px #000000
}
.najbolji h3{
    color:red
}
.izdvojeno h3{ /* izdvojili smo pića za vas */
    color: red;
}
.vatra{
    overflow: hidden;
}
.skala h3, .skala h4{
    color: red;
}
.prsut{
    position:absolute;
    /*tekst dođe desno i dolje,da bi ga vratili na sredinu moramo ići transform:translate...*/
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    text-align: right;
   
}  

#restoran.owl-carousel .owl-nav button.owl-prev{ /* kopiramo sa inspekta klasu koju je owl carusel zadao da bi mu promijenili veličinu */ /* ako je na istom nivou */

    font-size: 60px;
}
#restoran.owl-carousel .owl-nav button.owl-next{
    font-size: 60px;
}

#restoran .owl-nav{
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    width: 100%;
}
#restoran.owl-carousel .owl-nav button.owl-prev{
    float: left;
}
#restoran.owl-carousel .owl-nav button.owl-next{
    float: right;
}
.prsut h2, .prsut p{
    background-color: black;
    color: white;
    font-size: 30px;
}
.prsut h3{
    background-color: white;
    color: red;
    font-size: 30px;
}

#brendovi .owl-nav{ /* prvi roditelj owl prev-u i owl next-u */
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    width: 110%;
}
#brendovi.owl-carousel .owl-nav button.owl-prev{
    float: left;
}
#brendovi.owl-carousel .owl-nav button.owl-next{
    float: right;
}
#brendovi.owl-carousel .owl-nav button.owl-next{
    font-size: 60px;
}
#brendovi.owl-carousel .owl-nav button.owl-prev{
    font-size: 60px;
}

.btn-primary{
    background-color: brown;
    border-color: brown;
}
.kartica:hover .btn-primary{
    background-color: antiquewhite;
    border-color: antiquewhite;
    box-shadow: 0px 0px 35px 4px rgba(0,0,0,0.75);
-webkit-box-shadow: 0px 0px 35px 4px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 35px 4px rgba(0,0,0,0.75); /* sjenčenje se dodaje na klasu koju želim da mi je sjenčena u ovom slučaju hover minus sajt za sjenčenje u css-u https://cssgenerator.org/box-shadow-css-generator.html */

}
.bojak{
    background: rgb(34,193,195);
background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(99,192,142,1) 22%, rgba(138,191,111,1) 35%, rgba(173,190,91,1) 55%, rgba(224,221,142,1) 80%, rgba(253,187,45,1) 100%); 
} /* sajt ya gradiranje boja https://cssgradient.io/ */


.galerija{
    background-color: rgb(34, 33, 33);
    color: white;

}

.album div{
    border: 1px white dashed;
    padding: 50px;
}


















/* start  @ media  koju pišemo na kraju css i ovo je css koji se odnosi na mobilne telefone, uvijek ukucati više razmaka ispod običnog css-a */
@media(max-width:990px){
    .truba{
        background-color:rgb(221, 202, 238);
    }
}