.contenedorClima {
    background-color: #0b0b0b;
    padding: 2px;
    border-radius: 0px;

    display: flex;
    gap: 1.5%;
    justify-content: space-around;
    justify-self: left;
    margin-left:28%;
    /* margen de 0 a 28%*/
}

.horas {
    background-color: rgb(62, 78, 78);
    background-color: black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
 
    border-radius: 5%;
    border: 1px solid rgb(175, 192, 171);
    text-align: center;
    /* tamaño texto del contenido */
    font-size: 2.4vh;
    color: rgb(247, 250, 252);
    position: relative;
}

.ahora {
    position: absolute;
    top: 8%;
    left: 27%;
    transform: translate(-50%, -50%);
   
    color: rgb(247, 250, 252);
}

.hora1 {
    position: absolute;
    top: 8%;
    left: 36%;
    transform: translate(-50%, -50%);
    color: rgb(247, 250, 252);
}


.hora2 {
    position: absolute;
    top: 8%;
    left: 35%;
    transform: translate(-50%, -50%);
    color: rgb(247, 250, 252);
}



.contenedorClima img {
    position: absolute;
    width: 32%;
    height: 32%;
    top:13%; 
    left:62%
}

.temperatura {
    position: absolute;
    top: 30%;
    left: 36%;
    transform: translate(-50%, -50%);
    display: inline-block;
    width: 90%;
    font-weight: bold;
    font-size: 4.5vh;
}


.temperatura {

    color: yellow;
}




.temperaturaUnidad, .vientoActualUnidad, .nubesActualUnidad, .lluviaActualUnidad{
   
    font-size: 1.6vh;
    color: rgb(255, 90, 72);
}



#vientoActualValor, #viento1horaValor, #viento2horaValor,#nubesActualValor, #nubes1horaValor, #nubes2horaValor, #lluviaActualValor, #lluvia1horaValor, #lluvia2horaValor  {
    color: yellow;
     font-size: 3.5vh;
      font-size: 2.5vh;
    
 font-weight: bold;
}



.viento {
    position: absolute;
    top: 51%;
    left: 47%;
    transform: translate(-50%, -50%);
 
    width: 90%;
  
}

.nubes {
    position: absolute;
    top: 71%;
    left: 44%;
    transform: translate(-50%, -50%);
  
    width: 90%;
}

.lluvia {
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    width: 90%;
}