.cards-container {
    padding: 0;
    margin: 0 0 50px;
    list-style: none;
    display: flex;
    justify-content: left;
    flex-flow: row nowrap;
    scrollbar-color: #313131 #121212;
    scrollbar-width: auto;
    overflow-x: auto;
}

.card-container {
    min-width: 210px;
    margin: 10px 20px 10px 0;
    background-color: #3c3b3d;
    overflow: hidden;
}

.card-container:last-child {
    margin-right: 0;
}

.date {
    font-size: 30px;
    text-align: center;
    background: #121212;
    padding: 16px 0 10px 0;
    color: #bbb;
}

.card {
    position: relative;
    width: 100%;
    padding: 6.5em 1em;
    display: block;
}
.card:after {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    height: 100%;
    width: 50%;
}
.card-night {
    background-color: #000;
}
.card-rain {
    background-color: #41ba9c;
}
.card-cloud {
    background-color: #41ba9c;
}
.card-snow {
    background-color: #ccd1d9;
}
.card-storm {
    background-color: #656d78;
}
.card-sunny {
    background-color: #4fc1e9;
}

.status {
    color: #808080;
    text-align: center;
}
.status p:first-child {
    font-weight: 600;
    color: #FFF;
}

.status-text {
    color: #eee;
}

.status-text:first-letter {
    text-transform: capitalize;
    color: #ff9118;
    font-weight: bold;
}

