body {
    margin: 0px;
    padding: 0px;
    background-color: white;
    width: 100vw;
  }

.audio{
    position: fixed;
    margin-top: 10px;
    margin-left: 10px;
}  

.back {
   position: fixed;
    margin-top: 20px;
    margin-left: 320px;
    font-family: 'Audiowide';
    font-size: 20px;
    list-style-type: none;
    background-color: black;
    width:100px;
    border-radius: 15px;
    text-align: center;
}

.back1 {
  color: white;
  text-decoration: none;
}





 
  #group1 {
    background-color: #ffffff;
    background-image: linear-gradient( white, grey);
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Audiowide';
    font-size: 20px;
  
  }

  #group2 {
    background-color: grey;
    background-image: linear-gradient( grey, black);
    width: 100vw;
    height: 120vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Audiowide';
    font-size: 20px;
    
  }

  #group21 {
    height: 100vh;
    width: 100vw;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
} 


.ballet {
  
    border-radius: 20px;
    height: 200px;
    margin-left: 30px;
    margin-right: 30px;
}





  #group3{
    background-color: grey;
    background-image: linear-gradient( grey, white);
    width: 100vw;
    height: 150vh;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    font-family: 'Audiowide';
    justify-content: space-evenly;
    text-align: center;
  }

  #group31 {
    height: 40px;
    width: 100vw;
    background-color: black;
    display: flex;
  
  } 


.background1 {

    background-image:
    linear-gradient( black, rgba(245, 246, 252, 0.255), rgba(22, 213, 247, 0.509),black),
    url('https://i.pinimg.com/originals/68/8e/cb/688ecbb2738578a75a129f6bfdc58e0f.gif');
    background-size: cover;
    width: 100vw;
    height: 150vh;
    display: flex;
    justify-content: center;
}

.soul{
    margin-top: 200px;
    font-size: 40px;
}
  
  
#group4 {
    display:flex;
    height: 100vh;
    width: 100vw;
    justify-content: space-around;
    align-items: center;
    font-family: 'Audiowide';
    font-size: 20px;
    background-color: black;
    color: grey;
  }

  #group5 {
    background-color: #ffffff;
    background-image: linear-gradient( white, grey);
    width: 100vw;
    height: 150vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Audiowide';
    font-size: 20px;
  }

  .background2 {
    background-image:
    linear-gradient( black, rgba(245, 246, 252, 0.125), rgba(228, 247, 22, 0.356),rgb(255, 255, 255)),
    url('https://images.unsplash.com/photo-1550063281-02b085c2ad4c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1334&q=80');
    background-size: cover;
    width: 100vw;
    height: 150vh;
    display: flex;
}


  
  #group6 {
    background-color: #ffffff;
    background-image: linear-gradient( white, grey);
    width: 100vw;
    height: 120vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Audiowide';
    font-size: 20px;
  }

  .background3 {
    background-image:
    linear-gradient( rgb(255, 255, 255), rgba(245, 246, 252, 0.173),rgba(0, 0, 0, 0.105),black),
    url('https://images.unsplash.com/photo-1618616191524-a9721186cbe4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
    background-size: cover;
    width: 100vw;
    height: 120vh;
    display: flex;
    justify-content: center;
   
}

#group61 {
    height: 25px;
    width: 100vw;
    background-color: black;
    display: flex;
   
    justify-content: center;
} 

 

  
  #group7  {
    background-color:#FF0000, #FFFF00, #00CCFF ;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3CradialGradient id='a' cx='0' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ff8000'/%3E%3Cstop offset='1' stop-color='%23ff8000' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='1200' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2300ff19'/%3E%3Cstop offset='1' stop-color='%2300ff19' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='600' cy='0' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%239900ff'/%3E%3Cstop offset='1' stop-color='%239900ff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='d' cx='600' cy='800' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffff00'/%3E%3Cstop offset='1' stop-color='%23ffff00' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='e' cx='0' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23FF0000'/%3E%3Cstop offset='1' stop-color='%23FF0000' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='f' cx='1200' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230CF'/%3E%3Cstop offset='1' stop-color='%230CF' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='1200' height='800'/%3E%3Crect fill='url(%23b)' width='1200' height='800'/%3E%3Crect fill='url(%23c)' width='1200' height='800'/%3E%3Crect fill='url(%23d)' width='1200' height='800'/%3E%3Crect fill='url(%23e)' width='1200' height='800'/%3E%3Crect fill='url(%23f)' width='1200' height='800'/%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;
    width: 100vw;
    height: 1200px;
    display: flex;
    align-items: center;
    justify-content: center;
  }


  
  #changeme {
    position: absolute;
    height: 130vh;
    width: 100vw;
  }
  
  #changeme.new {
    position: absolute;
    background-image:
    linear-gradient( rgb(255, 255, 255), rgba(245, 246, 252, 0.255), rgba(54, 74, 77, 0.119),black),
    url('https://i.pinimg.com/originals/2a/a4/8e/2aa48ec4a43b71603571ba85bbbaca99.gif');
    position: absolute;
    height: 150vh;
    width: 100vw;

    background-size: 120%;
    background-repeat: no-repeat;
    /* background-position: center; */ 
  }
   
  #button {
    position: absolute;
    
    width: 150px;
    margin-top: 200px;
  }
