.ship0{fill: #ff60b7;}
.ship1{fill:#FFFFFF;}
.ship2{fill:#235ACE;}
.ship3{fill:#9ACBE2;}
.ship4{fill:#002C56;}
.ship5{fill:#6786A5;}
.ship6{fill:#FF6B00;}
.ship7{fill:#0022A4;}
.ship8{fill:#233569;}
.ship9{fill:none;stroke:#235ACE;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
.ship10{fill:none;stroke:#9ACBE2;stroke-miterlimit:10;}
.ship12{fill:none;stroke:#B0FFFF;stroke-width:3;stroke-miterlimit:10;}

.ship14{display:none;}
.ship15{display:inline;fill:none;stroke:#2393F5;stroke-miterlimit:10;}
.ship16{display:inline;fill:#F6B7B8;}

.ship{
    background-color: #accdff;
}

#smoke1{
    fill: rgba(0, 0, 0, 0.1);
    transform-origin:180px 225px;
    animation:smoke1 12s linear infinite;
}


@keyframes smoke1{
    0%{transform:translate(0,10px)scale(0); opacity:0; rx: 5; ry:50%}
    5%{transform:translate(0,0)scale(1); opacity:1; rx:5;ry:50%;}
    25%{transform:translate(-20px,-20px)scale(3,2.4); opacity:1; rx:4;ry:50%;}
    45%{transform:translate(-40px,-40px)scale(2.4,3.6); opacity:1;rx:7.5;ry:50%;}
    65%{transform:translate(-60px,-60px)scale(6,4); opacity:1;rx:3.33;ry:50%;}
    85%{transform:translate(-80px,-80px)scale(4,4.8); opacity:0.8;rx:6;ry:50%;}
    100%{transform:translate(-90px,-90px)scale(5.6,4.8); opacity:0;rx:4.29;ry:50%;}
}


#smoke2{
    fill: rgba(0, 0, 0, 0.1);
    transform-origin:180px 225px;
    animation:smoke2 12s linear infinite;
}


@keyframes smoke2{
    0%{transform:translate(-75px,-75px)scale(4.5,4.6); opacity:0.75;rx:5.11;ry:50%;}
    19%{transform:translate(-90px,-90px)scale(5.6,4.8); opacity:0;rx:4.29;ry:50%;}
    20%{transform:translate(0,10px)scale(0); opacity:0; rx: 5; ry:50%}
    25%{transform:translate(0,0)scale(1); opacity:1; rx:5;ry:50%;}
    45%{transform:translate(-20px,-20px)scale(3,2.4); opacity:1; rx:4;ry:50%;}
    65%{transform:translate(-40px,-40px)scale(2.4,3.6); opacity:1;rx:7.5;ry:50%;}
    85%{transform:translate(-60px,-60px)scale(6,4); opacity:1;rx:3.33;ry:50%;}
    100%{transform:translate(-75px,-75px)scale(4.5,4.6); opacity:0.75;rx:5.11;ry:50%;}
}


#smoke3{
    fill: rgba(0, 0, 0, 0.1);
    transform-origin:180px 225px;
    animation:smoke3 12s linear infinite;
}


@keyframes smoke3{
    0% {transform:translate(-55px,-55px)scale(5.1,3.9); opacity:1;rx:3.82;ry:50%;}
    20%{transform:translate(-75px,-75px)scale(4.5,4.6); opacity:0.75;rx:5.11;ry:50%;}
    39%{transform:translate(-90px,-90px)scale(5.6,4.8); opacity:0;rx:4.29;ry:50%;}
    40%{transform:translate(0,10px)scale(0); opacity:0; rx: 5; ry:50%}
    45%{transform:translate(0,0)scale(1); opacity:1; rx:5;ry:50%;}
    65%{transform:translate(-20px,-20px)scale(3,2.4); opacity:1; rx:4;ry:50%;}
    85%{transform:translate(-40px,-40px)scale(2.4,3.6); opacity:1;rx:7.5;ry:50%;}
    100%{transform:translate(-55px,-55px)scale(5.1,3.9); opacity:1;rx:3.82;ry:50%;}
}


#smoke4{
    fill: rgba(0, 0, 0, 0.1);
    transform-origin:180px 225px;
    animation:smoke4 12s linear infinite;
}


@keyframes smoke4{
    0%{transform:translate(-35px,-35px)scale(2.55,3.3); opacity:1;rx:6.47;ry:50%;}
    20% {transform:translate(-55px,-55px)scale(5.1,3.9); opacity:1;rx:3.82;ry:50%;}
    40%{transform:translate(-75px,-75px)scale(4.5,4.6); opacity:0.75;rx:5.11;ry:50%;}
    59%{transform:translate(-90px,-90px)scale(5.6,4.8); opacity:0;rx:4.29;ry:50%;}
    60%{transform:translate(0,10px)scale(0); opacity:0; rx: 5; ry:50%}
    65%{transform:translate(0,0)scale(1); opacity:1; rx:5;ry:50%;}
    85%{transform:translate(-20px,-20px)scale(3,2.4); opacity:1; rx:4;ry:50%;}
    100%{transform:translate(-35px,-35px)scale(2.55,3.3); opacity:1;rx:6.47;ry:50%;}
}

#ship{
    transform-origin:center center;
    animation:ship 4s ease infinite;
}
@keyframes ship{
    0%{
        transform:translate(0,0)rotate(-1.5deg);
    }
    50%{
        transform:translate(1px,2px)rotate(0deg);
    }
    100%{
        transform:translate(0,0)rotate(-1.5deg);
    }
}

#wave1{
    stroke:#5494FF;stroke-width:3; stroke-linecap:round;stroke-miterlimit:10;fill:none;
    animation:wv1 4s linear infinite;
}

@keyframes wv1{
    0%{
        stroke-dasharray:30;
        stroke-dashoffset:30;
    }
    50%{stroke-dasharray:30;
        stroke-dashoffset:0;
    }
    100%{   stroke-dasharray:30;
        stroke-dashoffset:-30;
    }
}

#wave2{
    stroke:#5494FF;stroke-width:3; stroke-linecap:round;stroke-miterlimit:10;fill:none;
    animation:wv2 4s linear infinite;
}

@keyframes wv2{

    0%{stroke-dasharray:20;
        stroke-dashoffset:0;}

    50%{
        stroke-dasharray:20;
        stroke-dashoffset:-20;
    }
    100%{stroke-dasharray:20;
        stroke-dashoffset:-40;
    }

}

#wave3{
    stroke:#5494FF;stroke-width:3; stroke-linecap:round;stroke-miterlimit:10;fill:none;
    animation:wv3 4s linear infinite;
}

@keyframes wv3{

    0%{stroke-dasharray:20;
        stroke-dashoffset:0;}

    50%{
        stroke-dasharray:20;
        stroke-dashoffset:-20;
    }
    100%{stroke-dasharray:20;
        stroke-dashoffset:-40;
    }

}


#wave4{
    stroke:#5494FF;stroke-width:3; stroke-linecap:round;stroke-miterlimit:10;fill:none;
    animation:wv4 4s linear infinite;
}

@keyframes wv4{

    0%{stroke-dasharray:25;
        stroke-dashoffset:0;}

    50%{
        stroke-dasharray:25;
        stroke-dashoffset:-25;
    }
    100%{stroke-dasharray:25;
        stroke-dashoffset:-50;
    }

}


#wave5{
    stroke:#5494FF;stroke-width:3; stroke-linecap:round;stroke-miterlimit:10;fill:none;
    animation:wv5 4s linear infinite;
}

@keyframes wv5{

    0%{stroke-dasharray:35;
        stroke-dashoffset:0;}

    50%{
        stroke-dasharray:35;
        stroke-dashoffset:-35;
    }
    100%{stroke-dasharray:35;
        stroke-dashoffset:-70;
    }

}

#wave6{
    stroke:#5494FF;stroke-width:3; stroke-linecap:round;stroke-miterlimit:10;fill:none;
    animation:wv6 4s linear infinite;
}

@keyframes wv6{

    0%{stroke-dasharray:45;
        stroke-dashoffset:45;}

    50%{stroke-dasharray:45;
        stroke-dashoffset:0;}

    100%{
        stroke-dasharray:45;
        stroke-dashoffset:-45;
    }


}

#spindript{
    transform-origin:center center;
    animation:spindript 4s ease infinite;
}

@keyframes spindript{
    0%{
        transform:translate(-3px,0);
    }

    50%{transform:translate(5px,2px);}

    100%{transform:translate(-3px,0); }

}

.seaboard-logo {
    position: absolute;
    top: 32px;
    right: 32px;
    filter: brightness(0.4);
}