* {
    box-sizing: border-box;
}

html {
    height: 100vh;
}


body {
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    margin: 0;
    background: #111;
}

.dog 
{ 
    background: transparent url('img/dog1.png');
    background-size: contain; 
    background-repeat: no-repeat;
    width: 250px; 
    height: 250px; 
    position: absolute;
    top: 100px;
    right: 5%;
    animation: 2s dog1-bounce ease infinite;
    z-index: 100;
}

.dog2
{ 
    background: transparent url('img/dog2.png');
    background-size: contain; 
    background-repeat: no-repeat;
    width: 200px; 
    height: 380px; 
    position: absolute;
    bottom: 0;
    left: 45%;
    animation: .85s dog2-bounce infinite;
    z-index: 90;
}

.dog3 {
    position: absolute;
    background: transparent url('img/dog3.png');
    background-size: contain; 
    background-repeat: no-repeat;
    top: 5%;
    left: 40%;
    width: 250px; 
    height: 250px; 
}

.eureka {
    position: absolute;
    top: 25px;
    left: 36%;
    width: 65px;
    height: 65px;
    border-radius: 100%;
    background-color: #ffff00cc;
    transform: scale(0);
    animation: 2s dog3-eureka infinite;  
    animation-play-state:paused;  
    text-align: center;
    padding-top: 20px;
}

.dog3:hover .eureka {
    animation-play-state:running;  
}

.dog4 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 75px;
    background-color: #ccc;
    border-bottom: 2px solid #333;
    z-index: 100;
    overflow: visible;
}

.walker {
    position: absolute;
    bottom: 0;
    left: -200px;
    animation: 19s dog4-walker ease-in infinite; 
}

.ball {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 20px;
    height: 20px;
    background-color: darkorange;
    border:1px solid #000000;
    border-radius: 100%;
    animation: 19s dog4-walker linear infinite, 19s dog4-ball linear infinite; 
}

@keyframes dog4-ball
{
    0% { 
        left: -30px;
        width: 20px;
        height: 20px;
        transform: unset;
        border-radius: 100%;
        opacity: 1;
    } 
    49% {
        left: 130%;
        transform: unset;
        border-radius: 100%;
        background-color: darkred;
        width: 30px;
        height: 30px;
    } 
    50% { 
        left: 140%;
        width: 200px;
        height: 75px;
        border-radius: 0;
        background-color: transparent;
        border:0;
        background-repeat: no-repeat;
        background-size: contain;      
    } 
    75% {
        opacity: 1;
    }
    93% { 
        left: 50px;
        width: 200px;
        height: 75px;
        background-color: transparent;
        background-image: url('img/lion.gif');
        background-repeat: no-repeat;
        background-size: contain;
        transform: scale(1.15);
        opacity: 0;
        border:0;
        
    }  
    100% { 
        left: -30px;
        opacity: 0;
    }
}

@keyframes dog4-walker
{
    0% { 
        left: -200px;
        transform: unset;
        animation-timing-function: ease-in;
    } 
    49% {
        left: 110%;
        transform: unset;
    } 
    50% { 
        left: 100%;
        transform: scaleX(-1);
        animation-timing-function: linear;
    } 
    99% {
        left: -400px;
        transform: scaleX(-1);

    }
    100% { 
        left: -200px;
        transform: unset;
    }
}

@keyframes dog3-eureka
{
    0% { 
        transform: scale(0);
        background-color: #ffff00;
    } 
    50% { 
        transform: scale(1);
        background-color: #ffff00cc;
    }
    100% { 
        transform: scale(0);
        background-color: #ffff00;
    }
}

@keyframes dog1-bounce 
{
    0% { 
        transform: skewY(15deg);             
        animation-timing-function: ease; 
    } 
    50% { 
        transform: translateY(10px);  
    }
    55% { 
        transform: translateX(10px); 
    }
    75% { 
        transform: skewX(15deg); 
    }
    82% { 
        transform: none; 
    }
    100% { 
        transform: skewY(15deg);  
    }
}

@keyframes dog2-bounce 
{
    0% { 
        transform: none; 
        animation-timing-function: cubic-bezier(.78,.01,.83,.67);   
    } 
    50% { 
        transform: translateY(350px); 
    }
    55% { 
        transform: translateY(360px); 
    }
    75% { 
    }
    100% { 
        transform: none;
        animation-timing-function: ease-in; 
    }
}


    
body:hover .dog 
{ 
    animation-play-state:paused;
}





/*
@keyframes bounce 
{
    0% { 
        transform: none; 
        animation-timing-function: cubic-bezier(.78,.01,.83,.67);             
        box-shadow: none; 
    } 
    25%, 45% { 
        width: 90px; 
        height: 110px; 
        box-shadow: 0 -5px 3px skyblue, 0 -6px 6px skyblue; 
    }
    50% { 
        width: 90px; 
        height: 110px; 
        transform: translateY(350px); 
        filter: blur(2px); 
        box-shadow: none; 
    }
    55% { 
        transform: translateY(360px); 
        width: 110px; 
        height: 90px; 
        box-shadow: -5px 0px 3px skyblue, 5px 0px 3px skyblue; 
    }
    75% { 
        width: 90px; 
        height: 110px; 
        box-shadow: 0 5px 3px skyblue, 0 6px 6px skyblue; 
    }
    100% { 
        transform: none;
        animation-timing-function: ease-in; box-shadow: none; 
    }
}
*/