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/menu.jpg');
    background-size: cover;
}

img:hover {transform: scale(1.1);
-webkit-transition: -webkit-transform 0.3s ease;
-moz-transition: -moz-transform 0.3s ease;
transition: transform 0.3s ease;}

img:active {transform: scale(1);
-webkit-transition: -webkit-transform 0.3s ease;
-moz-transition: -moz-transform 0.3s ease;
transition: transform 0.3s ease;}


#thumbnail1{
    position: absolute;
    top: 78px;
    left: 440px;
    width: 390px;
    display: block;
    z-index: 10;
    
}

#thumbnail2{
    position: absolute;
    top: 250px;
    left: 440px;
    width: 390px;
    display: block;
    z-index: 10;
    
}

#thumbnail3{
    position: absolute;
    top: 430px;
    left: 440px;
    width: 390px;
    display: block;
    z-index: 10;
    
}





/*
.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);
    }
}








*/