html{
    font-family: "Open Sans", sans-serif;
}
.main{
    width: 100vw;
    height: 90vh;
    display: grid;
    place-content: center;

}
.content{
    width: 400px;
    height: 400px;
    background-color: white  ;
}
.landscape{
    background-color: #1A2238;
    width: 100%;
    height: 80%;
    position: relative;
    overflow: hidden;

    .moon{
        background-color: #F6EDBD;
        width: 67px;
        height: 67px;
        border-radius: 50%;
        box-shadow: 0 0 17px 0 #F6EDBD;
        position: absolute;
        overflow: hidden;
        top: 30px;
        left: 50px;
        z-index: 1;
        .crater{
            background-color: #ECE1A8;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            position: absolute;
            top: 0%;
            left: 50%;
            /* border: 1px red solid; */
        }
        .crater1{
            width: 20px;
            height: 20px;
            top: 26%;
            left: 48%;
        }
        .crater2{
            width: 15px;
            height: 15px;
            top: 76%;
            left: 23%;
        }
        .crater3{
            width: 12px;
            height: 12px;
            top: 49%;
            left: 90%;
        }
        .crater4{
            width: 10px;
            height: 10px;
            top: 43%;
            left: 19%;
        }
        .crater5{
            width: 9px;
            height: 9px;
            top: 63%;
            left: 50%;
        }
        .crater6{
            width: 19px;
            height: 19px;
            top: 11%;
            left: 17%;
        }

    }
    .raindrops{
        width: 10px;
        height: 10px;
        position: absolute;
        top: -5%;
        background-color: #7FC1F9;
        border-radius: 50% 0 50% 50%;
        rotate: 4deg;
        opacity: 0;
        transform-origin: left;
        animation: caida 8s infinite ease-out ; 
        animation-fill-mode: backwards;
        animation-fill-mode: both;
        

        
    }
    .raindrops-front{
        z-index: 4;
    }
    .raindrops-rear{

        z-index: 2;

    }
    .raindrops-half{
        
        z-index: 0;
    }

    .raindrops1{
        right: 95%;
        animation-delay: 3.1s;

    }
    .raindrops2{
        left: 10%;
        animation-delay: 1.5s;

    }
    .raindrops3{
        left: 30%;
        animation-delay: 0s;

        
    }
    .raindrops4{
        left: 60%;
        animation-delay: 2.5s;

    }
    .raindrops5{
        left: 110%;
        animation-delay: 4.7s;

    }
    .raindrops6{

        left: 76%;

    }
    .raindrops7{
 
        left: 42%;
        animation-delay: 5.3s;

    }
    .raindrops8{
 
        left: 15%;
        animation-delay: 9s;

    }
    .raindrops9{
 
        left: 100%;
        animation-delay: 3.4s;

    }
    .raindrops10{

        left: 110%;
        animation-delay: 4.6s;

    }
    .raindrop11{

        left: 90%;
        animation-delay: 1.7s;

    }
    .raindrops12{

        left: 30%;
        animation-delay: 0.5s;

    }
    .raindrops13{

        left: 56%;
        animation-delay: 11s;
    }
    .raindrops13{
        left: 120%;
        animation-delay: 12.4s;

    }
    .raindrops14{
        left: 20%;
        animation-delay: 13.2s;

    }
    .raindrops15{
        left: 10%;
        animation-delay: 0.55s;

    }
    .raindrops16{
        left: 68%;
        animation-delay: 7.4s;

    }
    .raindrops17{
        left: 48%;
        animation-delay: 5.55s;

    }
    .raindrops18{
        left: 84%;
        animation-delay: 7.9s;


    }
    .raindrops19{
        left: 53%;
        animation-delay: 0.8s;


    }
    .raindrops20{
        left: 24%;
        animation-delay: 3.46s;

    }
    .raindrops21{
        left: 37%;
        animation-delay: 4.78s;

    }
    .raindrops22{
        left: 64%;
        animation-delay: 1.26s;

    }
    .raindrop23{
        left: 95%;
        animation-delay: 2.91s;

    }
    .raindrops24{
        left: 80%;
        animation-delay: 3.45s;

    }
    .raindrops25{
        left: 53%;
        animation-delay: 2.46s;

    }
    .hill{
        position: absolute;
        background-color: #303C5D;
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }
    .hill1{

        background-color: #303C5D;
        width: 57%;
        height: 235px;
        bottom: -49%;
        left: -50px;
        z-index: 3;
    }
    .hill2{
        background-color: #303C5D;
        width: 57%;
        height: 235px;
        bottom: -49%;
        right: -25%;
        z-index: 3;
    }
    .hill3{
        background-color: #303C5D;
        width: 66%;
        height: 235px;
        bottom: -41%;
        right: 15%;
        z-index: 3;
    }
    .hill4{
        background-color: #26314Fed;
        width: 50%;
        height: 60%;
        bottom: -20%;
        right: -7%;
        z-index: 2;
    }
    .hill5{
        background-color: #26314F;
        width: 50%;
        height: 60%;
        bottom: -19%;
        left: -6%;
        z-index: 2;
    }
}

.info-climate{
    width: 100%;
    height: 20%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: #394885;
    .climate-temperature{
        font-size: 45px;
    }
    .climate-magnitude{
        font-weight: 200;
    }
    .climate-day{
        p{
            font-size: 15px;
            line-height: 20px;
            font-weight: 200;
            span{
                font-weight: 400;
            }
        }
    }
}
@keyframes caida {
    0%{
        opacity: 1;
    }

    50%{
        transform: translate(-109px,310px);
        border-radius: 50% 0% 50% 50%;
        width: 16px;
        height: 16px;
        opacity: 1;
    }
    50%{
        transform: translate(-109px,336px);
        border-radius: 50% 0% 50% 50%;
        width: 10px;
        height: 10px;
        opacity: 1;
    }
    
    90%{
        transform: translate(-109px,347px);
        border-radius: 50% 50% 50% 50%;
        width: 25px;
        height: 10px;
        opacity: 0;
    }

    
}