#app {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
}

canvas {
    border: 1px solid #000;
}

#temperatureContainer {
    width: 20px;
    height: 400px;
    background-color: #eee;
    display: flex;
    flex-direction: column-reverse;
    border: 1px solid #000;
    position: absolute;
    right: 50%; /* Ajusta según necesites para posicionar la barra a la derecha del canvas */
    margin-right: -330px; /* La mitad del ancho del canvas más un poco de espacio */
}

#temperatureFill {
    background-color: red;
    width: 100%;
    height: 0%; /* Este valor se ajusta dinámicamente con JS */
}

#speedSlider {
    margin-top: 20px; /* Ajusta el espacio entre el deslizador y el canvas */
}

/* Asegúrate de que no haya otros estilos globales que puedan interferir */