@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@600&display=swap');
*{
    margin: 0;
    box-sizing: border-box;
}
html{
    height: 100%;
}
.naslovna{
    background-image:url(images/pizza-g70ade6875_1920.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    overflow: hidden;
}
body{
    background-image:url(images/pizza-g70ade6875_1920.jpg);
    background-size: cover;
    height: 100%;
}
.lista{
    width: 400px;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: white;
    
}
.naslov{
    color: red;
    font-size: 50px;
    margin-top: -40px;
    margin-bottom: 110px;
    font-family: 'Shantell Sans', cursive;
}
.kutija{
    display: flex;
    justify-content: right;
    align-items: right;
    margin-top: 10%;
    margin-right: 10%;
}
.listastrana{
    width: 400px;
    list-style-type: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
   
}
.listastavka{
    margin-bottom: 10px;
    margin-top: 10px;
    margin-left:-40px ;
    color: green;
    font-weight: bold;
    font-size: 20px;
    font-family: 'Shantell Sans', cursive;
}
hr{
    margin-left: -40px;
    width: 400px;
    color: black;
}
.linkovi{
    color: green;
    text-decoration: none;
}
.linkovi:hover{
    color: red;
}
.slogan{
    margin-top: 100px;
    color: red;
    font-size: 25px;
    font-family: 'Shantell Sans', cursive;
}
.linija{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items:center;
    background-color: red;
    width: 100%;
    height: 100px;
    color: white;
    font-family: 'Oswald', sans-serif;
}
.linijali{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: white;
}
.linijastavka{
    display: flex;
    flex-direction: row;
    color: white;
}
.linkovili{
    color: white;
    list-style-type: none;
    text-decoration: none;
    padding: 20px;
    font-size: 20px;
}
.linkovili:hover{
    color: green;
    transition: ease-out;
    background-color: white;
    transition: 1s;
}
.naslovlinija{
    color: white;
    text-shadow: -1px -1px 0 green, 1px -1px 0 green, -1px 1px 0 green, 1px 1px 0 green;
    margin-left: -700px;
    margin-right: 600px;
    font-family: 'Shantell Sans', cursive;
}
.naslovi{
    margin-top: 1%;
    color: white;
    margin-left: 1%;
    text-decoration: underline;
    font-family: 'Shantell Sans', cursive;
}
.tekstovi{
    color: white;
    margin-left: 1%;
    margin-right: 1%;   
    font-family: 'Oswald', sans-serif;
    font-size: 25px;
}
.linklokacija{
    color: white; 
    font-family: 'Oswald', sans-serif;
}
.slicice{
    width: 15px;
    height: 15px;
}
.galerija{
    display: flex;
    align-items: center;
    justify-content:  center;
    margin-top: 1%;
}
.pomocni{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-left: 10%;
}
.galerijasl{
    width: 30%;
    height:30%;
    min-width: 500px;
    min-height: 400px;    
}
.galerijanaslov{
    color: white;
    text-decoration: underline;
    font-family: 'Oswald', sans-serif;
    margin-top: 1%;
    margin-bottom: 2%;
    text-align: center;
}
.strelice{
    font-size: 50px;
    color: white;
    background-color: transparent;
    border: transparent;
}
footer{
    height: 75px;
    width: 100%;
    margin-top: 50px;
    position: fixed;
    bottom: 0;
    background-color: red;
    color: white;
    font-size: 20px;
    font-family: 'Oswald', sans-serif;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
}
.onamasadrzaj{
    padding: 1%;
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 100px;
}
.slika1{
    width: 300px;
    height: 300px;
    border: 4px solid rgb(129, 3, 3);
}
.slika2{
    width: 300px;
    height: 300px;
    border: 4px solid rgb(129, 3, 3);
}
.akcija{
    color: white;
    font-family: 'Oswald', sans-serif;
    font-size: 15px;
}
.cena{
    color: white;
    text-decoration: line-through;
    font-family:'Shantell Sans', cursive; 
    font-size: 15px;
}
.novacena{
    font-size: 15px;
    color: lime;
    font-family: 'Oswald', sans-serif;
}
.slider{
    margin-top: 14%;
    margin-left: 3%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 20%;
    height: 750px;
    margin-bottom: 200px;
    background-color: red;
    padding-top: 20px;
}
#info{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 400px;
}
.plus{
    color: white;
    font-size: 30px;
    font-family: 'Oswald', sans-serif;
}
.fejd{
    opacity: 0;
}
#slike{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 400px;
}
.onama{
    background-color: rgba(7, 7, 7, 0.5);
    display: flex;
    size: cover;
    height: 100vh;
}
.jela{
    background-color: rgba(7, 7, 7, 0.5);
    display: flex;
    size: cover;
    height: 1300px;
    
}
.pica{
    background-color: rgba(7, 7, 7, 0.5);
    display: flex;
    size: cover;
    height: 1300px;
    
}
.jelo{
    height: 500px;
    width: 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: red;
    gap: 20px;
    color: white;
    margin-top: 5%;
    padding: 3%;
}
.slikepica{
    min-height: 250px;
    width: 250px;
}
.slikejela
{
    height: 300px;
    width: 300px;
}
.jelovnik{
    display: flex;
    margin-left: 100px;
    gap: 50px;
    flex-direction: column;
}
.dugme{
    background-color: white;
    color: red;
    height: 50px;
    width: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Oswald', sans-serif;
}
.dugme:hover{
    width: 175px;
    height: 75px;
}
.cene{
    color: white;
    font-family: 'Oswald', sans-serif;
}
.naslovijela{
    color: white;
    font-family:'Shantell Sans', cursive; 
}
.prvideo{
    display: flex;
    gap: 50px;
}
.drugideo{
    display: flex;
    gap: 50px;
    padding-bottom: 100px;
}
.jelo:hover{
    height: 550px;
    width: 370px;
    transition: ease-in;
    transition: 1s;
}
.forma{
    border: 2px white solid;
    height: 800px;
    width: 700px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
.porudzbina
{
    background-color: rgba(7, 7, 7, 0.5);
    display: flex;
    size: cover;
    height: 100vh;
    align-items: center;
    justify-content: center;
}
label{
    color: white;
    text-shadow: -1px -1px 0 red, 1px -1px 0 red, -1px 1px 0 red, 1px 1px 0 red;
    font-family: 'Oswald', sans-serif;
}
input{
    border: 2px red solid;
}
.legenda{
    font-size: 20px;
    color: white;
    text-shadow: -1px -1px 0 red, 1px -1px 0 red, -1px 1px 0 red, 1px 1px 0 red;
    font-family: 'Oswald', sans-serif;
}
fieldset{
    border: white 2px solid;
}
.dugmad{
    border: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
@media only screen and (max-width: 1880px){
    .slider{
        margin-top: 14%;
        margin-left: 3%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 40%;
        height: 800px !important;
        margin-bottom: 200px;
        background-color: red;
        padding-top: 100px !important;
        padding-bottom: 100px !important;
    }
    .akcija{
        color: white;
        font-family: 'Oswald', sans-serif;
        font-size: 30px;
    }
    .cena{
        color: white;
        text-decoration: line-through;
        font-family:'Shantell Sans', cursive; 
        font-size: 30px;
    }
    .jelo:hover{
        height: 750px;
        width: 550px;
    }
    .dugme:hover{
        height: 100px;
        width: 225px;
    }
    .novacena{
        font-size: 30px;
        color: lime;
        font-family: 'Oswald', sans-serif;
    }
    .dugme{
        background-color: white;
        color: red;
        height: 75px;
        width: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Oswald', sans-serif;
    }
    .jelo{
        font-size: 30px;
        height: 700px;
        width: 500px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: red;
        gap: 20px;
        color: white;
        margin-top: 5%;
        padding: 3%;
    }
    .naslovi{
        margin-top: 1%;
        color: white;
        margin-left: 1%;
        text-decoration: underline;
        font-family: 'Shantell Sans', cursive;
        font-size: 40px;
    }
    .galerijanaslov{
        color: white;
        text-decoration: underline;
        font-family: 'Oswald', sans-serif;
        margin-bottom: 100px;
        text-align: center;
        font-size: 40px;
    }
    footer{
        height: 75px;
        width: 100%;
        margin-top: 100px;
        position: fixed;
        bottom: 0;
        background-color: red;
        color: white;
        font-size: 20px;
        font-family: 'Oswald', sans-serif;
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;
    }
    .linkovili{
        color: white;
        list-style-type: none;
        text-decoration: none;
        padding: 20px;
        font-size: 40px;
    }
    input{
        height: 40px;
        font-size: 35px;
    }
    #kartica{
        width: 30px;
        height: 30px;
    }
    #pouzece{
        width: 30px;
        height: 30px;
    }
    #proizvodi{
        font-size: 30px;
        height: 40px;
    }
    .kutija{
        display: flex;
        justify-content: right;
        align-items: right;
        margin-top: 10%;
        margin-right: auto;
        margin-left: auto;
    }
    .linija{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items:center;
        background-color: red;
        min-width: 100vh;
        height: 200px;
        color: white;
        font-family: 'Oswald', sans-serif;
    }
    .naslovi{
        margin-top: 1%;
        color: white;
        margin-left: 1%;
        text-decoration: underline;
        font-family: 'Shantell Sans', cursive;
        text-align: center;
    }
    .tekstovi{
        color: white;
        margin-left: 1%;
        margin-right: 1%;   
        font-family: 'Oswald', sans-serif;
        text-align: center;
        font-size: 30px;
    }
    .pomocni{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin-left: auto;
        margin-right: auto;
    }
    .galerija{
        display: flex;
        align-items: center;
        justify-content:  center;
        margin-top: 1%;
        margin-left: auto;
        margin-right: auto;
    }
    .lista{
        width: 400px;;
        height: 600px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background-color: white;
        margin-left: auto;
        margin-right: auto;
        margin-top: auto;
        margin-bottom: auto;
        
    }
    .kutijanaslov{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        justify-items: center;
    }
    .naslovlinija{
        color: white;
        text-shadow: -1px -1px 0 green, 1px -1px 0 green, -1px 1px 0 green, 1px 1px 0 green;
        font-family: 'Shantell Sans', cursive;
        justify-self: center;
        align-self: center;
        margin-left: 500px;
        margin-left: auto;
        margin-right: auto;
    }
    .onama{
        background-color: rgba(7, 7, 7, 0.5);
        display: flex;
        flex-direction: column;
        size: cover;
        min-height: 210vh;
        min-width: 100vh;
    }
    .jela{
        background-color: rgba(7, 7, 7, 0.5);
        display: flex;
        flex-direction: column;
        size: cover;
        min-height: 650vh;
        min-width: 100vh;
    }
    .pica{
            background-color: rgba(7, 7, 7, 0.5);
            display: flex;
            flex-direction: column;
            size: cover;
            min-height: 650vh;
            min-width: 100vh;
    }
    .prvideo{
        display: flex;
        flex-direction: column;
        gap: 50px;
    }
    .drugideo{
        display: flex;
        flex-direction: column;
        gap: 50px;
        padding-bottom: 100px;
    }
    .jelovnik{
        display: flex;
        gap: 50px;
        flex-direction: column;
        margin-right: auto;
        margin-left: auto;
    }
    .slider{
        margin-top: 14%;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 500px;
        height: 750px;
        margin-bottom: 200px;
        background-color: red;
        padding-top: 20px;
    }
    .onamasadrzaj{
        padding: 1%;
        width: 60%;
        display: flex;
        flex-direction: column;
        gap: 100px;
        margin-left: auto;
        margin-right: auto;
    }
    .porudzbina
{
    background-color: rgba(7, 7, 7, 0.5);
    display: flex;
    size: cover;
    min-width: 100vh;
    min-height: 200vh;
    align-items: center;
    justify-content: center;
}
.forma{
    border: 2px white solid;
    min-height: 100%;
    min-width:  40%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
  }
