* { margin: 0; padding: 0; font-family: sans-serif; } html, body { height: 100%; background-color: black; } .error { position: absolute; float: left; top: 10%; width: 100%; font-size: 20pt; color: #333; text-align: center; z-index: 100; color: red; } #gameCanvas { position: absolute; float: left; width: 100%; height: 100%; z-index: 99; /* filter: blur(40px); -webkit-filter: blur(40px); */ transition: all .1s ease; -webkit-transition: all .1s ease; -moz-transition: all .1s ease; } #score { position: absolute; float: left; top: 6%; left: 4%; font-size: 20pt; color: #333; text-align: center; z-index: 101; transition: all .5s ease; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; } #popup-text { position: absolute; float: left; top: 40%; width: 100%; font-size: 42pt; color: #333; text-align: center; z-index: 100; filter: blur(0px); -webkit-filter: blur(0px); transition: all .5s ease; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; } #overlay { position: absolute; float: left; height: 100%; width: 100%; z-index: 102; opacity: 1; background-color: #333; transition: all 1s ease; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; } .hidden { filter: blur(40px) !important; -webkit-filter: blur(40px) !important; opacity: 0 !important; transition: all .5s ease; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; } .hidden-overlay { opacity: 0 !important; }