* {
    margin: 0;
    box-sizing: border-box;
    font-family: "Roboto";
}

:root {
    --shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.15);
}

.card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    box-shadow: var(--shadow);
    width: 400px;
    height: 400px;
}

.header-card {
    height: 300px;
    background-color: #1a2238;
    position: relative;
    overflow: hidden;
}

.moon {
    width: 67px;
    height: 67px;
    border-radius: 50%;
    background-color: #f6edbd;
    position: absolute;
    top: 40px;
    left: 40px;
    box-shadow: 0 0 15px 3px #ece1a8;
    overflow: hidden;
    animation: rise 1s ease-out;
}

@keyframes rise {
    from {
        transform: translateY(3000px);
    }
    to {
        transform: translateY(0);
    }
}

.crater-1, .crater-2, .crater-3, .crater-4, .crater-5, .crater-6, .crater-7, .crater-8, .crater-9, .crater-10, .crater-11 {
    position: absolute;
}

.crater-1 {
    left: -2px;
    top: 12px;
    width: 14px;
    height: 14px;
    background-color: #ece1a8;
    border-radius: 50%;
}

.crater-2 {
    left: 15px;
    top: 16px;
    width: 6px;
    height: 6px;
    background-color: #ece1a8;
    border-radius: 50%;
}

.crater-3 {
    left: 12px;
    bottom: 0;
    width: 14px;
    height: 14px;
    background-color: #ece1a8;
    border-radius: 50%;
}

.crater-4 {
    left: 50%;
    top: 10px;
    width: 14px;
    height: 14px;
    background-color: #ece1a8;
    border-radius: 50%;
}

.crater-5 {
    left: 72%;
    top: 21px;
    width: 8px;
    height: 8px;
    background-color: #ece1a8;
    border-radius: 50%;
}

.crater-6 {
    left: 36px;
    bottom: 12px;
    width: 8px;
    height: 8px;
    background-color: #ece1a8;
    border-radius: 50%;
}

.crater-7 {
    left: 18px;
    bottom: 21px;
    width: 8px;
    height: 8px;
    background-color: #ece1a8;
    border-radius: 50%;
}

.crater-8 {
    left: 25px;
    top: 26px;
    width: 6px;
    height: 6px;
    background-color: #ece1a8;
    border-radius: 50%;
}

.crater-9 {
    left: 42px;
    top: 38px;
    width: 4px;
    height: 4px;
    background-color: #ece1a8;
    border-radius: 50%;
}

.crater-10 {
    left: 52px;
    top: 35px;
    width: 8px;
    height: 8px;
    background-color: #ece1a8;
    border-radius: 50%;
    z-index: 1;
}

.hill-bg-1 {
    position: absolute;
    bottom: -180px;
    left: -123px;
    width: 337px;
    height: 281px;
    border-radius: 50%;
    background-color: #26314F;
    z-index: 1;
}

.hill-bg-2 {
    position: absolute;
    bottom: -180px;
    right: -123px;
    width: 337px;
    height: 281px;
    border-radius: 50%;
    background-color: #26314F;
    z-index: 1;
}

.hill-fg-1 {
    position: absolute;
    bottom: -200px;
    left: -210px;
    width: 337px;
    height: 281px;
    border-radius: 50%;
    background-color: #303C5D;
    z-index: 2;
}

.hill-fg-2 {
    position: absolute;
    bottom: -200px;
    left: 15%;
    width: 337px;
    height: 281px;
    border-radius: 50%;
    background-color: #303C5D;
    z-index: 2;
}

.hill-fg-3 {
    position: absolute;
    bottom: -200px;
    right: -250px;
    width: 337px;
    height: 281px;
    border-radius: 50%;
    background-color: #303C5D;
    z-index: 2;
}

[class*="drop"] {
    position: absolute;
    bottom: -20px;
    background-color: #7FC1F9;
    border-radius: 50%;
    animation-fill-mode: both;
    z-index: 20;
    transform-origin: 50% 100%;
    
}