/*   
.free {
    position: absolute;
    width: 100vw;
    margin-top: 5%;
} */


.letit {
  position: absolute;
  font-family: 'Audiowide';
  font-size: 80px;
  
  
}

.catch {
  font-family: 'Audiowide';
    font-size: 40px;
}


.everyw {
    position: absolute;
    height: 50px;
    width: 100vw;
    text-align: center;
    display: flex;
    
}

.everywhere {
    font-family: 'Audiowide';
    font-size: 40px;
    width: 100vw;
    margin-top: 400px;
    
}

.everyevery {
    display: flex;
    width: 100vw;
    height: 40px;
    flex-wrap: wrap;
    justify-content: space-evenly;

}

.every {
    font-family: 'Audiowide';
    color: rgba(0, 0, 0, 0);
    font-size: 40px;

}

.every:hover {
    color: white;
    text-shadow: 0 0 20px rgb(255, 11, 255);
}

.mindtext {
    margin-top: 250px;
    display: flex;
    font-size: 40px;
    width: 100vw;
    justify-content: space-evenly;
    
}
.mindt {
    margin-right: 0px;
    width: 120px;
    text-align: center;
}

.reload {
  position: relative;
  color: white;
  width: 550px;
  animation-name: text;
  animation-duration:10s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  font-family: 'Audiowide';
  font-size: 20px;
}

  
@keyframes text {
  0%   {left:100%; top:10px;}
  100% {left:-1100px; top:10px;}
}
  
    
  .rhythm {
    display: flex;
    font-family: 'Squada One';
    font-size: 200px;
  }
  
  .R:hover {
    color: #FF0000;
  }
  .H:hover {
    color: #ffff00;
  }
  .Y:hover {
    color: #22ff00;
  }
  .T:hover {
    color: #00ffee;
  }
  .H2:hover {
    color: #0000ff;
  }
  .M:hover {
    color: #ff00ff;
  }
  
  .scroll{
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    position: absolute;
    bottom: 2rem;
    animation-name: arrow;
    animation-duration: 1s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
    transition: all 1s ease-in-out;
  }
  
  
  @keyframes arrow {
    0%   { transform: translateY(0);}
    100% { transform: translateY(-100%);}
  }

/* #random {
    height: 95vh;
    width: 12.5%;
    border: solid 2px black;
    margin: 10px;
    text-align: center;
} */


.random1 {
    height: 95vh;
    width: 12.5%;
    border: solid 2px grey;
    text-align: center;
}

.random2 {
    height: 95vh;
    width: 12.5%;
    border: solid 2px grey;
    text-align: center;

}

.random3 {
    height: 95vh;
    width: 12.5%;
    border: solid 2px grey;
    text-align: center;
    
}

.random4{
    height: 95vh;
    width: 12.5%;
    border: solid 2px grey;
    text-align: center;
    
   
}

.random5 {
    height: 95vh;
    width: 12.5%;
    border: solid 2px grey;
    text-align: center;
    
}

.random6 {
    height: 95vh;
    width: 12.5%;
    border: solid 2px grey;
    text-align: center;
    
}

.random7 {
    height: 95vh;
    width: 12.5%;
    border: solid 2px grey;
    text-align: center;
  
}

