@import url(fonts/clear-sans.css); html, body { margin: 0; padding: 0; background: #faf8ef; color: #776e65; font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif; font-size: 18px; } body { margin: 80px 0; } .heading:after { content: ""; display: block; clear: both; } h1.title { font-size: 80px; font-weight: bold; margin: 0; display: block; float: left; } @-webkit-keyframes move-up { 0% { top: 25px; opacity: 1; } 100% { top: -50px; opacity: 0; } } @-moz-keyframes move-up { 0% { top: 25px; opacity: 1; } 100% { top: -50px; opacity: 0; } } @keyframes move-up { 0% { top: 25px; opacity: 1; } 100% { top: -50px; opacity: 0; } } .scores-container { float: right; text-align: right; } .score-container, .best-container { position: relative; display: inline-block; background: #bbada0; padding: 15px 25px; font-size: 25px; height: 25px; line-height: 47px; font-weight: bold; border-radius: 3px; color: white; margin-top: 8px; text-align: center; } .score-container:after, .best-container:after { position: absolute; width: 100%; top: 10px; left: 0; text-transform: uppercase; font-size: 13px; line-height: 13px; text-align: center; color: #eee4da; } .score-container .score-addition, .best-container .score-addition { position: absolute; right: 30px; color: red; font-size: 25px; line-height: 25px; font-weight: bold; color: rgba(119, 110, 101, 0.9); z-index: 100; -webkit-animation: move-up 600ms ease-in; -moz-animation: move-up 600ms ease-in; animation: move-up 600ms ease-in; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; animation-fill-mode: both; } .score-container:after { content: "Score"; } .best-container:after { content: "My best"; } p { margin-top: 0; margin-bottom: 10px; line-height: 1.65; } a { color: #776e65; font-weight: bold; text-decoration: underline; cursor: pointer; } strong.important { text-transform: uppercase; } hr { border: none; border-bottom: 1px solid #d8d4d0; margin-top: 20px; margin-bottom: 30px; } .container { width: 640px; margin: 0 auto; } @-webkit-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } .game-container { margin-top: 40px; position: relative; padding: 15px; cursor: default; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; background: #bbada0; border-radius: 6px; width: 640px; height: 640px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .game-container .game-message { display: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(238, 228, 218, 0.5); z-index: 100; text-align: center; -webkit-animation: fade-in 800ms ease 1200ms; -moz-animation: fade-in 800ms ease 1200ms; animation: fade-in 800ms ease 1200ms; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; animation-fill-mode: both; } .game-container .game-message p { font-size: 60px; font-weight: bold; height: 60px; line-height: 60px; margin-top: 222px; } .game-container .game-message .lower { display: block; margin-top: 59px; } .game-container .game-message a { display: inline-block; background: #8f7a66; border-radius: 3px; padding: 0 20px; text-decoration: none; color: #f9f6f2; height: 40px; line-height: 42px; margin-left: 9px; } .game-container .game-message a.keep-playing-button { display: none; } .game-container .game-message.game-won { background: rgba(237, 194, 46, 0.5); color: #f9f6f2; } .game-container .game-message.game-won a.keep-playing-button { display: inline-block; } .game-container .game-message.game-won, .game-container .game-message.game-over { display: block; } .grid-container { position: absolute; z-index: 1; } .grid-row { margin-bottom: 15px; } .grid-row:last-child { margin-bottom: 0; } .grid-row:after { content: ""; display: block; clear: both; } .grid-cell { width: 110px; height: 110px; margin-right: 15px; float: left; border-radius: 3px; background: rgba(238, 228, 218, 0.35); } .grid-cell:last-child { margin-right: 0; } .tile-container { position: absolute; z-index: 2; } .tile, .tile .tile-inner { width: 110px; height: 110px; line-height: 116.25px; } .tile.tile-position-1-1 { -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); transform: translate(0px, 0px); } .tile.tile-position-1-2 { -webkit-transform: translate(0px, 125px); -moz-transform: translate(0px, 125px); transform: translate(0px, 125px); } .tile.tile-position-1-3 { -webkit-transform: translate(0px, 250px); -moz-transform: translate(0px, 250px); transform: translate(0px, 250px); } .tile.tile-position-1-4 { -webkit-transform: translate(0px, 375px); -moz-transform: translate(0px, 375px); transform: translate(0px, 375px); } .tile.tile-position-1-5 { -webkit-transform: translate(0px, 500px); -moz-transform: translate(0px, 500px); transform: translate(0px, 500px); } .tile.tile-position-2-1 { -webkit-transform: translate(125px, 0px); -moz-transform: translate(125px, 0px); transform: translate(125px, 0px); } .tile.tile-position-2-2 { -webkit-transform: translate(125px, 125px); -moz-transform: translate(125px, 125px); transform: translate(125px, 125px); } .tile.tile-position-2-3 { -webkit-transform: translate(125px, 250px); -moz-transform: translate(125px, 250px); transform: translate(125px, 250px); } .tile.tile-position-2-4 { -webkit-transform: translate(125px, 375px); -moz-transform: translate(125px, 375px); transform: translate(125px, 375px); } .tile.tile-position-2-5 { -webkit-transform: translate(125px, 500px); -moz-transform: translate(125px, 500px); transform: translate(125px, 500px); } .tile.tile-position-3-1 { -webkit-transform: translate(250px, 0px); -moz-transform: translate(250px, 0px); transform: translate(250px, 0px); } .tile.tile-position-3-2 { -webkit-transform: translate(250px, 125px); -moz-transform: translate(250px, 125px); transform: translate(250px, 125px); } .tile.tile-position-3-3 { -webkit-transform: translate(250px, 250px); -moz-transform: translate(250px, 250px); transform: translate(250px, 250px); } .tile.tile-position-3-4 { -webkit-transform: translate(250px, 375px); -moz-transform: translate(250px, 375px); transform: translate(250px, 375px); } .tile.tile-position-3-5 { -webkit-transform: translate(250px, 500px); -moz-transform: translate(250px, 500x); transform: translate(250px, 500px); } .tile.tile-position-4-1 { -webkit-transform: translate(375px, 0px); -moz-transform: translate(375px, 0px); transform: translate(375px, 0px); } .tile.tile-position-4-2 { -webkit-transform: translate(375px, 125px); -moz-transform: translate(375px, 125px); transform: translate(375px, 125px); } .tile.tile-position-4-3 { -webkit-transform: translate(375px, 250px); -moz-transform: translate(375px, 250px); transform: translate(375px, 250px); } .tile.tile-position-4-4 { -webkit-transform: translate(375px, 375px); -moz-transform: translate(375px, 375px); transform: translate(375px, 375px); } .tile.tile-position-4-5 { -webkit-transform: translate(375px, 500px); -moz-transform: translate(375px, 500px); transform: translate(375px, 500px); } .tile.tile-position-5-1 { -webkit-transform: translate(500px, 0px); -moz-transform: translate(500px, 0px); transform: translate(500px, 0px); } .tile.tile-position-5-2 { -webkit-transform: translate(500px, 125px); -moz-transform: translate(500px, 125px); transform: translate(500px, 125px); } .tile.tile-position-5-3 { -webkit-transform: translate(500px, 250px); -moz-transform: translate(500px, 250px); transform: translate(500px, 250px); } .tile.tile-position-5-4 { -webkit-transform: translate(500px, 375px); -moz-transform: translate(500px, 375px); transform: translate(500px, 375px); } .tile.tile-position-5-5 { -webkit-transform: translate(500px, 500px); -moz-transform: translate(500px, 500px); transform: translate(500px, 500px); } .tile { position: absolute; -webkit-transition: 100ms ease-in-out; -moz-transition: 100ms ease-in-out; transition: 100ms ease-in-out; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; } .tile .tile-inner { border-radius: 3px; background: #eee4da; text-align: center; font-weight: bold; z-index: 10; font-size: 0px; } .tile.tile-1 .tile-inner { background: #f0f url('https://www.ecb.europa.eu/euro/coins/common/shared/img/common_1cent.gif'); background-size: cover; box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); } .tile.tile-2 .tile-inner { background: #f0f url('https://www.ecb.europa.eu/euro/coins/common/shared/img/common_2cent.gif'); background-size: cover; box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); } .tile.tile-5 .tile-inner { background: #f0f url('https://www.ecb.europa.eu/euro/coins/common/shared/img/common_5cent.gif'); background-size: cover; box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); } .tile.tile-10 .tile-inner { background: #f0f url('https://www.ecb.europa.eu/euro/coins/common/shared/img/common_10cent.gif'); background-size: cover;} .tile.tile-20 .tile-inner { background: #f0f url('https://www.ecb.europa.eu/euro/coins/common/shared/img/common_20cent.gif'); background-size: cover;} .tile.tile-50 .tile-inner { background: #f0f url('https://www.ecb.europa.eu/euro/coins/common/shared/img/common_50cent.gif'); background-size: cover;} .tile.tile-100 .tile-inner { background: #f0f url('https://www.ecb.europa.eu/euro/coins/common/shared/img/common_1euro.gif'); background-size: cover;} .tile.tile-200 .tile-inner { background: #f0f url('https://www.ecb.europa.eu/euro/coins/common/shared/img/common_2euro.gif'); background-size: cover; } .tile.tile-500 .tile-inner { background: #ffffff url('http://www.126bay.com/images/banknote/europe/eURO/5%20Euro%202002%20-%20F.jpg'); background-size: contain; background-repeat: no-repeat;} .tile.tile-1000 .tile-inner { background: #ffffff url('http://www.126bay.com/images/banknote/europe/eURO/10%20Euro%202002%20-%20F.jpg'); background-size: contain; background-repeat: no-repeat;} .tile.tile-2000 .tile-inner { background: #ffffff url('http://www.126bay.com/images/banknote/europe/eURO/20%20Euro%202002%20-%20F.jpg'); background-size: contain; background-repeat: no-repeat;} .tile.tile-5000 .tile-inner { background: #ffffff url('http://www.126bay.com/images/banknote/europe/eURO/50%20Euro%202002%20-%20F.jpg'); background-size: contain; background-repeat: no-repeat;} .tile.tile-10000 .tile-inner { background: #ffffff url('http://www.blogger42.com/wp-content/uploads/100euro.jpg'); background-size: contain; background-repeat: no-repeat;} .tile.tile-20000 .tile-inner { background: #ffffff url('http://www.blogger42.com/wp-content/uploads/e.jpg'); background-size: contain; background-repeat: no-repeat;} .tile.tile-50000 .tile-inner { background: #ffffff url('http://www.rivistastudio.com/wp-content/uploads/2014/03/500euro.jpg'); background-size: contain; background-repeat: no-repeat;} .tile.tile-super .tile-inner { background: #ffffff url('http://upload.wikimedia.org/wikipedia/commons/c/c3/Euro_symbol_gold.svg'); background-size: cover; font-size: 30px; } @media screen and (max-width: 520px) { .tile.tile-super .tile-inner { font-size: 10px; } } @-webkit-keyframes appear { 0% { opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); transform: scale(0); } 100% { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } } @-moz-keyframes appear { 0% { opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); transform: scale(0); } 100% { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } } @keyframes appear { 0% { opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); transform: scale(0); } 100% { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } } .tile-new .tile-inner { -webkit-animation: appear 200ms ease 100ms; -moz-animation: appear 200ms ease 100ms; animation: appear 200ms ease 100ms; -webkit-animation-fill-mode: backwards; -moz-animation-fill-mode: backwards; animation-fill-mode: backwards; } @-webkit-keyframes pop { 0% { -webkit-transform: scale(0); -moz-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); transform: scale(1.2); } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } } @-moz-keyframes pop { 0% { -webkit-transform: scale(0); -moz-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); transform: scale(1.2); } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } } @keyframes pop { 0% { -webkit-transform: scale(0); -moz-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); transform: scale(1.2); } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } } .tile-merged .tile-inner { z-index: 20; -webkit-animation: pop 200ms ease 100ms; -moz-animation: pop 200ms ease 100ms; animation: pop 200ms ease 100ms; -webkit-animation-fill-mode: backwards; -moz-animation-fill-mode: backwards; animation-fill-mode: backwards; } .game-intro { margin-bottom: 0; } .game-explanation { margin-top: 50px; } .sharing { margin-top: 20px; text-align: center; } .sharing > iframe, .sharing > span, .sharing > form { display: inline-block; vertical-align: middle; } @media screen and (max-width: 520px) { html, body { font-size: 15px; } body { margin: 20px 0; padding: 0 20px; } h1.title { font-size: 27px; margin-top: 15px; } .container { width: 280px; margin: 0 auto; } .score-container, .best-container { margin-top: 0; padding: 15px 10px; min-width: 40px; } .heading { margin-bottom: 10px; } .game-container { margin-top: 40px; position: relative; padding: 10px; cursor: default; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; background: #bbada0; border-radius: 6px; width: 280px; height: 280px; -ms-touch-action: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .game-container .game-message { display: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(238, 228, 218, 0.5); z-index: 100; text-align: center; -webkit-animation: fade-in 800ms ease 1200ms; -moz-animation: fade-in 800ms ease 1200ms; animation: fade-in 800ms ease 1200ms; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; animation-fill-mode: both; } .game-container .game-message p { font-size: 60px; font-weight: bold; height: 60px; line-height: 60px; margin-top: 222px; } .game-container .game-message .lower { display: block; margin-top: 59px; } .game-container .game-message a { display: inline-block; background: #8f7a66; border-radius: 3px; padding: 0 20px; text-decoration: none; color: #f9f6f2; height: 40px; line-height: 42px; margin-left: 9px; } .game-container .game-message a.keep-playing-button { display: none; } .game-container .game-message .score-sharing { display: inline-block; vertical-align: middle; margin-left: 10px; } .game-container .game-message.game-won { background: rgba(237, 194, 46, 0.5); color: #f9f6f2; } .game-container .game-message.game-won a.keep-playing-button { display: inline-block; } .game-container .game-message.game-won, .game-container .game-message.game-over { display: block; } .grid-container { position: absolute; z-index: 1; } .grid-row { margin-bottom: 10px; } .grid-row:last-child { margin-bottom: 0; } .grid-row:after { content: ""; display: block; clear: both; } .grid-cell { width: 57.5px; height: 57.5px; margin-right: 10px; float: left; border-radius: 3px; background: rgba(238, 228, 218, 0.35); } .grid-cell:last-child { margin-right: 0; } .tile-container { position: absolute; z-index: 2; } .tile, .tile .tile-inner { width: 58px; height: 58px; line-height: 67.5px; } .tile.tile-position-1-1 { -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); transform: translate(0px, 0px); } .tile.tile-position-1-2 { -webkit-transform: translate(0px, 67px); -moz-transform: translate(0px, 67px); transform: translate(0px, 67px); } .tile.tile-position-1-3 { -webkit-transform: translate(0px, 135px); -moz-transform: translate(0px, 135px); transform: translate(0px, 135px); } .tile.tile-position-1-4 { -webkit-transform: translate(0px, 202px); -moz-transform: translate(0px, 202px); transform: translate(0px, 202px); } .tile.tile-position-2-1 { -webkit-transform: translate(67px, 0px); -moz-transform: translate(67px, 0px); transform: translate(67px, 0px); } .tile.tile-position-2-2 { -webkit-transform: translate(67px, 67px); -moz-transform: translate(67px, 67px); transform: translate(67px, 67px); } .tile.tile-position-2-3 { -webkit-transform: translate(67px, 135px); -moz-transform: translate(67px, 135px); transform: translate(67px, 135px); } .tile.tile-position-2-4 { -webkit-transform: translate(67px, 202px); -moz-transform: translate(67px, 202px); transform: translate(67px, 202px); } .tile.tile-position-3-1 { -webkit-transform: translate(135px, 0px); -moz-transform: translate(135px, 0px); transform: translate(135px, 0px); } .tile.tile-position-3-2 { -webkit-transform: translate(135px, 67px); -moz-transform: translate(135px, 67px); transform: translate(135px, 67px); } .tile.tile-position-3-3 { -webkit-transform: translate(135px, 135px); -moz-transform: translate(135px, 135px); transform: translate(135px, 135px); } .tile.tile-position-3-4 { -webkit-transform: translate(135px, 202px); -moz-transform: translate(135px, 202px); transform: translate(135px, 202px); } .tile.tile-position-4-1 { -webkit-transform: translate(202px, 0px); -moz-transform: translate(202px, 0px); transform: translate(202px, 0px); } .tile.tile-position-4-2 { -webkit-transform: translate(202px, 67px); -moz-transform: translate(202px, 67px); transform: translate(202px, 67px); } .tile.tile-position-4-3 { -webkit-transform: translate(202px, 135px); -moz-transform: translate(202px, 135px); transform: translate(202px, 135px); } .tile.tile-position-4-4 { -webkit-transform: translate(202px, 202px); -moz-transform: translate(202px, 202px); transform: translate(202px, 202px); } .game-container { margin-top: 20px; } .tile .tile-inner { font-size: 35px; } .game-message p { font-size: 30px !important; height: 30px !important; line-height: 30px !important; margin-top: 90px !important; } .game-message .lower { margin-top: 30px !important; } .sharing > iframe, .sharing > span, .sharing > form { display: block; margin: 0 auto; margin-bottom: 20px; } } .pp-donate button { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; font: inherit; color: inherit; cursor: pointer; display: inline-block; background: #8f7a66; border-radius: 3px; padding: 0 20px; text-decoration: none; color: #f9f6f2; height: 40px; line-height: 42px; } .pp-donate button img { vertical-align: -4px; margin-right: 8px; } .btc-donate { position: relative; margin-left: 10px; display: inline-block; background: #8f7a66; border-radius: 3px; padding: 0 20px; text-decoration: none; color: #f9f6f2; height: 40px; line-height: 42px; cursor: pointer; } .btc-donate img { vertical-align: -4px; margin-right: 8px; } .btc-donate a { color: #f9f6f2; text-decoration: none; font-weight: normal; } .btc-donate .address { cursor: auto; position: absolute; width: 340px; right: 50%; margin-right: -170px; padding-bottom: 7px; top: -30px; opacity: 0; pointer-events: none; -webkit-transition: 400ms ease; -moz-transition: 400ms ease; transition: 400ms ease; -webkit-transition-property: top, opacity; -moz-transition-property: top, opacity; transition-property: top, opacity; } .btc-donate .address:after { position: absolute; border-top: 10px solid #bbada0; border-right: 7px solid transparent; border-left: 7px solid transparent; content: ""; bottom: 0px; left: 50%; margin-left: -7px; } .btc-donate .address code { background-color: #bbada0; padding: 10px 15px; width: 100%; border-radius: 3px; line-height: 1; font-weight: normal; font-size: 15px; font-family: Consolas, "Liberation Mono", Courier, monospace; text-align: center; } .btc-donate:hover .address, .btc-donate .address:hover .address { opacity: 1; top: -45px; pointer-events: auto; } @media screen and (max-width: 480px) { .btc-donate { width: 120px; } .btc-donate .address { margin-right: -150px; width: 300px; } .btc-donate .address code { font-size: 13px; } .btc-donate .address:after { left: 50%; bottom: 2px; } }