/* Welcome to Compass. In this file you should write your main styles. (or centralize your imports) Import this file using the following HTML or equivalent: <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
@font-face { font-family: 'Gloria Hallelujah'; font-style: normal; font-weight: 400; src: local("Gloria Hallelujah"), local("GloriaHallelujah"), url(../GloriaHallelujah.woff) format("woff"); }

* { box-sizing: border-box; }

body { margin: 0; padding: 0; font-family: 'Gloria Hallelujah', cursive; }

.container { height: 552px; width: 422px; position: relative; margin: 20px auto; overflow: hidden; }

canvas { height: 552px; width: 422px; display: block; background: url(../img/canvas.png) top left; }

#scoreBoard { width: 420px; height: 50px; background: rgba(182, 200, 220, 0.7); position: absolute; top: -3px; left: 0; z-index: -1; border-image: url(../img/board.png) 100 5 round; }
#scoreBoard p { font-size: 20px; padding: 0; line-height: 47px; margin: 0px 0 0 5px; }

img { display: none; }

#mainMenu, #gameOverMenu { height: 100%; width: 100%; text-align: center; position: absolute; top: 0; left: 0; z-index: 2; }

#gameOverMenu { visibility: hidden; }

h1, h2, h3 { font-weight: normal; }

h1 { font-size: 60px; color: #5a5816; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform: rotate(-10deg); margin: 0px; }

h3 { text-align: right; margin: -10px 20px 0 0; color: #5e96be; }
h3 a { color: #5a5816; }

.button { width: 105px; height: 31px; background: url(../img/sprite.png) 0 0 no-repeat; display: block; color: #000; font-size: 12px; line-height: 31px; text-decoration: none; position: absolute; left: 50%; bottom: 50px; margin-left: -53px; }
.button.tweet { bottom: 100px; background-position: 0 -90px; }
.button.fb { bottom: 150px; background-position: 0 -60px; }

.info { position: absolute; line-height: 1.4em; text-align: center; width: 422px; right: 0; bottom: 3px; margin: 0; color: green; }
.info .key { width: 16px; height: 16px; background: url(../img/sprite.png) no-repeat; text-indent: -9999px; display: inline-block; }
.info .key.left { background-position: -92px -621px; }
.info .key.right { background-position: -92px -641px; }