/* Imon Ben Avraham   */

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

html, body {
    width: 100%;
    height: 100vh;
    background: #7D7BB0;
}


footer {
    background-color:black;
    position:fixed;
    bottom:0;
    width: 100%;
    color:white;
    text-align: center;
    padding: 3px;
    font-size: 24px;
    font-weight: bold;
}

/*                      <!-- FRAME --> *                */
#drawing {
    width: 100%;
    height: calc(100% - 48px); /* height=window-footer */
    position: relative;
}

#Window{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

#frame {
    width: 60%;
    box-shadow: 20px 10px 5px crimson;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 4px solid white;
    border-radius: 50px 10px 50px 10px;
    background-color: black;
    color: white;
    opacity: 0;
    transition: opacity 2;
    cursor: pointer;
}
#frame ,.text{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    overflow: auto;
    font-size: 3px;
}


/*<!-- Button start/pause --> */
#btn_startPause {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 120px;
    padding: 8px;
    text-align: center;
    font-size: 1.2em;
    cursor:pointer;
    background: black;
    color: white;
}

#shelet_story {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 120px;
    padding: 8px;
    text-align: center;
    font-size: 4em;
    cursor:pointer;
}

#frame:hover{
   opacity: 1;
}


/*              <!-- S V G --> *                /

/*<!-- moon --> */
#moon, #star1{
    animation:movmoon 7s infinite;
    animation-play-state: paused;
    cursor: pointer;
}
@keyframes movmoon{
    0%{

    }
    50%{
        transform: rotate(27deg);
    }
}



/*<!-- bat01 --> */
#bat01{
    animation:movbat01 20s infinite ;
    animation-play-state: paused;
    opacity:0;
}
@keyframes movbat01{
    0%{
    }
    25% {
             transform: translate(-100px,50px);
             opacity:1;
        }
     50% {
             transform: translate(-180px, 700px);
        }
    75% {
             transform: translate(500px, -10px);
            opacity:1;
        }
    85% {
             transform: translate(620px, -10px);
            opacity:1;
        }
    100% {
             transform: translate(-100px, 50px);
        }
}
/*nehita shel bat01 im dash+shinui tzvaim*/
#nehita{
    fill:black;
    stroke-dasharray: 20;
    animation: move_nehita 7s linear infinite;
    animation: dash2 10s reverse infinite;
    animation-play-state: paused;

}
@keyframes dash2 {
     0%{
        stroke-dashoffset: 0;
    }
    50%{
        fill:crimson;
        stroke-dashoffset: 200; 
    }
    90%{
        fill:gold;
        stroke-dashoffset: 0;
    }
}

/*<!-- bat02 --> */
#bat02{
    animation:movbat02 15s infinite ;
    animation-play-state: paused;
    opacity:0;
}
@keyframes movbat02{
    0%{
        
    }
    25% {
             transform: translateX(500px);
             opacity:1;
        }
    50% {
             transform: translate(500px, 120px);
        }
    75% {
             transform: translate(0, 120px);
        }
}

/* animatzia text "hunted castle" */
.text {
    text-anchor: middle;
    fill: none;
    font-weight: normal;
    font-size: 4em;
    font-family: fantasy;
    stroke: black;
    stroke-width: 3;
}
#text-path-anim {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: stroke 10s linear infinite;
    animation-play-state: paused;
    opacity:0;
    
}
@keyframes stroke {
    to {
        stroke-dashoffset: 0;
        opacity:1;
    }
}
/*shelet draculina house*/
#shelet1, #shelet2{
    text-anchor: middle;
    font-size: 1.6em;
    font-family: fantasy;
    stroke: white;
    stroke-width: 1;
    stroke-dasharray: 20;
    animation: dash 10s reverse infinite;
    animation-play-state: paused;
}
@keyframes dash {
    0%{
        stroke-dashoffset: 0;
    }
    50%{
        fill:crimson;
        stroke-dashoffset: 200; 
    }
    100%{
        fill:green;
        stroke-dashoffset: 0;
    }
}



/*  casper xD  */
#casper{
    animation:movcasper 7s infinite ;
    animation-play-state: paused;
    opacity:0;
}
@keyframes movcasper{
    0%{
    }
    25% {
         transform: translateY(-30px);
         opacity:1;
        }
    26% {
         opacity:0;
        }
    30%{
         transform: translate(-130px, -20px);
         opacity:0;
        }
    
    75%{
         transform: translate(-150px, -20px);
         opacity:1;
     }
    76%{
        opacity:0;
    }
}

/*      bat ghost      */
#bat_ghost{
    animation:mov_batghost 4s infinite ;
    animation-play-state: paused;
    opacity:0;
}
@keyframes mov_batghost{
    0%{
    }
    25% {
          opacity:1;
         transform: translateY(-20px);
    }
}

/*  cat xD  */
#cat{
    animation:movcat 10s infinite ;
    animation-play-state: paused;
    opacity:1;
}
@keyframes movcat{
    0%{    
    }
    49%{
        transform: translate(0, 0);
         opacity:0;
    }
    50%{
        transform: translate(260px, -170px);
        opacity:0;
        }
    
    75%{
        transform: translate(260px, -170px);
        opacity:1;
     }
    76%{
        opacity:0;
    }
    100%{
        opacity:0;
    }
    
}

/*      teurat rehov*       */
#tr1, #tr2{
    fill: white;
    animation:movetr 1s linear infinite;
    animation-play-state: paused;
}
@keyframes movetr {
    from {
    }
    to {
        fill:orange;
    }
}
#tr3{
    fill: white;
    animation:movetr3 1s linear infinite;
    animation-play-state: paused;
}
@keyframes movetr3 {
    from {
    }
    to {
        fill:lightblue;
    }
}

/*      stars       */
#big_star{
    animation:move_bigstar 2s linear infinite;
    animation-play-state: paused;
}
#moonstar{
    animation:mov_moonstar 3s linear infinite;
    animation-play-state: paused;
}
#star1{
    animation:movestar1 3s linear infinite reverse;
    animation-play-state: paused;
}
#star2{
    animation:movestar2 3s linear reverse infinite;
    animation-play-state: paused;
}
#star3{
    animation:movestar3 3s linear reverse infinite;
    animation-play-state: paused;
}

@keyframes move_bigstar {
     0% {
    }
    50%{
        fill:gold;
    }
}
@keyframes mov_moonstar {
     0% {
    }
    50%{
        fill:white;
    }
}
@keyframes movestar1 {
    0% {
    }
    50%{
        fill:lightblue;
    }
}
@keyframes movestar2 {
      0% {
    }
    50%{
        fill:orange;
    }
}
@keyframes movestar3 {
      0% {
    }
    50%{
        fill:crimson;
    }
}