body{
    margin: 0rem;
    background-color: black;

    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;

    z-index: 1;
}

#tekst{
    margin-left: 10%;
    margin-right: 10%;
    text-align: center;
}

@media (max-width: 768px){
    #tekst{
        font-size: 0.8rem;
    }
}

#nav_hero{
    background-image: url("hero.png");
    background-size: cover;
    height: 100vh;

    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 25%;
    flex-direction: column;
}

nav{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding: 2rem;
    gap: 5rem;
}

@media (max-width: 768px){
    #nav_hero{
        height: 100vh;
    }

    #nav_hero h1{
        font-size: 1.5rem;
    }

    nav{
        gap: 1rem;
    }
}

nav img{
    width: 20rem;
}

@media (max-width: 768px){
    #logo{
        display: none;
    }
}

#navigaciona_traka{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 2rem;
}

.ikonica{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white;
}

.ikonica:hover{
    transform: scale(1.05);
}

.ikonica img{
    width: 2rem;
}

@media (max-width: 768px){
    .ikonica img{
        width: 1.5rem;
    }

    .ikonica p{
        font-size: 0.8rem;
    }
}

#tekst{
    font-size: 4rem;
    color: white;

    font-family: "Emblema One", system-ui;
    font-weight: 400;
    font-style: normal;
}

@media (max-width: 768px){
    #tekst{
        font-size: 3rem;
    }
}

button{
    background-color: #bb1212;
    border: none;
    color: white;
    font-size: 1.2rem;
    padding: 0.5rem;

    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;

    border-radius: 0.5rem;
}

@media (max-width: 768px){
    button{
        font-size: 1rem;
    };
}

button:hover{
    transform: scale(1.05);
}

#ime_sekcije{
    font-size: 2rem;
    color: white;
    margin-left: 10%;
    margin-right: 10%;

    font-family: "Emblema One", system-ui;
    font-weight: 400;
    font-style: normal;
}

@media (max-width: 768px){
    #ime_sekcije{
        font-size: 1.5rem;
    }
}

#opis_sekcije, #filter_opis{
    font-size: 1rem;
    color: white;
    margin-left: 10%;
    margin-right: 10%;

    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;

    text-align: justify;
}

#pod_opis{
    font-size: 0.8rem;
    color: white;
    margin-left: 10%;
    margin-right: 10%;

    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;

    text-align: justify;

    opacity: 70%;
}

@media (max-width: 768px){
    #opis_sekcije{
        font-size: 0.8rem;
    }
}

#pre_opis{
    font-size: 1rem;
    color: white;
    margin-left: 10%;
    margin-right: 10%;

    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;

    text-align: justify;
}

#sve{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/*****************/

#partneri{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;

    gap: 3rem;
    background-color: white;

    padding: 1rem;
}

#partneri img{
    width: 5rem;
}

#info_bar_rod{
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000000b4;
    color: white;

    width: 100%;
    overflow: hidden;

    position: sticky;
    top: 0rem;
    z-index: 2;
}

#info_bar{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 1rem;
    font-size: 1rem;

    animation: info 55s linear infinite;
}

#info_bar p{
    white-space: nowrap;
}

@media (max-width: 768px){
    #info_bar{
        font-size: 0.8rem;
    }
}

@keyframes info {
    from
    {
        transform: translate(100%);
    }

    to
    {
        transform: translate(-150%);
    }
}

@media (max-width: 768px){
    #partneri img{
        width: 3rem;
    }
}

#videi{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;

    margin-left: 10%;
    margin-right: 10%;

    gap: 2rem;
}

.video_div{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    
    color: white;
}

.video_div img{
    border-radius: 0.5rem;
    width: 25rem;
}

@media (max-width: 768px){
    .video_div img{
        width: 100%;
    }

    #videi{
        gap: 3rem;
    }
}

.video_div a{
    color: white;
}

#dugmad_nagrada, #linkovi{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;

    gap: 2rem;
    margin-left: 10%;
}

@media (max-width: 768px){
    #linkovi{
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
    }
}

#linkovi a{
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;

    gap: 0.5rem;
}

@media (max-width: 768px){
    #linkovi a{
        font-size: 0.8rem;
    }
}

#linkovi a img{
    width: 2rem;
}

