:root {
     --dark-bg: radial-gradient(ellipse at center, #404040 0%, #000000 100%);
     --light-bg: radial-gradient(ellipse at center, #CFCFCF 0%, #FFFFFF 100%);
 }

 html {
     height: 100%
 }

 body {
     margin: 0;
     min-height: 100%;
 }

 .center {
     margin: 0;
     position: absolute;
     top: 50%;
     left: 50%;
     -ms-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
 }

 .contain {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: contain;
 }

 .stretch {
     display: block;
     width: 100%;
     height: 100%;
 }

 .cover {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .bottom {
     position: absolute;
     bottom: 0;
     left: 50%;
     -ms-transform: translate(-50%, 0);
     transform: translate(-50%, 0);
 }

 .bottomLeft {
     position: absolute;
     bottom: 0;
     left: 0;
 }

 .bottomRight {
     position: absolute;
     bottom: 0;
     right: 0;
 }

 .transparent {
     opacity: 0.1;
 }

 @media (prefers-color-scheme: dark) {
     body {
         background: var(--dark-bg);
     }

     .music-note {
         color: #FFFFFF;
     }
 }

 @media (prefers-color-scheme: light) {
     body {
         background: var(--light-bg);
     }

     .music-note {
         color: #000000;
     }
 }

 /* Background music notes */
 .hero-bg-elements {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     overflow: hidden;
     z-index: 0;
     pointer-events: none;
 }

 .music-note {
     position: absolute;
     font-size: 2rem;
     animation: float-random 20s infinite ease-in-out;
 }

 /* Position each note */
 .note-1 {
     top: 10%;
     left: 5%;
     font-size: 3.5rem;
     animation-duration: 18s;
 }

 .note-2 {
     top: 15%;
     right: 10%;
     font-size: 2.8rem;
     animation-duration: 22s;
     animation-delay: 2s;
 }

 .note-3 {
     bottom: 20%;
     left: 15%;
     font-size: 3.2rem;
     animation-duration: 25s;
     animation-delay: 1s;
 }

 .note-4 {
     top: 40%;
     right: 25%;
     font-size: 2.5rem;
     animation-duration: 20s;
     animation-delay: 3s;
 }

 .note-5 {
     bottom: 35%;
     right: 5%;
     font-size: 3.8rem;
     animation-duration: 23s;
     animation-delay: 1.5s;
 }

 .note-6 {
     top: 60%;
     left: 8%;
     font-size: 3rem;
     animation-duration: 19s;
     animation-delay: 2.5s;
 }

 .note-7 {
     bottom: 10%;
     right: 20%;
     font-size: 3.4rem;
     animation-duration: 21s;
     animation-delay: 0.5s;
 }

 .note-8 {
     top: 25%;
     left: 30%;
     font-size: 2.6rem;
     animation-duration: 24s;
     animation-delay: 4s;
 }

 .note-9 {
     top: 70%;
     right: 15%;
     font-size: 3.1rem;
     animation-duration: 18s;
     animation-delay: 1.2s;
 }

 .note-10 {
     bottom: 45%;
     left: 25%;
     font-size: 2.9rem;
     animation-duration: 26s;
     animation-delay: 2.8s;
 }

 .note-11 {
     top: 5%;
     right: 35%;
     font-size: 3.3rem;
     animation-duration: 22s;
     animation-delay: 0.8s;
 }

 .note-12 {
     bottom: 25%;
     right: 40%;
     font-size: 2.7rem;
     animation-duration: 20s;
     animation-delay: 3.5s;
 }

 @keyframes float-random {

     0%,
     100% {
         transform: translate(0, 0) rotate(0deg);
     }

     25% {
         transform: translate(30px, -40px) rotate(15deg);
     }

     50% {
         transform: translate(-20px, 20px) rotate(-10deg);
     }

     75% {
         transform: translate(40px, 30px) rotate(20deg);
     }
 }