
#weather {
    .card {
        background-image: url(/assets/image/weather.jpeg);
        background-size: cover;
        width: 100%;
        max-width: 500px; 
        height: 300px;
        border-radius: 20px;
        box-shadow: 0px 2px 4px 4px #9E9E9E;
        color: white;
        padding: 20px;
        position: relative; 
    }

    .city, .description, .temperature, .time, .date {
        position: absolute;
        left: 20px; 
        bottom: 20px; 
        margin: 0; 
    }

    .temperature {
        font-size: 60px;
    }

    .description {
        font-size: 28px;
    }

    .time {
        font-size: 50px; 
    }

    .am-pm {
        font-size: 18px; 
    }

    .date {
        font-size: 18px; 
        bottom: auto; 
        top: 20px; 
    }
}
