html {
  scroll-behavior: smooth;
}
 #flecha {
  position: fixed;
  bottom: 0;
  right: 100;
  margin: -2.5vw;
   z-index: 2;
}
body {
  background-image: url(https://i.pinimg.com/564x/98/eb/8f/98eb8ff02d938ebadb813e4b930d3337.jpg);
  background-repeat: repeat;
  background-size: 100%;
}

h1 {
  font-size: 5.4vw;
  text-align: center;
  position: absolute;
  top: 1vw;
  right: 15vw;
  margin-top: 25vw;
  font-family: "Roboto Serif", serif;
  color: white;
  text-shadow: 0.3vw 0.3vw 0.2vw black;
}
.botones {
  text-align: center;
  font-family: 'Playfair Display', serif; 
  font-size: 2.7vw;
  border: 2vw, solid;
  width: 25%;
  margin-top: 3vw;
  display: block;
  background-color: #003333;
  height: 5vw;
  border-radius: 0.7vw;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  transition: transform 0.5s;
}
.botones:hover {
  filter: saturate(7);
  transform: scale(1.1);
  
}
a {
  color: white;
  text-decoration: none;
}
h2 {
  text-align: right;
  text-shadow: 1px 2px 3px white;
  font-family: "Oxygen", sans-serif;
  font-size: 2vw;
}
#subtitulo {
  text-align: center;
  font-family: "Merriweather", serif;
  color: white;
  text-shadow: 0.2vw 0.2vw 0.15vw black;
  background-color: #003333;
  height: 4vw;
  font-size: 3vw;
}
#fondo {
  background-color: #003333;
  padding: 0.2vw;
}
#img1 {
  float: right;
  margin: 0.5vw;
  min-height: 25vw;
  max-height: 20vw;
  border: 0.3vw ridge #ffe6e6;
  border-radius: 0.7vw;
  margin-top: 4vw;
}
.f1:hover {
  filter:saturate(2);
}
h4 {
  padding: 0.5;
  font-size: 1.5vw;
  color: white;
  font-family: "Lato", sans-serif;
  margin-left: 3vw;
  margin-right: 3vw;
}
h5 {
  padding: 0.5vw;
  font-size: 2vw;
  color: white;
  text-shadow: 0.25vw 0.25vw 0.3vw black;
  font-family: "Merriweather", serif;
  margin-left: 10vw;
}

ul.lista1 {
  color: white;
  list-style-type: circle;
  font-size: 1.8vw;
  margin-left: 10vw;
  margin-top: -2vw;
}
#fondo2 {
  background-color: #004d4d;
  outline: thick ridge white;
  border-radius: 0.7vw;
  margin-left: 7vw;
  margin-right: 47vw;
}
#fondo3 {
  background-color: #003333;
  padding: 0.2vw;
}
#img2{
  border: 0.4vw solid #ffe6e6;
  border-radius: 0.7vw;
  transition: transform 1s;
}
.f2:hover{
   transform: scale(1.1);
}
#fondo4{
  background-color: #004d4d;
  outline: thick ridge white;
  border-radius: 0.7vw;
  padding:2vw;
}
h3{
  font-size: 2vw;
  color: white;
  text-shadow: 0.25vw 0.25vw 0.3vw black;
  font-family: "Merriweather", serif;
   text-align:center;
  
}
#canciones{
  margin-left:30vw;
}