body {
  background-image: url('css3.jpg');
}

p{
  color:white;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
  font-size: 18px;
}

/*Recoge los tres botones posibles de filtros*/
button{
  background-color: #F5AAFF;
  font-family: Arial, Helvetica, sans-serif;
  border-radius: 8px;
  color: rgba(109, 47,180, 1);
  text-align: center;
  padding: 3px 3px;
  font-size: 18px;
  margin: 5px 5px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
}

.button:hover {
  background-color: rgba(109, 47,180,0.7);
  color: white;
}

#botones{
  margin: auto;
  margin-left: auto;
  margin-right: auto;
  width: 450px;
  height: 40px;
  padding-left: 10px;
  padding-right:10px;
}

/*Imagen original*/
#imagesrc{
  border: #F5AAFF 15px solid;
  border-style: outset;
  border-radius: 15px;
}

/*Canvas con la imagen filtrada*/
#display{
  border: #F5AAFF 15px solid;
  border-style: outset;
  border-radius: 15px;
}

/*imagen titulo*/
#title{
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-top: 10px;
}

/*parte superior de la web, dos imagenes: izq,drch*/
#arriba{
  margin: auto;
  margin-left: auto;
  margin-right: auto;
  width: 1200px;
  height: 400px;
}

#izq{
  margin:auto;
  float:left;
}

#drch{
  margin:auto;
  float:right;
}

/*recoge los tres controladores*/
#controladores{
  margin: auto;
  margin-left: auto;
  margin-right: auto;
  width: 600px;
  height: 130px;
  background-color: rgba(109, 47,180,0.7);
}

#deslizador1{
  margin:auto;
  float:left;
  padding-left: 5px;
  padding-right: 10px;
}

#deslizador2{
  margin:auto;
  float:left;
  padding-left: 10px;
  padding-right: 10px;
}

#deslizador3{
  margin:auto;
  float:left;
  padding-left: 10px;
  padding-right: 5px;
}