.night {
    animation: night-stars 5s ease-in-out infinite;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: #fff 26px 7px 0 -1px, rgba(255, 255, 255, 0.1) -36px -19px 0 -1px, rgba(255, 255, 255, 0.1) -51px -34px 0 -1px, #fff -52px -62px 0 -1px, #fff 14px -37px, rgba(255, 255, 255, 0.1) 41px -19px, #fff 34px -50px, rgba(255, 255, 255, 0.1) 14px -71px 0 -1px, #fff 64px -21px 0 -1px, rgba(255, 255, 255, 0.1) 32px -85px 0 -1px, #fff 64px -90px, rgba(255, 255, 255, 0.1) 60px -67px 0 -1px, #fff 34px -127px, rgba(255, 255, 255, 0.1) -26px -103px 0 -1px;
    height: 4px;
    width: 4px;
    opacity: 1;
    position: absolute;
    left: 90px;
    top: 155px;
}
.night:before,
.night:after {
    content: "";
    height: 100px;
    width: 100px;
    position: absolute;
    top: -106px;
    transform: rotate(-5deg);
    transform-origin: 0 50%;
}
.night:before {
    animation: night-moon 9s ease-in-out infinite;
    border-radius: 50%;
    box-shadow: #fff -35px 0;
}
.night:after {
    animation: night-moon 9s ease-in-out infinite;
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.2) -5px 0 0;
}
@keyframes night-moon {
    50% {
        transform: rotate(10deg);
    }
}
@keyframes night-stars {
    50% {
        box-shadow: rgba(255, 255, 255, 0.1) 26px 7px 0 -1px, #ffffff -36px -19px 0 -1px, #ffffff -51px -34px 0 -1px, rgba(255, 255, 255, 0.1) -52px -62px 0 -1px, rgba(255, 255, 255, 0.1) 14px -37px, #ffffff 41px -19px, rgba(255, 255, 255, 0.1) 34px -50px, #ffffff 14px -71px 0 -1px, rgba(255, 255, 255, 0.1) 64px -21px 0 -1px, #ffffff 32px -85px 0 -1px, rgba(255, 255, 255, 0.1) 64px -90px, #ffffff 60px -67px 0 -1px, rgba(255, 255, 255, 0.1) 34px -127px, #ffffff -26px -103px 0 -1px;
    }
}
.ten-from-cloud {
    height: 50px;
    width: 50px;
    position: absolute;
    left: 20px;
    top: 80px;
}
.cloud,
.rain {
    animation: rain 5s ease-in-out infinite;
    background: var(--cloud-color);
    border-radius: 50%;
    box-shadow: var(--cloud-color) 65px -25px 0 -5px, var(--cloud-color) 25px -25px, var(--cloud-color) 5px 0 0 2px, var(--cloud-color) 10px 0 0 2px, var(--cloud-color) 15px 0 0 2px, var(--cloud-color) 20px 0 0 2px, var(--cloud-color) 25px 0 0 2px, var(--cloud-color) 30px 0 0 2px, var(--cloud-color) 35px 0 0 2px, var(--cloud-color) 40px 0 0 2px, var(--cloud-color) 45px 0 0 2px, var(--cloud-color) 50px 0 0 2px, var(--cloud-color) 55px 0 0 2px, var(--cloud-color) 60px 0 0 2px, var(--cloud-color) 65px 0 0 2px, var(--cloud-color) 70px 0 0 2px, var(--cloud-color) 75px 0 0 2px;
    display: block;
    height: 50px;
    width: 50px;
    position: absolute;
    left: 40px;
    top: 80px;
}
.ten-from-cloud:after,
.rain:after,
.storm:after {
    background: #000;
    border-radius: 50%;
    content: "";
    height: 15px;
    width: 120px;
    opacity: 0.2;
    position: absolute;
    left: 5px;
    bottom: -60px;
    transform: scale(0.7);
}
.ten-from-cloud:after {
    animation: cloud-ten-shadow 5s ease-in-out infinite;
    width: 164px
}
.rain:after {
    animation: rain-shadow 5s ease-in-out infinite;
}
.rain:before {
    animation: rain-drop 0.7s infinite linear;
    content: "";
    background: transparent;
    margin-left: 0;
    border-radius: 50%;
    display: block;
    height: 6px;
    width: 3px;
    opacity: 0.3;
    transform: scale(0.9);
}
@keyframes rain {
    50% {
        transform: translateY(-20px);
    }
}
@keyframes cloud-ten-shadow {
    50% {
        transform: scale(1);
        opacity: 0.05;
    }
}
@keyframes rain-shadow {
    50% {
        transform: translateY(20px) scale(1);
        opacity: 0.05;
    }
}
@keyframes rain-drop {
    0% {
                box-shadow: transparent 30px 30px, transparent 40px 40px, blue 50px 75px, blue 55px 50px, blue 70px 100px, blue 80px 95px, blue 110px 45px, blue 90px 35px;
    }
    25% {
                box-shadow: blue 30px 45px, blue 40px 60px, blue 50px 90px, blue 55px 65px, transparent 70px 120px, transparent 80px 120px, blue 110px 70px, blue 90px 60px;
    }
    26% {
                box-shadow: blue 30px 45px, blue 40px 60px, blue 50px 90px, blue 55px 65px, transparent 70px 40px, transparent 80px 20px, blue 110px 70px, blue 90px 60px;
    }
    50% {
                box-shadow: blue 30px 70px, blue 40px 80px, transparent 50px 100px, blue 55px 80px, blue 70px 60px, blue 80px 45px, blue 110px 95px, blue 90px 85px;
    }
    51% {
                box-shadow: blue 30px 70px, blue 40px 80px, transparent 50px 45px, blue 55px 80px, blue 70px 60px, blue 80px 45px, blue 110px 95px, blue 90px 85px;
    }
    75% {
                box-shadow: blue 30px 95px, blue 40px 100px, blue 50px 60px, transparent 55px 95px, blue 70px 80px, blue 80px 70px, transparent 110px 120px, transparent 90px 110px;
    }
    76% {
                box-shadow: blue 30px 95px, blue 40px 100px, blue 50px 60px, transparent 55px 35px, blue 70px 80px, blue 80px 70px, transparent 110px 25px, transparent 90px 15px;
    }
    100% {
                box-shadow: transparent 30px 120px, transparent 40px 120px, blue 50px 75px, blue 55px 50px, blue 70px 100px, blue 80px 95px, blue 110px 45px, blue 90px 35px;
    }
}
.snow {
    animation: snow 5s ease-in-out infinite;
    background: #fff;
    border-radius: 50%;
    box-shadow: #fff 65px -25px 0 -5px, #fff 25px -25px, #fff 5px 0 0 2px, #fff 10px 0 0 2px, #fff 15px 0 0 2px, #fff 20px 0 0 2px, #fff 25px 0 0 2px, #fff 30px 0 0 2px, #fff 35px 0 0 2px, #fff 40px 0 0 2px, #fff 45px 0 0 2px, #fff 50px 0 0 2px, #fff 55px 0 0 2px, #fff 60px 0 0 2px, #fff 65px 0 0 2px, #fff 70px 0 0 2px, #fff 75px 0 0 2px;
    display: block;
    height: 50px;
    width: 50px;
    position: absolute;
    left: 40px;
    top: 80px;
}
.snow:after {
    animation: snow-shadow 5s ease-in-out infinite;
    background: #000;
    border-radius: 50%;
    content: "";
    height: 15px;
    width: 120px;
    opacity: 0.2;
    position: absolute;
    left: 8px;
    bottom: -60px;
    transform: scale(0.7);
}
.snow:before {
    animation: snow-flakes 2s infinite linear;
    content: "";
    border-radius: 50%;
    display: block;
    height: 7px;
    width: 7px;
    opacity: 0.8;
    transform: scale(0.9);
}
@keyframes snow {
    50% {
        transform: translateY(-20px);
    }
}
@keyframes snow-shadow {
    50% {
        transform: translateY(20px) scale(1);
        opacity: 0.05;
    }
}
@keyframes snow-flakes {
    0% {
        box-shadow: rgba(238, 238, 238, 0) 30px 30px, rgba(238, 238, 238, 0) 40px 40px, #eee 50px 75px, #eee 55px 50px, #eee 70px 100px, #eee 80px 95px, #eee 110px 45px, #eee 90px 35px;
    }
    25% {
        box-shadow: #eee 30px 45px, #eee 40px 60px, #eee 50px 90px, #eee 55px 65px, rgba(238, 238, 238, 0) 70px 120px, rgba(238, 238, 238, 0) 80px 120px, #eee 110px 70px, #eee 90px 60px;
    }
    26% {
        box-shadow: #eee 30px 45px, #eee 40px 60px, #eee 50px 90px, #eee 55px 65px, rgba(238, 238, 238, 0) 70px 40px, rgba(238, 238, 238, 0) 80px 20px, #eee 110px 70px, #eee 90px 60px;
    }
    50% {
        box-shadow: #eee 30px 70px, #eee 40px 80px, rgba(238, 238, 238, 0) 50px 100px, #eee 55px 80px, #eee 70px 60px, #eee 80px 45px, #eee 110px 95px, #eee 90px 85px;
    }
    51% {
        box-shadow: #eee 30px 70px, #eee 40px 80px, rgba(238, 238, 238, 0) 50px 45px, #eee 55px 80px, #eee 70px 60px, #eee 80px 45px, #eee 110px 95px, #eee 90px 85px;
    }
    75% {
        box-shadow: #eee 30px 95px, #eee 40px 100px, #eee 50px 60px, rgba(238, 238, 238, 0) 55px 95px, #eee 70px 80px, #eee 80px 70px, rgba(238, 238, 238, 0) 110px 120px, rgba(238, 238, 238, 0) 90px 110px;
    }
    76% {
        box-shadow: #eee 30px 95px, #eee 40px 100px, #eee 50px 60px, rgba(238, 238, 238, 0) 55px 35px, #eee 70px 80px, #eee 80px 70px, rgba(238, 238, 238, 0) 110px 25px, rgba(238, 238, 238, 0) 90px 15px;
    }
    100% {
        box-shadow: rgba(238, 238, 238, 0) 30px 120px, rgba(238, 238, 238, 0) 40px 120px, #eee 50px 75px, #eee 55px 50px, #eee 70px 100px, #eee 80px 95px, #eee 110px 45px, #eee 90px 35px;
    }
}
.storm {
    animation: storm 5s ease-in-out infinite;
    background: #393939;
    border-radius: 50%;
    box-shadow: #393939 65px -25px 0 -5px, #393939 25px -25px, #393939 5px 0 0 2px, #393939 10px 0 0 2px, #393939 15px 0 0 2px, #393939 20px 0 0 2px, #393939 25px 0 0 2px, #393939 30px 0 0 2px, #393939 35px 0 0 2px, #393939 40px 0 0 2px, #393939 45px 0 0 2px, #393939 50px 0 0 2px, #393939 55px 0 0 2px, #393939 60px 0 0 2px, #393939 65px 0 0 2px, #393939 70px 0 0 2px, #393939 75px 0 0 2px;
    height: 50px;
    width: 50px;
    position: absolute;
    left: 40px;
    top: 80px;
}
.storm:after {
    animation: storm-shadow 5s ease-in-out infinite;
}
.storm:before {
    animation: storm-lightning 3s steps(1, end) infinite;
    border-right: 7px solid transparent;
    border-top: 33px solid yellow;
    box-shadow: yellow -2px -30px, rgba(255, 255, 0, 0.4) 2px -30px 10px;
    content: "";
    display: block;
    height: 0;
    width: 0;
    position: absolute;
    left: 57px;
    top: 70px;
    transform: rotate(14deg) scale(0.9);
    transform-origin: 50% -60px;
}
@keyframes storm {
    50% {
        transform: translateY(-20px);
    }
}
@keyframes storm-shadow {
    50% {
        transform: translateY(20px) scale(1);
        opacity: 0.05;
    }
}
@keyframes storm-lightning {
    0% {
        transform: rotate(20deg);
        opacity: 1;
    }
    5% {
        transform: rotate(-34deg);
        opacity: 1;
    }
    10% {
        transform: rotate(0deg);
        opacity: 1;
    }
    15% {
        transform: rotate(-34deg);
        opacity: 0;
    }
}
.sunny {
    animation: sun 9s linear infinite;
    background: #ffe400;
    border-radius: 100%;
    box-shadow: rgba(255, 255, 0, 0.1) 0 0 5px 5px;
    content: "";
    height: 90px;
    width: 90px;
    position: absolute;
    left: 60px;
    top: 60px;
}
.sunny:before {
    animation: sun-glow 9s ease-in-out infinite;
    background: #ffee44;
    box-shadow: yellow 0 0 5px 1px;
    border-radius: 100%;
    content: "";
    height: 86px;
    width: 86px;
    position: absolute;
    left: 2px;
    top: 2px;
}
.sunny:after {
    animation: sun-shadow 9s ease-in-out infinite;
    background: #000;
    border-radius: 50%;
    content: "";
    height: 15px;
    width: 120px;
    opacity: 0.2;
    position: absolute;
    left: -15px;
    bottom: -40px;
}
@keyframes sun {
    50% {
        transform: translateY(-20px);
        box-shadow: rgba(255, 255, 0, 0.2) 0 0 5px 15px;
    }
}
@keyframes sun-glow {
    50% {
        box-shadow: rgba(255, 255, 0, 0.1) 0 0 5px 10px;
    }
}
@keyframes sun-shadow {
    50% {
        transform: translateY(20px) scale(1);
        opacity: 0.05;
    }
}