@import "https://fonts.googleapis.com/css2?family=Roboto:wght@100..900&display=swap";
html,body{margin:0;padding:0;background-image:url(img/super_mario_game.jpg);background-repeat:no-repeat;min-height:100%;background-size:cover;background-attachment:fixed;background-position:center;color:#3A2005;font-family:"Roboto","Helvetica Neue",Arial,sans-serif;font-size:18px}
body{margin:40px 0}
p.learn{margin-top:20px}
span.tile-text{line-height:1.25}
input{display:inline-block;background:#8f7a66;border-radius:3px;padding:0 20px;text-decoration:none;color:#f9f6f2;height:40px;line-height:42px;cursor:pointer;font:inherit;border:none;outline:none;box-sizing:border-box;font-weight:700;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}
input[type="text"],input[type="email"]{cursor:auto;background:#fcfbf9;font-weight:400;color:#776e65;padding:0 15px}
input[type="text"]::-webkit-input-placeholder,input[type="email"]::-webkit-input-placeholder{color:#9d948c}
input[type="text"]::-moz-placeholder,input[type="email"]::-moz-placeholder{color:#9d948c}
input[type="text"]:-ms-input-placeholder,input[type="email"]:-ms-input-placeholder{color:#9d948c}
.heading:after{content:"";display:block;clear:both}
h1.title{font-size:40px;font-weight:medium;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:#0c92bf;padding:15px 25px;font-size:25px;height:25px;line-height:47px;font-weight:700;border-radius:3px;color:#fff;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:700;color:#776e65e6;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:"Best"}
p{margin-top:0;margin-bottom:10px;line-height:1.65}
a{font-weight:medium;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:500px;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}
}
@-webkit-keyframes slide-up {
0%{margin-top:32%}
100%{margin-top:20%}
}
@-moz-keyframes slide-up {
0%{margin-top:32%}
100%{margin-top:20%}
}
@keyframes slide-up {
0%{margin-top:32%}
100%{margin-top:20%}
}
.game-container{margin-top:20px;position:relative;padding:15px;cursor:default;-webkit-touch-callout:none;-ms-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-ms-touch-action:none;touch-action:none;background:#1e6477;border-radius:6px;width:500px;height:500px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.game-message{display:none;position:absolute;top:0;right:0;bottom:0;left:0;background:#969696d4;z-index:100;padding-top:40px;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-message p{font-size:50px;font-weight:700;height:60px;line-height:60px;margin-top:222px}
.game-message .lower{display:block;font-size:14px;margin-top:29px}
.game-message .mailing-list{margin-top:52px}
.game-message .mailing-list strong{display:block;margin-bottom:10px}
.game-message .mailing-list .mailing-list-email-field{width:230px;margin-right:5px}
.game-message a{display:inline-block;background:#8f7a66;border-radius:3px;padding:0 20px;text-decoration:none;color:#f9f6f2;height:40px;line-height:42px;cursor:pointer;margin-left:9px}
.game-message a.keep-playing-button{display:none}
.game-message .score-sharing{display:inline-block;vertical-align:middle;margin-left:10px}
.game-message.game-won{background:#edc22e80;color:#f9f6f2}
.game-message.game-won a.keep-playing-button{display:inline-block}
.game-message.game-won,.game-message.game-over{display:block}
.game-message.game-won p,.game-message.game-over p{-webkit-animation:slide-up 1.5s ease-in-out 2500ms;-moz-animation:slide-up 1.5s ease-in-out 2500ms;animation:slide-up 1.5s ease-in-out 2500ms;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;animation-fill-mode:both}
.game-message.game-won .mailing-list,.game-message.game-over .mailing-list{-webkit-animation:fade-in 1.5s ease-in-out 2500ms;-moz-animation:fade-in 1.5s ease-in-out 2500ms;animation:fade-in 1.5s ease-in-out 2500ms;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;animation-fill-mode:both}
.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:106.25px;height:106.25px;margin-right:15px;float:left;border-radius:3px;background:#eee4da59}
.grid-cell:last-child{margin-right:0}
.tile-container{position:absolute;z-index:2}
.tile,.tile .tile-inner{width:107px;height:107px;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,121px);-moz-transform:translate(0px,121px);transform:translate(0px,121px)}
.tile.tile-position-1-3{-webkit-transform:translate(0px,242px);-moz-transform:translate(0px,242px);transform:translate(0px,242px)}
.tile.tile-position-1-4{-webkit-transform:translate(0px,363px);-moz-transform:translate(0px,363px);transform:translate(0px,363px)}
.tile.tile-position-2-1{-webkit-transform:translate(121px,0px);-moz-transform:translate(121px,0px);transform:translate(121px,0px)}
.tile.tile-position-2-2{-webkit-transform:translate(121px,121px);-moz-transform:translate(121px,121px);transform:translate(121px,121px)}
.tile.tile-position-2-3{-webkit-transform:translate(121px,242px);-moz-transform:translate(121px,242px);transform:translate(121px,242px)}
.tile.tile-position-2-4{-webkit-transform:translate(121px,363px);-moz-transform:translate(121px,363px);transform:translate(121px,363px)}
.tile.tile-position-3-1{-webkit-transform:translate(242px,0px);-moz-transform:translate(242px,0px);transform:translate(242px,0px)}
.tile.tile-position-3-2{-webkit-transform:translate(242px,121px);-moz-transform:translate(242px,121px);transform:translate(242px,121px)}
.tile.tile-position-3-3{-webkit-transform:translate(242px,242px);-moz-transform:translate(242px,242px);transform:translate(242px,242px)}
.tile.tile-position-3-4{-webkit-transform:translate(242px,363px);-moz-transform:translate(242px,363px);transform:translate(242px,363px)}
.tile.tile-position-4-1{-webkit-transform:translate(363px,0px);-moz-transform:translate(363px,0px);transform:translate(363px,0px)}
.tile.tile-position-4-2{-webkit-transform:translate(363px,121px);-moz-transform:translate(363px,121px);transform:translate(363px,121px)}
.tile.tile-position-4-3{-webkit-transform:translate(363px,242px);-moz-transform:translate(363px,242px);transform:translate(363px,242px)}
.tile.tile-position-4-4{-webkit-transform:translate(363px,363px);-moz-transform:translate(363px,363px);transform:translate(363px,363px)}
.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:#f5f5f5;text-align:center;font-weight:700;z-index:10;font-family:'Source Code Pro',Courier;font-size:16px;color:#354b59}
.tile.tile-2 .tile-inner{background:url(img/2.jpg);background-size:100%;color:#0000;box-shadow:0 0 30px 10px #f3d77400 inset 0 0 0 1px #fff0}
.tile.tile-4 .tile-inner{background:url(img/4.jpg);background-size:100%;color:#0000;box-shadow:0 0 30px 10px #f3d77400 inset 0 0 0 1px #fff0}
.tile.tile-8 .tile-inner{background:url(img/8.jpg);background-size:100%;color:#0000;font-weight:medium;font-size:11px}
.tile.tile-16 .tile-inner{background:url(img/16.jpg);background-size:100%;color:#0000;font-weight:medium;font-size:10px}
.tile.tile-32 .tile-inner{background:url(img/32.jpg);background-size:100%;color:#0000;font-size:14px}
.tile.tile-64 .tile-inner{background:url(img/64.jpg);background-size:100%;color:#0000;font-size:14px}
.tile.tile-128 .tile-inner{font-weight:medium;background:url(img/128.jpg);background-size:100%;color:#0000;box-shadow:0 0 30px 10px #f3d7743d inset 0 0 0 1px #ffffff24;font-size:12px}
@media screen and (max-width: 520px) {
.tile.tile-128 .tile-inner{font-size:12px}
}
.tile.tile-256 .tile-inner{background:url(img/256.jpg);background-size:100%;color:#0000;box-shadow:0 0 30px 10px #f3d77451 inset 0 0 0 1px #ffffff31;font-size:14px}
@media screen and (max-width: 520px) {
.tile.tile-256 .tile-inner{font-size:16px}
}
.tile.tile-512 .tile-inner{background:url(img/512.jpg);background-size:100%;color:#0000;box-shadow:0 0 30px 10px #f3d77465 inset 0 0 0 1px #ffffff3d;font-size:13px}
@media screen and (max-width: 520px) {
.tile.tile-512 .tile-inner{font-size:13px}
}
.tile.tile-1024 .tile-inner{background:url(img/1024.jpg);background-size:100%;color:#0000;box-shadow:0 0 30px 10px #f3d77479 inset 0 0 0 1px #ffffff49;font-size:10px}
@media screen and (max-width: 520px) {
.tile.tile-1024 .tile-inner{font-size:10px}
}
.tile.tile-2048 .tile-inner{background:url(img/2048.jpeg);background-size:100%;color:#0000;box-shadow:0 0 30px 10px #f3d7748e inset 0 0 0 1px #fff5;font-size:10px}
@media screen and (max-width: 520px) {
.tile.tile-2048 .tile-inner{font-size:10px}
}
.tile.tile-super .tile-inner{color:#f9f6f2;background:#3c3a32;font-weight:medium;font-size:12px}
@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}
.above-game{margin-top:10px}
.above-game:after{content:"";display:block;clear:both}
.game-intro{margin-top:5px;float:left;line-height:30px;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:22px;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-intro{width:100%;display:block;box-sizing:border-box;line-height:1.25}
.restart-button,.retry-button{width:48%;padding:0;display:block;box-sizing:border-box;margin-top:2px}
.game-container{margin-top:17px;position:relative;padding:10px;cursor:default;-webkit-touch-callout:none;-ms-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-ms-touch-action:none;touch-action:none;background:#1e6497;border-radius:6px;width:280px;height:280px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.game-message{display:none;position:absolute;top:0;right:0;bottom:0;left:0;background:#eee4daba;z-index:100;padding-top:40px;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-message p{font-size:60px;font-weight:700;height:60px;line-height:60px;margin-top:222px}
.game-message .lower{display:block;margin-top:29px}
.game-message .mailing-list{margin-top:52px}
.game-message .mailing-list strong{display:block;margin-bottom:10px}
.game-message .mailing-list .mailing-list-email-field{width:230px;margin-right:5px}
.game-message a{display:inline-block;background:#8f7a66;border-radius:3px;padding:0 20px;text-decoration:none;color:#f9f6f2;height:40px;line-height:42px;cursor:pointer;margin-left:9px}
.game-message a.keep-playing-button{display:none}
.game-message .score-sharing{display:inline-block;vertical-align:middle;margin-left:10px}
.game-message.game-won{background:#edc22e80;color:#f9f6f2}
.game-message.game-won a.keep-playing-button{display:inline-block}
.game-message.game-won,.game-message.game-over{display:block}
.game-message.game-won p,.game-message.game-over p{-webkit-animation:slide-up 1.5s ease-in-out 2500ms;-moz-animation:slide-up 1.5s ease-in-out 2500ms;animation:slide-up 1.5s ease-in-out 2500ms;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;animation-fill-mode:both}
.game-message.game-won .mailing-list,.game-message.game-over .mailing-list{-webkit-animation:fade-in 1.5s ease-in-out 2500ms;-moz-animation:fade-in 1.5s ease-in-out 2500ms;animation:fade-in 1.5s ease-in-out 2500ms;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;animation-fill-mode:both}
.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:#eee4da59}
.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)}
.tile .tile-inner{font-size:35px}
.game-message{padding-top:0}
.game-message p{font-size:30px!important;height:30px!important;line-height:30px!important;margin-top:32%!important;margin-bottom:0!important}
.game-message .lower{margin-top:10px!important}
.game-message.game-won .score-sharing{margin-top:10px}
.game-message.game-over .mailing-list{margin-top:25px}
.game-message .mailing-list{margin-top:10px}
.game-message .mailing-list .mailing-list-email-field{width:180px}
.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;display:inline-block;background:#8f7a66;border-radius:3px;padding:0 20px;text-decoration:none;color:#f9f6f2;height:40px;line-height:42px;cursor:pointer}
.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:400}
.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:0;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:400;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}
}
a.learn,a.keep-playing-button{background-color:#de8b3e;text-decoration:none;border:1px solid;border-color:#c7640b;color:#fff;border-radius:0;margin:0 auto;margin-top:5px;display:block;width:200px;padding:10px;text-align:center}
a.learn:hover,a.keep-playing-button:hover,a.learn-low:hover{background-image:linear-gradient(to bottom,#f59a18 0,#f27d13 100%);background-repeat:repeat-x}
.restart-button,a.retry-button{display:inline-block;background:#1e6477;border-radius:3px;padding:0 20px;text-decoration:none;color:#f9f6f2;line-height:42px;cursor:pointer;display:block;text-align:center;float:right;margin-top:7px}
a.retry-button,a.learn-low{width:150px;height:40px;padding:0;border-radius:5px;background-color:#000;display:inline-block;margin:0;line-height:42px}
a.learn-low{margin-right:10px}
a.retry-button{margin-left:10px;float:none}
.block{display:flex;justify-content:center;align-items:center;margin:0 auto}
.block-300{display:none;width:100%;height:250px;background-color:#8f7a66}
.block-728{display:none;width:100%;max-width:728px;height:90px;background-color:#8f7a66}
@media only screen and (max-width: 738px) {
.block-300{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;margin-bottom:10px;border-radius:10px;margin-top:10px}
.block-728{display:none}
}
@media only screen and (min-width: 739px) {
.block-728{display:flex;justify-content:center;align-items:center;margin-bottom:10px;border-radius:10px;margin-top:10px}
.block-300{display:none}
}