.navbar { width: 80%; margin: 0 auto; /*background-color: #34495e;*/ padding: 2.5vmin 0; text-align: center; } .navbar li { display: inline-block; text-align: center; width: calc( 33% - 1.25vmin ); /*pointer-events: none;*/ } #title { color: #ecf0f1; font-size: 6vmin; } #score { font-size: 4vmin; text-align: center; width: 30%; } #highscores { text-align: center; list-style: none; } .not-visible { display: none; } button { color: #ecf0f1; background-color: rgba(0,0,0,0); border: 0; } button:focus { outline: 0; } #openSideBar { position: absolute; top: 3px; left: 3px; z-index: 3000; color:#000; cursor:hand; cursor:pointer; } #helpScreen { height:30%; width:30%; z-index:3000; position:absolute; top:0%; left:0%; display:none; color:#000; background-color:rgba(255,255,255,0.5); } #overlay { transition: all 0.3s ease; position:absolute; height:20%; width:40%; left:50%; top:50%; margin-left:-20%; margin-top:-5%; z-index:3000; color:#000; text-align:center; } .faded { opacity:0; } .centeredHeader { font-size:72px; text-align:center; line-height:48px; } .centeredSubHeader { font-size:24; text-align:center; } .blur { -webkit-filter: blur(3px); -moz-filter: blur(3px); -o-filter: blur(3px); -ms-filter: blur(3px); filter:blur(4px); opacity:0.4; } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local('Roboto Regular'), local('Roboto-Regular'), url("fonts/roboto.woff") format('woff'); } @font-face { font-family: 'Q'; font-style: normal; font-weight: 400; src: local('Q Regular'), local('Q-Regular'), url("fonts/QuattrocentoSans-Regular.ttf") format('ttf'); } * { padding: 0; margin: 0; } body { color: #ecf0f1; font-family: 'Roboto', sans-serif; background-color:#ecf0f1; } #clickToExit { cursor:pointer; } #canvas { transition: all 0.5s ease; position: absolute; left:0; right:0; /*height:100%; width:100%;*/ background-color:#ecf0f1; z-index:3; } #title { z-index:9000; margin-top:20px; color:#2c3e50; }