/* Reiniciar estilos básicos */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif; /* Aplicar Roboto a todo */
    font-weight: bold; /* Usar la variante Bold */
}

/* Establecer dimensiones fijas */
html, body {
    width: 2160px;
    height: 384px;
    overflow: hidden; /* Evitar scroll */
}

/* Contenedor principal */
#app {
    display: flex;
    width: 100%;
    height: 384px;
}

/* Sección del clima */
.weather {
    width: 50%;
    height: 384px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #6dd5ed, #2193b0);
    color: #fff;
    justify-content: center;
    align-items: center;
}

/* Sección de la hora */
.time {
    width: 50%;
    height: 384px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #f7971e, #ffd200);
    color: #fff;
}

/* Estilos de .temperature */
.temperature {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 20px;
}

/* Ajuste del icono y la temperatura */
.temperature img {
    width: 230px;
    height: 210px;
}

.temperature #temp {
    font-size: 250px;
    margin-left: 30px;
}

/* Estilos de temperatura mínima y máxima */
.min-max {
    display: flex;
    justify-content: space-around;
    width: 100%;
    font-size: 250px;
    margin-bottom: 20px;
}

.min-max .max {
    color: #ff6b6b;
}

.min-max .min {
    color: #1e90ff;
}

/* Estilos de la hora */
.time #current-time {
    font-size: 250px;
}