* {
  -webkit-user-select: none;
  user-select: none;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
}

canvas {   

  

    image-rendering: optimizeSpeed;              /* Older versions of FF */
    image-rendering: -moz-crisp-edges;           /* FF 6.0+ */
    image-rendering: -webkit-optimize-contrast;  /* Webkit (non standard naming) */
    image-rendering: -o-crisp-edges;             /* OS X & Windows Opera (12.02+) */
    image-rendering: crisp-edges;                /* Possible future browsers. */
    -ms-interpolation-mode: nearest-neighbor;    /* IE (non standard naming) */

}

hml, body, div, canvas {
    margin: 0;
    padding: 0;
}

body{
  display: block;
  margin: auto;
}

#fade-in-image {
  animation: fadeIn 1s;
  -webkit-animation: fadeIn 1s;
  -moz-animation: fadeIn 1s;
  -o-animation: fadeIn 1s;
  -ms-animation: fadeIn 1s;
}
@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-moz-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-o-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-ms-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

#turn{
  width:100%;
  height:100%;
  position:fixed;
  top:0px;
  left:0px;
  background-color:white;
  background-image:url('../assets/playportrait.png');
  background-repeat:no-repeat;
  background-position: center center;
  display:none;
}