#logotipo{
  width: 930px;
  height: 110px;
  margin: 0;
  top: 0px;
  display:block;
  margin-left: auto;
  margin-right: auto;
}

.p1 {
  position: relative;
  font-family: Arial;
  color: blue;
  font-size: 20pt;
}

.p2 {
  position: relative;
 
  font-family: Arial;
  color: black;
  font-size: 14pt;
}

.button1 {
  background-color: #ddd;
  border: none;
  color: black;
  padding: 10px 20px;
  font: Arial;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 16px;
}

.button1:hover {
  background-color: black;
  border: none;
  color: white;
  padding: 10px 20px;
  font: Arial;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 16px;
}

.button2 {
  background-color: #ddd;
  border: none;
  color: black;
  padding: 10px 20px;
  font: Arial;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 16px;
}

.button3 {
  background-color: #ddd;
  border: none;
  color: black;
  padding: 10px 20px;
  font: Arial;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 16px;
}



.button3:hover {
  background-color: black;
  border: none;
  color: white;
  padding: 10px 20px;
  font: Arial;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 16px;
}



.button2:hover {
  background-color: black;
  border: none;
  color: white;
  padding: 10px 20px;
  font: Arial;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 16px;
}

canvas{
   position: relative; 
   border:1px solid red;
   top: 10px;
   left: 1px;
}

.slider {  
       position: relative;  
       top: 1px;  
       left: 1px; 
       width: 220px;  
       height: 10px;  
       background-color: red;
    }  
     .bar {  
        position: relative;  
        top: 10px;  
        width: 120px;  
        height: 20px;  
        background-color: red;  
     }  

   
     .knob {  
         position: relative;  
         left: 0;  
         border: 1px solid black;  
         background-color: blue;  
         width: 50px;  
         height: 30px;  
         border-radius: 2px;  
     }


#latido {
   font-family: Arial;
   font-weight: normal;
   font-size: 12pt;
   color: black;
   position: relative;
   top: 1px;
   left: 10px;
}

input[type=range]{
   top: 1px;
   left: -40px;
    width:100px;
    height:5px;
    display:block;
    margin:10px auto;
    -webkit-appearance: none; /*en los navegadores de tipo -webkit- anula los estilos con los cuales los sliders vienen de fabrica.*/
    background-image:linear-gradient(to right, HotPink calc(var(--value)*1%), black 0);
  }