body {
  background-color:coral;
  }

p{
  font-size: 15px;
  font-style: italic;
  font-family: Georgia, 'Times New Roman', Times, serif;
  text-align: center;

}

h1 { background-color: khaki;
  padding-top: 20px;
  padding-bottom: 10px;
  text-align: center;
  font-family: 'SF Comic Script Shaded', arial;
  font-size: 48px;
  text-shadow: 4px 4px 4px #aaa;
    width: 800px;
    height: 60px;
    margin: 10px;
    padding:10px;
    border-radius: 50px;
  }

.menu { grid-area: menu; }
.contenido { grid-area: main; }
.opciones { grid-area: footer; }

.contenedor {
  display: grid;
  grid-template-areas:
  'main main main main menu menu'
  'main main main main menu menu'
  'footer footer footer footer footer footer';

  grid-gap: 10px;
  padding: 10px;
}


#original{
  float: left;
  font-size: 25px;
  text-align: left;
  font-size: 16px;
  font-style: italic;
  margin-left: 15px;
  margin-right: 15px;
  }

#manipulada{
  float: right;
  font-size: 25px;
  text-align: left;
  font-size: 16px;
  font-style: italic;
  margin-right: 15px;
  }

  button {
    border: 1px sandybrown;
    background-color: rgba(240, 230, 140, 0.603);
    padding: 10px 20px;
    text-align: center;
    font-size: 12px;
    font-family: 'Strong Type', arial;
    margin: 4px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
    margin-right: 15px;
    margin-left: 15px;
    margin-top: 15px;
    padding-top: 15px;
    border-radius: 20px;

}

#deslizador {
  float: left ;
  color: rgb(139, 96, 60);
    padding: 10px 20px;
    text-align: center;
    font-size: 12px;
    margin: 4px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
    margin-right: 15px;
    margin-left: 15px;
    margin-top: 10px;
    padding-top: 15px;
}