html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    transform: translate3d(0,0,0);
  
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#game {
    position: relative;
    height: 989px;
    width: 1280px;
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    user-select: none;
    -webkit-user-select: none;
    overflow: hidden;
}
#game canvas {
    background-color: rgb(255, 255, 255);
    image-rendering: crisp-edges;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
}

#content{
    position: relative;
    top :-770px;
}

h1 {
  font-family: 'Comic Sans MS',  sans-serif;
  padding: 2rem 0;
  margin: 0;
  position: relative;
  top : 10px;
  left: 0px;
  font-size: 60px;
}




#canvas{
    
    background:url('../../../assets/background_notation.jpg');
    background-size: cover;
}

#letter1{
    position: absolute;
    top: -40px;
    left: 200px;
    width: 85px;
    display: none;
}

#letter2{
    position: absolute;
    top: -40px;
    left: 314px;
    width: 44px;
    display: none;
}

#letter3{
    position: absolute;
    top: -40px;
    left: 428px;
    width: 46px;
    display: none;
}

#letter4{
    position: absolute;
    top: -40px;
    left: 542px;
    width: 47px;
    display: none;
}

#letter5{
    position: absolute;
    top: -40px;
    left: 656px;
    width: 48px;
    display: none;
}

#letter6{
    position: absolute;
    top: -40px;
    left: 770px;
    width: 48px;
    display: none;
}

#letter7{
    position: absolute;
    top: -40px;
    left: 884px;
    width: 49px;
    display: none;
}

#letter8{
    position: absolute;
    top: -40px;
    left: 1000px;
    width: 48px;
    display: none;
}


#boom1{
    position: absolute;
    top: 65px;
    left: 225px;
    width: 92px;
    display: none;
    z-index: 10;
}

#boom2{
    position: absolute;
    top: 65px;
    left: 335px;
    width: 70px;
    display: none;
    z-index: 10;
}

#boom3{
    position: absolute;b
    top: 65px;
    left: 450px;
    width: 69px;
    display: none;
    z-index: 10;
}

#boom4{
    position: absolute;
    top: 65px;
    left: 565px;
    width: 92px;
    display: none;
    z-index: 10;
}

#boom5{
    position: absolute;
    top: 65px;
    left: 680px;
    width: 49px;
    display: none;
    z-index: 10;
}

#boom6{
    position: absolute;
    top: 65px;
    left: 790px;
    width: 88px;
    display: none;
    z-index: 10;
}

#boom7{
    position: absolute;
    top: 65px;
    left: 910px;
    width: 92px;
    display: none;
    z-index: 10}




#chord1{
    position: absolute;
    top: 585px;
    left: 160px;
    width: 120px;
    display: block;
}

#chord2{
    position: absolute;
    top: 585px;
    left: 304px;
    width: 120px;
    display: block;
}

#chord3{
    position: absolute;
    top: 585px;
    left: 450px;
    width: 120px;
    display: block;
}

#chord4{
    position: absolute;
    top: 585px;
    left: 598px;
    width: 120px;
    display: block;
}

#chord5{
    position: absolute;
    top: 585px;
    left: 746px;
    width: 120px;
    display: block;

}

#chord6{
    position: absolute;
    top: 585px;
    left: 897px;
    width: 120px;
    display: block;
    
}

#chord7{
    position: absolute;
    top: 585px;
    left: 1050px;
    width: 120px;
    display: block;
    
}


#descending{
    position: absolute;
    top: 450px;
    left: 500px;
    width: 800px;
    display: block;
    z-index: 10;
    
}

#ascending{
    position: absolute;
    top: 450px;
    left: 50px;
    width: 800px;
    display: block;
    z-index: 10;
    
}



#drag1, #drag2, #drag3, #drag4, #drag5 {
    transition: scale (3) 1s;
}



.myButton {
    position:absolute;
    top:630px;
    left:1140px;
    background: transparent;
    border: none !important;
    width:120px;
    height: 120px;
    font-size:0;
}


.myButton2 {
    position:absolute;
    top:650px;
    left:20px;
    background: transparent;
    border: none !important;
    width:120px;
    height: 120px;
    font-size:0;
}


.myButton3 {
    position:absolute;
    top:670px;
    left:880px;
    background: transparent;
    border: none !important;
    width:170px;
    height: 60px;
    font-size:0;
}


.myButton4 {
    position:absolute;
    top:670px;
    left:650px;
    background: transparent;
    border: none !important;
    width:170px;
    height: 60px;
    font-size:0;
}


#resets{
    position: absolute;
    top: -108px;
    left: 1107px;
    display: block;}

#menu{
    position: absolute;
    top: -114px;
    left: 58px;
    width: 127px;
display:block;}

/*animated Logo Keyframes*/
/*load in animation*/
@keyframes grow {/* gives differnet properties for different sizes images as it grows. At 100% it will default back to it's original svg settings*/
  0% {
    transform: scale(0);
  }
  30% {
    transform: scale(1.3);
  }
  60%{
    transform: scale(0.9);/* going from 1.1 to 0.9 and back to 1 will give it a bounce effect*/
  }
}

#chord1, #chord2, #chord3, #chord4, #chord5, #chord6, #chord7, #ascending, #descending {
  animation: grow 1s ease-out backwards; 
  transition: .2s ease-out;
}

/*
.animate1{}

.animate-active1 {animation: animate 1s ease-out backwards;
transition: .2s ease-out;}

@keyframes animate{
    0% {
        transform: scale(10);
    }
        30% {
        transform: scale(.2);
    }
        60% {
        transform: scale(3);
    }
        100% {
        transform: scale(1);
    }
}








*/