.random1:hover {
    background-image: url(https://source.unsplash.com/random/?rhythm); 
    width: 100%;

}

.random2:hover {
    background-image: url(https://source.unsplash.com/random/?soul);
    width: 100%; 
}

.random3:hover {
    background-image: url(https://source.unsplash.com/random/?dancer); 
    width: 100%;
}

.random4:hover {
    background-image: url(https://source.unsplash.com/random/?mind); 
    width: 100%;
}

.random5:hover {
    background-image: url(https://source.unsplash.com/random/?voice); 
    width: 100%;
}

.random6:hover {
    background-image: url(https://source.unsplash.com/random/?air); 
    width: 100%; 
}

.random7:hover {
    background-image: url(https://source.unsplash.com/random/?feelings);
    width: 100%;
}




.soul {
    position: relative;
    /* width: 30vw; */
    height: 30vw;
    line-height: 30vw;
    text-align: center;
    color: #252B37;
    /* background-color: #151823; */
    animation: textColor 10s ease infinite;
  }
  .soul:after {
    position: absolute;
    content: "";
    top: 5vw;
    left: 0;
    right: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    margin: 0 auto;
    transform: scale(0.75);
    -webkit-filter: blur(5vw);
    -moz-filter: blur(5vw);
    -ms-filter: blur(5vw);
    filter: blur(5vw);
    background: linear-gradient(270deg, #0fffc1, #7e0fff);
    background-size: 200% 200%;
    animation: animateGlow 10s ease infinite;
  }
  @keyframes animateGlow {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  @keyframes textColor {
    0% {
      color: #4b237b;
    }
    50% {
      color: #006048;
    }
    100% {
      color: #1a1737;
    }
  }


  .glichti {
    width: 50%;
    display: flex;
    text-align: center;
    align-items: center;
    
}

  .glitch {
    color: white;
    /* background-color: rgb(48, 76, 106); */
    border-radius: 5px;
    font-size: 60px;
    position: relative;
    width: 330px;
    margin: 0 auto;
    font-family: 'Audiowide';

  }
  
  @keyframes noise-anim {
    0% {
      clip: rect(33px, 9999px, 38px, 0);
    }
    5% {
      clip: rect(23px, 9999px, 86px, 0);
    }
    10% {
      clip: rect(23px, 9999px, 95px, 0);
    }
    15% {
      clip: rect(99px, 9999px, 69px, 0);
    }
    20% {
      clip: rect(19px, 9999px, 92px, 0);
    }
    25% {
      clip: rect(94px, 9999px, 14px, 0);
    }
    30% {
      clip: rect(63px, 9999px, 42px, 0);
    }
    35% {
      clip: rect(69px, 9999px, 93px, 0);
    }
    40% {
      clip: rect(71px, 9999px, 44px, 0);
    }
    45% {
      clip: rect(68px, 9999px, 32px, 0);
    }
    50% {
      clip: rect(24px, 9999px, 27px, 0);
    }
    55% {
      clip: rect(15px, 9999px, 76px, 0);
    }
    60% {
      clip: rect(89px, 9999px, 4px, 0);
    }
    65% {
      clip: rect(85px, 9999px, 8px, 0);
    }
    70% {
      clip: rect(18px, 9999px, 9px, 0);
    }
    75% {
      clip: rect(80px, 9999px, 99px, 0);
    }
    80% {
      clip: rect(76px, 9999px, 18px, 0);
    }
    85% {
      clip: rect(2px, 9999px, 77px, 0);
    }
    90% {
      clip: rect(87px, 9999px, 47px, 0);
    }
    95% {
      clip: rect(78px, 9999px, 22px, 0);
    }
    100% {
      clip: rect(9px, 9999px, 79px, 0);
    }
  }
  .glitch:after {
    content: attr(data-text);
    position: absolute;
    left: 2px;
    text-shadow: -1px 0 red;
    top: 0;
    color: white;
    background: black;
    overflow: hidden;
    clip: rect(0, 900px, 0, 0);
    animation: noise-anim 2s infinite linear alternate-reverse;
    
  }
  
  @keyframes noise-anim-2 {
    0% {
      clip: rect(65px, 9999px, 4px, 0);
    }
    5% {
      clip: rect(46px, 9999px, 7px, 0);
    }
    10% {
      clip: rect(60px, 9999px, 91px, 0);
    }
    15% {
      clip: rect(32px, 9999px, 55px, 0);
    }
    20% {
      clip: rect(11px, 9999px, 50px, 0);
    }
    25% {
      clip: rect(41px, 9999px, 23px, 0);
    }
    30% {
      clip: rect(40px, 9999px, 6px, 0);
    }
    35% {
      clip: rect(52px, 9999px, 78px, 0);
    }
    40% {
      clip: rect(6px, 9999px, 15px, 0);
    }
    45% {
      clip: rect(52px, 9999px, 36px, 0);
    }
    50% {
      clip: rect(32px, 9999px, 10px, 0);
    }
    55% {
      clip: rect(50px, 9999px, 67px, 0);
    }
    60% {
      clip: rect(78px, 9999px, 20px, 0);
    }
    65% {
      clip: rect(97px, 9999px, 66px, 0);
    }
    70% {
      clip: rect(75px, 9999px, 72px, 0);
    }
    75% {
      clip: rect(61px, 9999px, 96px, 0);
    }
    80% {
      clip: rect(100px, 9999px, 94px, 0);
    }
    85% {
      clip: rect(96px, 9999px, 55px, 0);
    }
    90% {
      clip: rect(87px, 9999px, 77px, 0);
    }
    95% {
      clip: rect(38px, 9999px, 64px, 0);
    }
    100% {
      clip: rect(36px, 9999px, 75px, 0);
    }
  }
  .glitch:before {
    content: attr(data-text);
    position: absolute;
    left: -2px;
    text-shadow: 1px 0 blue;
    top: 0;
    color: white;
    background: black;
    overflow: hidden;
    clip: rect(0, 900px, 0, 0);
    animation: noise-anim-2 3s infinite linear alternate-reverse;
  }