@font-face {
  font-family: "Genos";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/genos/v2/SlGNmQqPqpUOYTYjacb0Hc91fTwVqkjYqki9CbN8A797.woff)
    format("woff");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}


body {
    background:rgb(20, 16, 245);
    animation: bgColor 20s infinite;
}
@keyframes bgColor {
  0% {
    background: rgb(20, 16, 245);
  }
  50% {
    background: #3bb7f3;
  }
  100% {
    background: rgb(20, 16, 245);
  }
}
    

#canvas { 
  position: fixed;
  z-index: 100;
  top:0;
  left:0;
  width:100%;
  height:100%;
}


.container {
    background: rgb(46, 191, 253);
    position: relative;
    z-index: 300;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    font-family: Georgia, 'Times New Roman', Times, serif
}


.music {
    position: relative;
    z-index: 300;
}



 
h1  {
    text-transform: uppercase;
    font-family: "Genos", monospace;
    z-index: 300;
    font-size: 60px;
    text-align: center;
}


img {
    max-width: 100%;
}

video {
    max-width: 50%;
    margin-top: 2rem;
    z-index: 300;
}


footer {
    background: rgb(212, 129, 253);
    color: black;
    z-index: 300;
    margin-top: 3rem;
    text-align: center;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 16px;
}