:root {
    --red-color: #e04f60;
    --yellow-color: #ffc928;
}

html,
body,
.ground {
    height: 100%;
}

body {
    background-color: #cce6fd;
    overflow: hidden;
    animation: dayTime 40s linear infinite;
}


/*CLOUDS*/

.sky {
    position: relative;
}

.cloud {
    margin: 5% 0 0 100%;
    position: relative;
}

.cloud:before,
.cloud:after {
    position: absolute;
    content: '';
}

.cloud,
.cloud:before,
.cloud:after {
    background: #fff;
    border-radius: 50%;
    border: 25px solid #fff;
    width: 0.5%;
    overflow: visible;
}

.cloud:before {
    top: -35px;
    right: -60px;
    border-width: 30px;
}

.cloud:after {
    bottom: -25px;
    right: -95px;
    border-width: 28px;
}

.sky .cloud:nth-child(1) {
    -webkit-animation: wind 80s infinite;
    animation: wind 80s infinite;
}

.sky .cloud:nth-child(2) {
    -webkit-animation: wind 150s infinite;
    animation: wind 150s infinite;
}

.stage:after {
    content: ' ';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-top: 3px solid #205c6b;
    border-bottom: 3px dashed #205c6b;
}


/*TRAIN*/

.train {
    position: absolute;
    bottom: 10px;
    width: 310px;
    z-index: 1;
}

.wagon,
.cabin,
.chimney {
    border-radius: 4px 4px 0 0;
    border-top: 4px solid var(--yellow-color);
}

.wagon,
.motor {
    border-bottom: 2px solid var(--yellow-color);
}

.wagon,
.locomotive {
    display: inline-block;
    width: 70px;
    height: 55px;
    background-color: var(--red-color);
    position: relative;
}


/*WHEELS*/

.wagon:before,
.wagon:after,
.motor:before,
.motor:after,
.cabin:after {
    content: ' ';
    color: #fff;
    padding: 6px;
    position: absolute;
    border-radius: 46%;
    border: 6px solid #333;
    bottom: -10px;
    background-color: #666;
    -webkit-animation: spin 4s linear infinite;
    -moz-animation: spin 4s linear infinite;
    animation: spin 4s linear infinite;
}

.wagon:before {
    left: 6px;
}

.wagon:after {
    right: 6px;
}

.motor:before {
    left: 32px;
}

.motor:after {
    right: 4px;
}

.cabin:after {
    bottom: -50px;
    padding: 8px;
    left: 3px;
}


/*LOCOMOTIVE*/

.locomotive {
    background-color: transparent;
}

.locomotive .cabin {
    width: 58px;
    height: 35px;
    background-color: var(--red-color);
    position: relative;
    z-index: 1;
    border-radius: 8px 8px 0 0;
}


/*locomotive window*/

.locomotive .cabin:before {
    content: ' ';
    width: 25px;
    height: 18px;
    position: absolute;
    top: 10px;
    left: 15px;
    border-radius: 3px;
    border: 3px solid pink;
    background-color: #f1f1f1;
}

.locomotive .motor {
    display: inline-block;
    width: 85px;
    height: 40px;
    background-color: var(--red-color);
    position: relative;
    border-radius: 0 8px 0px 0px;
}

.locomotive .chimney {
    position: absolute;
    width: 15px;
    height: 15px;
    background-color: var(--red-color);
    right: -6px;
    bottom: 10px;
    -webkit-animation: puf 4s 2;
    animation: puf 4s 2;
}

.locomotive .light {
    content: " ";
    position: absolute;
    right: -10px;
    bottom: 0;
    border-radius: 50%;
    border: 3px solid pink;
}

.train {
    -webkit-animation: voyage 20s linear infinite;
    animation: voyage 20s linear infinite;
}


/*ANIMATIONS*/

@-webkit-keyframes dayTime {
    0% {
        background-color: #cce6fd;
    }
    50% {
        background-color: #252645;
    }
    100% {
        background-color: #cce6fd;
    }
}

@keyframes dayTime {
    0% {
        background-color: #cce6fd;
    }
    50% {
        background-color: #252645;
    }
    100% {
        background-color: #cce6fd;
    }
}

@-webkit-keyframes puf {
    0% {
        bottom: 0px
    }
    25% {
        bottom: -1px;
    }
    100% {
        bottom: 5px;
    }
}

@keyframes puf {
    0% {
        bottom: 0px
    }
    25% {
        bottom: -1px;
    }
    100% {
        bottom: 5px;
    }
}

@-webkit-keyframes wind {
    0% {
        right: 0;
    }
    100% {
        right: 110%;
    }
}

@keyframes wind {
    0% {
        right: 0;
    }
    100% {
        right: 110%;
    }
}

@-webkit-keyframes voyage {
    0% {
        left: -310px;
    }
    100% {
        left: 100%;
    }
}

@keyframes voyage {
    0% {
        left: -310px;
    }
    100% {
        left: 100%;
    }
}

@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}