body { background-image: url("s-brick008.gif"); } html { touch-action: manipulation; } #container{ position: relative; margin: 0 auto; width: 390px; height: 640px; } #next-canvas{ position: absolute; top: 246px; width: 210px; left:328px; } .img-endkami{ position: absolute; top: -2px; left: 0px; } .img-end7{ position: absolute; top: -2px; left: 0px; } #start-btn{ position:  absolute; background-color: #ccc; left:  350px; top: 600px; width : 90px; padding: 10px 20px; font-size: 1rem; text-align: center; color: #fff; text-shadow: 1px 1px 1px #000; border-radius: 10px; background-color: rgb(118, 37, 250); background-image: linear-gradient( to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0) ); box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6), inset -2px -2px 3px rgba(0, 0, 0, 0.6); } #start-btn:hover { background-color: rgb(83, 170, 221); } #game-over-message{ position: absolute; left: 310px; top: 360px; display: none; text-align: center; width : 170px; font-size: 18px; color: rgb(214, 34, 3); font-weight: bold; text-decoration: blink; } .blink { -webkit-animation: blink 1s ease infinite; animation: blink 1s ease infinite; } @-webkit-keyframes blink { 0% {opacity: 0;} 100% {opacity: 1;} } @keyframes blink { 0% {opacity: 0;} 100% {opacity: 1;} } #score-display{ position: absolute; left:  336px; top: 446px; width : 200px; font-size: 20px; color: rgb(5, 83, 25); font-weight: bold; text-decoration: blink; } #countdown-display{ position: absolute; left: 344px; top: 500px; text-align: center; width : 100px; font-size: 20px; color: rgb(101, 19, 255); font-weight: bold; text-decoration: blink; } #img-next{ position:  absolute; left: 336px; top: 240px; } #img-main{ position:  absolute; z-index: -1; top: -16px; left: -18px; } .sub { position:absolute; margin: auto; top: 249px; left: 346px; } .mainrogo { position:absolute; top: 30px; left: 23px; z-index : 2; } #highscore-display{ position: absolute; left: 336px; top: 410px; width : 200px; font-size: 20px; color: rgb(255, 27, 133); font-weight: bold; text-decoration: blink; } #Clear_all{ position:  absolute; height:2em; left:  360px; top: 545px; width : 70px; font-size: 1rem; text-align: center; color: #ffffff; text-shadow: 2px 1px 2px #272525; border-radius: 10px; background-color: rgb(236, 55, 23); box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6), inset -2px -2px 3px rgba(0, 0, 0, 0.6); } #Clear_all:hover { background-color: rgb(66, 10, 15); } #up { position:  absolute; left:  64px; top: 652px; text-shadow: 1px 1px 1px #000; z-index : 2; } #rotateCCW { position:  absolute; left:  126px; top: 652px; text-shadow: 1px 1px 1px #000; z-index : 2; } #left { position:  absolute; left:  2px; top: 652px; text-shadow: 1px 1px 1px #000; z-index : 2; } #right { position:  absolute; left:  250px; top: 652px; text-shadow: 1px 1px 1px #000; z-index : 2; } #down { position:  absolute; left:  188px; top: 652px; text-shadow: 1px 1px 1px #000; z-index : 2; } #btn-stop { position:  absolute; left:  322px; top: 654px; width : 150px; font-size: 20px; color: rgb(70, 4, 114); font-weight: bold; z-index : 2; } #volume { position:  absolute; left:  330px; top: 682px; width : 126px; font-size: 22px; color: rgb(116, 9, 255); font-weight: bold; z-index : 2; } #img-control { position:  absolute; left:  336px; top: 488px; } #img-control2 { position:  absolute; left:  336px; top: -20px; } button { font-size: 36px; background: transparent; border: 1px solid transparent; }