:root {
    --svetlije-zelena: #CED6C8;
    --svetlo-zelena: #BECCB6;
    --zelena: #A3C1B7;
    --zelenija: #88AAA0;
    --tamno-zelenija: #657F7A;
    --tamno-zelena: #425454;

    --limun: #FCE8A1;
    --crvena: #FDA1A6;
}

html,
body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: var(--svetlo-zelena);
}

main {
    width: 100%;
}

    section {
        position: relative;
        grid-area: hero;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100vh;
        overflow: hidden;
        background-image: linear-gradient(90deg, var(--limun), var(--crvena));
    }

        section::before {
            display: block;
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: linear-gradient(0deg, rgba(190,204,182,1) 0%, rgba(190,204,182,0)) 70%;
        }

        @keyframes ani-gradient-swing {
            from {transform: rotate(-30deg) scale(2);}
            to { transform: rotate(30deg) scale(2);}
        }

        section::after {
            display: block;
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: linear-gradient(0deg, rgba(190,204,182,1) 40%, rgba(190,204,182,0)) 50%;
            animation: ani-gradient-swing 5s ease-in-out infinite alternate;
            transform: rotate(0deg) scale(1);
            transform-origin: center center;
        }

        .jbmg-ani {
            position: relative;
            display: flex;
            align-items: center;
            width: 960px;
            height: 350px;
            animation: ani-main 3s ease-in-out infinite alternate;
            z-index: 1;
        }

        @media (max-width: 1280px) {
            .jbmg-ani {
                width: 90vw;
            }
        }

        .jbmg-ani img {
            position: absolute;
            width: 100%;
            height: auto;
        }

            /*--- Animacije ---*/
            @keyframes ani-main {
            from {transform: translateY(0);}
            to {transform: translateY(30px);}
            }

            @keyframes ani-sunce {
                from {transform: translateY(-15px);}
                to {transform: translateY(15px);}
            }

            .ani-sunce {
                animation: ani-sunce 5s ease-in-out infinite alternate-reverse;
            }

            @keyframes ani-block2 {
                from {transform: scale(1) translateY(0px) ;}
                to {transform: scale(0.99) translateY(10px) ;}
            }

            .ani-block2 {
                animation: ani-block2 4s ease-in-out infinite alternate;
            }

            @keyframes ani-block1 {
                from {transform: scale(1) translateY(0px);}
                to {transform: scale(0.97) translateY(5px);}
            }

            .ani-block1 {
                animation: ani-block1 3s ease-in-out infinite alternate-reverse;
            }

            @keyframes ani-lijane {
                from {transform: translateX(-2px);}
                to {transform: translateX(2px);}
            }

            .ani-lijane {
                animation: ani-lijane 3s ease-in-out infinite alternate;
            }