@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap');

#strA {
    background-image: url("slike/szp_pozadina_pon.jpg");
    background-repeat: repeat;
    background-color: #ccc;
}

#strB {
    background-image: url("slike/szp_pozadina.jpg");
    background-repeat: no-repeat;
    background-color: #ccc;

    background-size: cover;
    /* background-size: contain;
                        auto 
                        100% 
    */
}

#strC {
    background-image: url("slike/paw.png"), url("slike/sape.png"), linear-gradient(#a6db61,#8bb454);
    background-repeat: repeat;
    background-color: #a6db61;
}


#strD {
    background-image: url("slike/pawprint.png");
    background-repeat: repeat-x;
    background-position-y: 25%;
    background-color: #d8ecbe;
}

.stre {
    background-image: url("slike/v.jpg");
    width: 650px;
    height: 650px;

    background-size: 650px;
    
}


#strF {
    background-image: url("slike/szp_pozadina_pon.jpg");
    background-repeat: repeat;
    background-color: #ccc;
    background-size: 150px 50px;

    position: relative;
}
.cycle {
    position: absolute;
    height: 25%;
    top: 25%;
    width: 100%;
    background-image: url("slike/pawprint.png");
    background-repeat: repeat-x;
    z-index: 2;

}
.cycletwo {
    height: 100%;
    width: 15%;
    background-image: url("slike/sape.png"), linear-gradient(red,orange,yellow,rgb(0, 255, 0),cyan,blue,rgb(113, 0, 128),rgb(255, 0, 255),red);
    background-repeat: repeat-y;
    background-position-x: center;
    position: absolute;
    top: 0px;
    left: 1%;
    background-size: 250px 250px;

    animation: rainbow 1s linear ;
    animation-iteration-count: infinite;
}

.increment {
top: 50%;
}
.increment2 {
    top: 75%;
}

.cycletwoincrement {left: 25%;}
.cycletwoincrement2 {left: 50%;}
.cycletwoincrement3 {left: 75%;}


#strF p {
    color: yellow;
    position: relative;
    font-size: 2em;
    font-family: 'Dancing Script', cursive;
    z-index: 15;
    text-shadow: #ff00c8 5px 5px;
    padding: 15px;
    animation: godsright 1s linear ;
    animation-iteration-count: infinite;
}

#strF h1 {
    text-shadow: #ff00c8 5px 5px;
    animation: godsright 1s linear ;
    animation-iteration-count: infinite;
}

@keyframes rainbow {
    0% {
        background-position-y: 0px;
    }
    100% {
        background-position-y: 100%;

    }
}

@keyframes godplease {
    0% {
        color: yellow;
        text-shadow: #ff00c8 5px 5px;
    }
    50% {
        color: rgb(255, 0, 234);
        text-shadow: #ffee00 5px 5px;

    }
    100% {
        color: yellow;
        text-shadow: #ff00c8 5px 5px;

    }
}

@keyframes godplease {
    0% {
        color: yellow;
        text-shadow: #ff00c8 5px 5px;
    }
    50% {
        color: rgb(255, 0, 234);
        text-shadow: #ffee00 5px 5px;

    }
    100% {
        color: yellow;
        text-shadow: #ff00c8 5px 5px;

    }
}

@keyframes godsright {
    0% {
        color: red;
        text-shadow: rgb(255, 0, 255);
    }
    22% {
        color: orange;
        text-shadow: rgb(113, 0, 128);
    }
    33% {
        color: yellow;
        text-shadow: blue;
    }
    44% {
        color: rgb(0, 255, 0);
        text-shadow: cyan;
    }
    55% {
        color: cyan;
        text-shadow: rgb(0, 255, 0);
    }
    66% {
        color: blue;
    }
    77% {
        color: rgb(113, 0, 128);
    }
    88% {
        color: rgb(255, 0, 255);
    }
    100% {
        color: red;
    }
}