.card-header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -1px;
    position: relative;
    z-index: 10;
}

#city-name {
    padding-top: 60px;
}

.date-text {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.7;
    margin-top: 5px;
}

.loading::after {
    content: '';
    display: inline-block;
    width: 20px;
    text-align: left;
    animation: puntos-suspensivos 1.5s steps(4, end) infinite;
}

@keyframes puntos-suspensivos {
    0%   { content: ''; }
    25%  { content: '.'; }
    50%  { content: '..'; }
    75%  { content: '...'; }
    100% { content: ''; }
}