* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body{
    height: 100vh;
    width: 100%;
}

footer {
    position: fixed;
    text-align: center;
    bottom: 0%;
    width: 100%;
    line-height: 40px;
    overflow: hidden;
    background-color: black;
    color: white;
}

#svg {
    position: relative;
    display: block;
    width: 100%;
    height: calc(100% - 40px);
    left: 0;
    top: 0;
    background-image: url("../images/back.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center; 
    cursor: pointer;
    position: fixed;

}
#svg2{
    overflow: hidden;
    width: 0;
    height: 0;
}

#text {
    fill: url(#my-gradient);
    font-weight:bolder;
    font-size: 1em;
    stroke: black;
    stroke-width: 1;
    text-anchor:middle;
    
}
#text-path-anim1 {
    stroke-dasharray: 10 1 10 1;
    stroke-dashoffset: 600;
    animation: stroke 50s linear infinite;
}

#stop1 {
    animation: anim1 4s ease-in-out infinite alternate;
}
#stop2 {
    animation: anim2 4s ease-in-out infinite alternate;
}

button {
    position: fixed;
    width: 50px;
    height: 50px;
    bottom: 8%;
    right: 3%;
    background: radial-gradient(circle farthest-corner, pink, purple);
    cursor: pointer;
}

#zoo{
    width: 100px;    
}

/*description*/
.desc 
{
    border-radius: 5px;
    color: white;
    text-shadow:   0 0 1em #000000;
    box-shadow:   0 0 1em #000000;
    position: absolute;
    left:50%;
    top:50%;
    margin-top: calc(-200px / 2);
    margin-left: calc(-300px / 2);
    width: 300px;
    height: 200px;
    background-color:skyblue;
    opacity: 0;
    transition: all 4s ease-in-out;
    text-align: center;
}

 #img2 , #coat, #baloons, #dog {
            display: block;
            mix-blend-mode: multiply;
        }

.my_audio{
    display:inline;
    width: 10%;
}
    
/*hover on svg*/
svg:hover ~ .desc {
    opacity: 0.8;
    transform: scale(1.5);
}

/*move stroke for text*/
@keyframes stroke {
    to {
        stroke-dashoffset: 0;
    }
}

/*text gradients*/
@keyframes anim1 {
    0% { stop-color: cyan; }
    100% { stop-color: gold; }
} 
@keyframes anim2 {
    0% { stop-color: blue; }
    100% { stop-color: red; stop-opacity: 0.5}
}

/*scale for sun*/
@keyframes bigger {
    0%{
       transform: scale(1);

    }
    50% {
        transform: scale(2);

    }
    100% {
       transform: scale(1);

    }
}

/*scale for dog*/
@keyframes bigger2 {
    0%{
       transform: scale(1);

    }
    50% {
        transform: scale(1.2);

    }
    100% {
       transform: scale(1);

    }
}
 
/*translate for bird2*/
@keyframes move {
        0%{
            transform: translate(500px);
        }
        50% {
            transform: translate(-500px);
        }
        51% {
            transform: translate(-500px) rotateY(180deg);
        }
        99%{
            transform: translate(600px) rotateY(180deg); 
        }
        100%{
            transform: translate(600px);
        }
}

/*translate for bird1 and clouds*/
@keyframes move2 {
        0%{
            transform: translate(-400px);
        }
        50% {
            transform: translate(500px);
        }
        51% {
            transform: translate(500px) rotateY(180deg);
        }
        99%{
            transform: translate(-400px) rotateY(180deg); 
        }
        100%{
            transform: translate(-400px);
        }
    }
/*jump baloons*/
@keyframes jump {
    0%{
       transform: translateY(100px);
    }
    100% { 
        transform: translateY(-600px);
    }
}

/*jump monkey*/
@keyframes jump2 {
    0%{
       transform: translateY(0px);
    }
    100% { 
        transform: translateY(-20px);
    }
}