.div-aman-atar {
    display: flex;
    justify-content: center;
    align-items: center;
}

.aman-atar {
    font-family: Lora, serif;
    font-size: 170%;
    color: azure;
    margin: auto;
}

@media (max-width: 600px){
    .aman-atar {
        font-size: 95%;
    }
}

.contenedor-clima {
    text-align: center;
    display: flex;
    justify-content: center;
    text-align: center;
    width: 80%;
    margin: 0 10%;
}

@media (max-width: 1024px){
    .contenedor-clima {
        width: 94%;
        margin: 0 3%;
        padding: 10px;
    }
}

@media (max-width: 600px){
    .contenedor-clima {
        width: 100%;
        padding: 10px;
        margin: 5% 0 1% 0;
    }
}

@media (max-width: 340px){
    .contenedor-clima {
        display: block;
        margin: 0;
        padding: 0;
    }
}

.contenedor-clima-2 {
    text-align: center;
    display: flex;
    justify-content: center;
    text-align: center;
    width: 80%;
    margin: 0 10%;
}

@media (max-width: 800px){
    .contenedor-clima-2 {
        width: 90%;
        margin: 0 5%;
        padding: 10px;
    }
}

@media (max-width: 700px){
    .contenedor-clima-2 {
        width: 100%;
        padding: 10px;
        margin: 0;
    }
}

@media (max-width: 340px){
    .contenedor-clima-2 {
        display: block;
        margin: 0;
        padding: 0;
    }
}


.caja1 {
    display: inline-block;
    font-family: Lora, serif;
    background-color: #4400fc;
    color:azure;
    text-align: center;
    padding: 30px 20px;
    font-size: 100%;
    width: 33%;
    height: 300px;
}

@media (max-width: 600px){
    .caja1 {
        font-size: 80%;
        height: 220px;
    }
}

@media (max-width: 400px){
    .caja1 {
        font-size: 60%;
        height: 200px;
    }
}

@media (max-width: 400px){
    .caja1 {
        display: block;
        width: 100%;
        vertical-align: middle;
        text-align: center;
    }
}

.caja2 {
    display: inline-block;
    font-family: Lora, serif;
    text-align: center;
    background-color: #4400fc;
    color:azure;
    padding: 30px 20px;
    font-size: 100%;
    width: 33%;
    height: 350px;
}

@media (max-width: 1024px){
    .caja2  {
        /*width: 25%;*/
        font-size: 80%;
         height: 380px;
    }
}

@media (max-width: 800px){
    .caja2  {
        /*width: 25%;*/
        font-size: 80%;
         height: 380px;
    }
}

@media (max-width: 700px){
    .caja2  {
        /*width: 25%;*/
        font-size: 80%;
         height: 250px;
    }
}

@media (max-width: 600px){
    .caja2  {
        width: 25%;
        font-size: 80%;
         height: 230px;
    }
}

@media (max-width: 400px){
    .caja2  {
        font-size: 60%;
        height: 200px;
    }
}

@media (max-width: 400px){
    .caja2  {
        display: block;
        width: 100%;
        vertical-align: middle;
        text-align: center;
    }
}

.icono-animado {
    text-align: center;
    margin: auto;
    width: 128px;
    height: 128px;
}

@media (max-width: 600px){
    .icono-animado {
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 400px){
    .icono-animado {
        width: 98px;
        height: 98px;
    }
}

.temperatura-valor {
    text-align: center;
    margin: auto;
    font-size: 250%;
}

@media (max-width: 600px){
    .temperatura-valor {
        font-size: 200%;
    }
}

.temperatura-descripcion {
    text-align: center;
    margin: auto;
        font-size: 180%;
    }

@media (max-width: 600px){
    .temperatura-descripcion {
        font-size: 130%;
    }
}

.viento-velocidad {
    text-align: center;
    margin: auto;
    font-size: 180%;
}

@media (max-width: 600px){
    .viento-velocidad {
        font-size: 130%;
    }
}

.viento-direccion {
    text-align: center;
    margin: auto;
    font-size: 180%;
}

@media (max-width: 600px){
    .viento-direccion {
        font-size: 130%;
    }
}

.ubicacion-2 {
    text-align: center;
    margin: auto;
    font-size: 150%;    
}

@media (max-width: 1024px){
    .ubicacion-2 {
        font-size: 100%;
    }
}

@media (max-width: 700px){
    .ubicacion-2 {
        font-size: 70%;
    }
}

.icono-animado-2 {
    text-align: center;
    margin: auto;
    width: 128px;
    height: 128px;
}

@media (max-width: 700px){
    .icono-animado-2 {
        width: 50px;
        height: 50px;
    }
}

.temperatura-valor-2 {
    text-align: center;
    margin: auto;
    font-size: 250%;
}

@media (max-width: 700px){
    .temperatura-valor-2 {
        font-size: 180%;
    }
}

.temperatura-descripcion-2 {
    text-align: center;
    margin: auto;
        font-size: 120%;
    }

@media (max-width: 700px){
    .temperatura-descripcion-2 {
        font-size: 90%;
    }
}