@media (max-width: 768px){
    #linkovi a img{
        width: 1rem;
    }
}

#lista_nagrada{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    gap: 1rem;
}

.nagrada_div{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;

    width: 70%;
    height: 15vh;

    gap: 2rem;
    color: rgb(255, 255, 255);

    background-color: white;
    border-radius: 0.5rem;

    padding: 1rem;
}

.nagrada_div img{
    width: 6rem;
}

@media (max-width: 768px){
    .nagrada_div{
        flex-direction: column;
        height: 25vh;
        gap: 0rem;
    }

    .nagrada_div img{
        width: 5rem;
    }

    .nagrada_div h2{
        font-size: 1.2rem;
    }
}

.grupa{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    color: white;
    width: 26%;
    padding: 1rem;
    height: 10rem;

    border-radius: 0.5rem;
}

@media (max-width: 768px){
    .grupa{
        width: 100%;
        height: 12rem;
    }
}

.grupa a{
    background-color: #bb1212;
    border: none;
    color: white;
    font-size: 1rem;
    padding: 0.5rem;

    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;

    border-radius: 0.5rem;
    text-decoration: none;
}

.grupa:hover{
    transform: scale(1.05);
}

.grupa p{
    text-align: center;
}

#sve_micisne_grupe{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 2rem;
    column-gap: 2rem;

    margin-left: 10%;
    margin-right: 10%;
}

@media (max-width: 768px){
    #sve_micisne_grupe{
        align-items: flex-start;
    }
}

#ruke{
    background-image: url("Ruke.png");
    background-size: cover;
}

#ledja{
    background-image: url("Ledja.png");
    background-size: cover;
}

#ramena{
    background-image: url("Ramena.png");
    background-size: cover;
}

#grudi{
    background-image: url("Grudi.png");
    background-size: cover;
}

#noge{
    background-image: url("Noge.png");
    background-size: cover;
}

#stomak{
    background-image: url("Stomak.png");
    background-size: cover;
}

.misici{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
}

.misici button{
    width: 8rem;
    padding: 1rem;
    text-align: center;
}

#XP_rod{
    margin-left: 10%;
    margin-right: 10%;
    width: 80%;
    background-color: white;
    height: 3rem;

    border-radius: 0.5rem;
}

#XP_bar{
    width: 0%;
    background-color:#bb1212;
    height: 3rem;

    border-radius: 0.5rem;
}

#info_XP{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 35%;
    color: white;
}

footer{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: white;
    gap: 1rem;

    padding: 1rem;

    font-size: 1.2rem;
}

#idi_gore_div{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

#idi_gore_div button{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
}

#slogan{
    margin-left: 10%;
    margin-right: 10%;
}

#nav_footer{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;

    gap: 1rem;

    margin-left: 10%;
    margin-right: 10%;
}

#oba{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 2rem;

    margin-left: 10%;
    margin-right: 10%;
}

#alati{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
}

#osnovi_ishrane_div{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;

    margin-left: 10%;
    margin-right: 10%;

    gap: 1rem;
}

#osnovi_ishrane_div img{
    width: 30%;
    border-radius: 0.5rem;
}

@media (max-width: 768px){
    #osnovi_ishrane_div{
        flex-direction: column;
    }

    #osnovi_ishrane_div img{
        width: 100%;
    }
}

#obroci{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2rem;

    margin-right: 5%;
    margin-left: 5%;
}

#OBROCI_ROD{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    margin-right: 5%;
    margin-left: 5%;
}

.obrok{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 1rem;
    height: 15rem;

    border-radius: 0.5rem;
    color: white;
}

@media (max-width: 768px){
    .obrok{
        background-size: cover;
        background-attachment: scroll;
        height: 30vh;
    }
    
    #ime_obroka_dorucak{
        font-size: 1.2rem;
        text-align: center;
    }

    .info ul li{
        font-size: 1rem;
    }

    .info_obrok p{
        font-size: 1rem;
    }
}

#dorucak{
    background-image: url("dorucak.png");
    background-size: cover;
    width: 80%;
}

#rucak{
    background-image: url("rucak.png");
    background-size: cover;
    width: 80%;
}

#vecera{
    background-image: url("vecera.png");
    background-size: cover;
    width: 80%;
}

