* {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
 }

 body {
   background: url('./Hamaca.jpg') no-repeat center center;
   background-size: cover;
   height: 100vh;
 }

 .spanish {
   text-decoration:wavy;
   color: rgb(255, 255, 255);
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   /*background: rgb(37, 105, 9) transparent;*/
   padding: 90px 25px;
   /*font-family: 'calibri', sans-serif;*/
   font-family: 'Indie Flower', cursive;
   font-weight: bold;
   font-size: 40px;
   /*text-transform: uppercase;*/
   border-radius: 90%;
   animation: animacion 3s linear infinite;
 }

 .volver{
  text-decoration:wavy;
  color: rgb(5, 5, 5);
  position: absolute;
  top: 15%;
  left: 15%;
  transform: translate(-50%, -50%);
  /*background: rgb(37, 105, 9) transparent;*/
  padding: 30px 25px;
  /*font-family: 'calibri', sans-serif;*/
  font-family: 'Indie Flower', cursive;
  font-size: 40px;
  text-transform: uppercase;
  border-radius: 90%;
  animation: animacion 3s linear infinite;
  
 }
@keyframes animacion {
  0% {
    box-shadow: 0 0 0 0 rgba(3, 3, 3, 0.514),  0 0 0 0 rgba(3, 3, 3, 0.6);
  }

  30% {
    box-shadow: 0 0 0 200px rgba(2, 11, 14, 0), 0 0 0 0 rgba(3, 3, 3, 0.6);
  }

  65% {
    box-shadow: 0 0 0 200px rgba(94, 245, 7, 0), 0 0 0 100px rgba(29, 171, 209, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(232, 252, 55, 0),  0 0 0 100px rgba(29, 171, 209, 0);
  }

}
video{
  position: fixed;

  min-width: 100%;
  min-height: 100%;

  top: 50%;
  left: 50%;

  transform: translateX(-50%) translateY(-50%);

  z-index: -1;

  
  filter: transparent(75%);
  
}

body, html {
  height: 100%;
}

* {
  box-sizing: border-box;
}

.bg-image {
  grid-area: bg-image;
  /* The image used */
  background-image: url("./Bienvenida.jpg");
  position: relative;
  /* Add the blur effect */
  filter: blur(8px);
  -webkit-filter: blur(5px);

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Position text in the middle of the page/image */
.bg-text {
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 80%;
  padding: 20px;
  text-align: center;
}
.text{
  color: white;
  font-weight: bold;
  /* border: 3px solid #f1f1f1; */
  position: relative;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 80%;
  padding: 20px;
  text-align: center;

}