html{
    display: block;
}
body{

    padding: 0%;
    margin: 0%;
    width: 100%;
    height: max-content;
    overflow: hidden;
    display: block;
}

svg{
    display: block;
}

#Svg_container{

    padding: 0%;
    margin: 0%;
    width: 100%;
    height: max-content;
    overflow: hidden;
}

/* Styling for train and airships....................................  */
/* 電車と飛行船.......................................................... */

#Train{

    animation: Train-right-to-left 20s linear infinite;
}

#Green_airship{


    animation: Green-airship-left-to-right 125s linear infinite;
    
}

#Pink_airship{

    visibility: hidden;
    animation: Pink-airship-right-to-left 105s linear 3s infinite;
    transform: translateX(-100%);
    
}

/* ......................................................................... */



/*-....................................................................................................
 Prefixed Animation keyframes declaration for browser preference
....................................................................................................... */
@-webkit-keyframes Train-right-to-left {
    75%{
        -webkit-transform: translateX(-96%);
        -ms-transform: translate(-96%);
    }
    100%{
        -webkit-transform: translateX(-96%);
        -ms-transform: translate(-96%);
    }
}

@-webkit-keyframes Green-airship-left-to-right {

    0%{
        -webkit-transform: translateX(-7%);
        -ms-transform: translate(-7%);
    }
    95.84%{
        -webkit-transform: translateX(100%);
        -ms-transform: translate(100%);
    }
    100%{
        -webkit-transform: translateX(100%);
        -ms-transform: translate(100%);
    }
}
@-webkit-keyframes Pink-airship-right-to-left  {
    0%{
        visibility: visible;
        -webkit-transform: translateX(7%);
        -ms-transform: translate(7%);
        
    }
    95.24%{
        -webkit-transform: translateX(-100%);
        -ms-transform: translate(-100%);   
    }
    100%{
        -webkit-transform: translateX(-100%);
        -ms-transform: translate(-100%);
    }
} 



/* Keyframes for train and airships..................................................... */
/* 電車と飛行船のアニメションのキーフレーム................................................ */

@keyframes Train-right-to-left {
    75%{
        
        transform: translateX(-96%);
    }
    100%{
        
        transform: translateX(-96%);
    }
}

@keyframes Green-airship-left-to-right {

    0%{
        
        transform: translateX(-7%);
    }
    95.84%{
    
        transform: translateX(100%);
    }
    100%{
        
        transform: translateX(100%);
    }
}
@keyframes Pink-airship-right-to-left  {
    0%{
        visibility: visible;
        
        transform: translateX(7%);
        
    }
    95.24%{
        
        transform: translateX(-100%);   
    }
    100%{
       
        transform: translateX(-100%);
    }
}

/* ......................................................................................................... */