#poklon_put{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 2rem;
    padding: 1rem;

    margin-left: 10%;
    margin-right: 10%;

    color: white;
    background-color: #cfcf3c;

    border-radius: 0.5rem;
}

#poklon_put img{
    width: 5rem;
}

@media (max-width: 768px){
    #poklon_put h3{
        font-size: 1rem;
    }
}

#voda_rod{
    margin-left: 10%;
    margin-right: 10%;
    width: 80%;
    background-color: white;
    height: 3rem;

    border-radius: 0.5rem;
}

#voda_bar{
    width: 0%;
    background-color:#1261bb;
    height: 3rem;

    border-radius: 0.5rem; 
}

/*GPT*/

#voda_rod, #nagrade_rod{
    overflow: hidden;
}

#voda_bar, #nagrade_bar{
    position: relative;
    overflow: hidden;
}

#voda_bar::before, #nagrade_bar::before{
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.35),
        transparent
    );
    transform: skewX(-20deg);
    animation: shimmer 2.5s linear infinite;
}

@keyframes shimmer{
    from{
        left: -60%;
    }
    to{
        left: 120%;
    }
}

/**/

#unos_vode{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 1rem;
}

@media (max-width: 768px){
    #unos_vode{
        flex-direction: column;
    }
}

#unos_vode input{
    padding: 0.5rem;
    border: none;
    font-size: 1.2rem;
    border-radius: 0.5rem;
    width: 12rem;

    font-family: "Emblema One", system-ui;
    font-weight: 400;
    font-style: normal;
}


@media (max-width: 768px){
    #unos_vode input{
        width: 12rem;
    }
}

/*STRANICA ZA OBROKE*/
/************************************************/
/************************************************/
/************************************************/

.obrok{
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    background-size: cover;
    background-attachment: scroll;
    height: 30vh;

    padding: 1rem;
}

.info{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.info_obrok{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 1rem;
}

.info li{
    font-size: 1.5rem;
}

#opis_drv{
    text-align: justify;
    color: white;
}

.opis_drv_div{
    display: flex;
    justify-content: center;
    align-items: center;

    margin-left: 10%;
    margin-right: 10%;
}

/*BMI i bazalni met. + (klasa za nagrade)*/
/************************************************/
/************************************************/
/************************************************/

#sup_rod{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;

    margin-left: 10%;
    margin-right: 10%;

    row-gap: 1rem;
    column-gap: 1rem;
}

.sup_div{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    color: rgb(0, 0, 0);
    background-color: rgb(235, 235, 235);
    width: 20%;
    height: 22rem;
    padding: 1rem;

    border-radius: 0.5rem;
}

@media (max-width: 768px){
    .sup_div{
        width: 35%;
        height: 17rem;
    }
}

.sup_div h4, h3, h2, p{
    text-align: center;
}

.sup_div img{
    width: 10rem;
}

@media (max-width: 768px){
    .sup_div img{
        width: 7rem;
    }

    .sup_div h3{
        font-size: 1rem;
    }

    .sup_div h4{
        font-size: 0.8rem;
    }
}

#bmi_unos{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 1rem;

    margin-right: 10%;
    margin-left: 10%;
}

@media (max-width: 768px){
    #bmi_unos{
        flex-direction: column;
    }

    #bmi_unos input{
        width: 90%;
    }
}

#bmi_unos input{
    padding: 0.5rem;
    border: none;
    font-size: 1.2rem;
    border-radius: 0.5rem;

    font-family: "Emblema One", system-ui;
    font-weight: 400;
    font-style: normal;
}

#bmi_rez{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 2rem;

    color: white;
    background-color: #22C55E;
    margin-right: 30%;
    margin-left: 30%;
    border-radius: 0.5rem;
}

@media (max-width: 768px){
    #bmi_rez{
        gap: 1rem;
    }
}

#bmi_rez h1{
    font-size: 3rem;
}

@media (max-width: 768px){
    #bmi_rez h1{
        display: none;
    }
}

@media (max-width: 768px){
    #bmi_rez p{
        font-size: 1rem;
    }
}

#bmi_rod, #nagrade_rod{
     margin-left: 10%;
    margin-right: 10%;
    width: 80%;
    background-color: white;
    height: 3rem;

    border-radius: 0.5rem;
}

