/* Defina a cor do texto para a saudação com base no período do dia */
#mensagem {
    color: white;
    /* Azul */
}

/* Defina a cor do texto para a mensagem sobre a temperatura */
#temperature-message {
    color: white;
    /* Vermelho */
}















.detalhes-temperatura {
    display: flex;
    color: #ffffff;
    margin-top: 30px;
    font-size: 12px;
}

.detalhes-temperatura__temp {
    color: #ffffff;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;


}

.detalhes-temperatura__item {
    border: none;
    color: #ffffff;
    margin-left: 10px;
    /* Adiciona uma margem inferior de 10 pixels entre os itens */
}



.detalhes-temperatura__item:last-child {
    border: none;
    color: #ffffff;
}

.detalhes-temperatura__label {
    color: #ffffff;
    font-size: 11px;
    /* Reduzindo o tamanho do texto */
}





.detalhes-temperatura__value,
.sunset-sunrise__value {
    color: #ffffff;
    font-weight: 400;
    margin-top: 1px;
    /* Reduzindo a margem superior */
    font-size: 11px;
    /* Reduzindo o tamanho do texto nr de humidade*/
}

/* Sun */

.sunset-sunrise {
    color: #ffffff;
    display: flex;
    margin: 30px auto;
}

.sunset-sunrise__item {
    color: #ffffff;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}


.header__current-date {
    font-size: 12px;
    color: #ffffff;
}

.header__city-name {
    color: #ffffff;
    font-size: 18px;
}














.current-temperature__weather-icon {
    width: 55px;
    /* Reduzindo a largura do ícone */
    height: 55px;
    /* Reduzindo a altura do ícone */
}

/* Sun */

.sunset-sunrise {

    display: flex;
    margin: 30px auto;
}

.sunset-sunrise__item {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

































/* Media query para dispositivos com largura máxima de 768 pixels (tamanho de um tablet) */
@media only screen and (max-width: 768px) {













    .detalhes-temperatura {
        display: flex;
        color: #ffffff;
        margin-top: 30px;
        font-size: 12px;
    }

    .detalhes-temperatura__temp {
        color: #ffffff;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;


    }

    .detalhes-temperatura__item {
        border: none;
        color: #ffffff;
        margin-left: 10px;
        /* Adiciona uma margem inferior de 10 pixels entre os itens */
    }



    .detalhes-temperatura__item:last-child {
        border: none;
        color: #ffffff;
    }

    .detalhes-temperatura__label {
        color: #ffffff;
        font-size: 11px;
        /* Reduzindo o tamanho do texto */
    }





    .detalhes-temperatura__value,
    .sunset-sunrise__value {
        color: #ffffff;
        font-weight: 400;
        margin-top: 1px;
        /* Reduzindo a margem superior */
        font-size: 11px;
        /* Reduzindo o tamanho do texto nr de humidade*/
    }

    /* Sun */

    .sunset-sunrise {
        color: #ffffff;
        display: flex;
        margin: 30px auto;
    }

    .sunset-sunrise__item {
        color: #ffffff;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }


    .header__current-date {
        font-size: 12px;
        color: #ffffff;
    }

    .header__city-name {
        color: #ffffff;
        font-size: 18px;
    }














    .current-temperature__weather-icon {
        width: 55px;
        /* Reduzindo a largura do ícone */
        height: 55px;
        /* Reduzindo a altura do ícone */
    }

    /* Sun */

    .sunset-sunrise {

        display: flex;
        margin: 30px auto;
    }

    .sunset-sunrise__item {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }




}















/* Media query para dispositivos com largura máxima de 768 pixels (tamanho de um tablet) */
@media only screen and (max-width: 1080px) {














    .detalhes-temperatura {
        display: flex;
        color: #ffffff;
        margin-top: 30px;
        font-size: 12px;
    }

    .detalhes-temperatura__temp {
        color: #ffffff;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;


    }

    .detalhes-temperatura__item {
        border: none;
        color: #ffffff;
        margin-left: 10px;
        /* Adiciona uma margem inferior de 10 pixels entre os itens */
    }



    .detalhes-temperatura__item:last-child {
        border: none;
        color: #ffffff;
    }

    .detalhes-temperatura__label {
        color: #ffffff;
        font-size: 11px;
        /* Reduzindo o tamanho do texto */
    }





    .detalhes-temperatura__value,
    .sunset-sunrise__value {
        color: #ffffff;
        font-weight: 400;
        margin-top: 1px;
        /* Reduzindo a margem superior */
        font-size: 11px;
        /* Reduzindo o tamanho do texto nr de humidade*/
    }

    /* Sun */

    .sunset-sunrise {
        color: #ffffff;
        display: flex;
        margin: 30px auto;
    }

    .sunset-sunrise__item {
        color: #ffffff;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }


    .header__current-date {
        font-size: 12px;
        color: #ffffff;
    }

    .header__city-name {
        color: #ffffff;
        font-size: 18px;
    }














    .current-temperature__weather-icon {
        width: 55px;
        /* Reduzindo a largura do ícone */
        height: 55px;
        /* Reduzindo a altura do ícone */
    }

    /* Sun */

    .sunset-sunrise {

        display: flex;
        margin: 30px auto;
    }

    .sunset-sunrise__item {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }




}