[class*="drop-big"]::after {
    content: '';
    width: 6px;
    height: 10px;
    background-color: #7FC1F9;
    position: absolute;
    top: -5px;
    left: 1px;
    border-radius: 50%;
    z-index: 18;
}

.drop-big-1 {
    left: 13px;
    width: 8px;
    height: 8px;
    animation: drop 0.9s linear 750ms infinite;

}

.drop-big-2 {
    right: 135px;
    width: 8px;
    height: 8px;
    animation: drop 0.9s linear 700ms infinite;
}

.drop-big-3 {
    right: 85px;
    width: 8px;
    height: 8px;
    animation: drop 0.9s linear 1.22s infinite;
}

.drop-big-4 {
    left: 120px;
    width: 8px;
    height: 8px;
    animation: drop 0.9s linear 1.5s infinite;
}

.drop-big-5 {
    left: 80px;
    width: 8px;
    height: 8px;
    animation: drop 0.9s linear 1s infinite;
}

.drop-big-6 {
    left: 200px;
    width: 8px;
    height: 8px;
    animation: drop 0.9s linear 1.1s infinite;
}

.drop-big-7 {
    right: 80px;
    width: 8px;
    height: 8px;
    animation: drop 0.9s linear 800ms infinite;
}

.drop-big-8 {
    left: 180px;
    width: 8px;
    height: 8px;
    animation: drop 0.9s linear 1.4s infinite;
}

.drop-big-9 {
    left: 280px;
    width: 8px;
    height: 8px;
    animation: drop 0.9s linear 750ms infinite;
}

.drop-big-10 {
    left: 280px;
    width: 8px;
    height: 8px;
    animation: drop 0.9s linear 1s infinite;
}

[class*="drop-medium"]::after {
    content: '';
    width: 5px;
    height: 10px;
    background-color: #334968;
    position: absolute;
    top: -6px;
    left: 1px;
    border-radius: 50%;
    z-index: 18;
}

.drop-medium-1 {
    left: 250px;
    width: 6px;
    height: 7px;
    animation: drop 0.9s linear 1s infinite;
    background-color: #334968;
}

.drop-medium-2 {
    left: 75px;
    width: 6px;
    height: 7px;
    animation: drop 0.9s linear 780ms infinite;
    background-color: #334968;
}

.drop-medium-3 {
    left: 175px;
    width: 6px;
    height: 7px;
    animation: drop 0.9s linear 1.2s infinite;
    background-color: #334968;
}

.drop-medium-4 {
    left: 221px;
    width: 6px;
    height: 7px;
    animation: drop 0.9s linear 1.4s infinite;
    background-color: #334968;
}

@keyframes drop {
    0% {
        transform: translate3d(40px, -320px, 0) scaleX(1) scaleY(1) rotate(17deg);
    }
    
    85% {
        transform: translate3d(0, 0, 0) scaleX(1) scaleY(1) rotate(17deg);
    }
    
    100% {
        transform: translate3d(0, 0, 0) scaleX(3) scaleY(0) rotate(0deg);
        bottom: 0;
    }
}

.footer-card {
    height: 100px;
    padding: 12px;
    display: grid;
    grid-template-columns: auto 1fr;
}

.weather-data {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    text-align: center;
    
}

.center-flex {
    display: flex;
    align-items: center;
    justify-content: center;
}

.weather-temperature p {
    font-size: 46px;
    font-weight: lighter;
    color: #3b4769;
}

.weather-status {
    flex-direction: column;
    font-size: 15px;
    letter-spacing: 0.25px;
    color: #67696e;
}

.temperature-time {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    text-align: center;
}

.temperature-time p {
    color: #67696e;
    text-align: left;
}

.temperature-time p span {
    margin-left: 8px;
    color: #3b4769;

}