#bmi_vrednosti, #nagrade_vrednosti{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;

    gap: 6%;
    color: white;
}

@media (max-width: 768px){
    #nagrade_vrednosti{
        gap: 3%;
    }

    #nagrade_vrednosti p{
        font-size: 0.8rem;
    }
}

@media (max-width: 768px){
    #bmi_vrednosti{
        gap: 3%;
    }

    #bmi_vrednosti p{
        font-size: 0.8rem;
    }
}

#bmi_bar, #nagrade_bar{
    width: 0%;
    background-color:#1261bb;
    height: 3rem;

    border-radius: 0.5rem; 

    max-width: 100%;
}

#kalorija_unos{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;

    margin-right: 10%;
    margin-left: 10%;
}

#kalorija_unos input, select{
    padding: 0.5rem;
    border: none;
    font-size: 1.2rem;
    border-radius: 0.5rem;

    font-family: "Emblema One", system-ui;
    font-weight: 400;
    font-style: normal;
}

@media (max-width: 768px){
    #kalorija_unos{
        flex-direction: column;
    }

    #kalorija_unos input{
        width: 90%;
    }
    
    #kalorija_unos select{
        width: 94%;
    }
}

#kalorija_rez_div{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 2rem;

    color: white;
    margin-right: 30%;
    margin-left: 30%;
    border-radius: 0.5rem;
}

#kalorija_rez_div h1{
    font-size: 3rem;
}

#kalorija_rez_div img{
    width: 10%;
}

@media (max-width: 768px){
    #kalorija_rez_div h1{
        text-align: center;
        font-size: 2rem;
    }

    #kalorija_rez_div img{
        display: none;
    }
}

/*FAQ*/
/************************************************/
/************************************************/
/************************************************/

details{
    color: white;
    margin-left: 10%;
    margin-right: 10%;
}

summary{
    font-size: 1.5rem;
}

@media (max-width: 768px){
    summary{
        font-size: 1.2rem;
    }
}

details p{
    text-align: left;
}

@media (max-width: 768px){
    details p{
        font-size: 0.8rem;
    }
}

/*GRUPA*/
/************************************************/
/************************************************/
/************************************************/

#misicna_grupa_div{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    color: white;

    font-family: "Emblema One", system-ui;
    font-weight: 400;
    font-style: normal;
}

#misicna_grupa_div h1{
    font-size: 3rem;
}

@media (max-width: 768px){
    #misicna_grupa_div h1{
        margin-left: 10%;
        margin-right: 10%;
    }
}

#misicna_grupa_div p{
    font-size: 1.5rem;
}

#VEZBE{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    gap: 2rem;
    
    margin-left: 10%;
    margin-right: 10%;
}

.vezba{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;

    gap: 2rem;

    color: rgb(255, 255, 255);

    background-attachment: fixed;
    background-size: cover;
    border-radius: 0.5rem;

    width: 100%;
}

@media (max-width: 768px){
    .vezba{
        justify-content: center;
        align-items: center;
        flex-direction: column;

        background-size: cover;
        background-attachment: scroll;
        height: 30vh;
    }
}

.vezba a{
    color: white;
}

.vezba img{
    width: 15rem;

    border-radius: 0.5rem;
    border-top-right-radius: 0rem;
    border-bottom-right-radius: 0rem;
}

@media (max-width: 768px){
    .vezba img{
        display: none;
    }
}

.vezba_info{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    padding-right: 1rem;
}

@media (max-width: 768px){
    .vezba_info{
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
}

.vezba_info p{
    background-color: rgb(60, 207, 104);
    border-radius: 0.5rem;
    font-size: 1.2rem;
    color: white;
    padding: 0.5rem;
}

@media (max-width: 768px){
    .vezba_info h2{
        font-size: 1rem;
        text-align: center;
    }

    .vezba_info p{
        font-size: 0.8rem;
        text-align: center;
    }
}

#filteri_vezbe{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;

    gap: 1rem;
    margin-left: 10%;
    margin-right: 10%;
}

@media (max-width: 768px){
    #filteri_vezbe button{
        width: 8rem;
    }

    #filteri_vezbe{
        justify-content: center;
    }
}