body, html {
    background-color: #000;
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:left;
    font-family: liberation;
  }
  
  canvas {
    border: 1px solid blue;
    display: block;
    width: 100%; /* El canvas ocupa el 100% del ancho del contenedor */
  }

  #video {
    color: white;
    width: 50vw;
    /*display: flex;*/
    display:none;
  }
  #parametros {
    color: white;
    width: 50vw;
    text-align: center;
  }
  #relaciones {
    color: white;
    width: 50vw;
    text-align: center;
    display: flex; 
    justify-content: center;
    align-content: center;
  }
  #scroll {
    text-align: center;
    flex-basis: 50%;
  }
  #zoom {
    flex-basis: 50%;
    display: flex; 
    justify-content: center;
    align-items: center;
  }
  #video button {
    width: 10vw;
    height: 5vh;
  }
  #relaciones_opciones {
    display: flex; 
    flex-direction: column;
    justify-content: center;
  }
  input[type='range'] {
    width: 25vw;
  }
  label {
    display: inline-block;
    width: 150px;
  }
  td {
    width: 5vw;
  }
  [id^="label"] {
    color: greenyellow;
  }
  @font-face {
    font-family: "liberation";
    src: url('../fonts/liberation.ttf');
}