.image_box
{
    width: 180px;
    height: 62px;
    position: relative;
    left: 15px;
    border-bottom: 5px inset skyblue;
    box-shadow: 0px 0px 5px gray ;
    border-radius: 10px;

    overflow: hidden;
}
.ship{
    position: absolute;
    top: 5%;
    width: 100%;
    height: 100%;

    background-image: 
        url('/assets/images/trireme2.svg'), 
        url('/assets/images/trireme.svg')
    ;
    background-repeat: no-repeat, no-repeat;
    background-size: 60%, 60%;
    background-position-x: center;
    background-position-y: 20%;
    justify-content: center;

    animation: roll 5s linear 0.1s infinite normal forwards;
}
@keyframes roll{
    0%{
        transform: rotateZ(0deg);
    }
    20%{
        transform: translateX(2px) translateY(2px) rotateZ(3deg);
    }
    50%{
        transform: translateX(-4px) translateY(6px) rotateZ(-1deg);
    }
    70%{
        transform: translateX(-4px) translateY(2px) rotateZ(-6deg);
    }
    100%{
        transform: rotateZ(0deg);
    }
}
.cloud{
    position: absolute;
    right: -50%;
    top: 0;
    width: 60px;
    height: 40px;
    background-image: url('/assets/images/props/cloud.png');
    background-repeat: no-repeat;
    background-size: contain;
}
.cl_1{
    animation: drift_2 10s ease-in-out 0.1s infinite normal forwards;
    z-index: -1;
}
.cl_2{
    animation: drift 15s linear 10s infinite normal forwards;
    width: 90px;
    height: 60px;
}
.cl_3{
    animation: drift 15s linear 0.1s infinite normal forwards;
    width: 30px;
    height: 20px;
}
.cl_4{
    animation: drift_2 20s linear 0.1s infinite normal forwards;
    width: 15px;
    height: 10px;
}
@keyframes drift{
    0%{
        right: -100%;
    }
    10%{
        top: 15%;
    }
    20%{
        top: -5%;
    }
    30%{
        top: 30%;
    }
    60%{
        top: 0;
    }
    80%{
        top: 25%;
    }
    100%{
        right: 100%;
    }
}
@keyframes drift_2{
    from{
        right: -40%;
    } to{
        right: 100%;
    }
}