@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500;700&display=swap');

body {
    background-image: url('imagenes/musicafondo.jpg'); /* Ruta de la imagen */
    background-size: cover;
    background-color: rgb(206, 53, 53); /* Color de fondo en caso de que la imagen no se cargue */
    overflow: hidden;
    font-family: 'Roboto';
    margin: 0; /* Elimina el margen para centrar */
    padding: 0; /* Elimina el relleno para centrar */
    height: 100vh; /* Establece la altura al 100% de la ventana */
  }
body::after {
  content: '';
  position: fixed;
  top: 0;
  width: 100%;
  height: 50%;
  /* background to fade out the text as it goes up */
  /* background: linear-gradient(180deg, rgba(20,20,20,1) 40%, rgba(20,20,20,0) 100%);*/
}
.wrapper {
  display: flex;
  height: 100%;
  width: 60%;
  margin: 0 auto;
  /* perspective gives us a 3d space within the element to work with*/
  /* perspective also has the effect of pushing the content "down" */
  perspective: 450px;
}
.scroll-text {
  color: DarkSlateGrey;
  color: rgb(20,20,20);
  /* color: #ffc909; */
  font-size: 3vw;
  line-height: 1.5em;
  font-weight: bold;
  text-align: justify;
  position: relative;
/*  animation: scroll 15s linear forwards; */
  animation: scroll 277s linear forwards;
}
h1,h2,h6,p {
  text-align: center;
}

@keyframes scroll {
	from { top: 0; transform: translateZ(0) rotateX(20deg); }
	to { top: -7500px; transform: translateZ(-2500px) rotateX(21deg); }
}