body{
    background-color: black;
    color:white;
}
h1{
    color: rgb(6, 205, 255);
    margin: 20px 0 0 0;    
}
h2{
    margin: 0;    
}

ul{
    list-style-type: none;
    background-color:bisque;
    margin: 1px;
    padding: 10;
    overflow: hidden;
    
}
li{
    float: left;
}
li{
    display: block;
    background-color: white;
    color:black;
    padding: 8px 10px;
    margin: 100;
    
}

.keyboard {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    width: 200px;
    margin: 0px auto;
    padding: 10px;
    
  }
  .arrow {
    font-size: 20px;
    text-align: center;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  p{
    margin: 1px;
  }

  canvas{
    border: 2px solid #00bfff;
  }

  
  .bgAnimation{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(20,1fr);
    grid-template-rows: repeat(20,1fr);
    background: #1d1d1d;
    filter: saturate(2);
    overflow: hidden;
    z-index: -1;
}

.colorBox{
    z-index: 2;
    filter: brightness(1.1);
    transition: 2s ease;
    position: relative;
    margin: 2px;
    background: #1d1d1d;
}

.colorBox:hover{
    background: #00bfff;
    transition-duration: 0s;
}

.backgroundAmim{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: #034861;
    filter: blur(60px);
    animation: animBack 6s linear infinite;
    z-index: -20;
}

@keyframes animBack {
    0%{
        top: -60px;
    }
    100%{
        top: 120%;
    }
}

.logo{
  position: absolute;
  background-color: white;
  padding: 7px;
  margin: 0 0 0 20px;
  border-radius: 1px;
}
.loading2{
  z-index: 3;
  position: absolute;
  color: rgb(0, 247, 255);
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  left: 40%;
  top: 55%;
  margin: 0;
  display: block;
}
.loading{
  z-index: 3;
  position: absolute;
  color: rgb(0, 247, 255);
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  left: 43.5%;
  top: 53%;
  margin: 0;
  display: block;
}

/* Loader script starts */
@keyframes loader2 {
  0% { transform: translate(12.72px,84px) scale(0); }
 25% { transform: translate(12.72px,84px) scale(0); }
 50% { transform: translate(12.72px,84px) scale(1); }
 75% { transform: translate(84px,84px) scale(1); }
100% { transform: translate(156px,84px) scale(1); }
}
@keyframes loader2-r {
  0% { transform: translate(156px,84px) scale(1); }
100% { transform: translate(156px,84px) scale(0); }
}
@keyframes loader2-c {
  0% { background: #93dbe9 }
 25% { background: #3b4368 }
 50% { background: #5e6fa3 }
 75% { background: #689cc5 }
100% { background: #93dbe9 }
}
.loader2 div {
 position: absolute;
 width: 42px;
 height: 42px;
 border-radius: 50%;
 transform: translate(84px,84px) scale(1);
 background: #93dbe9;
 animation: loader2 6.25s infinite cubic-bezier(0,0.5,0.5,1);
}
.loader2 div:nth-child(1) {
 background: #689cc5;
 transform: translate(156.88px,84px) scale(1);
 animation: loader2-r 1.5625s infinite cubic-bezier(0,0.5,0.5,1), loader2-c 6.25s infinite step-start;
}.loader2 div:nth-child(2) {
 animation-delay: -1.5625s;
 background: #93dbe9;
}.loader2 div:nth-child(3) {
 animation-delay: -3.125s;
 background: #689cc5;
}.loader2 div:nth-child(4) {
 animation-delay: -4.6875s;
 background: #5e6fa3;
}.loader2 div:nth-child(5) {
 animation-delay: -6.25s;
 background: #3b4368;
}
.loader1 {
 width: 212px;
 height: 212px;
 display: inline-block;
 overflow: hidden;
 background: none;
}
.loader2 {
 width: 100%;
 height: 100%;
 position: relative;
 transform: translateZ(0) scale(1);
 backface-visibility: hidden;
 transform-origin: 0 0; 
}
.loader2 div { box-sizing: content-box; }