@import url('https://fonts.googleapis.com/css2?family=Koulen&display=swap');
@import url('http://fonts.cdnfonts.com/css/serious');

body, html{
 margin: 0;
 width: 100%;
 height: 100%;
 background: #222;
 color: white;
 font-family: 'serious2';
}

.container{
 /* width: 100%; */
 height: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
 /* background: red; */
 box-shadow: 0 0 30px #111 inset;
}

canvas{
 box-shadow: 0 0 30px #111;
 border: 10px solid black;
}

.vig{
 position: absolute;
 box-shadow: 0 0 30px #111;
 box-shadow: 0 0 40px #111 inset;
 border: 10px solid black;
 width: 400px;
 height: 400px;
 cursor: none;
}



.score{
 position: absolute;
 z-index: 2;
 font-size: 2.4rem;
 margin-bottom: 350px;
 opacity: 0.8;
 /* top: 0;  */
 /* left: 0; */
}
.Escore{
 position: absolute;
 z-index: 2;
 font-size: 2.4rem;
 margin-bottom: 350px;
 color: red;
 margin-left: 100px;
 opacity: 0.8;
 display: none;
 /* top: 0;  */
 /* left: 0; */
}

button{
 width: 50px;
 height: 50px;
 border: 1p8x solid rgb(50, 50, 50);
 background: rgba(0, 0, 0);
 color: white;
}

.up{
 position: absolute;
 bottom: 55px;
 display: none;
}
.down{
 position: absolute;
 bottom: 0;
 display: none;
}
.left{
 position: absolute;
 bottom: 0;
 left: 240px;
 display: none;
}
.right{
 position: absolute;
 bottom: 0;
 right: 240px;
 display: none;
}

img{
 image-rendering: pixelated;
}