body{
    background: beige;
}

main{
    background: black;
}

/*acts as WINDOW to show current caption*/

div#caption_window{
    height: 80px;
    border: 1px darkgrey solid;
    background: black;
    overflow: hidden;
}

/*div SLIDER holds all the captions
div moved to scroll current caption in to window */
div#captions_container{
    position: relative; 
    top: 80px;
    
    animation: captions 90s;
    animation-timing-function: step-end;
}

div.caption{
    height: 78px;
    border: 1px darkgrey solid;
    display: flex;
    color: white;
    text-align: center;
    justify-content: center;
}

/* image */

div#imgDiv{
    width:300px;
    height: 350px;
    overflow: hidden;
    margin: auto;
}

img{
    width: 300px;
    margin: auto;
    position: relative;

    animation: panels 90s;
    animation-timing-function: ease-in-out;
}
            
@keyframes panels{
    0%{width: 300px; left: 0px; top: 0px; clip-path: inset(0px 0px 0px 0px); }
    10% {width: 800px; left: -20px; top: -16px; clip-path: inset(16px 500px 367px 40px);}
    20% {left: -293px; top: -7px; clip-path: inset(7px 213px 374px 299px);}
    30% {left: -534px; top: -2px; clip-path: inset(2px 19px 373px 587px);}
    40% {left: -29px; top: -227px; clip-path: inset(227px 481px 187px 38px);}
    50% {left: -307px; top: -236px; clip-path: inset(236px 206px 185px 321px);}
    60% {left: -533px; top: -231px; clip-path: inset(231px 24px 183px 590px);}
    70% {left: -31px; top: -418px; clip-path: inset(418px 482px 18px 45px);}
    80% {left: -235px; top: -413px; clip-path: inset(413px 345px 24px 314px);}
    90% {left: -388px; top: -417px; clip-path: inset(417px 180px 22px 457px);}
    100% {width: 800px; left: -548px; top: -418px; clip-path: inset(418px 20px 13px 616px);}
}

@keyframes captions{
    0%{top: 80px;}       /*blank*/
    
    1%{top: -0px;}     /*go find him */
    10%{top: 100px;}      
    
    25%{top: -80px;}   /*bark*/
    30%{top: 80px;}
    
    55%{top: -160px;}   /*hands in the air*/
/*    40%{top: 80px;}*/
    
    65%{top: -240px;}  /*you're under arrest */
    70%{top: 80px;}
    
    75%{top: -320px;}  /*oh yeah */
    80%{top: 80px;}
    
    85%{top: -400px;}  /*max, it was  you*/
    95%{top: 80px;} /* */
}