.item1 {
  animation-delay: 6s;
}
.item2 {
  animation-delay: 6.1s;
}
.item3 {
  animation-delay: 6.2s;
}
.item4 {
  animation-delay: 6.3s;
}
.item5 {
  animation-delay: 6.4s;
}
.item6 {
  animation-delay: 6.5s;
}
.item7 {
  animation-delay: 6.6s;
}
.item8 {
  animation-delay: 6.7s;
}
.item9 {
  animation-delay: 6.8s;
}
.item10 {
  animation-delay: 6.9s;
}
.item11 {
  animation-delay: 7s;
}
.item12 {
  animation-delay: 7.1s;
}
.item13 {
  animation-delay: 7.2s;
}
.item14 {
  animation-delay: 7.3s;
}
.item15 {
  animation-delay: 7.4s;
}
.item16 {
  animation-delay: 7.5s;
}
.item17 {
  animation-delay: 7.6s;
}
.item18 {
  animation-delay: 7.7s;
}
.item19 {
  animation-delay: 7.8s;
}
.item20 {
  animation-delay: 7.9s;
}
.item21 {
  animation-delay: 8s;
}
.item22 {
  animation-delay: 8.1s;
}
.item23 {
  animation-delay: 8.2s;
}
.item24 {
  animation-delay: 8.3s;
}
.item25 {
  animation-delay: 8.4s;
}
.item26 {
  animation-delay: 8.5s;
}
.item27 {
  animation-delay: 8.6s;
}

.hideMain{
  opacity: 0;
}

.showMain{
  opacity: 1;
  transition: opacity 4s;
}

.hideOther{
  left:0vw;
  top:0vw;
  opacity: 0;
  transition: opacity 0.5s;
  z-index: 100;
  position: absolute;
  width: 100vw;
  height: 100vh;
  /*border:2px solid green;*/
}

.showOther{
  left:0vw;
  top:0vw;
  opacity: 1;
  transition: opacity 0.5s;
  z-index: 100;
  position: absolute;
  width: 100vw;
  height: 100vh;
  /*border:2px solid green;*/
}



.name{
  font-size: 1.1vmax; 
  font-family: 'Spartan', sans-serif;
  text-shadow: 0.1vmax 0.1vmax 0.1vmax black; 
  transition: color 0.5s;
}

.name:hover{
  color: #99b3ff;
}

.b1{
  animation-name: b1;
}
.b2{
  animation-name: b2;
}
.b3{
  animation-name: b3;
}
.b4{
  animation-name: b4;
}

.mNoteImg{
  max-width: 5vw;
  max-height: 5vh;
  margin-top: 0px;
  margin-bottom: 0px;
}

.hideSt{
  opacity: 0;
  transition: opacity 1s;
  position: absolute; 
  left: 35vw; 
  top:37vh; 
  z-index: 20;
  font-family: 'Spartan', sans-serif;
  font-size: 7vmax;
  border-radius: 1vmax;
  padding-left: 2vmax;
  padding-right: 2vmax;
  outline:0;
  border:none;
  color: white;
  background-color: black;
}

.stButton{
  transition: opacity 1s;
  opacity: 0.5;
  position: absolute; 
  left: 35vw; 
  top:37vh; 
  z-index: 20;
  font-family: 'Spartan', sans-serif;
  font-size: 7vmax;
  border-radius: 1vmax;
  padding-left: 2vmax;
  padding-right: 2vmax;
  outline:0;
  border:none;
  color: white;
  background-color: black;
  cursor: pointer;
}

.stButton:hover{
  opacity: 1;
}

.title{
  transition: opacity 3s;
  opacity: 1;
  position: absolute; 
  left: 35vw; 
  top:37vh; 
  font-family: 'Spartan', sans-serif;
  font-size: 3vmax;
  border-radius: 1vmax;
  padding-left: 2vmax;
  padding-right: 2vmax;
  outline:0;
  border:none;
  color: white;
  background-color: black;
  animation-duration: 5s;
  animation-delay: 2s;
}

.titleAnim{
  animation-name: titleFade;
}

.titleHide{
  transition: opacity 2s;
  opacity: 0;
  position: absolute; 
  left: 35vw; 
  top:37vh; 
  font-family: 'Spartan', sans-serif;
  font-size: 3vmax;
  border-radius: 1vmax;
  padding-left: 2vmax;
  padding-right: 2vmax;
  outline:0;
  border:none;
  color: white;
  background-color: black;
}

@keyframes titleFade {
  0%   {font-size: 3vmax; left: 35vw; top:37vh; opacity: 1;}
  100% {font-size: 2vmax; left: 40.5vw; top:40vh; opacity: 0;}
}

.musicButton{
  opacity: 0.8;
  position: absolute; 
  right: 1vw; 
  bottom:2vh; 
  z-index: 20;
  padding:0.8vmax;
  border-radius: 5vmax;
  outline:0;
  transition: opacity 0.5s, background-color 0.5s;
  border:none;
  box-shadow: 0.1vmax 0.1vmax 0.7vmax black;
  cursor: pointer;
}

.musicButton:hover{
  opacity: 1;
  background-color:#99b3ff;
}

.box {
  width: var(--wBig);
  height: 10vh;
  background-color: black;
  position: absolute;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  border-radius: 1vmax;
  left:var(--leftBig);
  top:var(--top);
  z-index: var(--z-index1);
}

.box2{
  width: var(--wBig);
  height: 10vh;
  background-color: black;
  position: absolute;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  /*animation-direction: alternate;*/
  border-radius: 1vmax;
  left:var(--leftBig);
  top:var(--bottom);
  z-index: var(--z-index2);
}

