*{
    margin: 0;
    padding:0;
}

body{
    display:flex;
    justify-content: center;
    height: 100vh;
    align-items: center;
    /* background: linear-gradient(160deg, #0093E9, #80D0C7); */
    background:black;
/*gold color 234, 204, 34*/
     /* border:3px dotted rgb(255, 255, 255); */

}

canvas {
    display: block;
  }

.keys{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    width: 1200px;
    height: 500px;
    border: none;
}

.ellipse{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #000;
    margin: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}


#preload {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999999;
    overflow: hidden;
  }
  
  #preload .box1 {
    /* background: #3d3b4f; */
    background: black;
    top: 0;
    left: 0;
    position: fixed;
    width: 50%;
    height: 100%;
    z-index: 9999999;
    overflow: hidden;
    border-right:1px solid #DAA520;
    -webkit-animation: animate-box 3s;
    -moz-animation: animate-box 3s;
    -ms-animation: animate-box 3s;
    animation-delay: 1s;
  }
  
  #preload .box2 {
    /* background: #3d3b4f; */
    /* background:	#000080; */
    background:	#000;

    top: 0;
    right: 0;
    position: fixed;
    width: 50%;
    height: 100%;
    z-index: 9999999;
    overflow: hidden;
    border-left:1px solid #DAA520;
    -webkit-animation: animate-box 3s;
    -moz-animation: animate-box 3s;
    -ms-animation: animate-box 3s;
    animation-delay: 1s;
  }
  
  #preload .line {
    position: fixed;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-100%);
    top: 0;
    width: 5px;
    height: 100%;
    background-color: #DAA520;
    -webkit-animation: animate-line 1s;
    -moz-animation: animate-line 1s;
    -ms-animation: animate-line 1s;
  
    opacity: 0;
    z-index: 999999999;
  }
  
  @keyframes animate-line {
    0% {
      height: 0;
    }
    100% {
      height: 100%;
      opacity: 1;
    }
  }
  
  @keyframes animate-box {
    0% {
      width: 50%;
    }
    100% {
      width: 0;
    }
  }
  

  
.stagelight{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgb(255, 255, 255);
    opacity: 0.5;
    z-index: 2;
    animation: move ease-in-out 4s ;
}

@keyframes move{
    0% {
        clip-path: polygon(45% 0, 55% 0, 70% 100%, 30% 100%);

     
    }
    /* 25% {
        clip-path: polygon(40% 0, 50% 0, 30% 100%, -20% 100%);
    } */
    50% {
        clip-path: polygon(45% 0, 55% 0, 70% 100%, 30% 100%);
      
    }
    /* 75% {
        clip-path: polygon(50% 0, 60% 0, 120% 100%, 80% 100%);
    } */
    100%{
        clip-path: polygon(45% 0, 55% 0, 70% 100%, 30% 100%);
       
    }
}