@media only screen and (max-width: 600px) {
    .slider{
        margin-top: 14%;
        margin-left: 3%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 40%;
        height: 800px !important;
        margin-bottom: 200px;
        background-color: red;
        padding-top: 100px !important;
        padding-bottom: 100px !important;
    }
    .akcija{
        color: white;
        font-family: 'Oswald', sans-serif;
        font-size: 30px;
    }
    .cena{
        color: white;
        text-decoration: line-through;
        font-family:'Shantell Sans', cursive; 
        font-size: 30px;
    }
    .jelo:hover{
        height: 750px;
        width: 550px;
    }
    .dugme:hover{
        height: 100px;
        width: 225px;
    }
    .novacena{
        font-size: 30px;
        color: lime;
        font-family: 'Oswald', sans-serif;
    }
    .dugme{
        background-color: white;
        color: red;
        height: 75px;
        width: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Oswald', sans-serif;
    }
    .jelo{
        font-size: 30px;
        height: 700px;
        width: 500px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: red;
        gap: 20px;
        color: white;
        margin-top: 5%;
        padding: 3%;
    }
    .naslovi{
        margin-top: 1%;
        color: white;
        margin-left: 1%;
        text-decoration: underline;
        font-family: 'Shantell Sans', cursive;
        font-size: 40px;
    }
    .galerijanaslov{
        color: white;
        text-decoration: underline;
        font-family: 'Oswald', sans-serif;
        margin-bottom: 100px;
        text-align: center;
        font-size: 40px;
    }
    footer{
        height: 75px;
        width: 100%;
        margin-top: 100px;
        position: fixed;
        bottom: 0;
        background-color: red;
        color: white;
        font-size: 20px;
        font-family: 'Oswald', sans-serif;
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;
    }
    .linkovili{
        color: white;
        list-style-type: none;
        text-decoration: none;
        padding: 20px;
        font-size: 40px;
    }
    input{
        height: 40px;
        font-size: 35px;
    }
    #kartica{
        width: 30px;
        height: 30px;
    }
    #pouzece{
        width: 30px;
        height: 30px;
    }
    #proizvodi{
        font-size: 30px;
        height: 40px;
    }
    .kutija{
        display: flex;
        justify-content: right;
        align-items: right;
        margin-top: 10%;
        margin-right: auto;
        margin-left: auto;
    }
    .linija{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items:center;
        background-color: red;
        min-width: 100vh;
        height: 200px;
        color: white;
        font-family: 'Oswald', sans-serif;
    }
    .naslovi{
        margin-top: 1%;
        color: white;
        margin-left: 1%;
        text-decoration: underline;
        font-family: 'Shantell Sans', cursive;
        text-align: center;
    }
    .tekstovi{
        color: white;
        margin-left: 1%;
        margin-right: 1%;   
        font-family: 'Oswald', sans-serif;
        text-align: center;
        font-size: 30px;
    }
    .pomocni{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin-left: auto;
        margin-right: auto;
    }
    .galerija{
        display: flex;
        align-items: center;
        justify-content:  center;
        margin-top: 1%;
        margin-left: auto;
        margin-right: auto;
    }
    .lista{
        width: 400px;;
        height: 600px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background-color: white;
        margin-left: auto;
        margin-right: auto;
        margin-top: auto;
        margin-bottom: auto;
        
    }
    .kutijanaslov{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        justify-items: center;
    }
    .naslovlinija{
        color: white;
        text-shadow: -1px -1px 0 green, 1px -1px 0 green, -1px 1px 0 green, 1px 1px 0 green;
        font-family: 'Shantell Sans', cursive;
        justify-self: center;
        align-self: center;
        margin-left: 500px;
        margin-left: auto;
        margin-right: auto;
    }
    .onama{
        background-color: rgba(7, 7, 7, 0.5);
        display: flex;
        flex-direction: column;
        size: cover;
        min-height: 210vh;
        min-width: 100vh;
    }
    .jela{
        background-color: rgba(7, 7, 7, 0.5);
        display: flex;
        flex-direction: column;
        size: cover;
        min-height: 550vh;
        min-width: 100vh;
    }
    .pica{
            background-color: rgba(7, 7, 7, 0.5);
            display: flex;
            flex-direction: column;
            size: cover;
            min-height: 0vh;
            min-width: 100vh;
    }
    .prvideo{
        display: flex;
        flex-direction: column;
        gap: 50px;
    }
    .drugideo{
        display: flex;
        flex-direction: column;
        gap: 50px;
        padding-bottom: 100px;
    }
    .jelovnik{
        display: flex;
        gap: 50px;
        flex-direction: column;
        margin-right: auto;
        margin-left: auto;
    }
    .slider{
        margin-top: 14%;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 500px;
        height: 750px;
        margin-bottom: 200px;
        background-color: red;
        padding-top: 20px;
    }
    .onamasadrzaj{
        padding: 1%;
        width: 60%;
        display: flex;
        flex-direction: column;
        gap: 100px;
        margin-left: auto;
        margin-right: auto;
    }
    .porudzbina{
    background-color: rgba(7, 7, 7, 0.5);
    display: flex;
    size: cover;
    min-width: 100vh;
    min-height: 200vh;
    align-items: center;
    justify-content: center;
}
.forma{
    border: 2px white solid;
    min-height: 100%;
    min-width:  40%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
.okupcu{
    height: 80vh;
    width: 80vh;
    font-size: 40px;
}
.oproizvodu{
    width: 80vh;
    font-size: 40px;
    height: 30vh;
}
.oplacanju{
    width: 80vh;
    font-size: 40px;
    height: 60vh;
}
.legenda{
    font-size: 30px;
}
  }