.box3{
  width: var(--wSmall);
  height: 10vh;
  background-color: black;
  position: absolute;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  /*animation-direction: alternate;*/
  border-radius: 1vmax;
  left:var(--leftSmall);
  top:var(--bottom);
  z-index: var(--z-index3);
}

.box4{
  width: var(--wSmall);
  height: 10vh;
  background-color: black;
  position: absolute;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  border-radius: 1vmax;
  left:var(--leftSmall);
  top:var(--top);
  z-index: var(--z-index4);
}

body{
  background-color: black;
}

.mainContainer{
  opacity: 1;
}

.grid-container {
  display: grid;
  top:0vw;
  /*border:0.2vmax solid blue;*/
  z-index: 40;
  position: absolute;
  width: 100vw;
  left:0vw;
  background-color: black;
}

.cButContainer{
  display: grid;
  width: 100vw;
  height: 7vh;
  background-color: black;
}

.grid-item {
  text-align: center;
  grid-row: 2;
  height: 7vh;
  opacity: 0.5;
  transition: opacity 0.5s;
}

.grid-item:hover{
  opacity: 1;
}

.colorSelect {
  text-align: center;
  grid-row: 2;
  height: 7vh;
  opacity: 1;
}

.grid-item:hover{
  opacity: 1;
}

.grid-head{
  grid-row: 1;
  color:white;
  grid-column: 1/9;
  /*border:0.2vmax solid green;*/
  text-align: center;
  padding-bottom: 0vh;
  padding-top: 0.4vh;
  font-size: 1.5vmax;
  font-family: 'Spartan', sans-serif;
}

.button1{
  background-color: #9400D3;
  cursor: pointer;
}
.button2{
  background-color: #4B0082;
  cursor: pointer;
}
.button3{
  background-color: #0000FF;
  cursor: pointer;
}
.button4{
  background-color: #00FF00;
  cursor: pointer;
}
.button5{
  background-color: #FFFF00;
  cursor: pointer;
}
.button6{
  background-color: #FF7F00;
  cursor: pointer;
}
.button7{
  background-color: #FF0000;
  cursor: pointer;
}
.button8{
  background-color: white;
  cursor: pointer;
}

@keyframes b1 {
  0%   {background-color:black; left: var(--leftBig); top:var(--top);}
  15% {background-color:var(--lightC); width: var(--wSmall); left:var(--leftSmall); top:var(--bottom);}
  30%   {background-color:black; width: var(--wBig); left: var(--leftBig); top:var(--top);}
  45% {background-color:var(--mainC);  width: var(--wBig); left:var(--leftBig); top:var(--bottom);}
  60%   {background-color:black; width: var(--wSmall);left: var(--leftSmall); top:var(--top);}
  75% {background-color:var(--lightC); width: var(--wBig); left:var(--leftBig); top:var(--bottom);}
  90%   {background-color:black;width: var(--wBig); left: var(--leftBig); top:var(--top);}
  100% {background-color:var(--lightC); width: var(--wBig); left:var(--leftBig); top:var(--bottom);}
}

@keyframes b2 {
  0% {background-color:black;  left:var(--leftBig); top:var(--bottom);}
  15%   {background-color:var(--lightC); width: var(--wSmall); left: var(--leftSmall); top:var(--top);}
  30% {background-color:black; width: var(--wBig); left:var(--leftBig); top:var(--bottom);}
  45%   {background-color:var(--oppC);width: var(--wBig); left: var(--leftBig); top:var(--top);}
  60% {background-color:black; width: var(--wSmall); left:var(--leftSmall); top:var(--bottom);}
  75%   {background-color:var(--lightC); width: var(--wBig);left: var(--leftBig); top:var(--top);}
  90% {background-color:black; width: var(--wBig); left:var(--leftBig); top:var(--bottom);}
  100%   {background-color:var(--lightC);width: var(--wBig); left: var(--leftBig); top:var(--top);}
}

@keyframes b3 {
  0% {background-color:black;  left:var(--leftSmall); top:var(--bottom);}
  15%   {background-color:var(--lightC); width: var(--wBig); left: var(--leftBig); top:45vh;}
  30% {background-color:black; width: var(--wSmall); left:var(--leftSmall); top:var(--top);}
  45%   {background-color:var(--oppC);width: var(--wBig); left: var(--leftBig); top:45vh;}
  60% {background-color:black; width: var(--wSmall); left:var(--leftSmall); top:var(--bottom);}
  75%   {background-color:var(--lightC); width: var(--wBig);left: var(--leftBig); top:45vh;}
  100% {background-color:black; width: var(--wSmall); left:var(--leftSmall); top:var(--top);}
}

@keyframes b4 {
  0%   {background-color:black; left: var(--leftSmall); top:var(--top);}
  15% {background-color:var(--lightC); width: var(--wBig); left:var(--leftBig); top:45vh;}
  30%   {background-color:black; width: var(--wSmall); left: var(--leftSmall); top:var(--bottom);}
  45% {background-color:var(--mainC); width: var(--wBig);left:var(--leftBig); top:45vh;}
  60%   {background-color:black; width: var(--wSmall); left: var(--leftSmall); top:var(--top);}
  75% {background-color:var(--lightC); width: var(--wBig); left:var(--leftBig); top:45vh;}
  100%   {background-color:black;width: var(--wSmall); left: var(--leftSmall); top:var(--bottom);}
}