/*   body, html {
      margin: 0;
      padding: 0;
      height: 100%;
     background-color: black;
    } */

    /* Container for the first background stars */
    .background-1 {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url('https://mymusic.ohodin.com/sites/default/files/2024-11/starts.jpg');
      background-size: cover;
      background-position: center;
      z-index: -2; /* Ensure it's behind the second background */
      animation: zoomAnimation1 230s ease-in-out infinite;
    }

    /* Container for the second background  nebula*/
    .background-2 {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url('https://mymusic.ohodin.com/sites/default/files/2024-11/Screenshot%202024-11-17%20at%2011.08.08%E2%80%AFPM.png');
      background-size: cover;
      background-position: center;
      opacity: 0.4; /* Set initial opacity to 40% */
      z-index: -1; /* Layered above the first background */
      animation: zoomAnimation2 60s ease-in-out infinite;
    }

    /* Animation Keyframes for the first background */
    @keyframes zoomAnimation1 {
      0% {
        transform: scale(1);
      }
      95% {
        transform: scale(21.2); /* Zoom to 2120% */
      }
      100% {
        transform: scale(1);
      }
    }

    /* Animation Keyframes for the second background */
    @keyframes zoomAnimation2 {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.2); /* Zoom to 120% */
      }
      100% {
        transform: scale(1);
      }
    }

    /* Example content to allow scrolling */
    .content {
      position: relative;
      z-index: 1; /* Content should be above both backgrounds */
      padding: 20px;
    }

h2.aqua{
display: block;
max-width: 700px;
color: #66ffcf;
}
p.white{
color: white;
font-family: san-serif, helvetica;
font-size: 20px !important;
}
.field--name-field-song-title {
    color: lightskyblue;
    font-size: 45px;
    font-weight: bold;
    padding: 25px 0;
}


     .animated-image {
      width: .1vw; /* Start at 1% of viewport width */
      height: auto; /* Maintain aspect ratio */
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1001;
      animation: zoomMove 2s ease-in-out;
      animation-delay: 10s;
    }

    @keyframes zoomMove {
      0% {
        width: .1vw; /* 1% of the viewport width */
        transform: translate(0, 0);
      }   
      
      100% {
        width: 50vw; /* 50% of the viewport width */
        transform: translate(calc(100vw - 50vw + 200px), calc(100vh - 50%));
      }
    }