diff --git a/.gitattributes b/.gitattributes
index d929f1f7..02f84227 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -1,2 +1,16 @@
* linguist-vendored
*.go linguist-vendored=false
+* text=auto eol=lf
+
+
+# Explicitly declare text files you want to always be normalized and converted
+# to native line endings on checkout.
+*.c text
+*.h text
+
+# Declare files that will always have CRLF line endings on checkout.
+*.sln text eol=crlf
+
+# Denote all files that are truly binary and should not be modified.
+*.png binary
+*.jpg binary
\ No newline at end of file
diff --git a/cmd/main.go b/cmd/main.go
index 313c198d..31340b9b 100644
--- a/cmd/main.go
+++ b/cmd/main.go
@@ -71,9 +71,9 @@ func main() {
rand.Seed(time.Now().UTC().UnixNano())
- //if *config.IsMonitor {
- go monitor()
- //}
+ if *config.IsMonitor {
+ go monitor()
+ }
// There are two server mode
// Overlord is coordinator. If the OvelordHost Param is `overlord`, we spawn a new host as Overlord.
// else we spawn new server as normal server connecting to OverlordHost.
diff --git a/document/implementation/README.md b/document/implementation/README.md
index e1971a00..c4131ade 100644
--- a/document/implementation/README.md
+++ b/document/implementation/README.md
@@ -13,7 +13,7 @@
├── static: static file for front end
│ ├── js
│ │ └── ws.js: client logic
-│ ├── gameboy.html: frontend with gameboy ui
+│ ├── game.html: frontend with gameboy ui
│ └── index_ws.html: raw frontend without ui
├── cws
│ └── cws.go: socket multiplexer library, used for signalling
diff --git a/overlord/handlers.go b/overlord/handlers.go
index c383e5a4..a1497a4b 100644
--- a/overlord/handlers.go
+++ b/overlord/handlers.go
@@ -15,8 +15,8 @@ import (
)
const (
- gameboyIndex = "./static/gameboy2.html"
- debugIndex = "./static/gameboy2.html"
+ gameboyIndex = "./static/game.html"
+ debugIndex = "./static/game.html"
gamePath = "games"
)
diff --git a/static/css/font-awesome.css b/static/css/font-awesome.css
new file mode 100644
index 00000000..b2a5fe2f
--- /dev/null
+++ b/static/css/font-awesome.css
@@ -0,0 +1,2086 @@
+/*!
+ * Font Awesome 4.5.0 by @davegandy - http://fontawesome.io - @fontawesome
+ * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
+ */
+/* FONT PATH
+ * -------------------------- */
+@font-face {
+ font-family: 'FontAwesome';
+ src: url('../fonts/fontawesome-webfont.eot?v=4.5.0');
+ src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+.fa {
+ display: inline-block;
+ font: normal normal normal 14px/1 FontAwesome;
+ font-size: inherit;
+ text-rendering: auto;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+/* makes the font 33% larger relative to the icon container */
+.fa-lg {
+ font-size: 1.33333333em;
+ line-height: 0.75em;
+ vertical-align: -15%;
+}
+.fa-2x {
+ font-size: 2em;
+}
+.fa-3x {
+ font-size: 3em;
+}
+.fa-4x {
+ font-size: 4em;
+}
+.fa-5x {
+ font-size: 5em;
+}
+.fa-fw {
+ width: 1.28571429em;
+ text-align: center;
+}
+.fa-ul {
+ padding-left: 0;
+ margin-left: 2.14285714em;
+ list-style-type: none;
+}
+.fa-ul > li {
+ position: relative;
+}
+.fa-li {
+ position: absolute;
+ left: -2.14285714em;
+ width: 2.14285714em;
+ top: 0.14285714em;
+ text-align: center;
+}
+.fa-li.fa-lg {
+ left: -1.85714286em;
+}
+.fa-border {
+ padding: .2em .25em .15em;
+ border: solid 0.08em #eeeeee;
+ border-radius: .1em;
+}
+.fa-pull-left {
+ float: left;
+}
+.fa-pull-right {
+ float: right;
+}
+.fa.fa-pull-left {
+ margin-right: .3em;
+}
+.fa.fa-pull-right {
+ margin-left: .3em;
+}
+/* Deprecated as of 4.4.0 */
+.pull-right {
+ float: right;
+}
+.pull-left {
+ float: left;
+}
+.fa.pull-left {
+ margin-right: .3em;
+}
+.fa.pull-right {
+ margin-left: .3em;
+}
+.fa-spin {
+ -webkit-animation: fa-spin 2s infinite linear;
+ animation: fa-spin 2s infinite linear;
+}
+.fa-pulse {
+ -webkit-animation: fa-spin 1s infinite steps(8);
+ animation: fa-spin 1s infinite steps(8);
+}
+@-webkit-keyframes fa-spin {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ 100% {
+ -webkit-transform: rotate(359deg);
+ transform: rotate(359deg);
+ }
+}
+@keyframes fa-spin {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ 100% {
+ -webkit-transform: rotate(359deg);
+ transform: rotate(359deg);
+ }
+}
+.fa-rotate-90 {
+ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
+ -webkit-transform: rotate(90deg);
+ -ms-transform: rotate(90deg);
+ transform: rotate(90deg);
+}
+.fa-rotate-180 {
+ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+ -webkit-transform: rotate(180deg);
+ -ms-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
+.fa-rotate-270 {
+ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+ -webkit-transform: rotate(270deg);
+ -ms-transform: rotate(270deg);
+ transform: rotate(270deg);
+}
+.fa-flip-horizontal {
+ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
+ -webkit-transform: scale(-1, 1);
+ -ms-transform: scale(-1, 1);
+ transform: scale(-1, 1);
+}
+.fa-flip-vertical {
+ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
+ -webkit-transform: scale(1, -1);
+ -ms-transform: scale(1, -1);
+ transform: scale(1, -1);
+}
+:root .fa-rotate-90,
+:root .fa-rotate-180,
+:root .fa-rotate-270,
+:root .fa-flip-horizontal,
+:root .fa-flip-vertical {
+ filter: none;
+}
+.fa-stack {
+ position: relative;
+ display: inline-block;
+ width: 2em;
+ height: 2em;
+ line-height: 2em;
+ vertical-align: middle;
+}
+.fa-stack-1x,
+.fa-stack-2x {
+ position: absolute;
+ left: 0;
+ width: 100%;
+ text-align: center;
+}
+.fa-stack-1x {
+ line-height: inherit;
+}
+.fa-stack-2x {
+ font-size: 2em;
+}
+.fa-inverse {
+ color: #ffffff;
+}
+/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
+ readers do not read off random characters that represent icons */
+.fa-glass:before {
+ content: "\f000";
+}
+.fa-music:before {
+ content: "\f001";
+}
+.fa-search:before {
+ content: "\f002";
+}
+.fa-envelope-o:before {
+ content: "\f003";
+}
+.fa-heart:before {
+ content: "\f004";
+}
+.fa-star:before {
+ content: "\f005";
+}
+.fa-star-o:before {
+ content: "\f006";
+}
+.fa-user:before {
+ content: "\f007";
+}
+.fa-film:before {
+ content: "\f008";
+}
+.fa-th-large:before {
+ content: "\f009";
+}
+.fa-th:before {
+ content: "\f00a";
+}
+.fa-th-list:before {
+ content: "\f00b";
+}
+.fa-check:before {
+ content: "\f00c";
+}
+.fa-remove:before,
+.fa-close:before,
+.fa-times:before {
+ content: "\f00d";
+}
+.fa-search-plus:before {
+ content: "\f00e";
+}
+.fa-search-minus:before {
+ content: "\f010";
+}
+.fa-power-off:before {
+ content: "\f011";
+}
+.fa-signal:before {
+ content: "\f012";
+}
+.fa-gear:before,
+.fa-cog:before {
+ content: "\f013";
+}
+.fa-trash-o:before {
+ content: "\f014";
+}
+.fa-home:before {
+ content: "\f015";
+}
+.fa-file-o:before {
+ content: "\f016";
+}
+.fa-clock-o:before {
+ content: "\f017";
+}
+.fa-road:before {
+ content: "\f018";
+}
+.fa-download:before {
+ content: "\f019";
+}
+.fa-arrow-circle-o-down:before {
+ content: "\f01a";
+}
+.fa-arrow-circle-o-up:before {
+ content: "\f01b";
+}
+.fa-inbox:before {
+ content: "\f01c";
+}
+.fa-play-circle-o:before {
+ content: "\f01d";
+}
+.fa-rotate-right:before,
+.fa-repeat:before {
+ content: "\f01e";
+}
+.fa-refresh:before {
+ content: "\f021";
+}
+.fa-list-alt:before {
+ content: "\f022";
+}
+.fa-lock:before {
+ content: "\f023";
+}
+.fa-flag:before {
+ content: "\f024";
+}
+.fa-headphones:before {
+ content: "\f025";
+}
+.fa-volume-off:before {
+ content: "\f026";
+}
+.fa-volume-down:before {
+ content: "\f027";
+}
+.fa-volume-up:before {
+ content: "\f028";
+}
+.fa-qrcode:before {
+ content: "\f029";
+}
+.fa-barcode:before {
+ content: "\f02a";
+}
+.fa-tag:before {
+ content: "\f02b";
+}
+.fa-tags:before {
+ content: "\f02c";
+}
+.fa-book:before {
+ content: "\f02d";
+}
+.fa-bookmark:before {
+ content: "\f02e";
+}
+.fa-print:before {
+ content: "\f02f";
+}
+.fa-camera:before {
+ content: "\f030";
+}
+.fa-font:before {
+ content: "\f031";
+}
+.fa-bold:before {
+ content: "\f032";
+}
+.fa-italic:before {
+ content: "\f033";
+}
+.fa-text-height:before {
+ content: "\f034";
+}
+.fa-text-width:before {
+ content: "\f035";
+}
+.fa-align-left:before {
+ content: "\f036";
+}
+.fa-align-center:before {
+ content: "\f037";
+}
+.fa-align-right:before {
+ content: "\f038";
+}
+.fa-align-justify:before {
+ content: "\f039";
+}
+.fa-list:before {
+ content: "\f03a";
+}
+.fa-dedent:before,
+.fa-outdent:before {
+ content: "\f03b";
+}
+.fa-indent:before {
+ content: "\f03c";
+}
+.fa-video-camera:before {
+ content: "\f03d";
+}
+.fa-photo:before,
+.fa-image:before,
+.fa-picture-o:before {
+ content: "\f03e";
+}
+.fa-pencil:before {
+ content: "\f040";
+}
+.fa-map-marker:before {
+ content: "\f041";
+}
+.fa-adjust:before {
+ content: "\f042";
+}
+.fa-tint:before {
+ content: "\f043";
+}
+.fa-edit:before,
+.fa-pencil-square-o:before {
+ content: "\f044";
+}
+.fa-share-square-o:before {
+ content: "\f045";
+}
+.fa-check-square-o:before {
+ content: "\f046";
+}
+.fa-arrows:before {
+ content: "\f047";
+}
+.fa-step-backward:before {
+ content: "\f048";
+}
+.fa-fast-backward:before {
+ content: "\f049";
+}
+.fa-backward:before {
+ content: "\f04a";
+}
+.fa-play:before {
+ content: "\f04b";
+}
+.fa-pause:before {
+ content: "\f04c";
+}
+.fa-stop:before {
+ content: "\f04d";
+}
+.fa-forward:before {
+ content: "\f04e";
+}
+.fa-fast-forward:before {
+ content: "\f050";
+}
+.fa-step-forward:before {
+ content: "\f051";
+}
+.fa-eject:before {
+ content: "\f052";
+}
+.fa-chevron-left:before {
+ content: "\f053";
+}
+.fa-chevron-right:before {
+ content: "\f054";
+}
+.fa-plus-circle:before {
+ content: "\f055";
+}
+.fa-minus-circle:before {
+ content: "\f056";
+}
+.fa-times-circle:before {
+ content: "\f057";
+}
+.fa-check-circle:before {
+ content: "\f058";
+}
+.fa-question-circle:before {
+ content: "\f059";
+}
+.fa-info-circle:before {
+ content: "\f05a";
+}
+.fa-crosshairs:before {
+ content: "\f05b";
+}
+.fa-times-circle-o:before {
+ content: "\f05c";
+}
+.fa-check-circle-o:before {
+ content: "\f05d";
+}
+.fa-ban:before {
+ content: "\f05e";
+}
+.fa-arrow-left:before {
+ content: "\f060";
+}
+.fa-arrow-right:before {
+ content: "\f061";
+}
+.fa-arrow-up:before {
+ content: "\f062";
+}
+.fa-arrow-down:before {
+ content: "\f063";
+}
+.fa-mail-forward:before,
+.fa-share:before {
+ content: "\f064";
+}
+.fa-expand:before {
+ content: "\f065";
+}
+.fa-compress:before {
+ content: "\f066";
+}
+.fa-plus:before {
+ content: "\f067";
+}
+.fa-minus:before {
+ content: "\f068";
+}
+.fa-asterisk:before {
+ content: "\f069";
+}
+.fa-exclamation-circle:before {
+ content: "\f06a";
+}
+.fa-gift:before {
+ content: "\f06b";
+}
+.fa-leaf:before {
+ content: "\f06c";
+}
+.fa-fire:before {
+ content: "\f06d";
+}
+.fa-eye:before {
+ content: "\f06e";
+}
+.fa-eye-slash:before {
+ content: "\f070";
+}
+.fa-warning:before,
+.fa-exclamation-triangle:before {
+ content: "\f071";
+}
+.fa-plane:before {
+ content: "\f072";
+}
+.fa-calendar:before {
+ content: "\f073";
+}
+.fa-random:before {
+ content: "\f074";
+}
+.fa-comment:before {
+ content: "\f075";
+}
+.fa-magnet:before {
+ content: "\f076";
+}
+.fa-chevron-up:before {
+ content: "\f077";
+}
+.fa-chevron-down:before {
+ content: "\f078";
+}
+.fa-retweet:before {
+ content: "\f079";
+}
+.fa-shopping-cart:before {
+ content: "\f07a";
+}
+.fa-folder:before {
+ content: "\f07b";
+}
+.fa-folder-open:before {
+ content: "\f07c";
+}
+.fa-arrows-v:before {
+ content: "\f07d";
+}
+.fa-arrows-h:before {
+ content: "\f07e";
+}
+.fa-bar-chart-o:before,
+.fa-bar-chart:before {
+ content: "\f080";
+}
+.fa-twitter-square:before {
+ content: "\f081";
+}
+.fa-facebook-square:before {
+ content: "\f082";
+}
+.fa-camera-retro:before {
+ content: "\f083";
+}
+.fa-key:before {
+ content: "\f084";
+}
+.fa-gears:before,
+.fa-cogs:before {
+ content: "\f085";
+}
+.fa-comments:before {
+ content: "\f086";
+}
+.fa-thumbs-o-up:before {
+ content: "\f087";
+}
+.fa-thumbs-o-down:before {
+ content: "\f088";
+}
+.fa-star-half:before {
+ content: "\f089";
+}
+.fa-heart-o:before {
+ content: "\f08a";
+}
+.fa-sign-out:before {
+ content: "\f08b";
+}
+.fa-linkedin-square:before {
+ content: "\f08c";
+}
+.fa-thumb-tack:before {
+ content: "\f08d";
+}
+.fa-external-link:before {
+ content: "\f08e";
+}
+.fa-sign-in:before {
+ content: "\f090";
+}
+.fa-trophy:before {
+ content: "\f091";
+}
+.fa-github-square:before {
+ content: "\f092";
+}
+.fa-upload:before {
+ content: "\f093";
+}
+.fa-lemon-o:before {
+ content: "\f094";
+}
+.fa-phone:before {
+ content: "\f095";
+}
+.fa-square-o:before {
+ content: "\f096";
+}
+.fa-bookmark-o:before {
+ content: "\f097";
+}
+.fa-phone-square:before {
+ content: "\f098";
+}
+.fa-twitter:before {
+ content: "\f099";
+}
+.fa-facebook-f:before,
+.fa-facebook:before {
+ content: "\f09a";
+}
+.fa-github:before {
+ content: "\f09b";
+}
+.fa-unlock:before {
+ content: "\f09c";
+}
+.fa-credit-card:before {
+ content: "\f09d";
+}
+.fa-feed:before,
+.fa-rss:before {
+ content: "\f09e";
+}
+.fa-hdd-o:before {
+ content: "\f0a0";
+}
+.fa-bullhorn:before {
+ content: "\f0a1";
+}
+.fa-bell:before {
+ content: "\f0f3";
+}
+.fa-certificate:before {
+ content: "\f0a3";
+}
+.fa-hand-o-right:before {
+ content: "\f0a4";
+}
+.fa-hand-o-left:before {
+ content: "\f0a5";
+}
+.fa-hand-o-up:before {
+ content: "\f0a6";
+}
+.fa-hand-o-down:before {
+ content: "\f0a7";
+}
+.fa-arrow-circle-left:before {
+ content: "\f0a8";
+}
+.fa-arrow-circle-right:before {
+ content: "\f0a9";
+}
+.fa-arrow-circle-up:before {
+ content: "\f0aa";
+}
+.fa-arrow-circle-down:before {
+ content: "\f0ab";
+}
+.fa-globe:before {
+ content: "\f0ac";
+}
+.fa-wrench:before {
+ content: "\f0ad";
+}
+.fa-tasks:before {
+ content: "\f0ae";
+}
+.fa-filter:before {
+ content: "\f0b0";
+}
+.fa-briefcase:before {
+ content: "\f0b1";
+}
+.fa-arrows-alt:before {
+ content: "\f0b2";
+}
+.fa-group:before,
+.fa-users:before {
+ content: "\f0c0";
+}
+.fa-chain:before,
+.fa-link:before {
+ content: "\f0c1";
+}
+.fa-cloud:before {
+ content: "\f0c2";
+}
+.fa-flask:before {
+ content: "\f0c3";
+}
+.fa-cut:before,
+.fa-scissors:before {
+ content: "\f0c4";
+}
+.fa-copy:before,
+.fa-files-o:before {
+ content: "\f0c5";
+}
+.fa-paperclip:before {
+ content: "\f0c6";
+}
+.fa-save:before,
+.fa-floppy-o:before {
+ content: "\f0c7";
+}
+.fa-square:before {
+ content: "\f0c8";
+}
+.fa-navicon:before,
+.fa-reorder:before,
+.fa-bars:before {
+ content: "\f0c9";
+}
+.fa-list-ul:before {
+ content: "\f0ca";
+}
+.fa-list-ol:before {
+ content: "\f0cb";
+}
+.fa-strikethrough:before {
+ content: "\f0cc";
+}
+.fa-underline:before {
+ content: "\f0cd";
+}
+.fa-table:before {
+ content: "\f0ce";
+}
+.fa-magic:before {
+ content: "\f0d0";
+}
+.fa-truck:before {
+ content: "\f0d1";
+}
+.fa-pinterest:before {
+ content: "\f0d2";
+}
+.fa-pinterest-square:before {
+ content: "\f0d3";
+}
+.fa-google-plus-square:before {
+ content: "\f0d4";
+}
+.fa-google-plus:before {
+ content: "\f0d5";
+}
+.fa-money:before {
+ content: "\f0d6";
+}
+.fa-caret-down:before {
+ content: "\f0d7";
+}
+.fa-caret-up:before {
+ content: "\f0d8";
+}
+.fa-caret-left:before {
+ content: "\f0d9";
+}
+.fa-caret-right:before {
+ content: "\f0da";
+}
+.fa-columns:before {
+ content: "\f0db";
+}
+.fa-unsorted:before,
+.fa-sort:before {
+ content: "\f0dc";
+}
+.fa-sort-down:before,
+.fa-sort-desc:before {
+ content: "\f0dd";
+}
+.fa-sort-up:before,
+.fa-sort-asc:before {
+ content: "\f0de";
+}
+.fa-envelope:before {
+ content: "\f0e0";
+}
+.fa-linkedin:before {
+ content: "\f0e1";
+}
+.fa-rotate-left:before,
+.fa-undo:before {
+ content: "\f0e2";
+}
+.fa-legal:before,
+.fa-gavel:before {
+ content: "\f0e3";
+}
+.fa-dashboard:before,
+.fa-tachometer:before {
+ content: "\f0e4";
+}
+.fa-comment-o:before {
+ content: "\f0e5";
+}
+.fa-comments-o:before {
+ content: "\f0e6";
+}
+.fa-flash:before,
+.fa-bolt:before {
+ content: "\f0e7";
+}
+.fa-sitemap:before {
+ content: "\f0e8";
+}
+.fa-umbrella:before {
+ content: "\f0e9";
+}
+.fa-paste:before,
+.fa-clipboard:before {
+ content: "\f0ea";
+}
+.fa-lightbulb-o:before {
+ content: "\f0eb";
+}
+.fa-exchange:before {
+ content: "\f0ec";
+}
+.fa-cloud-download:before {
+ content: "\f0ed";
+}
+.fa-cloud-upload:before {
+ content: "\f0ee";
+}
+.fa-user-md:before {
+ content: "\f0f0";
+}
+.fa-stethoscope:before {
+ content: "\f0f1";
+}
+.fa-suitcase:before {
+ content: "\f0f2";
+}
+.fa-bell-o:before {
+ content: "\f0a2";
+}
+.fa-coffee:before {
+ content: "\f0f4";
+}
+.fa-cutlery:before {
+ content: "\f0f5";
+}
+.fa-file-text-o:before {
+ content: "\f0f6";
+}
+.fa-building-o:before {
+ content: "\f0f7";
+}
+.fa-hospital-o:before {
+ content: "\f0f8";
+}
+.fa-ambulance:before {
+ content: "\f0f9";
+}
+.fa-medkit:before {
+ content: "\f0fa";
+}
+.fa-fighter-jet:before {
+ content: "\f0fb";
+}
+.fa-beer:before {
+ content: "\f0fc";
+}
+.fa-h-square:before {
+ content: "\f0fd";
+}
+.fa-plus-square:before {
+ content: "\f0fe";
+}
+.fa-angle-double-left:before {
+ content: "\f100";
+}
+.fa-angle-double-right:before {
+ content: "\f101";
+}
+.fa-angle-double-up:before {
+ content: "\f102";
+}
+.fa-angle-double-down:before {
+ content: "\f103";
+}
+.fa-angle-left:before {
+ content: "\f104";
+}
+.fa-angle-right:before {
+ content: "\f105";
+}
+.fa-angle-up:before {
+ content: "\f106";
+}
+.fa-angle-down:before {
+ content: "\f107";
+}
+.fa-desktop:before {
+ content: "\f108";
+}
+.fa-laptop:before {
+ content: "\f109";
+}
+.fa-tablet:before {
+ content: "\f10a";
+}
+.fa-mobile-phone:before,
+.fa-mobile:before {
+ content: "\f10b";
+}
+.fa-circle-o:before {
+ content: "\f10c";
+}
+.fa-quote-left:before {
+ content: "\f10d";
+}
+.fa-quote-right:before {
+ content: "\f10e";
+}
+.fa-spinner:before {
+ content: "\f110";
+}
+.fa-circle:before {
+ content: "\f111";
+}
+.fa-mail-reply:before,
+.fa-reply:before {
+ content: "\f112";
+}
+.fa-github-alt:before {
+ content: "\f113";
+}
+.fa-folder-o:before {
+ content: "\f114";
+}
+.fa-folder-open-o:before {
+ content: "\f115";
+}
+.fa-smile-o:before {
+ content: "\f118";
+}
+.fa-frown-o:before {
+ content: "\f119";
+}
+.fa-meh-o:before {
+ content: "\f11a";
+}
+.fa-gamepad:before {
+ content: "\f11b";
+}
+.fa-keyboard-o:before {
+ content: "\f11c";
+}
+.fa-flag-o:before {
+ content: "\f11d";
+}
+.fa-flag-checkered:before {
+ content: "\f11e";
+}
+.fa-terminal:before {
+ content: "\f120";
+}
+.fa-code:before {
+ content: "\f121";
+}
+.fa-mail-reply-all:before,
+.fa-reply-all:before {
+ content: "\f122";
+}
+.fa-star-half-empty:before,
+.fa-star-half-full:before,
+.fa-star-half-o:before {
+ content: "\f123";
+}
+.fa-location-arrow:before {
+ content: "\f124";
+}
+.fa-crop:before {
+ content: "\f125";
+}
+.fa-code-fork:before {
+ content: "\f126";
+}
+.fa-unlink:before,
+.fa-chain-broken:before {
+ content: "\f127";
+}
+.fa-question:before {
+ content: "\f128";
+}
+.fa-info:before {
+ content: "\f129";
+}
+.fa-exclamation:before {
+ content: "\f12a";
+}
+.fa-superscript:before {
+ content: "\f12b";
+}
+.fa-subscript:before {
+ content: "\f12c";
+}
+.fa-eraser:before {
+ content: "\f12d";
+}
+.fa-puzzle-piece:before {
+ content: "\f12e";
+}
+.fa-microphone:before {
+ content: "\f130";
+}
+.fa-microphone-slash:before {
+ content: "\f131";
+}
+.fa-shield:before {
+ content: "\f132";
+}
+.fa-calendar-o:before {
+ content: "\f133";
+}
+.fa-fire-extinguisher:before {
+ content: "\f134";
+}
+.fa-rocket:before {
+ content: "\f135";
+}
+.fa-maxcdn:before {
+ content: "\f136";
+}
+.fa-chevron-circle-left:before {
+ content: "\f137";
+}
+.fa-chevron-circle-right:before {
+ content: "\f138";
+}
+.fa-chevron-circle-up:before {
+ content: "\f139";
+}
+.fa-chevron-circle-down:before {
+ content: "\f13a";
+}
+.fa-html5:before {
+ content: "\f13b";
+}
+.fa-css3:before {
+ content: "\f13c";
+}
+.fa-anchor:before {
+ content: "\f13d";
+}
+.fa-unlock-alt:before {
+ content: "\f13e";
+}
+.fa-bullseye:before {
+ content: "\f140";
+}
+.fa-ellipsis-h:before {
+ content: "\f141";
+}
+.fa-ellipsis-v:before {
+ content: "\f142";
+}
+.fa-rss-square:before {
+ content: "\f143";
+}
+.fa-play-circle:before {
+ content: "\f144";
+}
+.fa-ticket:before {
+ content: "\f145";
+}
+.fa-minus-square:before {
+ content: "\f146";
+}
+.fa-minus-square-o:before {
+ content: "\f147";
+}
+.fa-level-up:before {
+ content: "\f148";
+}
+.fa-level-down:before {
+ content: "\f149";
+}
+.fa-check-square:before {
+ content: "\f14a";
+}
+.fa-pencil-square:before {
+ content: "\f14b";
+}
+.fa-external-link-square:before {
+ content: "\f14c";
+}
+.fa-share-square:before {
+ content: "\f14d";
+}
+.fa-compass:before {
+ content: "\f14e";
+}
+.fa-toggle-down:before,
+.fa-caret-square-o-down:before {
+ content: "\f150";
+}
+.fa-toggle-up:before,
+.fa-caret-square-o-up:before {
+ content: "\f151";
+}
+.fa-toggle-right:before,
+.fa-caret-square-o-right:before {
+ content: "\f152";
+}
+.fa-euro:before,
+.fa-eur:before {
+ content: "\f153";
+}
+.fa-gbp:before {
+ content: "\f154";
+}
+.fa-dollar:before,
+.fa-usd:before {
+ content: "\f155";
+}
+.fa-rupee:before,
+.fa-inr:before {
+ content: "\f156";
+}
+.fa-cny:before,
+.fa-rmb:before,
+.fa-yen:before,
+.fa-jpy:before {
+ content: "\f157";
+}
+.fa-ruble:before,
+.fa-rouble:before,
+.fa-rub:before {
+ content: "\f158";
+}
+.fa-won:before,
+.fa-krw:before {
+ content: "\f159";
+}
+.fa-bitcoin:before,
+.fa-btc:before {
+ content: "\f15a";
+}
+.fa-file:before {
+ content: "\f15b";
+}
+.fa-file-text:before {
+ content: "\f15c";
+}
+.fa-sort-alpha-asc:before {
+ content: "\f15d";
+}
+.fa-sort-alpha-desc:before {
+ content: "\f15e";
+}
+.fa-sort-amount-asc:before {
+ content: "\f160";
+}
+.fa-sort-amount-desc:before {
+ content: "\f161";
+}
+.fa-sort-numeric-asc:before {
+ content: "\f162";
+}
+.fa-sort-numeric-desc:before {
+ content: "\f163";
+}
+.fa-thumbs-up:before {
+ content: "\f164";
+}
+.fa-thumbs-down:before {
+ content: "\f165";
+}
+.fa-youtube-square:before {
+ content: "\f166";
+}
+.fa-youtube:before {
+ content: "\f167";
+}
+.fa-xing:before {
+ content: "\f168";
+}
+.fa-xing-square:before {
+ content: "\f169";
+}
+.fa-youtube-play:before {
+ content: "\f16a";
+}
+.fa-dropbox:before {
+ content: "\f16b";
+}
+.fa-stack-overflow:before {
+ content: "\f16c";
+}
+.fa-instagram:before {
+ content: "\f16d";
+}
+.fa-flickr:before {
+ content: "\f16e";
+}
+.fa-adn:before {
+ content: "\f170";
+}
+.fa-bitbucket:before {
+ content: "\f171";
+}
+.fa-bitbucket-square:before {
+ content: "\f172";
+}
+.fa-tumblr:before {
+ content: "\f173";
+}
+.fa-tumblr-square:before {
+ content: "\f174";
+}
+.fa-long-arrow-down:before {
+ content: "\f175";
+}
+.fa-long-arrow-up:before {
+ content: "\f176";
+}
+.fa-long-arrow-left:before {
+ content: "\f177";
+}
+.fa-long-arrow-right:before {
+ content: "\f178";
+}
+.fa-apple:before {
+ content: "\f179";
+}
+.fa-windows:before {
+ content: "\f17a";
+}
+.fa-android:before {
+ content: "\f17b";
+}
+.fa-linux:before {
+ content: "\f17c";
+}
+.fa-dribbble:before {
+ content: "\f17d";
+}
+.fa-skype:before {
+ content: "\f17e";
+}
+.fa-foursquare:before {
+ content: "\f180";
+}
+.fa-trello:before {
+ content: "\f181";
+}
+.fa-female:before {
+ content: "\f182";
+}
+.fa-male:before {
+ content: "\f183";
+}
+.fa-gittip:before,
+.fa-gratipay:before {
+ content: "\f184";
+}
+.fa-sun-o:before {
+ content: "\f185";
+}
+.fa-moon-o:before {
+ content: "\f186";
+}
+.fa-archive:before {
+ content: "\f187";
+}
+.fa-bug:before {
+ content: "\f188";
+}
+.fa-vk:before {
+ content: "\f189";
+}
+.fa-weibo:before {
+ content: "\f18a";
+}
+.fa-renren:before {
+ content: "\f18b";
+}
+.fa-pagelines:before {
+ content: "\f18c";
+}
+.fa-stack-exchange:before {
+ content: "\f18d";
+}
+.fa-arrow-circle-o-right:before {
+ content: "\f18e";
+}
+.fa-arrow-circle-o-left:before {
+ content: "\f190";
+}
+.fa-toggle-left:before,
+.fa-caret-square-o-left:before {
+ content: "\f191";
+}
+.fa-dot-circle-o:before {
+ content: "\f192";
+}
+.fa-wheelchair:before {
+ content: "\f193";
+}
+.fa-vimeo-square:before {
+ content: "\f194";
+}
+.fa-turkish-lira:before,
+.fa-try:before {
+ content: "\f195";
+}
+.fa-plus-square-o:before {
+ content: "\f196";
+}
+.fa-space-shuttle:before {
+ content: "\f197";
+}
+.fa-slack:before {
+ content: "\f198";
+}
+.fa-envelope-square:before {
+ content: "\f199";
+}
+.fa-wordpress:before {
+ content: "\f19a";
+}
+.fa-openid:before {
+ content: "\f19b";
+}
+.fa-institution:before,
+.fa-bank:before,
+.fa-university:before {
+ content: "\f19c";
+}
+.fa-mortar-board:before,
+.fa-graduation-cap:before {
+ content: "\f19d";
+}
+.fa-yahoo:before {
+ content: "\f19e";
+}
+.fa-google:before {
+ content: "\f1a0";
+}
+.fa-reddit:before {
+ content: "\f1a1";
+}
+.fa-reddit-square:before {
+ content: "\f1a2";
+}
+.fa-stumbleupon-circle:before {
+ content: "\f1a3";
+}
+.fa-stumbleupon:before {
+ content: "\f1a4";
+}
+.fa-delicious:before {
+ content: "\f1a5";
+}
+.fa-digg:before {
+ content: "\f1a6";
+}
+.fa-pied-piper:before {
+ content: "\f1a7";
+}
+.fa-pied-piper-alt:before {
+ content: "\f1a8";
+}
+.fa-drupal:before {
+ content: "\f1a9";
+}
+.fa-joomla:before {
+ content: "\f1aa";
+}
+.fa-language:before {
+ content: "\f1ab";
+}
+.fa-fax:before {
+ content: "\f1ac";
+}
+.fa-building:before {
+ content: "\f1ad";
+}
+.fa-child:before {
+ content: "\f1ae";
+}
+.fa-paw:before {
+ content: "\f1b0";
+}
+.fa-spoon:before {
+ content: "\f1b1";
+}
+.fa-cube:before {
+ content: "\f1b2";
+}
+.fa-cubes:before {
+ content: "\f1b3";
+}
+.fa-behance:before {
+ content: "\f1b4";
+}
+.fa-behance-square:before {
+ content: "\f1b5";
+}
+.fa-steam:before {
+ content: "\f1b6";
+}
+.fa-steam-square:before {
+ content: "\f1b7";
+}
+.fa-recycle:before {
+ content: "\f1b8";
+}
+.fa-automobile:before,
+.fa-car:before {
+ content: "\f1b9";
+}
+.fa-cab:before,
+.fa-taxi:before {
+ content: "\f1ba";
+}
+.fa-tree:before {
+ content: "\f1bb";
+}
+.fa-spotify:before {
+ content: "\f1bc";
+}
+.fa-deviantart:before {
+ content: "\f1bd";
+}
+.fa-soundcloud:before {
+ content: "\f1be";
+}
+.fa-database:before {
+ content: "\f1c0";
+}
+.fa-file-pdf-o:before {
+ content: "\f1c1";
+}
+.fa-file-word-o:before {
+ content: "\f1c2";
+}
+.fa-file-excel-o:before {
+ content: "\f1c3";
+}
+.fa-file-powerpoint-o:before {
+ content: "\f1c4";
+}
+.fa-file-photo-o:before,
+.fa-file-picture-o:before,
+.fa-file-image-o:before {
+ content: "\f1c5";
+}
+.fa-file-zip-o:before,
+.fa-file-archive-o:before {
+ content: "\f1c6";
+}
+.fa-file-sound-o:before,
+.fa-file-audio-o:before {
+ content: "\f1c7";
+}
+.fa-file-movie-o:before,
+.fa-file-video-o:before {
+ content: "\f1c8";
+}
+.fa-file-code-o:before {
+ content: "\f1c9";
+}
+.fa-vine:before {
+ content: "\f1ca";
+}
+.fa-codepen:before {
+ content: "\f1cb";
+}
+.fa-jsfiddle:before {
+ content: "\f1cc";
+}
+.fa-life-bouy:before,
+.fa-life-buoy:before,
+.fa-life-saver:before,
+.fa-support:before,
+.fa-life-ring:before {
+ content: "\f1cd";
+}
+.fa-circle-o-notch:before {
+ content: "\f1ce";
+}
+.fa-ra:before,
+.fa-rebel:before {
+ content: "\f1d0";
+}
+.fa-ge:before,
+.fa-empire:before {
+ content: "\f1d1";
+}
+.fa-git-square:before {
+ content: "\f1d2";
+}
+.fa-git:before {
+ content: "\f1d3";
+}
+.fa-y-combinator-square:before,
+.fa-yc-square:before,
+.fa-hacker-news:before {
+ content: "\f1d4";
+}
+.fa-tencent-weibo:before {
+ content: "\f1d5";
+}
+.fa-qq:before {
+ content: "\f1d6";
+}
+.fa-wechat:before,
+.fa-weixin:before {
+ content: "\f1d7";
+}
+.fa-send:before,
+.fa-paper-plane:before {
+ content: "\f1d8";
+}
+.fa-send-o:before,
+.fa-paper-plane-o:before {
+ content: "\f1d9";
+}
+.fa-history:before {
+ content: "\f1da";
+}
+.fa-circle-thin:before {
+ content: "\f1db";
+}
+.fa-header:before {
+ content: "\f1dc";
+}
+.fa-paragraph:before {
+ content: "\f1dd";
+}
+.fa-sliders:before {
+ content: "\f1de";
+}
+.fa-share-alt:before {
+ content: "\f1e0";
+}
+.fa-share-alt-square:before {
+ content: "\f1e1";
+}
+.fa-bomb:before {
+ content: "\f1e2";
+}
+.fa-soccer-ball-o:before,
+.fa-futbol-o:before {
+ content: "\f1e3";
+}
+.fa-tty:before {
+ content: "\f1e4";
+}
+.fa-binoculars:before {
+ content: "\f1e5";
+}
+.fa-plug:before {
+ content: "\f1e6";
+}
+.fa-slideshare:before {
+ content: "\f1e7";
+}
+.fa-twitch:before {
+ content: "\f1e8";
+}
+.fa-yelp:before {
+ content: "\f1e9";
+}
+.fa-newspaper-o:before {
+ content: "\f1ea";
+}
+.fa-wifi:before {
+ content: "\f1eb";
+}
+.fa-calculator:before {
+ content: "\f1ec";
+}
+.fa-paypal:before {
+ content: "\f1ed";
+}
+.fa-google-wallet:before {
+ content: "\f1ee";
+}
+.fa-cc-visa:before {
+ content: "\f1f0";
+}
+.fa-cc-mastercard:before {
+ content: "\f1f1";
+}
+.fa-cc-discover:before {
+ content: "\f1f2";
+}
+.fa-cc-amex:before {
+ content: "\f1f3";
+}
+.fa-cc-paypal:before {
+ content: "\f1f4";
+}
+.fa-cc-stripe:before {
+ content: "\f1f5";
+}
+.fa-bell-slash:before {
+ content: "\f1f6";
+}
+.fa-bell-slash-o:before {
+ content: "\f1f7";
+}
+.fa-trash:before {
+ content: "\f1f8";
+}
+.fa-copyright:before {
+ content: "\f1f9";
+}
+.fa-at:before {
+ content: "\f1fa";
+}
+.fa-eyedropper:before {
+ content: "\f1fb";
+}
+.fa-paint-brush:before {
+ content: "\f1fc";
+}
+.fa-birthday-cake:before {
+ content: "\f1fd";
+}
+.fa-area-chart:before {
+ content: "\f1fe";
+}
+.fa-pie-chart:before {
+ content: "\f200";
+}
+.fa-line-chart:before {
+ content: "\f201";
+}
+.fa-lastfm:before {
+ content: "\f202";
+}
+.fa-lastfm-square:before {
+ content: "\f203";
+}
+.fa-toggle-off:before {
+ content: "\f204";
+}
+.fa-toggle-on:before {
+ content: "\f205";
+}
+.fa-bicycle:before {
+ content: "\f206";
+}
+.fa-bus:before {
+ content: "\f207";
+}
+.fa-ioxhost:before {
+ content: "\f208";
+}
+.fa-angellist:before {
+ content: "\f209";
+}
+.fa-cc:before {
+ content: "\f20a";
+}
+.fa-shekel:before,
+.fa-sheqel:before,
+.fa-ils:before {
+ content: "\f20b";
+}
+.fa-meanpath:before {
+ content: "\f20c";
+}
+.fa-buysellads:before {
+ content: "\f20d";
+}
+.fa-connectdevelop:before {
+ content: "\f20e";
+}
+.fa-dashcube:before {
+ content: "\f210";
+}
+.fa-forumbee:before {
+ content: "\f211";
+}
+.fa-leanpub:before {
+ content: "\f212";
+}
+.fa-sellsy:before {
+ content: "\f213";
+}
+.fa-shirtsinbulk:before {
+ content: "\f214";
+}
+.fa-simplybuilt:before {
+ content: "\f215";
+}
+.fa-skyatlas:before {
+ content: "\f216";
+}
+.fa-cart-plus:before {
+ content: "\f217";
+}
+.fa-cart-arrow-down:before {
+ content: "\f218";
+}
+.fa-diamond:before {
+ content: "\f219";
+}
+.fa-ship:before {
+ content: "\f21a";
+}
+.fa-user-secret:before {
+ content: "\f21b";
+}
+.fa-motorcycle:before {
+ content: "\f21c";
+}
+.fa-street-view:before {
+ content: "\f21d";
+}
+.fa-heartbeat:before {
+ content: "\f21e";
+}
+.fa-venus:before {
+ content: "\f221";
+}
+.fa-mars:before {
+ content: "\f222";
+}
+.fa-mercury:before {
+ content: "\f223";
+}
+.fa-intersex:before,
+.fa-transgender:before {
+ content: "\f224";
+}
+.fa-transgender-alt:before {
+ content: "\f225";
+}
+.fa-venus-double:before {
+ content: "\f226";
+}
+.fa-mars-double:before {
+ content: "\f227";
+}
+.fa-venus-mars:before {
+ content: "\f228";
+}
+.fa-mars-stroke:before {
+ content: "\f229";
+}
+.fa-mars-stroke-v:before {
+ content: "\f22a";
+}
+.fa-mars-stroke-h:before {
+ content: "\f22b";
+}
+.fa-neuter:before {
+ content: "\f22c";
+}
+.fa-genderless:before {
+ content: "\f22d";
+}
+.fa-facebook-official:before {
+ content: "\f230";
+}
+.fa-pinterest-p:before {
+ content: "\f231";
+}
+.fa-whatsapp:before {
+ content: "\f232";
+}
+.fa-server:before {
+ content: "\f233";
+}
+.fa-user-plus:before {
+ content: "\f234";
+}
+.fa-user-times:before {
+ content: "\f235";
+}
+.fa-hotel:before,
+.fa-bed:before {
+ content: "\f236";
+}
+.fa-viacoin:before {
+ content: "\f237";
+}
+.fa-train:before {
+ content: "\f238";
+}
+.fa-subway:before {
+ content: "\f239";
+}
+.fa-medium:before {
+ content: "\f23a";
+}
+.fa-yc:before,
+.fa-y-combinator:before {
+ content: "\f23b";
+}
+.fa-optin-monster:before {
+ content: "\f23c";
+}
+.fa-opencart:before {
+ content: "\f23d";
+}
+.fa-expeditedssl:before {
+ content: "\f23e";
+}
+.fa-battery-4:before,
+.fa-battery-full:before {
+ content: "\f240";
+}
+.fa-battery-3:before,
+.fa-battery-three-quarters:before {
+ content: "\f241";
+}
+.fa-battery-2:before,
+.fa-battery-half:before {
+ content: "\f242";
+}
+.fa-battery-1:before,
+.fa-battery-quarter:before {
+ content: "\f243";
+}
+.fa-battery-0:before,
+.fa-battery-empty:before {
+ content: "\f244";
+}
+.fa-mouse-pointer:before {
+ content: "\f245";
+}
+.fa-i-cursor:before {
+ content: "\f246";
+}
+.fa-object-group:before {
+ content: "\f247";
+}
+.fa-object-ungroup:before {
+ content: "\f248";
+}
+.fa-sticky-note:before {
+ content: "\f249";
+}
+.fa-sticky-note-o:before {
+ content: "\f24a";
+}
+.fa-cc-jcb:before {
+ content: "\f24b";
+}
+.fa-cc-diners-club:before {
+ content: "\f24c";
+}
+.fa-clone:before {
+ content: "\f24d";
+}
+.fa-balance-scale:before {
+ content: "\f24e";
+}
+.fa-hourglass-o:before {
+ content: "\f250";
+}
+.fa-hourglass-1:before,
+.fa-hourglass-start:before {
+ content: "\f251";
+}
+.fa-hourglass-2:before,
+.fa-hourglass-half:before {
+ content: "\f252";
+}
+.fa-hourglass-3:before,
+.fa-hourglass-end:before {
+ content: "\f253";
+}
+.fa-hourglass:before {
+ content: "\f254";
+}
+.fa-hand-grab-o:before,
+.fa-hand-rock-o:before {
+ content: "\f255";
+}
+.fa-hand-stop-o:before,
+.fa-hand-paper-o:before {
+ content: "\f256";
+}
+.fa-hand-scissors-o:before {
+ content: "\f257";
+}
+.fa-hand-lizard-o:before {
+ content: "\f258";
+}
+.fa-hand-spock-o:before {
+ content: "\f259";
+}
+.fa-hand-pointer-o:before {
+ content: "\f25a";
+}
+.fa-hand-peace-o:before {
+ content: "\f25b";
+}
+.fa-trademark:before {
+ content: "\f25c";
+}
+.fa-registered:before {
+ content: "\f25d";
+}
+.fa-creative-commons:before {
+ content: "\f25e";
+}
+.fa-gg:before {
+ content: "\f260";
+}
+.fa-gg-circle:before {
+ content: "\f261";
+}
+.fa-tripadvisor:before {
+ content: "\f262";
+}
+.fa-odnoklassniki:before {
+ content: "\f263";
+}
+.fa-odnoklassniki-square:before {
+ content: "\f264";
+}
+.fa-get-pocket:before {
+ content: "\f265";
+}
+.fa-wikipedia-w:before {
+ content: "\f266";
+}
+.fa-safari:before {
+ content: "\f267";
+}
+.fa-chrome:before {
+ content: "\f268";
+}
+.fa-firefox:before {
+ content: "\f269";
+}
+.fa-opera:before {
+ content: "\f26a";
+}
+.fa-internet-explorer:before {
+ content: "\f26b";
+}
+.fa-tv:before,
+.fa-television:before {
+ content: "\f26c";
+}
+.fa-contao:before {
+ content: "\f26d";
+}
+.fa-500px:before {
+ content: "\f26e";
+}
+.fa-amazon:before {
+ content: "\f270";
+}
+.fa-calendar-plus-o:before {
+ content: "\f271";
+}
+.fa-calendar-minus-o:before {
+ content: "\f272";
+}
+.fa-calendar-times-o:before {
+ content: "\f273";
+}
+.fa-calendar-check-o:before {
+ content: "\f274";
+}
+.fa-industry:before {
+ content: "\f275";
+}
+.fa-map-pin:before {
+ content: "\f276";
+}
+.fa-map-signs:before {
+ content: "\f277";
+}
+.fa-map-o:before {
+ content: "\f278";
+}
+.fa-map:before {
+ content: "\f279";
+}
+.fa-commenting:before {
+ content: "\f27a";
+}
+.fa-commenting-o:before {
+ content: "\f27b";
+}
+.fa-houzz:before {
+ content: "\f27c";
+}
+.fa-vimeo:before {
+ content: "\f27d";
+}
+.fa-black-tie:before {
+ content: "\f27e";
+}
+.fa-fonticons:before {
+ content: "\f280";
+}
+.fa-reddit-alien:before {
+ content: "\f281";
+}
+.fa-edge:before {
+ content: "\f282";
+}
+.fa-credit-card-alt:before {
+ content: "\f283";
+}
+.fa-codiepie:before {
+ content: "\f284";
+}
+.fa-modx:before {
+ content: "\f285";
+}
+.fa-fort-awesome:before {
+ content: "\f286";
+}
+.fa-usb:before {
+ content: "\f287";
+}
+.fa-product-hunt:before {
+ content: "\f288";
+}
+.fa-mixcloud:before {
+ content: "\f289";
+}
+.fa-scribd:before {
+ content: "\f28a";
+}
+.fa-pause-circle:before {
+ content: "\f28b";
+}
+.fa-pause-circle-o:before {
+ content: "\f28c";
+}
+.fa-stop-circle:before {
+ content: "\f28d";
+}
+.fa-stop-circle-o:before {
+ content: "\f28e";
+}
+.fa-shopping-bag:before {
+ content: "\f290";
+}
+.fa-shopping-basket:before {
+ content: "\f291";
+}
+.fa-hashtag:before {
+ content: "\f292";
+}
+.fa-bluetooth:before {
+ content: "\f293";
+}
+.fa-bluetooth-b:before {
+ content: "\f294";
+}
+.fa-percent:before {
+ content: "\f295";
+}
diff --git a/static/css/gameboy.css b/static/css/gameboy.css
deleted file mode 100644
index 766ff69e..00000000
--- a/static/css/gameboy.css
+++ /dev/null
@@ -1,6921 +0,0 @@
-body {
- color: white;
- background-color: #000; /*Default bg, similar to the background's base color*/
- background-image: url("https://i.pinimg.com/originals/97/00/63/9700632b137d620cb3d67315bff3b9c5.jpg");
- background-position: right bottom; /*Positioning*/
- background-repeat: no-repeat; /*Prevent showing multiple background images*/
-}
-
-#game-screen {
- width: 100%;
- height: 100%;
- display: none;
- background-color: #222222;
-}
-
-#menu-screen {
- display:none;
- width: 100%;
- height: 100%;
- background-image: url('https://data.whicdn.com/images/275493408/original.gif');
- background-size: cover;
-}
-
-#menu-screen #box-art {
- position: absolute;
- width:55%;
- height: 85%;
- top: 5px;
- left: 50%;
- -webkit-transform: translate(-50%, -0%);
- transform: translate(-50%, -0%);
- border: 1px solid #ddd;
-}
-
-
-@font-face {
- font-family: 'YourFontName'; /*a name to be used later*/
- src: url('/static/fonts/8-Bit-Madness.ttf'); /*URL to font*/
-}
-
-#menu-screen #title {
- position: absolute;
- width:100%;
- height: 10%;
- bottom: 0px;
- font-family: 'YourFontName';
- overflow: hidden;
-}
-
-#menu-screen #title p {
- position: absolute;
- width: 100%;
- height: 100%;
- margin: 0;
- text-align: center;
- /* Starting position */
- -moz-transform:translateX(50%);
- -webkit-transform:translateX(50%);
- transform:translateX(50%);
- /* Apply animation to this element */
- -moz-animation: horizontally 5s linear infinite alternate;
- -webkit-animation: horizontally 5s linear infinite alternate;
- animation: horizontally 5s linear infinite alternate;
-}
-/* Move it (define the animation) */
-@-moz-keyframes horizontally {
- 0% { -moz-transform: translateX(50%); }
- 100% { -moz-transform: translateX(-50%); }
-}
-@-webkit-keyframes horizontally {
- 0% { -webkit-transform: translateX(50%); }
- 100% { -webkit-transform: translateX(-50%); }
-}
-@keyframes horizontally {
- 0% {
- -moz-transform: translateX(50%); /* Browser bug fix */
- -webkit-transform: translateX(50%); /* Browser bug fix */
- transform: translateX(50%);
- }
- 100% {
- -moz-transform: translateX(-50%); /* Browser bug fix */
- -webkit-transform: translateX(-50%); /* Browser bug fix */
- transform: translateX(-50%);
- }
-}
-
-
-#menu-screen .arrow {
- position: absolute;
- width:20px;
- height: 20px;
- right: 10px;
- top: 50%;
- -webkit-transform: translate(0%, -50%);
- transform: translate(0%, -50%);
-
- -webkit-animation: breathing 1s infinite normal;
- animation: breathing 1s infinite normal;
-}
-
-#menu-screen .left {
- left: 10px;
- -webkit-transform: scaleX(-1) translate(0%, -50%);
- transform: scaleX(-1) translate(0%, -50%);
-
- -webkit-animation: breathing 1s infinite normal;
- animation: breathing 1s infinite normal;
-}
-
-
-@-webkit-keyframes breathing {
- 0% {
- opacity: 1;
- }
-
- 25% {
- opacity: 0.5;
- }
-
- 50% {
- opacity: 0;
- }
-
- 75% {
- opacity: 0.5;
- }
-
- 100% {
- opacity: 1;
- }
-}
-
-@keyframes breathing {
- 0% {
- opacity: 1;
- }
-
- 25% {
- opacity: 0.5;
- }
-
- 50% {
- opacity: 0;
- }
-
- 75% {
- opacity: 0.5;
- }
-
- 100% {
- opacity: 1;
- }
-}
-
-
-
-@import url(https://fonts.googleapis.com/css?family=Asap:400italic,700italic);
-@import url(https://fonts.googleapis.com/css?family=Oxygen:700,300);
-* {
- box-sizing: border-box;
-}
-html {
- background-color: #f0f0f0;
- color: #222222;
-}
-body {
- margin: 0;
-}
-#gameboy {
- position: relative;
- width: 340px;
- height: 570px;
- /*overflow: hidden;*/
- top: 17%;
- margin: auto;
-
- line-height: 1;
- border-radius: 15px 15px 170px 170px / 15px 15px 35px 35px;
- -webkit-transform: translateZ(0) scale(1.5);
- transform: translateZ(0) scale(1.5);
- -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
-}
-#gameboy:hover div {
- opacity: 0.7;
-}
-#gameboy:hover div[class="circuit"]::before,
-#gameboy:hover div[class="circuit"]::after {
- opacity: 0.5;
-}
-#gameboy:hover div[id^="screen-"][id$="-text"] {
- opacity: 0;
-}
-#gameboy:hover div:not([id="speaker-holes"]):not([id^="cover-"]):not([id="power"]):not([class="capacitors"]):not([id$="-text"]):not([id="canvas"]):not([class="circuit"]):not([id="transistors"]):not([id="joystick-pad"]):not([id="control"]):not([id="start-select-button"]) {
- box-shadow: 0 0 0 2px #222222;
-}
-#gameboy:hover #cover-vertical,
-#gameboy:hover #cover-horizontal {
- opacity: 0.1;
-}
-#gameboy:hover #gloss {
- opacity: 0.2;
-}
-#gameboy.transparent:hover #cover-vertical,
-#gameboy.transparent:hover #cover-horizontal {
- opacity: 0.4;
-}
-#gameboy.transparent:hover #gloss {
- opacity: 0.6;
-}
-@-moz-keyframes canvas {
- 0% {
- width: 0;
- height: 120px;
- border-radius: 15px 15px 0 0;
- }
- 3% {
- width: 340px;
- height: 120px;
- }
- 5.5% {
- height: 520px;
- }
- 6.0% {
- border-radius: 15px 15px 0 0;
- }
- 7.0% {
- height: 570px;
- border-radius: 15px 15px 170px 170px / 15px 15px 35px 35px;
- }
-}
-@-webkit-keyframes canvas {
- 0% {
- width: 0;
- height: 120px;
- border-radius: 15px 15px 0 0;
- }
- 3% {
- width: 340px;
- height: 120px;
- }
- 5.5% {
- height: 520px;
- }
- 6.0% {
- border-radius: 15px 15px 0 0;
- }
- 7.0% {
- height: 570px;
- border-radius: 15px 15px 170px 170px / 15px 15px 35px 35px;
- }
-}
-@keyframes canvas {
- 0% {
- width: 0;
- height: 120px;
- border-radius: 15px 15px 0 0;
- }
- 3% {
- width: 340px;
- height: 120px;
- }
- 5.5% {
- height: 520px;
- }
- 6.0% {
- border-radius: 15px 15px 0 0;
- }
- 7.0% {
- height: 570px;
- border-radius: 15px 15px 170px 170px / 15px 15px 35px 35px;
- }
-}
-#canvas {
- position: absolute;
- width: 340px;
- height: 570px;
- top: 0;
- right: 0;
- border-radius: 15px 15px 170px 170px / 15px 15px 35px 35px;
- background-color: #b0b0b0;
- -webkit-animation: canvas 8s linear;
- animation: canvas 8s linear;
- z-index: 1;
-}
-@-moz-keyframes border {
- 0% {
- border-width: 0;
- border-color: transparent;
- width: 0;
- height: 0;
- }
- 1% {
- border-width: 4px;
- border-top-color: #808080;
- width: 0;
- height: 10px;
- }
- 3% {
- width: 318px;
- border-left-color: transparent;
- height: 10px;
- }
- 3.3% {
- width: 318px;
- border-left-color: #808080;
- height: 10px;
- }
- 7.0% {
- border-radius: 15px 15px 0 0;
- }
- 7.3% {
- height: 526px;
- border-radius: 15px 15px 170px 170px / 15px 15px 35px 35px;
- }
- 7.4% {
- border-bottom-color: transparent;
- }
- 7.5% {
- border-bottom-color: #808080;
- }
- 8.9% {
- border-right-color: transparent;
- }
- 9% {
- border-right-color: #808080;
- }
-}
-@-webkit-keyframes border {
- 0% {
- border-width: 0;
- border-color: transparent;
- width: 0;
- height: 0;
- }
- 1% {
- border-width: 4px;
- border-top-color: #808080;
- width: 0;
- height: 10px;
- }
- 3% {
- width: 318px;
- border-left-color: transparent;
- height: 10px;
- }
- 3.3% {
- width: 318px;
- border-left-color: #808080;
- height: 10px;
- }
- 7.0% {
- border-radius: 15px 15px 0 0;
- }
- 7.3% {
- height: 526px;
- border-radius: 15px 15px 170px 170px / 15px 15px 35px 35px;
- }
- 7.4% {
- border-bottom-color: transparent;
- }
- 7.5% {
- border-bottom-color: #808080;
- }
- 8.9% {
- border-right-color: transparent;
- }
- 9% {
- border-right-color: #808080;
- }
-}
-@keyframes border {
- 0% {
- border-width: 0;
- border-color: transparent;
- width: 0;
- height: 0;
- }
- 1% {
- border-width: 4px;
- border-top-color: #808080;
- width: 0;
- height: 10px;
- }
- 3% {
- width: 318px;
- border-left-color: transparent;
- height: 10px;
- }
- 3.3% {
- width: 318px;
- border-left-color: #808080;
- height: 10px;
- }
- 7.0% {
- border-radius: 15px 15px 0 0;
- }
- 7.3% {
- height: 526px;
- border-radius: 15px 15px 170px 170px / 15px 15px 35px 35px;
- }
- 7.4% {
- border-bottom-color: transparent;
- }
- 7.5% {
- border-bottom-color: #808080;
- }
- 8.9% {
- border-right-color: transparent;
- }
- 9% {
- border-right-color: #808080;
- }
-}
-#border {
- position: absolute;
- width: 318px;
- height: 526px;
- right: 11px;
- top: 20px;
- border: 4px #808080 solid;
- border-radius: 15px 15px 170px 170px / 15px 15px 35px 35px;
- z-index: 2;
- -webkit-animation: border 8s linear;
- animation: border 8s linear;
-}
-#border-top,
-#border-bottom {
- position: absolute;
- background-color: #b0b0b0;
- width: 0;
- height: 8px;
- z-index: 3;
-}
-#border-left,
-#border-right {
- position: absolute;
- background-color: #b0b0b0;
- height: 0;
- z-index: 3;
-}
-@-moz-keyframes border-top {
- 0.5% {
- width: 0;
- }
- 3.0% {
- width: 318px;
- right: 11px;
- }
- 3.5% {
- width: 318px;
- right: 11px;
- }
- 5% {
- width: 0;
- right: 309px;
- }
-}
-@-webkit-keyframes border-top {
- 0.5% {
- width: 0;
- }
- 3.0% {
- width: 318px;
- right: 11px;
- }
- 3.5% {
- width: 318px;
- right: 11px;
- }
- 5% {
- width: 0;
- right: 309px;
- }
-}
-@keyframes border-top {
- 0.5% {
- width: 0;
- }
- 3.0% {
- width: 318px;
- right: 11px;
- }
- 3.5% {
- width: 318px;
- right: 11px;
- }
- 5% {
- width: 0;
- right: 309px;
- }
-}
-#border-top {
- top: 20px;
- right: 11px;
- -webkit-animation: border-top 8s linear;
- animation: border-top 8s linear;
-}
-@-moz-keyframes border-left {
- 0% {
- height: 0;
- }
- 3% {
- height: 0;
- }
- 5% {
- height: 326px;
- top: 20px;
- }
- 7.5% {
- height: 0;
- top: 546px;
- }
-}
-@-webkit-keyframes border-left {
- 0% {
- height: 0;
- }
- 3% {
- height: 0;
- }
- 5% {
- height: 326px;
- top: 20px;
- }
- 7.5% {
- height: 0;
- top: 546px;
- }
-}
-@keyframes border-left {
- 0% {
- height: 0;
- }
- 3% {
- height: 0;
- }
- 5% {
- height: 326px;
- top: 20px;
- }
- 7.5% {
- height: 0;
- top: 546px;
- }
-}
-#border-left {
- left: 11px;
- top: 20px;
- width: 20px;
- -webkit-animation: border-left 8s linear;
- animation: border-left 8s linear;
-}
-@-moz-keyframes border-bottom {
- 0% {
- width: 0;
- }
- 6.5% {
- width: 0;
- }
- 7.4% {
- width: 318px;
- left: 11px;
- }
- 9.0% {
- width: 0;
- left: 329px;
- }
-}
-@-webkit-keyframes border-bottom {
- 0% {
- width: 0;
- }
- 6.5% {
- width: 0;
- }
- 7.4% {
- width: 318px;
- left: 11px;
- }
- 9.0% {
- width: 0;
- left: 329px;
- }
-}
-@keyframes border-bottom {
- 0% {
- width: 0;
- }
- 6.5% {
- width: 0;
- }
- 7.4% {
- width: 318px;
- left: 11px;
- }
- 9.0% {
- width: 0;
- left: 329px;
- }
-}
-#border-bottom {
- top: 516px;
- left: 11px;
- height: 30px;
- -webkit-animation: border-bottom 8s linear;
- animation: border-bottom 8s linear;
-}
-@-moz-keyframes border-right {
- 0% {
- height: 0;
- }
- 8% {
- height: 0;
- }
- 8.5% {
- height: 496px;
- top: 26px;
- }
- 9% {
- height: 496px;
- }
- 11.5% {
- height: 0;
- top: 26px;
- }
- 100% {
- top: 546px;
- }
-}
-@-webkit-keyframes border-right {
- 0% {
- height: 0;
- }
- 8% {
- height: 0;
- }
- 8.5% {
- height: 496px;
- top: 26px;
- }
- 9% {
- height: 496px;
- }
- 11.5% {
- height: 0;
- top: 26px;
- }
- 100% {
- top: 546px;
- }
-}
-@keyframes border-right {
- 0% {
- height: 0;
- }
- 8% {
- height: 0;
- }
- 8.5% {
- height: 496px;
- top: 26px;
- }
- 9% {
- height: 496px;
- }
- 11.5% {
- height: 0;
- top: 26px;
- }
- 100% {
- top: 546px;
- }
-}
-#border-right {
- right: 11px;
- top: 26px;
- width: 8px;
- -webkit-animation: border-right 8s linear;
- animation: border-right 8s linear;
-}
-.screw {
- border-radius: 100%;
- background-color: #222222;
- z-index: 4;
- position: absolute;
-}
-.screw.small {
- width: 18px;
- height: 18px;
- top: 34px;
-}
-.screw.large {
- width: 20px;
- height: 20px;
- top: 235px;
-}
-@-moz-keyframes screw-small-right {
- 0% {
- width: 0;
- height: 0;
- right: 34px;
- top: 43px;
- }
- 2.5% {
- width: 0;
- height: 0;
- right: 34px;
- top: 43px;
- }
- 5.5% {
- width: 18px;
- height: 18px;
- right: 25px;
- top: 34px;
- }
-}
-@-webkit-keyframes screw-small-right {
- 0% {
- width: 0;
- height: 0;
- right: 34px;
- top: 43px;
- }
- 2.5% {
- width: 0;
- height: 0;
- right: 34px;
- top: 43px;
- }
- 5.5% {
- width: 18px;
- height: 18px;
- right: 25px;
- top: 34px;
- }
-}
-@keyframes screw-small-right {
- 0% {
- width: 0;
- height: 0;
- right: 34px;
- top: 43px;
- }
- 2.5% {
- width: 0;
- height: 0;
- right: 34px;
- top: 43px;
- }
- 5.5% {
- width: 18px;
- height: 18px;
- right: 25px;
- top: 34px;
- }
-}
-#screw-small-right {
- right: 25px;
- -webkit-animation: screw-small-right 8s linear;
- animation: screw-small-right 8s linear;
-}
-@-moz-keyframes screw-small-left {
- 0% {
- width: 0;
- height: 0;
- left: 34px;
- top: 43px;
- }
- 3% {
- width: 0;
- height: 0;
- left: 34px;
- top: 43px;
- }
- 6% {
- width: 18px;
- height: 18px;
- left: 25px;
- top: 34px;
- }
-}
-@-webkit-keyframes screw-small-left {
- 0% {
- width: 0;
- height: 0;
- left: 34px;
- top: 43px;
- }
- 3% {
- width: 0;
- height: 0;
- left: 34px;
- top: 43px;
- }
- 6% {
- width: 18px;
- height: 18px;
- left: 25px;
- top: 34px;
- }
-}
-@keyframes screw-small-left {
- 0% {
- width: 0;
- height: 0;
- left: 34px;
- top: 43px;
- }
- 3% {
- width: 0;
- height: 0;
- left: 34px;
- top: 43px;
- }
- 6% {
- width: 18px;
- height: 18px;
- left: 25px;
- top: 34px;
- }
-}
-#screw-small-left {
- left: 25px;
- -webkit-animation: screw-small-left 8s linear;
- animation: screw-small-left 8s linear;
-}
-@-moz-keyframes screw-large-right {
- 0% {
- width: 0;
- height: 0;
- right: 13px;
- top: 245px;
- }
- 5.5% {
- width: 0;
- height: 0;
- right: 13px;
- top: 245px;
- }
- 8.5% {
- width: 20px;
- height: 20px;
- right: 3px;
- top: 235px;
- }
-}
-@-webkit-keyframes screw-large-right {
- 0% {
- width: 0;
- height: 0;
- right: 13px;
- top: 245px;
- }
- 5.5% {
- width: 0;
- height: 0;
- right: 13px;
- top: 245px;
- }
- 8.5% {
- width: 20px;
- height: 20px;
- right: 3px;
- top: 235px;
- }
-}
-@keyframes screw-large-right {
- 0% {
- width: 0;
- height: 0;
- right: 13px;
- top: 245px;
- }
- 5.5% {
- width: 0;
- height: 0;
- right: 13px;
- top: 245px;
- }
- 8.5% {
- width: 20px;
- height: 20px;
- right: 3px;
- top: 235px;
- }
-}
-#screw-large-right {
- right: 3px;
- -webkit-animation: screw-large-right 8s linear;
- animation: screw-large-right 8s linear;
-}
-@-moz-keyframes screw-large-left {
- 0% {
- width: 0;
- height: 0;
- left: 13px;
- top: 245px;
- }
- 6.5% {
- width: 0;
- height: 0;
- left: 13px;
- top: 245px;
- }
- 9.5% {
- width: 20px;
- height: 20px;
- left: 3px;
- top: 235px;
- }
-}
-@-webkit-keyframes screw-large-left {
- 0% {
- width: 0;
- height: 0;
- left: 13px;
- top: 245px;
- }
- 6.5% {
- width: 0;
- height: 0;
- left: 13px;
- top: 245px;
- }
- 9.5% {
- width: 20px;
- height: 20px;
- left: 3px;
- top: 235px;
- }
-}
-@keyframes screw-large-left {
- 0% {
- width: 0;
- height: 0;
- left: 13px;
- top: 245px;
- }
- 6.5% {
- width: 0;
- height: 0;
- left: 13px;
- top: 245px;
- }
- 9.5% {
- width: 20px;
- height: 20px;
- left: 3px;
- top: 235px;
- }
-}
-#screw-large-left {
- left: 3px;
- -webkit-animation: screw-large-left 8s linear;
- animation: screw-large-left 8s linear;
-}
-@-moz-keyframes backboard {
- 0% {
- width: 0;
- height: 0;
- left: 170px;
- bottom: 340px;
- }
- 4.5% {
- width: 0;
- height: 0;
- left: 170px;
- }
- 6.5% {
- width: 36px;
- height: 36px;
- left: 152px;
- }
- 10% {
- width: 220px;
- left: 60px;
- }
- 10.5% {
- height: 36px;
- }
- 14% {
- height: 75px;
- }
-}
-@-webkit-keyframes backboard {
- 0% {
- width: 0;
- height: 0;
- left: 170px;
- bottom: 340px;
- }
- 4.5% {
- width: 0;
- height: 0;
- left: 170px;
- }
- 6.5% {
- width: 36px;
- height: 36px;
- left: 152px;
- }
- 10% {
- width: 220px;
- left: 60px;
- }
- 10.5% {
- height: 36px;
- }
- 14% {
- height: 75px;
- }
-}
-@keyframes backboard {
- 0% {
- width: 0;
- height: 0;
- left: 170px;
- bottom: 340px;
- }
- 4.5% {
- width: 0;
- height: 0;
- left: 170px;
- }
- 6.5% {
- width: 36px;
- height: 36px;
- left: 152px;
- }
- 10% {
- width: 220px;
- left: 60px;
- }
- 10.5% {
- height: 36px;
- }
- 14% {
- height: 75px;
- }
-}
-#backboard {
- z-index: 2;
- width: 220px;
- height: 75px;
- position: absolute;
- left: 60px;
- bottom: 340px;
- background-color: #222222;
- -webkit-animation: backboard 8s linear;
- animation: backboard 8s linear;
-}
-@-moz-keyframes motherboard {
- 0% {
- width: 0;
- height: 0;
- left: 170px;
- top: 293px;
- }
- 6% {
- width: 0;
- height: 0;
- left: 170px;
- top: 293px;
- }
- 8% {
- width: 56px;
- height: 56px;
- left: 142px;
- top: 265px;
- }
- 8.5% {
- height: 56px;
- top: 265px;
- }
- 10.5% {
- width: 56px;
- height: 400px;
- top: 75px;
- }
- 11% {
- width: 56px;
- left: 142px;
- }
- 16% {
- width: 270px;
- left: 35px;
- }
-}
-@-webkit-keyframes motherboard {
- 0% {
- width: 0;
- height: 0;
- left: 170px;
- top: 293px;
- }
- 6% {
- width: 0;
- height: 0;
- left: 170px;
- top: 293px;
- }
- 8% {
- width: 56px;
- height: 56px;
- left: 142px;
- top: 265px;
- }
- 8.5% {
- height: 56px;
- top: 265px;
- }
- 10.5% {
- width: 56px;
- height: 400px;
- top: 75px;
- }
- 11% {
- width: 56px;
- left: 142px;
- }
- 16% {
- width: 270px;
- left: 35px;
- }
-}
-@keyframes motherboard {
- 0% {
- width: 0;
- height: 0;
- left: 170px;
- top: 293px;
- }
- 6% {
- width: 0;
- height: 0;
- left: 170px;
- top: 293px;
- }
- 8% {
- width: 56px;
- height: 56px;
- left: 142px;
- top: 265px;
- }
- 8.5% {
- height: 56px;
- top: 265px;
- }
- 10.5% {
- width: 56px;
- height: 400px;
- top: 75px;
- }
- 11% {
- width: 56px;
- left: 142px;
- }
- 16% {
- width: 270px;
- left: 35px;
- }
-}
-@-moz-keyframes motherboard-before {
- 0% {
- height: 0;
- box-shadow: -6px 400px #66947d, 9px 400px #66947d;
- }
- 18% {
- height: 0;
- }
- 20% {
- height: 100%;
- box-shadow: -6px 400px #66947d, 9px 400px #66947d;
- }
- 22% {
- box-shadow: -6px 0 #66947d, 9px 400px #66947d;
- }
- 24% {
- box-shadow: -6px 0 #66947d, 9px 0 #66947d;
- }
-}
-@-webkit-keyframes motherboard-before {
- 0% {
- height: 0;
- box-shadow: -6px 400px #66947d, 9px 400px #66947d;
- }
- 18% {
- height: 0;
- }
- 20% {
- height: 100%;
- box-shadow: -6px 400px #66947d, 9px 400px #66947d;
- }
- 22% {
- box-shadow: -6px 0 #66947d, 9px 400px #66947d;
- }
- 24% {
- box-shadow: -6px 0 #66947d, 9px 0 #66947d;
- }
-}
-@keyframes motherboard-before {
- 0% {
- height: 0;
- box-shadow: -6px 400px #66947d, 9px 400px #66947d;
- }
- 18% {
- height: 0;
- }
- 20% {
- height: 100%;
- box-shadow: -6px 400px #66947d, 9px 400px #66947d;
- }
- 22% {
- box-shadow: -6px 0 #66947d, 9px 400px #66947d;
- }
- 24% {
- box-shadow: -6px 0 #66947d, 9px 0 #66947d;
- }
-}
-#motherboard {
- z-index: 3;
- position: absolute;
- width: 270px;
- height: 400px;
- left: 35px;
- top: 75px;
- overflow: hidden;
- background-color: #4ca879;
- -webkit-animation: motherboard 8s linear;
- animation: motherboard 8s linear;
-}
-#motherboard::before {
- content: "";
- position: absolute;
- left: 87px;
- width: 2px;
- height: 100%;
- background-color: #66947d;
- box-shadow: -6px 0 #66947d, 9px 0 #66947d;
- -webkit-animation: motherboard-before 8s linear;
- animation: motherboard-before 8s linear;
-}
-.chip {
- z-index: 4;
- background-color: #308d58;
- position: absolute;
-}
-@-moz-keyframes chip-tall {
- 0% {
- width: 0;
- height: 400px;
- right: 35px;
- }
- 6.5% {
- width: 0;
- }
- 8.5% {
- width: 30px;
- }
-}
-@-webkit-keyframes chip-tall {
- 0% {
- width: 0;
- height: 400px;
- right: 35px;
- }
- 6.5% {
- width: 0;
- }
- 8.5% {
- width: 30px;
- }
-}
-@keyframes chip-tall {
- 0% {
- width: 0;
- height: 400px;
- right: 35px;
- }
- 6.5% {
- width: 0;
- }
- 8.5% {
- width: 30px;
- }
-}
-@-moz-keyframes chip-tall-before {
- 0% {
- height: 0;
- }
- 10% {
- height: 0;
- }
- 11.5% {
- height: 100%;
- }
-}
-@-webkit-keyframes chip-tall-before {
- 0% {
- height: 0;
- }
- 10% {
- height: 0;
- }
- 11.5% {
- height: 100%;
- }
-}
-@keyframes chip-tall-before {
- 0% {
- height: 0;
- }
- 10% {
- height: 0;
- }
- 11.5% {
- height: 100%;
- }
-}
-@-moz-keyframes chip-tall-after {
- 0% {
- height: 0;
- }
- 11.5% {
- height: 0;
- }
- 13% {
- height: 100%;
- }
-}
-@-webkit-keyframes chip-tall-after {
- 0% {
- height: 0;
- }
- 11.5% {
- height: 0;
- }
- 13% {
- height: 100%;
- }
-}
-@keyframes chip-tall-after {
- 0% {
- height: 0;
- }
- 11.5% {
- height: 0;
- }
- 13% {
- height: 100%;
- }
-}
-#chip-tall {
- width: 30px;
- height: 400px;
- top: 75px;
- right: 35px;
- -webkit-animation: chip-tall 8s linear;
- animation: chip-tall 8s linear;
-}
-#chip-tall::before {
- content: "";
- position: absolute;
- right: 8px;
- bottom: 0;
- width: 4px;
- height: 100%;
- background-color: #267146;
- -webkit-animation: chip-tall-before 8s linear;
- animation: chip-tall-before 8s linear;
-}
-#chip-tall::after {
- content: "";
- position: absolute;
- right: 18px;
- bottom: 0;
- width: 4px;
- height: 100%;
- background-color: #267146;
- -webkit-animation: chip-tall-after 8s linear;
- animation: chip-tall-after 8s linear;
-}
-@-moz-keyframes chip-short {
- 0% {
- width: 0;
- height: 200px;
- right: 35px;
- }
- 6.5% {
- width: 0;
- }
- 8.5% {
- width: 30px;
- height: 200px;
- }
- 10.5% {
- width: 80px;
- height: 140px;
- }
-}
-@-webkit-keyframes chip-short {
- 0% {
- width: 0;
- height: 200px;
- right: 35px;
- }
- 6.5% {
- width: 0;
- }
- 8.5% {
- width: 30px;
- height: 200px;
- }
- 10.5% {
- width: 80px;
- height: 140px;
- }
-}
-@keyframes chip-short {
- 0% {
- width: 0;
- height: 200px;
- right: 35px;
- }
- 6.5% {
- width: 0;
- }
- 8.5% {
- width: 30px;
- height: 200px;
- }
- 10.5% {
- width: 80px;
- height: 140px;
- }
-}
-@-moz-keyframes chip-details {
- 0% {
- background-color: transparent;
- box-shadow: 6px 0 transparent;
- }
- 18% {
- background-color: transparent;
- }
- 20% {
- box-shadow: 6px 0 transparent;
- }
- 24% {
- background-color: #66947d;
- }
- 26% {
- box-shadow: 6px 0 #66947d;
- }
-}
-@-webkit-keyframes chip-details {
- 0% {
- background-color: transparent;
- box-shadow: 6px 0 transparent;
- }
- 18% {
- background-color: transparent;
- }
- 20% {
- box-shadow: 6px 0 transparent;
- }
- 24% {
- background-color: #66947d;
- }
- 26% {
- box-shadow: 6px 0 #66947d;
- }
-}
-@keyframes chip-details {
- 0% {
- background-color: transparent;
- box-shadow: 6px 0 transparent;
- }
- 18% {
- background-color: transparent;
- }
- 20% {
- box-shadow: 6px 0 transparent;
- }
- 24% {
- background-color: #66947d;
- }
- 26% {
- box-shadow: 6px 0 #66947d;
- }
-}
-@-moz-keyframes chip-details-diagonal {
- 0% {
- background-color: transparent;
- box-shadow: 5px 4px transparent;
- }
- 18% {
- background-color: transparent;
- }
- 20% {
- box-shadow: 5px 4px transparent;
- }
- 24% {
- background-color: #66947d;
- }
- 26% {
- box-shadow: 5px 4px #66947d;
- }
-}
-@-webkit-keyframes chip-details-diagonal {
- 0% {
- background-color: transparent;
- box-shadow: 5px 4px transparent;
- }
- 18% {
- background-color: transparent;
- }
- 20% {
- box-shadow: 5px 4px transparent;
- }
- 24% {
- background-color: #66947d;
- }
- 26% {
- box-shadow: 5px 4px #66947d;
- }
-}
-@keyframes chip-details-diagonal {
- 0% {
- background-color: transparent;
- box-shadow: 5px 4px transparent;
- }
- 18% {
- background-color: transparent;
- }
- 20% {
- box-shadow: 5px 4px transparent;
- }
- 24% {
- background-color: #66947d;
- }
- 26% {
- box-shadow: 5px 4px #66947d;
- }
-}
-#chip-short {
- width: 80px;
- height: 140px;
- top: 75px;
- right: 35px;
- -webkit-animation: chip-short 8s linear;
- animation: chip-short 8s linear;
-}
-#chip-short::before {
- content: "";
- width: 2px;
- height: 201px;
- top: 199px;
- background-color: #66947d;
- position: absolute;
- left: 36px;
- box-shadow: 6px 0 #66947d;
- -webkit-animation: chip-details 8s linear;
- animation: chip-details 8s linear;
-}
-#chip-short::after {
- content: "";
- width: 2px;
- height: 100%;
- background-color: #66947d;
- position: absolute;
- left: -14px;
- box-shadow: 6px 0 #66947d;
- -webkit-animation: chip-details 8s linear;
- animation: chip-details 8s linear;
-}
-@-moz-keyframes chip-diagonal {
- 0% {
- width: 0;
- height: 0;
- }
- 8.5% {
- width: 0;
- height: 0;
- }
- 10.5% {
- width: 50px;
- height: 78px;
- }
-}
-@-webkit-keyframes chip-diagonal {
- 0% {
- width: 0;
- height: 0;
- }
- 8.5% {
- width: 0;
- height: 0;
- }
- 10.5% {
- width: 50px;
- height: 78px;
- }
-}
-@keyframes chip-diagonal {
- 0% {
- width: 0;
- height: 0;
- }
- 8.5% {
- width: 0;
- height: 0;
- }
- 10.5% {
- width: 50px;
- height: 78px;
- }
-}
-#chip-diagonal {
- width: 50px;
- height: 78px;
- left: 275px;
- bottom: 295px;
- border-bottom-right-radius: 100% 100%;
- -webkit-transform-origin: 0 100%;
- transform-origin: 0 100%;
- -webkit-transform: rotateZ(-40deg);
- transform: rotateZ(-40deg);
- -webkit-animation: chip-diagonal 8s linear;
- animation: chip-diagonal 8s linear;
-}
-#chip-diagonal::before {
- content: "";
- width: 2px;
- height: 100%;
- background-color: #66947d;
- position: absolute;
- left: -11px;
- top: -9px;
- box-shadow: 5px 4px #66947d;
- -webkit-animation: chip-details-diagonal 8s linear;
- animation: chip-details-diagonal 8s linear;
-}
-.capacitors {
- position: absolute;
- z-index: 5;
- width: 10px;
- height: 10px;
- border-radius: 50%;
- background-color: transparent;
- box-shadow: 11px 0 1px #ffffff, 11px -35px 1px #ffffff, 31px -35px 1px #ffffff, 21px -24px 1px #ffffff, 21px -11px 1px #ffffff;
-}
-@-moz-keyframes chip-capacitors {
- 0% {
- box-shadow: none;
- }
- 12.5% {
- box-shadow: 11px 0 1px transparent;
- }
- 13.5% {
- box-shadow: 11px 0 1px #ffffff, 11px -35px 1px transparent, 31px -35px 1px transparent;
- }
- 14.5% {
- box-shadow: 11px 0 1px #ffffff, 11px -35px 1px #ffffff, 31px -35px 1px #ffffff, 21px -24px 1px transparent;
- }
- 15.5% {
- box-shadow: 11px 0 1px #ffffff, 11px -35px 1px #ffffff, 31px -35px 1px #ffffff, 21px -24px 1px #ffffff, 21px -11px 1px transparent;
- }
- 16.5% {
- box-shadow: 11px 0 1px #ffffff, 11px -35px 1px #ffffff, 31px -35px 1px #ffffff, 21px -24px 1px #ffffff, 21px -11px 1px #ffffff;
- }
-}
-@-webkit-keyframes chip-capacitors {
- 0% {
- box-shadow: none;
- }
- 12.5% {
- box-shadow: 11px 0 1px transparent;
- }
- 13.5% {
- box-shadow: 11px 0 1px #ffffff, 11px -35px 1px transparent, 31px -35px 1px transparent;
- }
- 14.5% {
- box-shadow: 11px 0 1px #ffffff, 11px -35px 1px #ffffff, 31px -35px 1px #ffffff, 21px -24px 1px transparent;
- }
- 15.5% {
- box-shadow: 11px 0 1px #ffffff, 11px -35px 1px #ffffff, 31px -35px 1px #ffffff, 21px -24px 1px #ffffff, 21px -11px 1px transparent;
- }
- 16.5% {
- box-shadow: 11px 0 1px #ffffff, 11px -35px 1px #ffffff, 31px -35px 1px #ffffff, 21px -24px 1px #ffffff, 21px -11px 1px #ffffff;
- }
-}
-@keyframes chip-capacitors {
- 0% {
- box-shadow: none;
- }
- 12.5% {
- box-shadow: 11px 0 1px transparent;
- }
- 13.5% {
- box-shadow: 11px 0 1px #ffffff, 11px -35px 1px transparent, 31px -35px 1px transparent;
- }
- 14.5% {
- box-shadow: 11px 0 1px #ffffff, 11px -35px 1px #ffffff, 31px -35px 1px #ffffff, 21px -24px 1px transparent;
- }
- 15.5% {
- box-shadow: 11px 0 1px #ffffff, 11px -35px 1px #ffffff, 31px -35px 1px #ffffff, 21px -24px 1px #ffffff, 21px -11px 1px transparent;
- }
- 16.5% {
- box-shadow: 11px 0 1px #ffffff, 11px -35px 1px #ffffff, 31px -35px 1px #ffffff, 21px -24px 1px #ffffff, 21px -11px 1px #ffffff;
- }
-}
-#chip-capacitors {
- left: 240px;
- top: 130px;
- -webkit-animation: chip-capacitors 8s linear;
- animation: chip-capacitors 8s linear;
-}
-@-moz-keyframes motherboard-capacitors {
- 0% {
- box-shadow: none;
- }
- 22.5% {
- box-shadow: 11px 0 1px transparent;
- }
- 23.5% {
- box-shadow: 11px 0 1px #ffffff, 11px -35px 1px transparent, 31px -35px 1px transparent;
- }
- 24.5% {
- box-shadow: 11px 0 1px #ffffff, 11px -35px 1px #ffffff, 31px -35px 1px #ffffff, 21px -24px 1px transparent;
- }
- 25.5% {
- box-shadow: 11px 0 1px #ffffff, 11px -35px 1px #ffffff, 31px -35px 1px #ffffff, 21px -24px 1px #ffffff, 21px -11px 1px transparent;
- }
- 26.5% {
- box-shadow: 11px 0 1px #ffffff, 11px -35px 1px #ffffff, 31px -35px 1px #ffffff, 21px -24px 1px #ffffff, 21px -11px 1px #ffffff;
- }
-}
-@-webkit-keyframes motherboard-capacitors {
- 0% {
- box-shadow: none;
- }
- 22.5% {
- box-shadow: 11px 0 1px transparent;
- }
- 23.5% {
- box-shadow: 11px 0 1px #ffffff, 11px -35px 1px transparent, 31px -35px 1px transparent;
- }
- 24.5% {
- box-shadow: 11px 0 1px #ffffff, 11px -35px 1px #ffffff, 31px -35px 1px #ffffff, 21px -24px 1px transparent;
- }
- 25.5% {
- box-shadow: 11px 0 1px #ffffff, 11px -35px 1px #ffffff, 31px -35px 1px #ffffff, 21px -24px 1px #ffffff, 21px -11px 1px transparent;
- }
- 26.5% {
- box-shadow: 11px 0 1px #ffffff, 11px -35px 1px #ffffff, 31px -35px 1px #ffffff, 21px -24px 1px #ffffff, 21px -11px 1px #ffffff;
- }
-}
-@keyframes motherboard-capacitors {
- 0% {
- box-shadow: none;
- }
- 22.5% {
- box-shadow: 11px 0 1px transparent;
- }
- 23.5% {
- box-shadow: 11px 0 1px #ffffff, 11px -35px 1px transparent, 31px -35px 1px transparent;
- }
- 24.5% {
- box-shadow: 11px 0 1px #ffffff, 11px -35px 1px #ffffff, 31px -35px 1px #ffffff, 21px -24px 1px transparent;
- }
- 25.5% {
- box-shadow: 11px 0 1px #ffffff, 11px -35px 1px #ffffff, 31px -35px 1px #ffffff, 21px -24px 1px #ffffff, 21px -11px 1px transparent;
- }
- 26.5% {
- box-shadow: 11px 0 1px #ffffff, 11px -35px 1px #ffffff, 31px -35px 1px #ffffff, 21px -24px 1px #ffffff, 21px -11px 1px #ffffff;
- }
-}
-#motherboard-capacitors {
- left: 85px;
- top: 265px;
- -webkit-transform: rotateZ(-90deg);
- transform: rotateZ(-90deg);
- -webkit-animation: motherboard-capacitors 8s linear;
- animation: motherboard-capacitors 8s linear;
-}
-@-moz-keyframes contrast-knob {
- 0% {
- width: 0;
- height: 0;
- left: 33px;
- top: 194px;
- }
- 14% {
- width: 0;
- height: 0;
- left: 33px;
- top: 194px;
- }
- 16.5% {
- width: 28px;
- height: 28px;
- left: 19px;
- top: 180px;
- }
- 20% {
- top: 180px;
- }
- 24% {
- top: 165px;
- }
-}
-@-webkit-keyframes contrast-knob {
- 0% {
- width: 0;
- height: 0;
- left: 33px;
- top: 194px;
- }
- 14% {
- width: 0;
- height: 0;
- left: 33px;
- top: 194px;
- }
- 16.5% {
- width: 28px;
- height: 28px;
- left: 19px;
- top: 180px;
- }
- 20% {
- top: 180px;
- }
- 24% {
- top: 165px;
- }
-}
-@keyframes contrast-knob {
- 0% {
- width: 0;
- height: 0;
- left: 33px;
- top: 194px;
- }
- 14% {
- width: 0;
- height: 0;
- left: 33px;
- top: 194px;
- }
- 16.5% {
- width: 28px;
- height: 28px;
- left: 19px;
- top: 180px;
- }
- 20% {
- top: 180px;
- }
- 24% {
- top: 165px;
- }
-}
-@-moz-keyframes contrast-knob-before {
- 0% {
- width: 0;
- height: 0;
- left: -1px;
- top: 14px;
- }
- 16% {
- width: 0;
- height: 0;
- left: -1px;
- top: 14px;
- }
- 18% {
- width: 32px;
- height: 32px;
- left: -17px;
- top: -2px;
- }
-}
-@-webkit-keyframes contrast-knob-before {
- 0% {
- width: 0;
- height: 0;
- left: -1px;
- top: 14px;
- }
- 16% {
- width: 0;
- height: 0;
- left: -1px;
- top: 14px;
- }
- 18% {
- width: 32px;
- height: 32px;
- left: -17px;
- top: -2px;
- }
-}
-@keyframes contrast-knob-before {
- 0% {
- width: 0;
- height: 0;
- left: -1px;
- top: 14px;
- }
- 16% {
- width: 0;
- height: 0;
- left: -1px;
- top: 14px;
- }
- 18% {
- width: 32px;
- height: 32px;
- left: -17px;
- top: -2px;
- }
-}
-#contrast-knob {
- z-index: 4;
- position: absolute;
- top: 165px;
- left: 19px;
- width: 28px;
- height: 28px;
- background-color: #808080;
- -webkit-animation: contrast-knob 8s linear;
- animation: contrast-knob 8s linear;
-}
-#contrast-knob:before {
- content: '';
- position: absolute;
- top: -2px;
- left: -17px;
- width: 32px;
- height: 32px;
- border-radius: 50%;
- background-color: #303030;
- -webkit-animation: contrast-knob-before 8s linear;
- animation: contrast-knob-before 8s linear;
-}
-@-moz-keyframes link-port {
- 0% {
- width: 0;
- height: 0;
- left: 36px;
- }
- 14% {
- width: 0;
- height: 0;
- left: 36px;
- }
- 16.5% {
- width: 34px;
- height: 34px;
- left: 19px;
- }
- 18.5% {
- left: 19px;
- }
- 20.5% {
- left: 3px;
- }
-}
-@-webkit-keyframes link-port {
- 0% {
- width: 0;
- height: 0;
- left: 36px;
- }
- 14% {
- width: 0;
- height: 0;
- left: 36px;
- }
- 16.5% {
- width: 34px;
- height: 34px;
- left: 19px;
- }
- 18.5% {
- left: 19px;
- }
- 20.5% {
- left: 3px;
- }
-}
-@keyframes link-port {
- 0% {
- width: 0;
- height: 0;
- left: 36px;
- }
- 14% {
- width: 0;
- height: 0;
- left: 36px;
- }
- 16.5% {
- width: 34px;
- height: 34px;
- left: 19px;
- }
- 18.5% {
- left: 19px;
- }
- 20.5% {
- left: 3px;
- }
-}
-#link-port {
- z-index: 4;
- position: absolute;
- top: 123px;
- left: 3px;
- width: 34px;
- height: 34px;
- background-color: #ffffff;
- -webkit-animation: link-port 8s linear;
- animation: link-port 8s linear;
-}
-.circuit {
- z-index: 4;
- position: absolute;
- box-shadow: inset 0 0 0 1px #ffffff;
- border-radius: 50% / 25%;
- opacity: 0.5;
-}
-.circuit::before {
- content: "";
- position: absolute;
- left: 50%;
- top: 0;
- width: 50%;
- height: 0%;
- background-color: #4ca879;
-}
-.circuit::after {
- content: "";
- position: absolute;
- left: 0;
- bottom: 0;
- width: 50%;
- height: 0%;
- background-color: #4ca879;
-}
-@-moz-keyframes circuit-bottom {
- 0% {
- opacity: 0;
- }
- 13.4% {
- opacity: 0;
- }
- 13.5% {
- opacity: 0.5;
- }
-}
-@-webkit-keyframes circuit-bottom {
- 0% {
- opacity: 0;
- }
- 13.4% {
- opacity: 0;
- }
- 13.5% {
- opacity: 0.5;
- }
-}
-@keyframes circuit-bottom {
- 0% {
- opacity: 0;
- }
- 13.4% {
- opacity: 0;
- }
- 13.5% {
- opacity: 0.5;
- }
-}
-@-moz-keyframes "circuit-bottom-before" {
- 0% {
- height: 100%;
- }
- 13.5% {
- height: 100%;
- }
- 15.5% {
- height: 0%;
- }
-}
-@-webkit-keyframes "circuit-bottom-before" {
- 0% {
- height: 100%;
- }
- 13.5% {
- height: 100%;
- }
- 15.5% {
- height: 0%;
- }
-}
-@keyframes "circuit-bottom-before" {
- 0% {
- height: 100%;
- }
- 13.5% {
- height: 100%;
- }
- 15.5% {
- height: 0%;
- }
-}
-@-moz-keyframes "circuit-bottom-after" {
- 0% {
- height: 100%;
- }
- 15.5% {
- height: 100%;
- }
- 17.5% {
- height: 0%;
- }
-}
-@-webkit-keyframes "circuit-bottom-after" {
- 0% {
- height: 100%;
- }
- 15.5% {
- height: 100%;
- }
- 17.5% {
- height: 0%;
- }
-}
-@keyframes "circuit-bottom-after" {
- 0% {
- height: 100%;
- }
- 15.5% {
- height: 100%;
- }
- 17.5% {
- height: 0%;
- }
-}
-#circuit-bottom {
- width: 30px;
- height: 60px;
- top: 330px;
- left: 155px;
- -webkit-transform: rotateZ(-90deg);
- transform: rotateZ(-90deg);
- -webkit-animation: circuit-bottom 8s linear;
- animation: circuit-bottom 8s linear;
-}
-#circuit-bottom::before {
- -webkit-animation: circuit-bottom-before 8s linear;
- animation: circuit-bottom-before 8s linear;
-}
-#circuit-bottom::after {
- -webkit-animation: circuit-bottom-after 8s linear;
- animation: circuit-bottom-after 8s linear;
-}
-@-moz-keyframes circuit-top {
- 0% {
- opacity: 0;
- }
- 16.4% {
- opacity: 0;
- }
- 16.5% {
- opacity: 0.5;
- }
-}
-@-webkit-keyframes circuit-top {
- 0% {
- opacity: 0;
- }
- 16.4% {
- opacity: 0;
- }
- 16.5% {
- opacity: 0.5;
- }
-}
-@keyframes circuit-top {
- 0% {
- opacity: 0;
- }
- 16.4% {
- opacity: 0;
- }
- 16.5% {
- opacity: 0.5;
- }
-}
-@-moz-keyframes "circuit-top-before" {
- 0% {
- height: 100%;
- }
- 16.5% {
- height: 100%;
- }
- 18.5% {
- height: 0%;
- }
-}
-@-webkit-keyframes "circuit-top-before" {
- 0% {
- height: 100%;
- }
- 16.5% {
- height: 100%;
- }
- 18.5% {
- height: 0%;
- }
-}
-@keyframes "circuit-top-before" {
- 0% {
- height: 100%;
- }
- 16.5% {
- height: 100%;
- }
- 18.5% {
- height: 0%;
- }
-}
-@-moz-keyframes "circuit-top-after" {
- 0% {
- height: 100%;
- }
- 18.5% {
- height: 100%;
- }
- 20.5% {
- height: 0%;
- }
-}
-@-webkit-keyframes "circuit-top-after" {
- 0% {
- height: 100%;
- }
- 18.5% {
- height: 100%;
- }
- 20.5% {
- height: 0%;
- }
-}
-@keyframes "circuit-top-after" {
- 0% {
- height: 100%;
- }
- 18.5% {
- height: 100%;
- }
- 20.5% {
- height: 0%;
- }
-}
-#circuit-top {
- width: 40px;
- height: 80px;
- top: 100px;
- left: 70px;
- -webkit-animation: circuit-top 8s linear;
- animation: circuit-top 8s linear;
-}
-#circuit-top::before {
- -webkit-animation: circuit-top-before 8s linear;
- animation: circuit-top-before 8s linear;
-}
-#circuit-top::after {
- -webkit-animation: circuit-top-after 8s linear;
- animation: circuit-top-after 8s linear;
-}
-@-moz-keyframes transistors {
- 0% {
- opacity: 0;
- box-shadow: none;
- }
- 17% {
- opacity: 0;
- box-shadow: 16px 0 transparent;
- }
- 19% {
- opacity: 1;
- box-shadow: 16px 0, 32px 0 transparent;
- }
- 21% {
- box-shadow: 16px 0, 32px 0, 48px 0 transparent;
- }
- 23% {
- box-shadow: 16px 0, 32px 0, 48px 0;
- }
-}
-@-webkit-keyframes transistors {
- 0% {
- opacity: 0;
- box-shadow: none;
- }
- 17% {
- opacity: 0;
- box-shadow: 16px 0 transparent;
- }
- 19% {
- opacity: 1;
- box-shadow: 16px 0, 32px 0 transparent;
- }
- 21% {
- box-shadow: 16px 0, 32px 0, 48px 0 transparent;
- }
- 23% {
- box-shadow: 16px 0, 32px 0, 48px 0;
- }
-}
-@keyframes transistors {
- 0% {
- opacity: 0;
- box-shadow: none;
- }
- 17% {
- opacity: 0;
- box-shadow: 16px 0 transparent;
- }
- 19% {
- opacity: 1;
- box-shadow: 16px 0, 32px 0 transparent;
- }
- 21% {
- box-shadow: 16px 0, 32px 0, 48px 0 transparent;
- }
- 23% {
- box-shadow: 16px 0, 32px 0, 48px 0;
- }
-}
-#transistors {
- z-index: 4;
- position: absolute;
- top: 310px;
- left: 50px;
- width: 8px;
- height: 8px;
- border-radius: 50%;
- background-color: #303030;
- box-shadow: 16px 0, 32px 0, 48px 0;
- -webkit-animation: transistors 8s linear;
- animation: transistors 8s linear;
-}
-@-moz-keyframes processor {
- 0% {
- width: 0;
- height: 0;
- left: 170px;
- top: 313px;
- }
- 12% {
- width: 0;
- height: 0;
- left: 170px;
- top: 313px;
- }
- 14% {
- width: 56px;
- height: 56px;
- left: 142px;
- top: 285px;
- }
-}
-@-webkit-keyframes processor {
- 0% {
- width: 0;
- height: 0;
- left: 170px;
- top: 313px;
- }
- 12% {
- width: 0;
- height: 0;
- left: 170px;
- top: 313px;
- }
- 14% {
- width: 56px;
- height: 56px;
- left: 142px;
- top: 285px;
- }
-}
-@keyframes processor {
- 0% {
- width: 0;
- height: 0;
- left: 170px;
- top: 313px;
- }
- 12% {
- width: 0;
- height: 0;
- left: 170px;
- top: 313px;
- }
- 14% {
- width: 56px;
- height: 56px;
- left: 142px;
- top: 285px;
- }
-}
-@-moz-keyframes processor-before {
- 0% {
- width: 0;
- }
- 16% {
- width: 0;
- }
- 18% {
- width: 50px;
- }
-}
-@-webkit-keyframes processor-before {
- 0% {
- width: 0;
- }
- 16% {
- width: 0;
- }
- 18% {
- width: 50px;
- }
-}
-@keyframes processor-before {
- 0% {
- width: 0;
- }
- 16% {
- width: 0;
- }
- 18% {
- width: 50px;
- }
-}
-@-moz-keyframes processor-after {
- 0% {
- width: 0;
- }
- 18% {
- width: 0;
- }
- 20% {
- width: 50px;
- }
-}
-@-webkit-keyframes processor-after {
- 0% {
- width: 0;
- }
- 18% {
- width: 0;
- }
- 20% {
- width: 50px;
- }
-}
-@keyframes processor-after {
- 0% {
- width: 0;
- }
- 18% {
- width: 0;
- }
- 20% {
- width: 50px;
- }
-}
-#processor {
- position: absolute;
- width: 56px;
- height: 56px;
- top: 285px;
- left: 142px;
- z-index: 4;
- background-color: #222222;
- color: #ffffff;
- font-size: 15px;
- letter-spacing: 3px;
- font-weight: 700;
- font-family: 'Oxygen', Helvetica, arial, sans-serif;
- -webkit-animation: processor 8s linear;
- animation: processor 8s linear;
-}
-#processor::before {
- content: "llllll";
- position: absolute;
- width: 50px;
- overflow: hidden;
- text-shadow: -1px 0 0 #808080;
- -webkit-transform: rotateZ(-90deg);
- transform: rotateZ(-90deg);
- -webkit-transform-origin: 0 0;
- transform-origin: 0 0;
- left: 48px;
- bottom: -9px;
- -webkit-animation: processor-before 8s linear;
- animation: processor-before 8s linear;
-}
-#processor::after {
- content: "llllll";
- position: absolute;
- width: 50px;
- overflow: hidden;
- text-shadow: -1px 0 0 #808080;
- -webkit-transform: rotateZ(90deg) rotateY(180deg);
- transform: rotateZ(90deg) rotateY(180deg);
- -webkit-transform-origin: 0 0;
- transform-origin: 0 0;
- left: 7px;
- top: 50px;
- -webkit-animation: processor-after 8s linear;
- animation: processor-after 8s linear;
-}
-@-moz-keyframes component {
- 0% {
- width: 0;
- height: 0;
- left: 251px;
- top: 310.5px;
- }
- 20.5% {
- width: 0;
- height: 0;
- left: 251px;
- top: 310.5px;
- }
- 23.5% {
- width: 14px;
- height: 55px;
- left: 244px;
- top: 283px;
- }
- 24.5% {
- left: 244px;
- top: 283px;
- }
- 28% {
- left: 228px;
- top: 283px;
- }
-}
-@-webkit-keyframes component {
- 0% {
- width: 0;
- height: 0;
- left: 251px;
- top: 310.5px;
- }
- 20.5% {
- width: 0;
- height: 0;
- left: 251px;
- top: 310.5px;
- }
- 23.5% {
- width: 14px;
- height: 55px;
- left: 244px;
- top: 283px;
- }
- 24.5% {
- left: 244px;
- top: 283px;
- }
- 28% {
- left: 228px;
- top: 283px;
- }
-}
-@keyframes component {
- 0% {
- width: 0;
- height: 0;
- left: 251px;
- top: 310.5px;
- }
- 20.5% {
- width: 0;
- height: 0;
- left: 251px;
- top: 310.5px;
- }
- 23.5% {
- width: 14px;
- height: 55px;
- left: 244px;
- top: 283px;
- }
- 24.5% {
- left: 244px;
- top: 283px;
- }
- 28% {
- left: 228px;
- top: 283px;
- }
-}
-#component {
- z-index: 4;
- position: absolute;
- top: 283px;
- left: 228px;
- background-color: #222222;
- border-left: 2px #808080 dotted;
- border-top-right-radius: 3px;
- border-bottom-right-radius: 3px;
- width: 14px;
- height: 55px;
- -webkit-animation: component 8s linear;
- animation: component 8s linear;
-}
-@-moz-keyframes controller {
- 0% {
- width: 0;
- height: 110px;
- left: 170px;
- top: 390px;
- }
- 12% {
- width: 0;
- left: 170px;
- }
- 16% {
- width: 204px;
- left: 68px;
- }
-}
-@-webkit-keyframes controller {
- 0% {
- width: 0;
- height: 110px;
- left: 170px;
- top: 390px;
- }
- 12% {
- width: 0;
- left: 170px;
- }
- 16% {
- width: 204px;
- left: 68px;
- }
-}
-@keyframes controller {
- 0% {
- width: 0;
- height: 110px;
- left: 170px;
- top: 390px;
- }
- 12% {
- width: 0;
- left: 170px;
- }
- 16% {
- width: 204px;
- left: 68px;
- }
-}
-@-moz-keyframes controller-before {
- 0% {
- width: 0;
- height: 0;
- left: -9px;
- bottom: 28px;
- }
- 18% {
- width: 0;
- height: 0;
- left: -9px;
- bottom: 28px;
- }
- 21.5% {
- width: 18px;
- height: 6px;
- left: -18px;
- bottom: 25px;
- }
-}
-@-webkit-keyframes controller-before {
- 0% {
- width: 0;
- height: 0;
- left: -9px;
- bottom: 28px;
- }
- 18% {
- width: 0;
- height: 0;
- left: -9px;
- bottom: 28px;
- }
- 21.5% {
- width: 18px;
- height: 6px;
- left: -18px;
- bottom: 25px;
- }
-}
-@keyframes controller-before {
- 0% {
- width: 0;
- height: 0;
- left: -9px;
- bottom: 28px;
- }
- 18% {
- width: 0;
- height: 0;
- left: -9px;
- bottom: 28px;
- }
- 21.5% {
- width: 18px;
- height: 6px;
- left: -18px;
- bottom: 25px;
- }
-}
-@-moz-keyframes controller-after {
- 0% {
- width: 0;
- height: 0;
- left: 102px;
- bottom: 0;
- }
- 20% {
- width: 0;
- height: 0;
- left: 102px;
- bottom: 0;
- }
- 22.5% {
- width: 114px;
- height: 24px;
- left: 45px;
- bottom: -24px;
- }
-}
-@-webkit-keyframes controller-after {
- 0% {
- width: 0;
- height: 0;
- left: 102px;
- bottom: 0;
- }
- 20% {
- width: 0;
- height: 0;
- left: 102px;
- bottom: 0;
- }
- 22.5% {
- width: 114px;
- height: 24px;
- left: 45px;
- bottom: -24px;
- }
-}
-@keyframes controller-after {
- 0% {
- width: 0;
- height: 0;
- left: 102px;
- bottom: 0;
- }
- 20% {
- width: 0;
- height: 0;
- left: 102px;
- bottom: 0;
- }
- 22.5% {
- width: 114px;
- height: 24px;
- left: 45px;
- bottom: -24px;
- }
-}
-#controller {
- position: absolute;
- z-index: 4;
- width: 204px;
- height: 110px;
- top: 390px;
- left: 68px;
- background-color: #9d9d9d;
- -webkit-animation: controller 8s linear;
- animation: controller 8s linear;
-}
-#controller::before {
- content: "";
- position: absolute;
- background-color: #222222;
- width: 18px;
- height: 6px;
- left: -18px;
- bottom: 25px;
- -webkit-animation: controller-before 8s linear;
- animation: controller-before 8s linear;
-}
-#controller::after {
- content: "";
- position: absolute;
- width: 114px;
- height: 24px;
- bottom: -24px;
- left: 45px;
- background-color: #303030;
- -webkit-animation: controller-after 8s linear;
- animation: controller-after 8s linear;
-}
-@-moz-keyframes speaker {
- 0% {
- width: 0;
- height: 0;
- bottom: 90px;
- right: 60px;
- }
- 12% {
- width: 0;
- height: 0;
- bottom: 90px;
- right: 60px;
- }
- 15.5% {
- width: 80px;
- height: 80px;
- bottom: 50px;
- right: 20px;
- }
- 19.5% {
- bottom: 50px;
- }
- 26% {
- bottom: 24px;
- }
-}
-@-webkit-keyframes speaker {
- 0% {
- width: 0;
- height: 0;
- bottom: 90px;
- right: 60px;
- }
- 12% {
- width: 0;
- height: 0;
- bottom: 90px;
- right: 60px;
- }
- 15.5% {
- width: 80px;
- height: 80px;
- bottom: 50px;
- right: 20px;
- }
- 19.5% {
- bottom: 50px;
- }
- 26% {
- bottom: 24px;
- }
-}
-@keyframes speaker {
- 0% {
- width: 0;
- height: 0;
- bottom: 90px;
- right: 60px;
- }
- 12% {
- width: 0;
- height: 0;
- bottom: 90px;
- right: 60px;
- }
- 15.5% {
- width: 80px;
- height: 80px;
- bottom: 50px;
- right: 20px;
- }
- 19.5% {
- bottom: 50px;
- }
- 26% {
- bottom: 24px;
- }
-}
-#speaker {
- position: absolute;
- z-index: 5;
- width: 80px;
- height: 80px;
- right: 20px;
- bottom: 24px;
- border-radius: 100%;
- background-color: #222222;
- -webkit-animation: speaker 8s linear;
- animation: speaker 8s linear;
-}
-#speaker::after {
- content: "";
- position: absolute;
- z-index: 6;
- width: 42%;
- height: 42%;
- left: 50%;
- margin-left: -21%;
- top: 50%;
- margin-top: -21%;
- border-radius: 100%;
- background-color: #808080;
-}
-@-moz-keyframes whitescreen {
- 0% {
- width: 0;
- height: 0;
- left: 170px;
- top: 105px;
- border: 0px;
- }
- 22% {
- width: 0;
- height: 0;
- left: 170px;
- top: 105px;
- }
- 26% {
- width: 178px;
- height: 160px;
- left: 81px;
- top: 60px;
- border: 0px transparent;
- }
- 28% {
- width: 188px;
- height: 170px;
- border: 5px #808080 solid;
- left: 76px;
- top: 55px;
- }
-}
-@-webkit-keyframes whitescreen {
- 0% {
- width: 0;
- height: 0;
- left: 170px;
- top: 105px;
- border: 0px;
- }
- 22% {
- width: 0;
- height: 0;
- left: 170px;
- top: 105px;
- }
- 26% {
- width: 178px;
- height: 160px;
- left: 81px;
- top: 60px;
- border: 0px transparent;
- }
- 28% {
- width: 188px;
- height: 170px;
- border: 5px #808080 solid;
- left: 76px;
- top: 55px;
- }
-}
-@keyframes whitescreen {
- 0% {
- width: 0;
- height: 0;
- left: 170px;
- top: 105px;
- border: 0px;
- }
- 22% {
- width: 0;
- height: 0;
- left: 170px;
- top: 105px;
- }
- 26% {
- width: 178px;
- height: 160px;
- left: 81px;
- top: 60px;
- border: 0px transparent;
- }
- 28% {
- width: 188px;
- height: 170px;
- border: 5px #808080 solid;
- left: 76px;
- top: 55px;
- }
-}
-#whitescreen {
- position: absolute;
- z-index: 6;
- width: 188px;
- height: 170px;
- top: 55px;
- left: 76px;
- background-color: #ffffff;
- border: 5px #808080 solid;
- -webkit-animation: whitescreen 8s linear;
- animation: whitescreen 8s linear;
-}
-@-moz-keyframes screen {
- 0% {
- width: 0;
- height: 0;
- bottom: 389px;
- left: 170px;
- border-radius: 0;
- }
- 16% {
- width: 0;
- height: 0;
- bottom: 389px;
- left: 170px;
- border-radius: 0;
- }
- 19.5% {
- width: 36px;
- height: 34px;
- left: 152px;
- bottom: 372px;
- border-radius: 0;
- }
- 23.5% {
- bottom: 278px;
- height: 34px;
- border-radius: 0 0 25% 25% / 0 0 10px 10px;
- }
- 27.5% {
- height: 263px;
- width: 36px;
- left: 152px;
- border-radius: 0 0 50% 50% / 0 0 20px 20px;
- }
- 32.5% {
- width: 294px;
- left: 23px;
- border-radius: 10px 10px 50% 50% / 10px 10px 20px 20px;
- }
-}
-@-webkit-keyframes screen {
- 0% {
- width: 0;
- height: 0;
- bottom: 389px;
- left: 170px;
- border-radius: 0;
- }
- 16% {
- width: 0;
- height: 0;
- bottom: 389px;
- left: 170px;
- border-radius: 0;
- }
- 19.5% {
- width: 36px;
- height: 34px;
- left: 152px;
- bottom: 372px;
- border-radius: 0;
- }
- 23.5% {
- bottom: 278px;
- height: 34px;
- border-radius: 0 0 25% 25% / 0 0 10px 10px;
- }
- 27.5% {
- height: 263px;
- width: 36px;
- left: 152px;
- border-radius: 0 0 50% 50% / 0 0 20px 20px;
- }
- 32.5% {
- width: 294px;
- left: 23px;
- border-radius: 10px 10px 50% 50% / 10px 10px 20px 20px;
- }
-}
-@keyframes screen {
- 0% {
- width: 0;
- height: 0;
- bottom: 389px;
- left: 170px;
- border-radius: 0;
- }
- 16% {
- width: 0;
- height: 0;
- bottom: 389px;
- left: 170px;
- border-radius: 0;
- }
- 19.5% {
- width: 36px;
- height: 34px;
- left: 152px;
- bottom: 372px;
- border-radius: 0;
- }
- 23.5% {
- bottom: 278px;
- height: 34px;
- border-radius: 0 0 25% 25% / 0 0 10px 10px;
- }
- 27.5% {
- height: 263px;
- width: 36px;
- left: 152px;
- border-radius: 0 0 50% 50% / 0 0 20px 20px;
- }
- 32.5% {
- width: 294px;
- left: 23px;
- border-radius: 10px 10px 50% 50% / 10px 10px 20px 20px;
- }
-}
-#glass {
- position: absolute;
- z-index: 14;
- width: 294px;
- height: 263px;
- left: 23px;
- bottom: 278px;
- border-radius: 10px 10px 50% 50% / 10px 10px 20px 20px;
- background-color: #222222;
- -webkit-animation: screen 8s linear;
- animation: screen 8s linear;
-}
-@-moz-keyframes glass-gameboy-text {
- 0% {
- width: 0;
- }
- 38% {
- width: 0;
- }
- 42% {
- width: 95px;
- }
-}
-@-webkit-keyframes glass-gameboy-text {
- 0% {
- width: 0;
- }
- 38% {
- width: 0;
- }
- 42% {
- width: 95px;
- }
-}
-@keyframes glass-gameboy-text {
- 0% {
- width: 0;
- }
- 38% {
- width: 0;
- }
- 42% {
- width: 95px;
- }
-}
-#glass-gameboy-text {
- position: absolute;
- z-index: 15;
- top: 242px;
- left: 90px;
- width: 95px;
- color: #b0b0b0;
- overflow: hidden;
- font-size: 22px;
- font-weight: 400;
- font-style: italic;
- font-family: 'Asap', sans-serif;
- letter-spacing: -2px;
- white-space: nowrap;
- -webkit-transform: skew(-5deg);
- transform: skew(-5deg);
- -webkit-animation: glass-gameboy-text 8s linear;
- animation: glass-gameboy-text 8s linear;
-}
-@-moz-keyframes glass-color-text {
- 0% {
- color: transparent;
- }
- 42% {
- color: transparent;
- }
- 42.5% {
- color: #ff0151;
- }
-}
-@-webkit-keyframes glass-color-text {
- 0% {
- color: transparent;
- }
- 42% {
- color: transparent;
- }
- 42.5% {
- color: #ff0151;
- }
-}
-@keyframes glass-color-text {
- 0% {
- color: transparent;
- }
- 42% {
- color: transparent;
- }
- 42.5% {
- color: #ff0151;
- }
-}
-@-moz-keyframes glass-color-text-before {
- 0% {
- color: transparent;
- border-color: transparent;
- }
- 42.5% {
- border-color: transparent;
- }
- 43% {
- color: transparent;
- border-color: #5151dd;
- }
- 43.5% {
- color: #85e367;
- }
-}
-@-webkit-keyframes glass-color-text-before {
- 0% {
- color: transparent;
- border-color: transparent;
- }
- 42.5% {
- border-color: transparent;
- }
- 43% {
- color: transparent;
- border-color: #5151dd;
- }
- 43.5% {
- color: #85e367;
- }
-}
-@keyframes glass-color-text-before {
- 0% {
- color: transparent;
- border-color: transparent;
- }
- 42.5% {
- border-color: transparent;
- }
- 43% {
- color: transparent;
- border-color: #5151dd;
- }
- 43.5% {
- color: #85e367;
- }
-}
-@-moz-keyframes glass-color-text-after {
- 0% {
- color: transparent;
- border-color: transparent;
- }
- 43.5% {
- border-color: transparent;
- }
- 44% {
- color: transparent;
- border-color: #f9e52e;
- }
- 44.5% {
- color: #01b4dd;
- }
-}
-@-webkit-keyframes glass-color-text-after {
- 0% {
- color: transparent;
- border-color: transparent;
- }
- 43.5% {
- border-color: transparent;
- }
- 44% {
- color: transparent;
- border-color: #f9e52e;
- }
- 44.5% {
- color: #01b4dd;
- }
-}
-@keyframes glass-color-text-after {
- 0% {
- color: transparent;
- border-color: transparent;
- }
- 43.5% {
- border-color: transparent;
- }
- 44% {
- color: transparent;
- border-color: #f9e52e;
- }
- 44.5% {
- color: #01b4dd;
- }
-}
-#glass-color-text {
- z-index: 15;
- color: #ff0151;
- position: absolute;
- top: 242px;
- left: 186px;
- font-family: 'Comic Sans', 'Comic Sans MS', 'ChalkboardSE-Bold', sans-serif, cursive;
- font-size: 23px;
- letter-spacing: -2px;
- font-weight: 700;
- -webkit-animation: glass-color-text 8s linear;
- animation: glass-color-text 8s linear;
-}
-#glass-color-text::before {
- content: "L";
- position: absolute;
- left: 12px;
- top: 5px;
- line-height: 5px;
- text-indent: 10px;
- color: #85e367;
- border: 4px #5151dd solid;
- border-radius: 50%;
- width: 7px;
- height: 7px;
- -webkit-animation: glass-color-text-before 8s linear;
- animation: glass-color-text-before 8s linear;
-}
-#glass-color-text::after {
- content: "R";
- position: absolute;
- left: 36px;
- top: 5px;
- line-height: 5px;
- text-indent: 10px;
- color: #01b4dd;
- border: 4px #f9e52e solid;
- border-radius: 50%;
- width: 7px;
- height: 7px;
- -webkit-animation: glass-color-text-after 8s linear;
- animation: glass-color-text-after 8s linear;
-}
-@-moz-keyframes glass {
- 0% {
- width: 0;
- height: 0;
- top: 86px;
- left: 170px;
- }
- 28% {
- width: 0;
- height: 0;
- top: 86px;
- left: 170px;
- }
- 30% {
- width: 36px;
- height: 32px;
- top: 70px;
- left: 152px;
- }
- 34% {
- top: 130px;
- width: 36px;
- left: 152px;
- }
- 37% {
- width: 180px;
- left: 80px;
- height: 32px;
- top: 130px;
- }
- 40% {
- height: 160px;
- top: 60px;
- }
-}
-@-webkit-keyframes glass {
- 0% {
- width: 0;
- height: 0;
- top: 86px;
- left: 170px;
- }
- 28% {
- width: 0;
- height: 0;
- top: 86px;
- left: 170px;
- }
- 30% {
- width: 36px;
- height: 32px;
- top: 70px;
- left: 152px;
- }
- 34% {
- top: 130px;
- width: 36px;
- left: 152px;
- }
- 37% {
- width: 180px;
- left: 80px;
- height: 32px;
- top: 130px;
- }
- 40% {
- height: 160px;
- top: 60px;
- }
-}
-@keyframes glass {
- 0% {
- width: 0;
- height: 0;
- top: 86px;
- left: 170px;
- }
- 28% {
- width: 0;
- height: 0;
- top: 86px;
- left: 170px;
- }
- 30% {
- width: 36px;
- height: 32px;
- top: 70px;
- left: 152px;
- }
- 34% {
- top: 130px;
- width: 36px;
- left: 152px;
- }
- 37% {
- width: 180px;
- left: 80px;
- height: 32px;
- top: 130px;
- }
- 40% {
- height: 160px;
- top: 60px;
- }
-}
-#screen {
- position: absolute;
- z-index: 15;
- width: 180px;
- height: 160px;
- left: 80px;
- top: 60px;
- background-color: #f0f0f0;
- -webkit-animation: glass 8s linear;
- animation: glass 8s linear;
-}
-@-moz-keyframes screen-gameboy-text {
- 0% {
- color: #f9e52e;
- background-position: -120px;
- opacity: 0;
- }
- 63.9% {
- opacity: 0;
- }
- 64% {
- color: #f9e52e;
- background-position: -120px;
- opacity: 1;
- }
- 66.5% {
- color: #f9e52e;
- }
- 67% {
- color: #ff0151;
- }
- 69.5% {
- color: #ff0151;
- }
- 70% {
- color: #ff52e8;
- }
- 72.5% {
- color: #ff52e8;
- }
- 73% {
- color: #85e367;
- }
- 75.5% {
- color: #85e367;
- }
- 76% {
- color: #3232fc;
- }
- 78% {
- background-position: 130px;
- }
- 87% {
- opacity: 1;
- }
- 92% {
- opacity: 0;
- }
-}
-@-webkit-keyframes screen-gameboy-text {
- 0% {
- color: #f9e52e;
- background-position: -120px;
- opacity: 0;
- }
- 63.9% {
- opacity: 0;
- }
- 64% {
- color: #f9e52e;
- background-position: -120px;
- opacity: 1;
- }
- 66.5% {
- color: #f9e52e;
- }
- 67% {
- color: #ff0151;
- }
- 69.5% {
- color: #ff0151;
- }
- 70% {
- color: #ff52e8;
- }
- 72.5% {
- color: #ff52e8;
- }
- 73% {
- color: #85e367;
- }
- 75.5% {
- color: #85e367;
- }
- 76% {
- color: #3232fc;
- }
- 78% {
- background-position: 130px;
- }
- 87% {
- opacity: 1;
- }
- 92% {
- opacity: 0;
- }
-}
-@keyframes screen-gameboy-text {
- 0% {
- color: #f9e52e;
- background-position: -120px;
- opacity: 0;
- }
- 63.9% {
- opacity: 0;
- }
- 64% {
- color: #f9e52e;
- background-position: -120px;
- opacity: 1;
- }
- 66.5% {
- color: #f9e52e;
- }
- 67% {
- color: #ff0151;
- }
- 69.5% {
- color: #ff0151;
- }
- 70% {
- color: #ff52e8;
- }
- 72.5% {
- color: #ff52e8;
- }
- 73% {
- color: #85e367;
- }
- 75.5% {
- color: #85e367;
- }
- 76% {
- color: #3232fc;
- }
- 78% {
- background-position: 130px;
- }
- 87% {
- opacity: 1;
- }
- 92% {
- opacity: 0;
- }
-}
-#screen-gameboy-text {
- position: absolute;
- font-family: 'Asap', sans-serif;
- font-size: 32px;
- font-weight: 700;
- font-style: italic;
- letter-spacing: -2px;
- text-align: center;
- opacity: 0;
- width: 500px;
- left: -80px;
- top: 106px;
- -webkit-transform: skew(-5deg);
- transform: skew(-5deg);
- overflow: hidden;
- white-space: nowrap;
- z-index: 16;
- color: #3232fc;
- background: -webkit-linear-gradient(0deg, #3232fc 40%, #85e367 40%, #85e367 45%, #ff52e8 45%, #ff52e8 50%, #ff0151 50%, #ff0151 55%, #f9e52e 55%, #f9e52e 60%, #f0f0f0 60%);
- background-position: 130px;
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- -webkit-animation: screen-gameboy-text 8s linear;
- animation: screen-gameboy-text 8s linear;
-}
-@-moz-keyframes screen-nintendo-text {
- 0% {
- opacity: 0;
- }
- 56% {
- opacity: 0;
- }
- 57% {
- opacity: 1;
- }
- 87% {
- opacity: 1;
- }
- 92% {
- opacity: 0;
- }
-}
-@-webkit-keyframes screen-nintendo-text {
- 0% {
- opacity: 0;
- }
- 56% {
- opacity: 0;
- }
- 57% {
- opacity: 1;
- }
- 87% {
- opacity: 1;
- }
- 92% {
- opacity: 0;
- }
-}
-@keyframes screen-nintendo-text {
- 0% {
- opacity: 0;
- }
- 56% {
- opacity: 0;
- }
- 57% {
- opacity: 1;
- }
- 87% {
- opacity: 1;
- }
- 92% {
- opacity: 0;
- }
-}
-#screen-nintendo-text {
- z-index: 16;
- position: absolute;
- opacity: 0;
- top: 167px;
- left: 138px;
- font-family: Arial Black, sans-serif;
- font-weight: 700;
- font-size: 13px;
- -webkit-animation: screen-nintendo-text 8s linear;
- animation: screen-nintendo-text 8s linear;
-}
-@-moz-keyframes joystick-pad {
- 0% {
- width: 0;
- height: 0;
- left: 66px;
- bottom: 185px;
- border: 0 transparent solid;
- box-shadow: 0 0;
- }
- 14% {
- width: 0;
- height: 0;
- left: 66px;
- bottom: 185px;
- }
- 18% {
- width: 110px;
- height: 110px;
- left: 11px;
- bottom: 130px;
- }
- 18.5% {
- border: 0 transparent solid;
- }
- 20% {
- box-shadow: 0 0;
- }
- 20.5% {
- border: 5px #808080 solid;
- }
- 21.5% {
- border-width: 5px;
- box-shadow: 2px 4px;
- }
- 22% {
- border-width: 4px;
- box-shadow: 2px 3px;
- }
-}
-@-webkit-keyframes joystick-pad {
- 0% {
- width: 0;
- height: 0;
- left: 66px;
- bottom: 185px;
- border: 0 transparent solid;
- box-shadow: 0 0;
- }
- 14% {
- width: 0;
- height: 0;
- left: 66px;
- bottom: 185px;
- }
- 18% {
- width: 110px;
- height: 110px;
- left: 11px;
- bottom: 130px;
- }
- 18.5% {
- border: 0 transparent solid;
- }
- 20% {
- box-shadow: 0 0;
- }
- 20.5% {
- border: 5px #808080 solid;
- }
- 21.5% {
- border-width: 5px;
- box-shadow: 2px 4px;
- }
- 22% {
- border-width: 4px;
- box-shadow: 2px 3px;
- }
-}
-@keyframes joystick-pad {
- 0% {
- width: 0;
- height: 0;
- left: 66px;
- bottom: 185px;
- border: 0 transparent solid;
- box-shadow: 0 0;
- }
- 14% {
- width: 0;
- height: 0;
- left: 66px;
- bottom: 185px;
- }
- 18% {
- width: 110px;
- height: 110px;
- left: 11px;
- bottom: 130px;
- }
- 18.5% {
- border: 0 transparent solid;
- }
- 20% {
- box-shadow: 0 0;
- }
- 20.5% {
- border: 5px #808080 solid;
- }
- 21.5% {
- border-width: 5px;
- box-shadow: 2px 4px;
- }
- 22% {
- border-width: 4px;
- box-shadow: 2px 3px;
- }
-}
-#joystick-pad {
- position: absolute;
- z-index: 5;
- width: 110px;
- height: 110px;
- border-radius: 100%;
- border: 4px #808080 solid;
- box-shadow: 2px 3px;
- background-color: #f0f0f0;
- left: 11px;
- bottom: 130px;
- -webkit-animation: joystick-pad 8s linear;
- animation: joystick-pad 8s linear;
-}
-@-moz-keyframes joystick {
- 0% {
- color: transparent;
- font-size: 12px;
- line-height: 101px;
- text-indent: 54px;
- }
- 18% {
- font-size: 12px;
- line-height: 101px;
- text-indent: 54px;
- }
- 20% {
- color: transparent;
- }
- 23.5% {
- color: #222222;
- font-size: 102px;
- line-height: 44px;
- text-indent: 43px;
- }
-}
-@-webkit-keyframes joystick {
- 0% {
- color: transparent;
- font-size: 12px;
- line-height: 101px;
- text-indent: 54px;
- }
- 18% {
- font-size: 12px;
- line-height: 101px;
- text-indent: 54px;
- }
- 20% {
- color: transparent;
- }
- 23.5% {
- color: #222222;
- font-size: 102px;
- line-height: 44px;
- text-indent: 43px;
- }
-}
-@keyframes joystick {
- 0% {
- color: transparent;
- font-size: 12px;
- line-height: 101px;
- text-indent: 54px;
- }
- 18% {
- font-size: 12px;
- line-height: 101px;
- text-indent: 54px;
- }
- 20% {
- color: transparent;
- }
- 23.5% {
- color: #222222;
- font-size: 102px;
- line-height: 44px;
- text-indent: 43px;
- }
-}
-@-moz-keyframes joystick-control {
- 0% {
- width: 0;
- height: 0;
- padding: 0;
- padding-top: 5px;
- font-size: 0;
- line-height: 1px;
- color: transparent;
- top: 55px;
- left: 55px;
- }
- 18% {
- width: 0;
- height: 0;
- padding: 0;
- padding-top: 5px;
- font-size: 0;
- line-height: 1px;
- color: transparent;
- top: 55px;
- left: 55px;
- }
- 20% {
- color: transparent;
- }
- 23.5% {
- width: 26px;
- height: 86px;
- padding-left: 5px;
- padding-right: 5px;
- padding-top: 0;
- font-size: 16px;
- line-height: 21px;
- color: #222222;
- top: 12px;
- left: 42px;
- }
-}
-@-webkit-keyframes joystick-control {
- 0% {
- width: 0;
- height: 0;
- padding: 0;
- padding-top: 5px;
- font-size: 0;
- line-height: 1px;
- color: transparent;
- top: 55px;
- left: 55px;
- }
- 18% {
- width: 0;
- height: 0;
- padding: 0;
- padding-top: 5px;
- font-size: 0;
- line-height: 1px;
- color: transparent;
- top: 55px;
- left: 55px;
- }
- 20% {
- color: transparent;
- }
- 23.5% {
- width: 26px;
- height: 86px;
- padding-left: 5px;
- padding-right: 5px;
- padding-top: 0;
- font-size: 16px;
- line-height: 21px;
- color: #222222;
- top: 12px;
- left: 42px;
- }
-}
-@keyframes joystick-control {
- 0% {
- width: 0;
- height: 0;
- padding: 0;
- padding-top: 5px;
- font-size: 0;
- line-height: 1px;
- color: transparent;
- top: 55px;
- left: 55px;
- }
- 18% {
- width: 0;
- height: 0;
- padding: 0;
- padding-top: 5px;
- font-size: 0;
- line-height: 1px;
- color: transparent;
- top: 55px;
- left: 55px;
- }
- 20% {
- color: transparent;
- }
- 23.5% {
- width: 26px;
- height: 86px;
- padding-left: 5px;
- padding-right: 5px;
- padding-top: 0;
- font-size: 16px;
- line-height: 21px;
- color: #222222;
- top: 12px;
- left: 42px;
- }
-}
-#joystick {
- position: absolute;
- z-index: 14;
- width: 110px;
- height: 110px;
- bottom: 130px;
- left: 11px;
- font-size: 102px;
- font-weight: 700;
- font-family: 'Oxygen', Helvetica, arial, sans-serif;
- line-height: 44px;
- text-indent: 43px;
- color: #222222;
- -webkit-animation: joystick 8s linear;
- animation: joystick 8s linear;
-}
-#joystick::before,
-#joystick::after {
- position: absolute;
- content: "\025B2\03000\03000\025BC";
- box-sizing: border-box;
- z-index: -1;
- left: 42px;
- top: 12px;
- text-indent: 0;
- width: 26px;
- height: 86px;
- padding-left: 5px;
- padding-right: 5px;
- line-height: 21px;
- border-radius: 3px;
- background-color: #303030;
- word-wrap: break-word;
- text-align: center;
- font-size: 16px;
- color: #222222;
- -webkit-animation: joystick-control 8s linear;
- animation: joystick-control 8s linear;
-}
-#joystick::after {
- -webkit-transform: rotateZ(-90deg);
- transform: rotateZ(-90deg);
-}
-@-moz-keyframes control {
- 0% {
- width: 0;
- height: 0;
- border: 0 transparent solid;
- box-shadow: 0 0;
- right: 86px;
- bottom: 186px;
- }
- 16% {
- width: 0;
- height: 0;
- right: 86px;
- bottom: 186px;
- -webkit-transform: rotate(18deg);
- transform: rotate(18deg);
- }
- 18.5% {
- width: 122px;
- height: 52px;
- right: 25px;
- bottom: 160px;
- -webkit-transform: rotate(-18deg);
- transform: rotate(-18deg);
- }
- 20% {
- border: 0 #808080 solid;
- }
- 22% {
- border-width: 6px;
- box-shadow: 0 0;
- }
- 24% {
- border-width: 4px;
- box-shadow: 0 4px;
- }
- 26% {
- box-shadow: 0 3px;
- }
- 100% {
- -webkit-transform: rotate(-18deg);
- transform: rotate(-18deg);
- }
-}
-@-webkit-keyframes control {
- 0% {
- width: 0;
- height: 0;
- border: 0 transparent solid;
- box-shadow: 0 0;
- right: 86px;
- bottom: 186px;
- }
- 16% {
- width: 0;
- height: 0;
- right: 86px;
- bottom: 186px;
- -webkit-transform: rotate(18deg);
- transform: rotate(18deg);
- }
- 18.5% {
- width: 122px;
- height: 52px;
- right: 25px;
- bottom: 160px;
- -webkit-transform: rotate(-18deg);
- transform: rotate(-18deg);
- }
- 20% {
- border: 0 #808080 solid;
- }
- 22% {
- border-width: 6px;
- box-shadow: 0 0;
- }
- 24% {
- border-width: 4px;
- box-shadow: 0 4px;
- }
- 26% {
- box-shadow: 0 3px;
- }
- 100% {
- -webkit-transform: rotate(-18deg);
- transform: rotate(-18deg);
- }
-}
-@keyframes control {
- 0% {
- width: 0;
- height: 0;
- border: 0 transparent solid;
- box-shadow: 0 0;
- right: 86px;
- bottom: 186px;
- }
- 16% {
- width: 0;
- height: 0;
- right: 86px;
- bottom: 186px;
- -webkit-transform: rotate(18deg);
- transform: rotate(18deg);
- }
- 18.5% {
- width: 122px;
- height: 52px;
- right: 25px;
- bottom: 160px;
- -webkit-transform: rotate(-18deg);
- transform: rotate(-18deg);
- }
- 20% {
- border: 0 #808080 solid;
- }
- 22% {
- border-width: 6px;
- box-shadow: 0 0;
- }
- 24% {
- border-width: 4px;
- box-shadow: 0 4px;
- }
- 26% {
- box-shadow: 0 3px;
- }
- 100% {
- -webkit-transform: rotate(-18deg);
- transform: rotate(-18deg);
- }
-}
-#control {
- position: absolute;
- z-index: 5;
- background-color: #f0f0f0;
- width: 122px;
- height: 52px;
- bottom: 160px;
- right: 25px;
- border-radius: 20% / 50%;
- border: 4px #808080 solid;
- box-shadow: 0 3px;
- -webkit-transform: rotate(-18deg);
- transform: rotate(-18deg);
- -webkit-animation: control 8s linear;
- animation: control 8s linear;
-}
-.control-button {
- position: absolute;
- z-index: 14;
- width: 40px;
- height: 40px;
- background-color: #303030;
- border-radius: 100%;
- color: transparent;
- text-shadow: 0 0 1px #222222;
- line-height: 38px;
- text-align: center;
- font-size: 25px;
- font-weight: 300;
- font-family: 'Oxygen', Helvetica, arial, sans-serif;
-}
-@-moz-keyframes control-b {
- 0% {
- width: 0;
- height: 0;
- right: 117px;
- bottom: 176px;
- font-size: 0;
- }
- 18.5% {
- width: 0;
- height: 0;
- right: 117px;
- bottom: 176px;
- }
- 20% {
- font-size: 0;
- }
- 21% {
- width: 40px;
- height: 40px;
- right: 97px;
- bottom: 156px;
- font-size: 25px;
- }
-}
-@-webkit-keyframes control-b {
- 0% {
- width: 0;
- height: 0;
- right: 117px;
- bottom: 176px;
- font-size: 0;
- }
- 18.5% {
- width: 0;
- height: 0;
- right: 117px;
- bottom: 176px;
- }
- 20% {
- font-size: 0;
- }
- 21% {
- width: 40px;
- height: 40px;
- right: 97px;
- bottom: 156px;
- font-size: 25px;
- }
-}
-@keyframes control-b {
- 0% {
- width: 0;
- height: 0;
- right: 117px;
- bottom: 176px;
- font-size: 0;
- }
- 18.5% {
- width: 0;
- height: 0;
- right: 117px;
- bottom: 176px;
- }
- 20% {
- font-size: 0;
- }
- 21% {
- width: 40px;
- height: 40px;
- right: 97px;
- bottom: 156px;
- font-size: 25px;
- }
-}
-#control-b {
- color: white;
- right: 97px;
- bottom: 156px;
- -webkit-animation: control-b 8s linear;
- animation: control-b 8s linear;
-}
-@-moz-keyframes control-a {
- 0% {
- width: 0;
- height: 0;
- right: 54px;
- bottom: 196px;
- font-size: 0;
- }
- 20% {
- width: 0;
- height: 0;
- right: 54px;
- bottom: 196px;
- }
- 21.5% {
- font-size: 0;
- }
- 22.5% {
- width: 40px;
- height: 40px;
- right: 34px;
- bottom: 176px;
- font-size: 25px;
- }
-}
-@-webkit-keyframes control-a {
- 0% {
- width: 0;
- height: 0;
- right: 54px;
- bottom: 196px;
- font-size: 0;
- }
- 20% {
- width: 0;
- height: 0;
- right: 54px;
- bottom: 196px;
- }
- 21.5% {
- font-size: 0;
- }
- 22.5% {
- width: 40px;
- height: 40px;
- right: 34px;
- bottom: 176px;
- font-size: 25px;
- }
-}
-@keyframes control-a {
- 0% {
- width: 0;
- height: 0;
- right: 54px;
- bottom: 196px;
- font-size: 0;
- }
- 20% {
- width: 0;
- height: 0;
- right: 54px;
- bottom: 196px;
- }
- 21.5% {
- font-size: 0;
- }
- 22.5% {
- width: 40px;
- height: 40px;
- right: 34px;
- bottom: 176px;
- font-size: 25px;
- }
-}
-#control-a {
- color: white;
- right: 34px;
- bottom: 176px;
- -webkit-animation: control-a 8s linear;
- animation: control-a 8s linear;
-}
-@-moz-keyframes start-select-box {
- 0% {
- width: 0;
- left: 170px;
- }
- 18% {
- width: 0;
- left: 170px;
- }
- 21.5% {
- width: 100px;
- left: 120px;
- }
-}
-@-webkit-keyframes start-select-box {
- 0% {
- width: 0;
- left: 170px;
- }
- 18% {
- width: 0;
- left: 170px;
- }
- 21.5% {
- width: 100px;
- left: 120px;
- }
-}
-@keyframes start-select-box {
- 0% {
- width: 0;
- left: 170px;
- }
- 18% {
- width: 0;
- left: 170px;
- }
- 21.5% {
- width: 100px;
- left: 120px;
- }
-}
-@-moz-keyframes start-select-pad {
- 0% {
- width: 0;
- height: 0;
- left: 21px;
- bottom: 8.5px;
- box-shadow: 58px 0 #9d9d9d;
- }
- 22% {
- width: 0;
- height: 0;
- left: 21px;
- bottom: 8.5px;
- box-shadow: 58px 0 #9d9d9d;
- }
- 26% {
- width: 40px;
- height: 13px;
- left: 1px;
- bottom: 2px;
- box-shadow: 58px 0 #9d9d9d;
- }
- 28.5% {
- left: 5px;
- box-shadow: 50px 0 #9d9d9d;
- }
-}
-@-webkit-keyframes start-select-pad {
- 0% {
- width: 0;
- height: 0;
- left: 21px;
- bottom: 8.5px;
- box-shadow: 58px 0 #9d9d9d;
- }
- 22% {
- width: 0;
- height: 0;
- left: 21px;
- bottom: 8.5px;
- box-shadow: 58px 0 #9d9d9d;
- }
- 26% {
- width: 40px;
- height: 13px;
- left: 1px;
- bottom: 2px;
- box-shadow: 58px 0 #9d9d9d;
- }
- 28.5% {
- left: 5px;
- box-shadow: 50px 0 #9d9d9d;
- }
-}
-@keyframes start-select-pad {
- 0% {
- width: 0;
- height: 0;
- left: 21px;
- bottom: 8.5px;
- box-shadow: 58px 0 #9d9d9d;
- }
- 22% {
- width: 0;
- height: 0;
- left: 21px;
- bottom: 8.5px;
- box-shadow: 58px 0 #9d9d9d;
- }
- 26% {
- width: 40px;
- height: 13px;
- left: 1px;
- bottom: 2px;
- box-shadow: 58px 0 #9d9d9d;
- }
- 28.5% {
- left: 5px;
- box-shadow: 50px 0 #9d9d9d;
- }
-}
-#start-select-box {
- border-top: 4px #808080 solid;
- border-bottom: 4px #808080 solid;
- position: absolute;
- z-index: 5;
- width: 100px;
- height: 25px;
- bottom: 85px;
- left: 120px;
- background-color: #f0f0f0;
- -webkit-animation: start-select-box 8s linear;
- animation: start-select-box 8s linear;
-}
-#start-select-box::before {
- content: "";
- position: absolute;
- z-index: 6;
- bottom: 2px;
- width: 40px;
- height: 13px;
- border-radius: 10px;
- background-color: #9d9d9d;
- left: 5px;
- box-shadow: 50px 0 #9d9d9d;
- -webkit-animation: start-select-pad 8s linear;
- animation: start-select-pad 8s linear;
-}
-@-moz-keyframes start-select-button {
- 0% {
- width: 0;
- height: 0;
- bottom: 97.5px;
- left: 145px;
- }
- 29.5% {
- width: 0;
- height: 0;
- bottom: 97.5px;
- left: 145px;
- }
- 34% {
- width: 32px;
- height: 9px;
- bottom: 93px;
- left: 129px;
- }
-}
-@-webkit-keyframes start-select-button {
- 0% {
- width: 0;
- height: 0;
- bottom: 97.5px;
- left: 145px;
- }
- 29.5% {
- width: 0;
- height: 0;
- bottom: 97.5px;
- left: 145px;
- }
- 34% {
- width: 32px;
- height: 9px;
- bottom: 93px;
- left: 129px;
- }
-}
-@keyframes start-select-button {
- 0% {
- width: 0;
- height: 0;
- bottom: 97.5px;
- left: 145px;
- }
- 29.5% {
- width: 0;
- height: 0;
- bottom: 97.5px;
- left: 145px;
- }
- 34% {
- width: 32px;
- height: 9px;
- bottom: 93px;
- left: 129px;
- }
-}
-#start-select-button {
- position: absolute;
- z-index: 14;
- width: 32px;
- height: 9px;
- bottom: 93px;
- left: 129px;
- background-color: #303030;
- border-radius: 80% / 100%;
- box-shadow: 50px 0 #303030;
- -webkit-animation: start-select-button 8s linear;
- animation: start-select-button 8s linear;
-}
-#cover-vertical {
- position: absolute;
- z-index: 12;
- width: 34px;
- height: 570px;
- bottom: 0;
-}
-@-moz-keyframes cover-vertical-transparent {
- 0% {
- width: 0;
- height: 0;
- box-shadow: none;
- }
- 39% {
- width: 34px;
- height: 0;
- }
- 39.90909091% {
- height: 285px;
- box-shadow: 34px 570px rgba(140, 46, 217, 0.125), 68px 570px rgba(140, 46, 217, 0.125), 102px 570px rgba(140, 46, 217, 0.125), 136px 570px rgba(140, 46, 217, 0.125), 170px 570px rgba(140, 46, 217, 0.125), 204px 570px rgba(140, 46, 217, 0.125), 238px 570px rgba(140, 46, 217, 0.125), 272px 570px rgba(140, 46, 217, 0.125), 306px 570px rgba(140, 46, 217, 0.125);
- }
- 40.81818182% {
- height: 570px;
- box-shadow: 34px 285px rgba(140, 46, 217, 0.125), 68px 570px rgba(140, 46, 217, 0.125), 102px 570px rgba(140, 46, 217, 0.125), 136px 570px rgba(140, 46, 217, 0.125), 170px 570px rgba(140, 46, 217, 0.125), 204px 570px rgba(140, 46, 217, 0.125), 238px 570px rgba(140, 46, 217, 0.125), 272px 570px rgba(140, 46, 217, 0.125), 306px 570px rgba(140, 46, 217, 0.125);
- }
- 41.72727273% {
- box-shadow: 34px 0 rgba(140, 46, 217, 0.125), 68px 285px rgba(140, 46, 217, 0.125), 102px 570px rgba(140, 46, 217, 0.125), 136px 570px rgba(140, 46, 217, 0.125), 170px 570px rgba(140, 46, 217, 0.125), 204px 570px rgba(140, 46, 217, 0.125), 238px 570px rgba(140, 46, 217, 0.125), 272px 570px rgba(140, 46, 217, 0.125), 306px 570px rgba(140, 46, 217, 0.125);
- }
- 42.63636364% {
- box-shadow: 34px 0 rgba(140, 46, 217, 0.125), 68px 0 rgba(140, 46, 217, 0.125), 102px 285px rgba(140, 46, 217, 0.125), 136px 570px rgba(140, 46, 217, 0.125), 170px 570px rgba(140, 46, 217, 0.125), 204px 570px rgba(140, 46, 217, 0.125), 238px 570px rgba(140, 46, 217, 0.125), 272px 570px rgba(140, 46, 217, 0.125), 306px 570px rgba(140, 46, 217, 0.125);
- }
- 43.54545455% {
- box-shadow: 34px 0 rgba(140, 46, 217, 0.125), 68px 0 rgba(140, 46, 217, 0.125), 102px 0 rgba(140, 46, 217, 0.125), 136px 285px rgba(140, 46, 217, 0.125), 170px 570px rgba(140, 46, 217, 0.125), 204px 570px rgba(140, 46, 217, 0.125), 238px 570px rgba(140, 46, 217, 0.125), 272px 570px rgba(140, 46, 217, 0.125), 306px 570px rgba(140, 46, 217, 0.125);
- }
- 44.45454545% {
- box-shadow: 34px 0 rgba(140, 46, 217, 0.125), 68px 0 rgba(140, 46, 217, 0.125), 102px 0 rgba(140, 46, 217, 0.125), 136px 0 rgba(140, 46, 217, 0.125), 170px 285px rgba(140, 46, 217, 0.125), 204px 570px rgba(140, 46, 217, 0.125), 238px 570px rgba(140, 46, 217, 0.125), 272px 570px rgba(140, 46, 217, 0.125), 306px 570px rgba(140, 46, 217, 0.125);
- }
- 45.36363636% {
- box-shadow: 34px 0 rgba(140, 46, 217, 0.125), 68px 0 rgba(140, 46, 217, 0.125), 102px 0 rgba(140, 46, 217, 0.125), 136px 0 rgba(140, 46, 217, 0.125), 170px 0 rgba(140, 46, 217, 0.125), 204px 285px rgba(140, 46, 217, 0.125), 238px 570px rgba(140, 46, 217, 0.125), 272px 570px rgba(140, 46, 217, 0.125), 306px 570px rgba(140, 46, 217, 0.125);
- }
- 46.27272727% {
- box-shadow: 34px 0 rgba(140, 46, 217, 0.125), 68px 0 rgba(140, 46, 217, 0.125), 102px 0 rgba(140, 46, 217, 0.125), 136px 0 rgba(140, 46, 217, 0.125), 170px 0 rgba(140, 46, 217, 0.125), 204px 0 rgba(140, 46, 217, 0.125), 238px 285px rgba(140, 46, 217, 0.125), 272px 570px rgba(140, 46, 217, 0.125), 306px 570px rgba(140, 46, 217, 0.125);
- }
- 47.18181818% {
- box-shadow: 34px 0 rgba(140, 46, 217, 0.125), 68px 0 rgba(140, 46, 217, 0.125), 102px 0 rgba(140, 46, 217, 0.125), 136px 0 rgba(140, 46, 217, 0.125), 170px 0 rgba(140, 46, 217, 0.125), 204px 0 rgba(140, 46, 217, 0.125), 238px 0 rgba(140, 46, 217, 0.125), 272px 285px rgba(140, 46, 217, 0.125), 306px 570px rgba(140, 46, 217, 0.125);
- }
- 48.09090909% {
- box-shadow: 34px 0 rgba(140, 46, 217, 0.125), 68px 0 rgba(140, 46, 217, 0.125), 102px 0 rgba(140, 46, 217, 0.125), 136px 0 rgba(140, 46, 217, 0.125), 170px 0 rgba(140, 46, 217, 0.125), 204px 0 rgba(140, 46, 217, 0.125), 238px 0 rgba(140, 46, 217, 0.125), 272px 0 rgba(140, 46, 217, 0.125), 306px 285px rgba(140, 46, 217, 0.125);
- }
- 49% {
- box-shadow: 34px 0 rgba(140, 46, 217, 0.125), 68px 0 rgba(140, 46, 217, 0.125), 102px 0 rgba(140, 46, 217, 0.125), 136px 0 rgba(140, 46, 217, 0.125), 170px 0 rgba(140, 46, 217, 0.125), 204px 0 rgba(140, 46, 217, 0.125), 238px 0 rgba(140, 46, 217, 0.125), 272px 0 rgba(140, 46, 217, 0.125), 306px 0 rgba(140, 46, 217, 0.125);
- }
-}
-@-webkit-keyframes cover-vertical-transparent {
- 0% {
- width: 0;
- height: 0;
- box-shadow: none;
- }
- 39% {
- width: 34px;
- height: 0;
- }
- 39.90909091% {
- height: 285px;
- box-shadow: 34px 570px rgba(140, 46, 217, 0.125), 68px 570px rgba(140, 46, 217, 0.125), 102px 570px rgba(140, 46, 217, 0.125), 136px 570px rgba(140, 46, 217, 0.125), 170px 570px rgba(140, 46, 217, 0.125), 204px 570px rgba(140, 46, 217, 0.125), 238px 570px rgba(140, 46, 217, 0.125), 272px 570px rgba(140, 46, 217, 0.125), 306px 570px rgba(140, 46, 217, 0.125);
- }
- 40.81818182% {
- height: 570px;
- box-shadow: 34px 285px rgba(140, 46, 217, 0.125), 68px 570px rgba(140, 46, 217, 0.125), 102px 570px rgba(140, 46, 217, 0.125), 136px 570px rgba(140, 46, 217, 0.125), 170px 570px rgba(140, 46, 217, 0.125), 204px 570px rgba(140, 46, 217, 0.125), 238px 570px rgba(140, 46, 217, 0.125), 272px 570px rgba(140, 46, 217, 0.125), 306px 570px rgba(140, 46, 217, 0.125);
- }
- 41.72727273% {
- box-shadow: 34px 0 rgba(140, 46, 217, 0.125), 68px 285px rgba(140, 46, 217, 0.125), 102px 570px rgba(140, 46, 217, 0.125), 136px 570px rgba(140, 46, 217, 0.125), 170px 570px rgba(140, 46, 217, 0.125), 204px 570px rgba(140, 46, 217, 0.125), 238px 570px rgba(140, 46, 217, 0.125), 272px 570px rgba(140, 46, 217, 0.125), 306px 570px rgba(140, 46, 217, 0.125);
- }
- 42.63636364% {
- box-shadow: 34px 0 rgba(140, 46, 217, 0.125), 68px 0 rgba(140, 46, 217, 0.125), 102px 285px rgba(140, 46, 217, 0.125), 136px 570px rgba(140, 46, 217, 0.125), 170px 570px rgba(140, 46, 217, 0.125), 204px 570px rgba(140, 46, 217, 0.125), 238px 570px rgba(140, 46, 217, 0.125), 272px 570px rgba(140, 46, 217, 0.125), 306px 570px rgba(140, 46, 217, 0.125);
- }
- 43.54545455% {
- box-shadow: 34px 0 rgba(140, 46, 217, 0.125), 68px 0 rgba(140, 46, 217, 0.125), 102px 0 rgba(140, 46, 217, 0.125), 136px 285px rgba(140, 46, 217, 0.125), 170px 570px rgba(140, 46, 217, 0.125), 204px 570px rgba(140, 46, 217, 0.125), 238px 570px rgba(140, 46, 217, 0.125), 272px 570px rgba(140, 46, 217, 0.125), 306px 570px rgba(140, 46, 217, 0.125);
- }
- 44.45454545% {
- box-shadow: 34px 0 rgba(140, 46, 217, 0.125), 68px 0 rgba(140, 46, 217, 0.125), 102px 0 rgba(140, 46, 217, 0.125), 136px 0 rgba(140, 46, 217, 0.125), 170px 285px rgba(140, 46, 217, 0.125), 204px 570px rgba(140, 46, 217, 0.125), 238px 570px rgba(140, 46, 217, 0.125), 272px 570px rgba(140, 46, 217, 0.125), 306px 570px rgba(140, 46, 217, 0.125);
- }
- 45.36363636% {
- box-shadow: 34px 0 rgba(140, 46, 217, 0.125), 68px 0 rgba(140, 46, 217, 0.125), 102px 0 rgba(140, 46, 217, 0.125), 136px 0 rgba(140, 46, 217, 0.125), 170px 0 rgba(140, 46, 217, 0.125), 204px 285px rgba(140, 46, 217, 0.125), 238px 570px rgba(140, 46, 217, 0.125), 272px 570px rgba(140, 46, 217, 0.125), 306px 570px rgba(140, 46, 217, 0.125);
- }
- 46.27272727% {
- box-shadow: 34px 0 rgba(140, 46, 217, 0.125), 68px 0 rgba(140, 46, 217, 0.125), 102px 0 rgba(140, 46, 217, 0.125), 136px 0 rgba(140, 46, 217, 0.125), 170px 0 rgba(140, 46, 217, 0.125), 204px 0 rgba(140, 46, 217, 0.125), 238px 285px rgba(140, 46, 217, 0.125), 272px 570px rgba(140, 46, 217, 0.125), 306px 570px rgba(140, 46, 217, 0.125);
- }
- 47.18181818% {
- box-shadow: 34px 0 rgba(140, 46, 217, 0.125), 68px 0 rgba(140, 46, 217, 0.125), 102px 0 rgba(140, 46, 217, 0.125), 136px 0 rgba(140, 46, 217, 0.125), 170px 0 rgba(140, 46, 217, 0.125), 204px 0 rgba(140, 46, 217, 0.125), 238px 0 rgba(140, 46, 217, 0.125), 272px 285px rgba(140, 46, 217, 0.125), 306px 570px rgba(140, 46, 217, 0.125);
- }
- 48.09090909% {
- box-shadow: 34px 0 rgba(140, 46, 217, 0.125), 68px 0 rgba(140, 46, 217, 0.125), 102px 0 rgba(140, 46, 217, 0.125), 136px 0 rgba(140, 46, 217, 0.125), 170px 0 rgba(140, 46, 217, 0.125), 204px 0 rgba(140, 46, 217, 0.125), 238px 0 rgba(140, 46, 217, 0.125), 272px 0 rgba(140, 46, 217, 0.125), 306px 285px rgba(140, 46, 217, 0.125);
- }
- 49% {
- box-shadow: 34px 0 rgba(140, 46, 217, 0.125), 68px 0 rgba(140, 46, 217, 0.125), 102px 0 rgba(140, 46, 217, 0.125), 136px 0 rgba(140, 46, 217, 0.125), 170px 0 rgba(140, 46, 217, 0.125), 204px 0 rgba(140, 46, 217, 0.125), 238px 0 rgba(140, 46, 217, 0.125), 272px 0 rgba(140, 46, 217, 0.125), 306px 0 rgba(140, 46, 217, 0.125);
- }
-}
-@keyframes cover-vertical-transparent {
- 0% {
- width: 0;
- height: 0;
- box-shadow: none;
- }
- 39% {
- width: 34px;
- height: 0;
- }
- 39.90909091% {
- height: 285px;
- box-shadow: 34px 570px rgba(140, 46, 217, 0.125), 68px 570px rgba(140, 46, 217, 0.125), 102px 570px rgba(140, 46, 217, 0.125), 136px 570px rgba(140, 46, 217, 0.125), 170px 570px rgba(140, 46, 217, 0.125), 204px 570px rgba(140, 46, 217, 0.125), 238px 570px rgba(140, 46, 217, 0.125), 272px 570px rgba(140, 46, 217, 0.125), 306px 570px rgba(140, 46, 217, 0.125);
- }
- 40.81818182% {
- height: 570px;
- box-shadow: 34px 285px rgba(140, 46, 217, 0.125), 68px 570px rgba(140, 46, 217, 0.125), 102px 570px rgba(140, 46, 217, 0.125), 136px 570px rgba(140, 46, 217, 0.125), 170px 570px rgba(140, 46, 217, 0.125), 204px 570px rgba(140, 46, 217, 0.125), 238px 570px rgba(140, 46, 217, 0.125), 272px 570px rgba(140, 46, 217, 0.125), 306px 570px rgba(140, 46, 217, 0.125);
- }
- 41.72727273% {
- box-shadow: 34px 0 rgba(140, 46, 217, 0.125), 68px 285px rgba(140, 46, 217, 0.125), 102px 570px rgba(140, 46, 217, 0.125), 136px 570px rgba(140, 46, 217, 0.125), 170px 570px rgba(140, 46, 217, 0.125), 204px 570px rgba(140, 46, 217, 0.125), 238px 570px rgba(140, 46, 217, 0.125), 272px 570px rgba(140, 46, 217, 0.125), 306px 570px rgba(140, 46, 217, 0.125);
- }
- 42.63636364% {
- box-shadow: 34px 0 rgba(140, 46, 217, 0.125), 68px 0 rgba(140, 46, 217, 0.125), 102px 285px rgba(140, 46, 217, 0.125), 136px 570px rgba(140, 46, 217, 0.125), 170px 570px rgba(140, 46, 217, 0.125), 204px 570px rgba(140, 46, 217, 0.125), 238px 570px rgba(140, 46, 217, 0.125), 272px 570px rgba(140, 46, 217, 0.125), 306px 570px rgba(140, 46, 217, 0.125);
- }
- 43.54545455% {
- box-shadow: 34px 0 rgba(140, 46, 217, 0.125), 68px 0 rgba(140, 46, 217, 0.125), 102px 0 rgba(140, 46, 217, 0.125), 136px 285px rgba(140, 46, 217, 0.125), 170px 570px rgba(140, 46, 217, 0.125), 204px 570px rgba(140, 46, 217, 0.125), 238px 570px rgba(140, 46, 217, 0.125), 272px 570px rgba(140, 46, 217, 0.125), 306px 570px rgba(140, 46, 217, 0.125);
- }
- 44.45454545% {
- box-shadow: 34px 0 rgba(140, 46, 217, 0.125), 68px 0 rgba(140, 46, 217, 0.125), 102px 0 rgba(140, 46, 217, 0.125), 136px 0 rgba(140, 46, 217, 0.125), 170px 285px rgba(140, 46, 217, 0.125), 204px 570px rgba(140, 46, 217, 0.125), 238px 570px rgba(140, 46, 217, 0.125), 272px 570px rgba(140, 46, 217, 0.125), 306px 570px rgba(140, 46, 217, 0.125);
- }
- 45.36363636% {
- box-shadow: 34px 0 rgba(140, 46, 217, 0.125), 68px 0 rgba(140, 46, 217, 0.125), 102px 0 rgba(140, 46, 217, 0.125), 136px 0 rgba(140, 46, 217, 0.125), 170px 0 rgba(140, 46, 217, 0.125), 204px 285px rgba(140, 46, 217, 0.125), 238px 570px rgba(140, 46, 217, 0.125), 272px 570px rgba(140, 46, 217, 0.125), 306px 570px rgba(140, 46, 217, 0.125);
- }
- 46.27272727% {
- box-shadow: 34px 0 rgba(140, 46, 217, 0.125), 68px 0 rgba(140, 46, 217, 0.125), 102px 0 rgba(140, 46, 217, 0.125), 136px 0 rgba(140, 46, 217, 0.125), 170px 0 rgba(140, 46, 217, 0.125), 204px 0 rgba(140, 46, 217, 0.125), 238px 285px rgba(140, 46, 217, 0.125), 272px 570px rgba(140, 46, 217, 0.125), 306px 570px rgba(140, 46, 217, 0.125);
- }
- 47.18181818% {
- box-shadow: 34px 0 rgba(140, 46, 217, 0.125), 68px 0 rgba(140, 46, 217, 0.125), 102px 0 rgba(140, 46, 217, 0.125), 136px 0 rgba(140, 46, 217, 0.125), 170px 0 rgba(140, 46, 217, 0.125), 204px 0 rgba(140, 46, 217, 0.125), 238px 0 rgba(140, 46, 217, 0.125), 272px 285px rgba(140, 46, 217, 0.125), 306px 570px rgba(140, 46, 217, 0.125);
- }
- 48.09090909% {
- box-shadow: 34px 0 rgba(140, 46, 217, 0.125), 68px 0 rgba(140, 46, 217, 0.125), 102px 0 rgba(140, 46, 217, 0.125), 136px 0 rgba(140, 46, 217, 0.125), 170px 0 rgba(140, 46, 217, 0.125), 204px 0 rgba(140, 46, 217, 0.125), 238px 0 rgba(140, 46, 217, 0.125), 272px 0 rgba(140, 46, 217, 0.125), 306px 285px rgba(140, 46, 217, 0.125);
- }
- 49% {
- box-shadow: 34px 0 rgba(140, 46, 217, 0.125), 68px 0 rgba(140, 46, 217, 0.125), 102px 0 rgba(140, 46, 217, 0.125), 136px 0 rgba(140, 46, 217, 0.125), 170px 0 rgba(140, 46, 217, 0.125), 204px 0 rgba(140, 46, 217, 0.125), 238px 0 rgba(140, 46, 217, 0.125), 272px 0 rgba(140, 46, 217, 0.125), 306px 0 rgba(140, 46, 217, 0.125);
- }
-}
-#gameboy.transparent #cover-vertical {
- background-color: rgba(140, 46, 217, 0.125);
- -webkit-animation: cover-vertical-transparent 8s linear;
- animation: cover-vertical-transparent 8s linear;
- box-shadow: 34px 0 rgba(140, 46, 217, 0.125), 68px 0 rgba(140, 46, 217, 0.125), 102px 0 rgba(140, 46, 217, 0.125), 136px 0 rgba(140, 46, 217, 0.125), 170px 0 rgba(140, 46, 217, 0.125), 204px 0 rgba(140, 46, 217, 0.125), 238px 0 rgba(140, 46, 217, 0.125), 272px 0 rgba(140, 46, 217, 0.125), 306px 0 rgba(140, 46, 217, 0.125);
-}
-@-moz-keyframes cover-vertical-teal {
- 0% {
- width: 0;
- height: 0;
- box-shadow: none;
- }
- 39% {
- width: 34px;
- height: 0;
- }
- 39.90909091% {
- height: 285px;
- box-shadow: 34px 570px #01b4dd, 68px 570px #01b4dd, 102px 570px #01b4dd, 136px 570px #01b4dd, 170px 570px #01b4dd, 204px 570px #01b4dd, 238px 570px #01b4dd, 272px 570px #01b4dd, 306px 570px #01b4dd;
- }
- 40.81818182% {
- height: 570px;
- box-shadow: 34px 285px #01b4dd, 68px 570px #01b4dd, 102px 570px #01b4dd, 136px 570px #01b4dd, 170px 570px #01b4dd, 204px 570px #01b4dd, 238px 570px #01b4dd, 272px 570px #01b4dd, 306px 570px #01b4dd;
- }
- 41.72727273% {
- box-shadow: 34px 0 #01b4dd, 68px 285px #01b4dd, 102px 570px #01b4dd, 136px 570px #01b4dd, 170px 570px #01b4dd, 204px 570px #01b4dd, 238px 570px #01b4dd, 272px 570px #01b4dd, 306px 570px #01b4dd;
- }
- 42.63636364% {
- box-shadow: 34px 0 #01b4dd, 68px 0 #01b4dd, 102px 285px #01b4dd, 136px 570px #01b4dd, 170px 570px #01b4dd, 204px 570px #01b4dd, 238px 570px #01b4dd, 272px 570px #01b4dd, 306px 570px #01b4dd;
- }
- 43.54545455% {
- box-shadow: 34px 0 #01b4dd, 68px 0 #01b4dd, 102px 0 #01b4dd, 136px 285px #01b4dd, 170px 570px #01b4dd, 204px 570px #01b4dd, 238px 570px #01b4dd, 272px 570px #01b4dd, 306px 570px #01b4dd;
- }
- 44.45454545% {
- box-shadow: 34px 0 #01b4dd, 68px 0 #01b4dd, 102px 0 #01b4dd, 136px 0 #01b4dd, 170px 285px #01b4dd, 204px 570px #01b4dd, 238px 570px #01b4dd, 272px 570px #01b4dd, 306px 570px #01b4dd;
- }
- 45.36363636% {
- box-shadow: 34px 0 #01b4dd, 68px 0 #01b4dd, 102px 0 #01b4dd, 136px 0 #01b4dd, 170px 0 #01b4dd, 204px 285px #01b4dd, 238px 570px #01b4dd, 272px 570px #01b4dd, 306px 570px #01b4dd;
- }
- 46.27272727% {
- box-shadow: 34px 0 #01b4dd, 68px 0 #01b4dd, 102px 0 #01b4dd, 136px 0 #01b4dd, 170px 0 #01b4dd, 204px 0 #01b4dd, 238px 285px #01b4dd, 272px 570px #01b4dd, 306px 570px #01b4dd;
- }
- 47.18181818% {
- box-shadow: 34px 0 #01b4dd, 68px 0 #01b4dd, 102px 0 #01b4dd, 136px 0 #01b4dd, 170px 0 #01b4dd, 204px 0 #01b4dd, 238px 0 #01b4dd, 272px 285px #01b4dd, 306px 570px #01b4dd;
- }
- 48.09090909% {
- box-shadow: 34px 0 #01b4dd, 68px 0 #01b4dd, 102px 0 #01b4dd, 136px 0 #01b4dd, 170px 0 #01b4dd, 204px 0 #01b4dd, 238px 0 #01b4dd, 272px 0 #01b4dd, 306px 285px #01b4dd;
- }
- 49% {
- box-shadow: 34px 0 #01b4dd, 68px 0 #01b4dd, 102px 0 #01b4dd, 136px 0 #01b4dd, 170px 0 #01b4dd, 204px 0 #01b4dd, 238px 0 #01b4dd, 272px 0 #01b4dd, 306px 0 #01b4dd;
- }
-}
-@-webkit-keyframes cover-vertical-teal {
- 0% {
- width: 0;
- height: 0;
- box-shadow: none;
- }
- 39% {
- width: 34px;
- height: 0;
- }
- 39.90909091% {
- height: 285px;
- box-shadow: 34px 570px #01b4dd, 68px 570px #01b4dd, 102px 570px #01b4dd, 136px 570px #01b4dd, 170px 570px #01b4dd, 204px 570px #01b4dd, 238px 570px #01b4dd, 272px 570px #01b4dd, 306px 570px #01b4dd;
- }
- 40.81818182% {
- height: 570px;
- box-shadow: 34px 285px #01b4dd, 68px 570px #01b4dd, 102px 570px #01b4dd, 136px 570px #01b4dd, 170px 570px #01b4dd, 204px 570px #01b4dd, 238px 570px #01b4dd, 272px 570px #01b4dd, 306px 570px #01b4dd;
- }
- 41.72727273% {
- box-shadow: 34px 0 #01b4dd, 68px 285px #01b4dd, 102px 570px #01b4dd, 136px 570px #01b4dd, 170px 570px #01b4dd, 204px 570px #01b4dd, 238px 570px #01b4dd, 272px 570px #01b4dd, 306px 570px #01b4dd;
- }
- 42.63636364% {
- box-shadow: 34px 0 #01b4dd, 68px 0 #01b4dd, 102px 285px #01b4dd, 136px 570px #01b4dd, 170px 570px #01b4dd, 204px 570px #01b4dd, 238px 570px #01b4dd, 272px 570px #01b4dd, 306px 570px #01b4dd;
- }
- 43.54545455% {
- box-shadow: 34px 0 #01b4dd, 68px 0 #01b4dd, 102px 0 #01b4dd, 136px 285px #01b4dd, 170px 570px #01b4dd, 204px 570px #01b4dd, 238px 570px #01b4dd, 272px 570px #01b4dd, 306px 570px #01b4dd;
- }
- 44.45454545% {
- box-shadow: 34px 0 #01b4dd, 68px 0 #01b4dd, 102px 0 #01b4dd, 136px 0 #01b4dd, 170px 285px #01b4dd, 204px 570px #01b4dd, 238px 570px #01b4dd, 272px 570px #01b4dd, 306px 570px #01b4dd;
- }
- 45.36363636% {
- box-shadow: 34px 0 #01b4dd, 68px 0 #01b4dd, 102px 0 #01b4dd, 136px 0 #01b4dd, 170px 0 #01b4dd, 204px 285px #01b4dd, 238px 570px #01b4dd, 272px 570px #01b4dd, 306px 570px #01b4dd;
- }
- 46.27272727% {
- box-shadow: 34px 0 #01b4dd, 68px 0 #01b4dd, 102px 0 #01b4dd, 136px 0 #01b4dd, 170px 0 #01b4dd, 204px 0 #01b4dd, 238px 285px #01b4dd, 272px 570px #01b4dd, 306px 570px #01b4dd;
- }
- 47.18181818% {
- box-shadow: 34px 0 #01b4dd, 68px 0 #01b4dd, 102px 0 #01b4dd, 136px 0 #01b4dd, 170px 0 #01b4dd, 204px 0 #01b4dd, 238px 0 #01b4dd, 272px 285px #01b4dd, 306px 570px #01b4dd;
- }
- 48.09090909% {
- box-shadow: 34px 0 #01b4dd, 68px 0 #01b4dd, 102px 0 #01b4dd, 136px 0 #01b4dd, 170px 0 #01b4dd, 204px 0 #01b4dd, 238px 0 #01b4dd, 272px 0 #01b4dd, 306px 285px #01b4dd;
- }
- 49% {
- box-shadow: 34px 0 #01b4dd, 68px 0 #01b4dd, 102px 0 #01b4dd, 136px 0 #01b4dd, 170px 0 #01b4dd, 204px 0 #01b4dd, 238px 0 #01b4dd, 272px 0 #01b4dd, 306px 0 #01b4dd;
- }
-}
-@keyframes cover-vertical-teal {
- 0% {
- width: 0;
- height: 0;
- box-shadow: none;
- }
- 39% {
- width: 34px;
- height: 0;
- }
- 39.90909091% {
- height: 285px;
- box-shadow: 34px 570px #01b4dd, 68px 570px #01b4dd, 102px 570px #01b4dd, 136px 570px #01b4dd, 170px 570px #01b4dd, 204px 570px #01b4dd, 238px 570px #01b4dd, 272px 570px #01b4dd, 306px 570px #01b4dd;
- }
- 40.81818182% {
- height: 570px;
- box-shadow: 34px 285px #01b4dd, 68px 570px #01b4dd, 102px 570px #01b4dd, 136px 570px #01b4dd, 170px 570px #01b4dd, 204px 570px #01b4dd, 238px 570px #01b4dd, 272px 570px #01b4dd, 306px 570px #01b4dd;
- }
- 41.72727273% {
- box-shadow: 34px 0 #01b4dd, 68px 285px #01b4dd, 102px 570px #01b4dd, 136px 570px #01b4dd, 170px 570px #01b4dd, 204px 570px #01b4dd, 238px 570px #01b4dd, 272px 570px #01b4dd, 306px 570px #01b4dd;
- }
- 42.63636364% {
- box-shadow: 34px 0 #01b4dd, 68px 0 #01b4dd, 102px 285px #01b4dd, 136px 570px #01b4dd, 170px 570px #01b4dd, 204px 570px #01b4dd, 238px 570px #01b4dd, 272px 570px #01b4dd, 306px 570px #01b4dd;
- }
- 43.54545455% {
- box-shadow: 34px 0 #01b4dd, 68px 0 #01b4dd, 102px 0 #01b4dd, 136px 285px #01b4dd, 170px 570px #01b4dd, 204px 570px #01b4dd, 238px 570px #01b4dd, 272px 570px #01b4dd, 306px 570px #01b4dd;
- }
- 44.45454545% {
- box-shadow: 34px 0 #01b4dd, 68px 0 #01b4dd, 102px 0 #01b4dd, 136px 0 #01b4dd, 170px 285px #01b4dd, 204px 570px #01b4dd, 238px 570px #01b4dd, 272px 570px #01b4dd, 306px 570px #01b4dd;
- }
- 45.36363636% {
- box-shadow: 34px 0 #01b4dd, 68px 0 #01b4dd, 102px 0 #01b4dd, 136px 0 #01b4dd, 170px 0 #01b4dd, 204px 285px #01b4dd, 238px 570px #01b4dd, 272px 570px #01b4dd, 306px 570px #01b4dd;
- }
- 46.27272727% {
- box-shadow: 34px 0 #01b4dd, 68px 0 #01b4dd, 102px 0 #01b4dd, 136px 0 #01b4dd, 170px 0 #01b4dd, 204px 0 #01b4dd, 238px 285px #01b4dd, 272px 570px #01b4dd, 306px 570px #01b4dd;
- }
- 47.18181818% {
- box-shadow: 34px 0 #01b4dd, 68px 0 #01b4dd, 102px 0 #01b4dd, 136px 0 #01b4dd, 170px 0 #01b4dd, 204px 0 #01b4dd, 238px 0 #01b4dd, 272px 285px #01b4dd, 306px 570px #01b4dd;
- }
- 48.09090909% {
- box-shadow: 34px 0 #01b4dd, 68px 0 #01b4dd, 102px 0 #01b4dd, 136px 0 #01b4dd, 170px 0 #01b4dd, 204px 0 #01b4dd, 238px 0 #01b4dd, 272px 0 #01b4dd, 306px 285px #01b4dd;
- }
- 49% {
- box-shadow: 34px 0 #01b4dd, 68px 0 #01b4dd, 102px 0 #01b4dd, 136px 0 #01b4dd, 170px 0 #01b4dd, 204px 0 #01b4dd, 238px 0 #01b4dd, 272px 0 #01b4dd, 306px 0 #01b4dd;
- }
-}
-#gameboy.teal #cover-vertical {
- background-color: #01b4dd;
- -webkit-animation: cover-vertical-teal 8s linear;
- animation: cover-vertical-teal 8s linear;
- box-shadow: 34px 0 #01b4dd, 68px 0 #01b4dd, 102px 0 #01b4dd, 136px 0 #01b4dd, 170px 0 #01b4dd, 204px 0 #01b4dd, 238px 0 #01b4dd, 272px 0 #01b4dd, 306px 0 #01b4dd;
-}
-@-moz-keyframes cover-vertical-yellow {
- 0% {
- width: 0;
- height: 0;
- box-shadow: none;
- }
- 39% {
- width: 34px;
- height: 0;
- }
- 39.90909091% {
- height: 285px;
- box-shadow: 34px 570px #f9e52e, 68px 570px #f9e52e, 102px 570px #f9e52e, 136px 570px #f9e52e, 170px 570px #f9e52e, 204px 570px #f9e52e, 238px 570px #f9e52e, 272px 570px #f9e52e, 306px 570px #f9e52e;
- }
- 40.81818182% {
- height: 570px;
- box-shadow: 34px 285px #f9e52e, 68px 570px #f9e52e, 102px 570px #f9e52e, 136px 570px #f9e52e, 170px 570px #f9e52e, 204px 570px #f9e52e, 238px 570px #f9e52e, 272px 570px #f9e52e, 306px 570px #f9e52e;
- }
- 41.72727273% {
- box-shadow: 34px 0 #f9e52e, 68px 285px #f9e52e, 102px 570px #f9e52e, 136px 570px #f9e52e, 170px 570px #f9e52e, 204px 570px #f9e52e, 238px 570px #f9e52e, 272px 570px #f9e52e, 306px 570px #f9e52e;
- }
- 42.63636364% {
- box-shadow: 34px 0 #f9e52e, 68px 0 #f9e52e, 102px 285px #f9e52e, 136px 570px #f9e52e, 170px 570px #f9e52e, 204px 570px #f9e52e, 238px 570px #f9e52e, 272px 570px #f9e52e, 306px 570px #f9e52e;
- }
- 43.54545455% {
- box-shadow: 34px 0 #f9e52e, 68px 0 #f9e52e, 102px 0 #f9e52e, 136px 285px #f9e52e, 170px 570px #f9e52e, 204px 570px #f9e52e, 238px 570px #f9e52e, 272px 570px #f9e52e, 306px 570px #f9e52e;
- }
- 44.45454545% {
- box-shadow: 34px 0 #f9e52e, 68px 0 #f9e52e, 102px 0 #f9e52e, 136px 0 #f9e52e, 170px 285px #f9e52e, 204px 570px #f9e52e, 238px 570px #f9e52e, 272px 570px #f9e52e, 306px 570px #f9e52e;
- }
- 45.36363636% {
- box-shadow: 34px 0 #f9e52e, 68px 0 #f9e52e, 102px 0 #f9e52e, 136px 0 #f9e52e, 170px 0 #f9e52e, 204px 285px #f9e52e, 238px 570px #f9e52e, 272px 570px #f9e52e, 306px 570px #f9e52e;
- }
- 46.27272727% {
- box-shadow: 34px 0 #f9e52e, 68px 0 #f9e52e, 102px 0 #f9e52e, 136px 0 #f9e52e, 170px 0 #f9e52e, 204px 0 #f9e52e, 238px 285px #f9e52e, 272px 570px #f9e52e, 306px 570px #f9e52e;
- }
- 47.18181818% {
- box-shadow: 34px 0 #f9e52e, 68px 0 #f9e52e, 102px 0 #f9e52e, 136px 0 #f9e52e, 170px 0 #f9e52e, 204px 0 #f9e52e, 238px 0 #f9e52e, 272px 285px #f9e52e, 306px 570px #f9e52e;
- }
- 48.09090909% {
- box-shadow: 34px 0 #f9e52e, 68px 0 #f9e52e, 102px 0 #f9e52e, 136px 0 #f9e52e, 170px 0 #f9e52e, 204px 0 #f9e52e, 238px 0 #f9e52e, 272px 0 #f9e52e, 306px 285px #f9e52e;
- }
- 49% {
- box-shadow: 34px 0 #f9e52e, 68px 0 #f9e52e, 102px 0 #f9e52e, 136px 0 #f9e52e, 170px 0 #f9e52e, 204px 0 #f9e52e, 238px 0 #f9e52e, 272px 0 #f9e52e, 306px 0 #f9e52e;
- }
-}
-@-webkit-keyframes cover-vertical-yellow {
- 0% {
- width: 0;
- height: 0;
- box-shadow: none;
- }
- 39% {
- width: 34px;
- height: 0;
- }
- 39.90909091% {
- height: 285px;
- box-shadow: 34px 570px #f9e52e, 68px 570px #f9e52e, 102px 570px #f9e52e, 136px 570px #f9e52e, 170px 570px #f9e52e, 204px 570px #f9e52e, 238px 570px #f9e52e, 272px 570px #f9e52e, 306px 570px #f9e52e;
- }
- 40.81818182% {
- height: 570px;
- box-shadow: 34px 285px #f9e52e, 68px 570px #f9e52e, 102px 570px #f9e52e, 136px 570px #f9e52e, 170px 570px #f9e52e, 204px 570px #f9e52e, 238px 570px #f9e52e, 272px 570px #f9e52e, 306px 570px #f9e52e;
- }
- 41.72727273% {
- box-shadow: 34px 0 #f9e52e, 68px 285px #f9e52e, 102px 570px #f9e52e, 136px 570px #f9e52e, 170px 570px #f9e52e, 204px 570px #f9e52e, 238px 570px #f9e52e, 272px 570px #f9e52e, 306px 570px #f9e52e;
- }
- 42.63636364% {
- box-shadow: 34px 0 #f9e52e, 68px 0 #f9e52e, 102px 285px #f9e52e, 136px 570px #f9e52e, 170px 570px #f9e52e, 204px 570px #f9e52e, 238px 570px #f9e52e, 272px 570px #f9e52e, 306px 570px #f9e52e;
- }
- 43.54545455% {
- box-shadow: 34px 0 #f9e52e, 68px 0 #f9e52e, 102px 0 #f9e52e, 136px 285px #f9e52e, 170px 570px #f9e52e, 204px 570px #f9e52e, 238px 570px #f9e52e, 272px 570px #f9e52e, 306px 570px #f9e52e;
- }
- 44.45454545% {
- box-shadow: 34px 0 #f9e52e, 68px 0 #f9e52e, 102px 0 #f9e52e, 136px 0 #f9e52e, 170px 285px #f9e52e, 204px 570px #f9e52e, 238px 570px #f9e52e, 272px 570px #f9e52e, 306px 570px #f9e52e;
- }
- 45.36363636% {
- box-shadow: 34px 0 #f9e52e, 68px 0 #f9e52e, 102px 0 #f9e52e, 136px 0 #f9e52e, 170px 0 #f9e52e, 204px 285px #f9e52e, 238px 570px #f9e52e, 272px 570px #f9e52e, 306px 570px #f9e52e;
- }
- 46.27272727% {
- box-shadow: 34px 0 #f9e52e, 68px 0 #f9e52e, 102px 0 #f9e52e, 136px 0 #f9e52e, 170px 0 #f9e52e, 204px 0 #f9e52e, 238px 285px #f9e52e, 272px 570px #f9e52e, 306px 570px #f9e52e;
- }
- 47.18181818% {
- box-shadow: 34px 0 #f9e52e, 68px 0 #f9e52e, 102px 0 #f9e52e, 136px 0 #f9e52e, 170px 0 #f9e52e, 204px 0 #f9e52e, 238px 0 #f9e52e, 272px 285px #f9e52e, 306px 570px #f9e52e;
- }
- 48.09090909% {
- box-shadow: 34px 0 #f9e52e, 68px 0 #f9e52e, 102px 0 #f9e52e, 136px 0 #f9e52e, 170px 0 #f9e52e, 204px 0 #f9e52e, 238px 0 #f9e52e, 272px 0 #f9e52e, 306px 285px #f9e52e;
- }
- 49% {
- box-shadow: 34px 0 #f9e52e, 68px 0 #f9e52e, 102px 0 #f9e52e, 136px 0 #f9e52e, 170px 0 #f9e52e, 204px 0 #f9e52e, 238px 0 #f9e52e, 272px 0 #f9e52e, 306px 0 #f9e52e;
- }
-}
-@keyframes cover-vertical-yellow {
- 0% {
- width: 0;
- height: 0;
- box-shadow: none;
- }
- 39% {
- width: 34px;
- height: 0;
- }
- 39.90909091% {
- height: 285px;
- box-shadow: 34px 570px #f9e52e, 68px 570px #f9e52e, 102px 570px #f9e52e, 136px 570px #f9e52e, 170px 570px #f9e52e, 204px 570px #f9e52e, 238px 570px #f9e52e, 272px 570px #f9e52e, 306px 570px #f9e52e;
- }
- 40.81818182% {
- height: 570px;
- box-shadow: 34px 285px #f9e52e, 68px 570px #f9e52e, 102px 570px #f9e52e, 136px 570px #f9e52e, 170px 570px #f9e52e, 204px 570px #f9e52e, 238px 570px #f9e52e, 272px 570px #f9e52e, 306px 570px #f9e52e;
- }
- 41.72727273% {
- box-shadow: 34px 0 #f9e52e, 68px 285px #f9e52e, 102px 570px #f9e52e, 136px 570px #f9e52e, 170px 570px #f9e52e, 204px 570px #f9e52e, 238px 570px #f9e52e, 272px 570px #f9e52e, 306px 570px #f9e52e;
- }
- 42.63636364% {
- box-shadow: 34px 0 #f9e52e, 68px 0 #f9e52e, 102px 285px #f9e52e, 136px 570px #f9e52e, 170px 570px #f9e52e, 204px 570px #f9e52e, 238px 570px #f9e52e, 272px 570px #f9e52e, 306px 570px #f9e52e;
- }
- 43.54545455% {
- box-shadow: 34px 0 #f9e52e, 68px 0 #f9e52e, 102px 0 #f9e52e, 136px 285px #f9e52e, 170px 570px #f9e52e, 204px 570px #f9e52e, 238px 570px #f9e52e, 272px 570px #f9e52e, 306px 570px #f9e52e;
- }
- 44.45454545% {
- box-shadow: 34px 0 #f9e52e, 68px 0 #f9e52e, 102px 0 #f9e52e, 136px 0 #f9e52e, 170px 285px #f9e52e, 204px 570px #f9e52e, 238px 570px #f9e52e, 272px 570px #f9e52e, 306px 570px #f9e52e;
- }
- 45.36363636% {
- box-shadow: 34px 0 #f9e52e, 68px 0 #f9e52e, 102px 0 #f9e52e, 136px 0 #f9e52e, 170px 0 #f9e52e, 204px 285px #f9e52e, 238px 570px #f9e52e, 272px 570px #f9e52e, 306px 570px #f9e52e;
- }
- 46.27272727% {
- box-shadow: 34px 0 #f9e52e, 68px 0 #f9e52e, 102px 0 #f9e52e, 136px 0 #f9e52e, 170px 0 #f9e52e, 204px 0 #f9e52e, 238px 285px #f9e52e, 272px 570px #f9e52e, 306px 570px #f9e52e;
- }
- 47.18181818% {
- box-shadow: 34px 0 #f9e52e, 68px 0 #f9e52e, 102px 0 #f9e52e, 136px 0 #f9e52e, 170px 0 #f9e52e, 204px 0 #f9e52e, 238px 0 #f9e52e, 272px 285px #f9e52e, 306px 570px #f9e52e;
- }
- 48.09090909% {
- box-shadow: 34px 0 #f9e52e, 68px 0 #f9e52e, 102px 0 #f9e52e, 136px 0 #f9e52e, 170px 0 #f9e52e, 204px 0 #f9e52e, 238px 0 #f9e52e, 272px 0 #f9e52e, 306px 285px #f9e52e;
- }
- 49% {
- box-shadow: 34px 0 #f9e52e, 68px 0 #f9e52e, 102px 0 #f9e52e, 136px 0 #f9e52e, 170px 0 #f9e52e, 204px 0 #f9e52e, 238px 0 #f9e52e, 272px 0 #f9e52e, 306px 0 #f9e52e;
- }
-}
-#gameboy.yellow #cover-vertical {
- background-color: #f9e52e;
- -webkit-animation: cover-vertical-yellow 8s linear;
- animation: cover-vertical-yellow 8s linear;
- box-shadow: 34px 0 #f9e52e, 68px 0 #f9e52e, 102px 0 #f9e52e, 136px 0 #f9e52e, 170px 0 #f9e52e, 204px 0 #f9e52e, 238px 0 #f9e52e, 272px 0 #f9e52e, 306px 0 #f9e52e;
-}
-@-moz-keyframes cover-vertical-green {
- 0% {
- width: 0;
- height: 0;
- box-shadow: none;
- }
- 39% {
- width: 34px;
- height: 0;
- }
- 39.90909091% {
- height: 285px;
- box-shadow: 34px 570px #85e367, 68px 570px #85e367, 102px 570px #85e367, 136px 570px #85e367, 170px 570px #85e367, 204px 570px #85e367, 238px 570px #85e367, 272px 570px #85e367, 306px 570px #85e367;
- }
- 40.81818182% {
- height: 570px;
- box-shadow: 34px 285px #85e367, 68px 570px #85e367, 102px 570px #85e367, 136px 570px #85e367, 170px 570px #85e367, 204px 570px #85e367, 238px 570px #85e367, 272px 570px #85e367, 306px 570px #85e367;
- }
- 41.72727273% {
- box-shadow: 34px 0 #85e367, 68px 285px #85e367, 102px 570px #85e367, 136px 570px #85e367, 170px 570px #85e367, 204px 570px #85e367, 238px 570px #85e367, 272px 570px #85e367, 306px 570px #85e367;
- }
- 42.63636364% {
- box-shadow: 34px 0 #85e367, 68px 0 #85e367, 102px 285px #85e367, 136px 570px #85e367, 170px 570px #85e367, 204px 570px #85e367, 238px 570px #85e367, 272px 570px #85e367, 306px 570px #85e367;
- }
- 43.54545455% {
- box-shadow: 34px 0 #85e367, 68px 0 #85e367, 102px 0 #85e367, 136px 285px #85e367, 170px 570px #85e367, 204px 570px #85e367, 238px 570px #85e367, 272px 570px #85e367, 306px 570px #85e367;
- }
- 44.45454545% {
- box-shadow: 34px 0 #85e367, 68px 0 #85e367, 102px 0 #85e367, 136px 0 #85e367, 170px 285px #85e367, 204px 570px #85e367, 238px 570px #85e367, 272px 570px #85e367, 306px 570px #85e367;
- }
- 45.36363636% {
- box-shadow: 34px 0 #85e367, 68px 0 #85e367, 102px 0 #85e367, 136px 0 #85e367, 170px 0 #85e367, 204px 285px #85e367, 238px 570px #85e367, 272px 570px #85e367, 306px 570px #85e367;
- }
- 46.27272727% {
- box-shadow: 34px 0 #85e367, 68px 0 #85e367, 102px 0 #85e367, 136px 0 #85e367, 170px 0 #85e367, 204px 0 #85e367, 238px 285px #85e367, 272px 570px #85e367, 306px 570px #85e367;
- }
- 47.18181818% {
- box-shadow: 34px 0 #85e367, 68px 0 #85e367, 102px 0 #85e367, 136px 0 #85e367, 170px 0 #85e367, 204px 0 #85e367, 238px 0 #85e367, 272px 285px #85e367, 306px 570px #85e367;
- }
- 48.09090909% {
- box-shadow: 34px 0 #85e367, 68px 0 #85e367, 102px 0 #85e367, 136px 0 #85e367, 170px 0 #85e367, 204px 0 #85e367, 238px 0 #85e367, 272px 0 #85e367, 306px 285px #85e367;
- }
- 49% {
- box-shadow: 34px 0 #85e367, 68px 0 #85e367, 102px 0 #85e367, 136px 0 #85e367, 170px 0 #85e367, 204px 0 #85e367, 238px 0 #85e367, 272px 0 #85e367, 306px 0 #85e367;
- }
-}
-@-webkit-keyframes cover-vertical-green {
- 0% {
- width: 0;
- height: 0;
- box-shadow: none;
- }
- 39% {
- width: 34px;
- height: 0;
- }
- 39.90909091% {
- height: 285px;
- box-shadow: 34px 570px #85e367, 68px 570px #85e367, 102px 570px #85e367, 136px 570px #85e367, 170px 570px #85e367, 204px 570px #85e367, 238px 570px #85e367, 272px 570px #85e367, 306px 570px #85e367;
- }
- 40.81818182% {
- height: 570px;
- box-shadow: 34px 285px #85e367, 68px 570px #85e367, 102px 570px #85e367, 136px 570px #85e367, 170px 570px #85e367, 204px 570px #85e367, 238px 570px #85e367, 272px 570px #85e367, 306px 570px #85e367;
- }
- 41.72727273% {
- box-shadow: 34px 0 #85e367, 68px 285px #85e367, 102px 570px #85e367, 136px 570px #85e367, 170px 570px #85e367, 204px 570px #85e367, 238px 570px #85e367, 272px 570px #85e367, 306px 570px #85e367;
- }
- 42.63636364% {
- box-shadow: 34px 0 #85e367, 68px 0 #85e367, 102px 285px #85e367, 136px 570px #85e367, 170px 570px #85e367, 204px 570px #85e367, 238px 570px #85e367, 272px 570px #85e367, 306px 570px #85e367;
- }
- 43.54545455% {
- box-shadow: 34px 0 #85e367, 68px 0 #85e367, 102px 0 #85e367, 136px 285px #85e367, 170px 570px #85e367, 204px 570px #85e367, 238px 570px #85e367, 272px 570px #85e367, 306px 570px #85e367;
- }
- 44.45454545% {
- box-shadow: 34px 0 #85e367, 68px 0 #85e367, 102px 0 #85e367, 136px 0 #85e367, 170px 285px #85e367, 204px 570px #85e367, 238px 570px #85e367, 272px 570px #85e367, 306px 570px #85e367;
- }
- 45.36363636% {
- box-shadow: 34px 0 #85e367, 68px 0 #85e367, 102px 0 #85e367, 136px 0 #85e367, 170px 0 #85e367, 204px 285px #85e367, 238px 570px #85e367, 272px 570px #85e367, 306px 570px #85e367;
- }
- 46.27272727% {
- box-shadow: 34px 0 #85e367, 68px 0 #85e367, 102px 0 #85e367, 136px 0 #85e367, 170px 0 #85e367, 204px 0 #85e367, 238px 285px #85e367, 272px 570px #85e367, 306px 570px #85e367;
- }
- 47.18181818% {
- box-shadow: 34px 0 #85e367, 68px 0 #85e367, 102px 0 #85e367, 136px 0 #85e367, 170px 0 #85e367, 204px 0 #85e367, 238px 0 #85e367, 272px 285px #85e367, 306px 570px #85e367;
- }
- 48.09090909% {
- box-shadow: 34px 0 #85e367, 68px 0 #85e367, 102px 0 #85e367, 136px 0 #85e367, 170px 0 #85e367, 204px 0 #85e367, 238px 0 #85e367, 272px 0 #85e367, 306px 285px #85e367;
- }
- 49% {
- box-shadow: 34px 0 #85e367, 68px 0 #85e367, 102px 0 #85e367, 136px 0 #85e367, 170px 0 #85e367, 204px 0 #85e367, 238px 0 #85e367, 272px 0 #85e367, 306px 0 #85e367;
- }
-}
-@keyframes cover-vertical-green {
- 0% {
- width: 0;
- height: 0;
- box-shadow: none;
- }
- 39% {
- width: 34px;
- height: 0;
- }
- 39.90909091% {
- height: 285px;
- box-shadow: 34px 570px #85e367, 68px 570px #85e367, 102px 570px #85e367, 136px 570px #85e367, 170px 570px #85e367, 204px 570px #85e367, 238px 570px #85e367, 272px 570px #85e367, 306px 570px #85e367;
- }
- 40.81818182% {
- height: 570px;
- box-shadow: 34px 285px #85e367, 68px 570px #85e367, 102px 570px #85e367, 136px 570px #85e367, 170px 570px #85e367, 204px 570px #85e367, 238px 570px #85e367, 272px 570px #85e367, 306px 570px #85e367;
- }
- 41.72727273% {
- box-shadow: 34px 0 #85e367, 68px 285px #85e367, 102px 570px #85e367, 136px 570px #85e367, 170px 570px #85e367, 204px 570px #85e367, 238px 570px #85e367, 272px 570px #85e367, 306px 570px #85e367;
- }
- 42.63636364% {
- box-shadow: 34px 0 #85e367, 68px 0 #85e367, 102px 285px #85e367, 136px 570px #85e367, 170px 570px #85e367, 204px 570px #85e367, 238px 570px #85e367, 272px 570px #85e367, 306px 570px #85e367;
- }
- 43.54545455% {
- box-shadow: 34px 0 #85e367, 68px 0 #85e367, 102px 0 #85e367, 136px 285px #85e367, 170px 570px #85e367, 204px 570px #85e367, 238px 570px #85e367, 272px 570px #85e367, 306px 570px #85e367;
- }
- 44.45454545% {
- box-shadow: 34px 0 #85e367, 68px 0 #85e367, 102px 0 #85e367, 136px 0 #85e367, 170px 285px #85e367, 204px 570px #85e367, 238px 570px #85e367, 272px 570px #85e367, 306px 570px #85e367;
- }
- 45.36363636% {
- box-shadow: 34px 0 #85e367, 68px 0 #85e367, 102px 0 #85e367, 136px 0 #85e367, 170px 0 #85e367, 204px 285px #85e367, 238px 570px #85e367, 272px 570px #85e367, 306px 570px #85e367;
- }
- 46.27272727% {
- box-shadow: 34px 0 #85e367, 68px 0 #85e367, 102px 0 #85e367, 136px 0 #85e367, 170px 0 #85e367, 204px 0 #85e367, 238px 285px #85e367, 272px 570px #85e367, 306px 570px #85e367;
- }
- 47.18181818% {
- box-shadow: 34px 0 #85e367, 68px 0 #85e367, 102px 0 #85e367, 136px 0 #85e367, 170px 0 #85e367, 204px 0 #85e367, 238px 0 #85e367, 272px 285px #85e367, 306px 570px #85e367;
- }
- 48.09090909% {
- box-shadow: 34px 0 #85e367, 68px 0 #85e367, 102px 0 #85e367, 136px 0 #85e367, 170px 0 #85e367, 204px 0 #85e367, 238px 0 #85e367, 272px 0 #85e367, 306px 285px #85e367;
- }
- 49% {
- box-shadow: 34px 0 #85e367, 68px 0 #85e367, 102px 0 #85e367, 136px 0 #85e367, 170px 0 #85e367, 204px 0 #85e367, 238px 0 #85e367, 272px 0 #85e367, 306px 0 #85e367;
- }
-}
-#gameboy.green #cover-vertical {
- background-color: #85e367;
- -webkit-animation: cover-vertical-green 8s linear;
- animation: cover-vertical-green 8s linear;
- box-shadow: 34px 0 #85e367, 68px 0 #85e367, 102px 0 #85e367, 136px 0 #85e367, 170px 0 #85e367, 204px 0 #85e367, 238px 0 #85e367, 272px 0 #85e367, 306px 0 #85e367;
-}
-@-moz-keyframes cover-vertical-purple {
- 0% {
- width: 0;
- height: 0;
- box-shadow: none;
- }
- 39% {
- width: 34px;
- height: 0;
- }
- 39.90909091% {
- height: 285px;
- box-shadow: 34px 570px #5151dd, 68px 570px #5151dd, 102px 570px #5151dd, 136px 570px #5151dd, 170px 570px #5151dd, 204px 570px #5151dd, 238px 570px #5151dd, 272px 570px #5151dd, 306px 570px #5151dd;
- }
- 40.81818182% {
- height: 570px;
- box-shadow: 34px 285px #5151dd, 68px 570px #5151dd, 102px 570px #5151dd, 136px 570px #5151dd, 170px 570px #5151dd, 204px 570px #5151dd, 238px 570px #5151dd, 272px 570px #5151dd, 306px 570px #5151dd;
- }
- 41.72727273% {
- box-shadow: 34px 0 #5151dd, 68px 285px #5151dd, 102px 570px #5151dd, 136px 570px #5151dd, 170px 570px #5151dd, 204px 570px #5151dd, 238px 570px #5151dd, 272px 570px #5151dd, 306px 570px #5151dd;
- }
- 42.63636364% {
- box-shadow: 34px 0 #5151dd, 68px 0 #5151dd, 102px 285px #5151dd, 136px 570px #5151dd, 170px 570px #5151dd, 204px 570px #5151dd, 238px 570px #5151dd, 272px 570px #5151dd, 306px 570px #5151dd;
- }
- 43.54545455% {
- box-shadow: 34px 0 #5151dd, 68px 0 #5151dd, 102px 0 #5151dd, 136px 285px #5151dd, 170px 570px #5151dd, 204px 570px #5151dd, 238px 570px #5151dd, 272px 570px #5151dd, 306px 570px #5151dd;
- }
- 44.45454545% {
- box-shadow: 34px 0 #5151dd, 68px 0 #5151dd, 102px 0 #5151dd, 136px 0 #5151dd, 170px 285px #5151dd, 204px 570px #5151dd, 238px 570px #5151dd, 272px 570px #5151dd, 306px 570px #5151dd;
- }
- 45.36363636% {
- box-shadow: 34px 0 #5151dd, 68px 0 #5151dd, 102px 0 #5151dd, 136px 0 #5151dd, 170px 0 #5151dd, 204px 285px #5151dd, 238px 570px #5151dd, 272px 570px #5151dd, 306px 570px #5151dd;
- }
- 46.27272727% {
- box-shadow: 34px 0 #5151dd, 68px 0 #5151dd, 102px 0 #5151dd, 136px 0 #5151dd, 170px 0 #5151dd, 204px 0 #5151dd, 238px 285px #5151dd, 272px 570px #5151dd, 306px 570px #5151dd;
- }
- 47.18181818% {
- box-shadow: 34px 0 #5151dd, 68px 0 #5151dd, 102px 0 #5151dd, 136px 0 #5151dd, 170px 0 #5151dd, 204px 0 #5151dd, 238px 0 #5151dd, 272px 285px #5151dd, 306px 570px #5151dd;
- }
- 48.09090909% {
- box-shadow: 34px 0 #5151dd, 68px 0 #5151dd, 102px 0 #5151dd, 136px 0 #5151dd, 170px 0 #5151dd, 204px 0 #5151dd, 238px 0 #5151dd, 272px 0 #5151dd, 306px 285px #5151dd;
- }
- 49% {
- box-shadow: 34px 0 #5151dd, 68px 0 #5151dd, 102px 0 #5151dd, 136px 0 #5151dd, 170px 0 #5151dd, 204px 0 #5151dd, 238px 0 #5151dd, 272px 0 #5151dd, 306px 0 #5151dd;
- }
-}
-@-webkit-keyframes cover-vertical-purple {
- 0% {
- width: 0;
- height: 0;
- box-shadow: none;
- }
- 39% {
- width: 34px;
- height: 0;
- }
- 39.90909091% {
- height: 285px;
- box-shadow: 34px 570px #5151dd, 68px 570px #5151dd, 102px 570px #5151dd, 136px 570px #5151dd, 170px 570px #5151dd, 204px 570px #5151dd, 238px 570px #5151dd, 272px 570px #5151dd, 306px 570px #5151dd;
- }
- 40.81818182% {
- height: 570px;
- box-shadow: 34px 285px #5151dd, 68px 570px #5151dd, 102px 570px #5151dd, 136px 570px #5151dd, 170px 570px #5151dd, 204px 570px #5151dd, 238px 570px #5151dd, 272px 570px #5151dd, 306px 570px #5151dd;
- }
- 41.72727273% {
- box-shadow: 34px 0 #5151dd, 68px 285px #5151dd, 102px 570px #5151dd, 136px 570px #5151dd, 170px 570px #5151dd, 204px 570px #5151dd, 238px 570px #5151dd, 272px 570px #5151dd, 306px 570px #5151dd;
- }
- 42.63636364% {
- box-shadow: 34px 0 #5151dd, 68px 0 #5151dd, 102px 285px #5151dd, 136px 570px #5151dd, 170px 570px #5151dd, 204px 570px #5151dd, 238px 570px #5151dd, 272px 570px #5151dd, 306px 570px #5151dd;
- }
- 43.54545455% {
- box-shadow: 34px 0 #5151dd, 68px 0 #5151dd, 102px 0 #5151dd, 136px 285px #5151dd, 170px 570px #5151dd, 204px 570px #5151dd, 238px 570px #5151dd, 272px 570px #5151dd, 306px 570px #5151dd;
- }
- 44.45454545% {
- box-shadow: 34px 0 #5151dd, 68px 0 #5151dd, 102px 0 #5151dd, 136px 0 #5151dd, 170px 285px #5151dd, 204px 570px #5151dd, 238px 570px #5151dd, 272px 570px #5151dd, 306px 570px #5151dd;
- }
- 45.36363636% {
- box-shadow: 34px 0 #5151dd, 68px 0 #5151dd, 102px 0 #5151dd, 136px 0 #5151dd, 170px 0 #5151dd, 204px 285px #5151dd, 238px 570px #5151dd, 272px 570px #5151dd, 306px 570px #5151dd;
- }
- 46.27272727% {
- box-shadow: 34px 0 #5151dd, 68px 0 #5151dd, 102px 0 #5151dd, 136px 0 #5151dd, 170px 0 #5151dd, 204px 0 #5151dd, 238px 285px #5151dd, 272px 570px #5151dd, 306px 570px #5151dd;
- }
- 47.18181818% {
- box-shadow: 34px 0 #5151dd, 68px 0 #5151dd, 102px 0 #5151dd, 136px 0 #5151dd, 170px 0 #5151dd, 204px 0 #5151dd, 238px 0 #5151dd, 272px 285px #5151dd, 306px 570px #5151dd;
- }
- 48.09090909% {
- box-shadow: 34px 0 #5151dd, 68px 0 #5151dd, 102px 0 #5151dd, 136px 0 #5151dd, 170px 0 #5151dd, 204px 0 #5151dd, 238px 0 #5151dd, 272px 0 #5151dd, 306px 285px #5151dd;
- }
- 49% {
- box-shadow: 34px 0 #5151dd, 68px 0 #5151dd, 102px 0 #5151dd, 136px 0 #5151dd, 170px 0 #5151dd, 204px 0 #5151dd, 238px 0 #5151dd, 272px 0 #5151dd, 306px 0 #5151dd;
- }
-}
-@keyframes cover-vertical-purple {
- 0% {
- width: 0;
- height: 0;
- box-shadow: none;
- }
- 39% {
- width: 34px;
- height: 0;
- }
- 39.90909091% {
- height: 285px;
- box-shadow: 34px 570px #5151dd, 68px 570px #5151dd, 102px 570px #5151dd, 136px 570px #5151dd, 170px 570px #5151dd, 204px 570px #5151dd, 238px 570px #5151dd, 272px 570px #5151dd, 306px 570px #5151dd;
- }
- 40.81818182% {
- height: 570px;
- box-shadow: 34px 285px #5151dd, 68px 570px #5151dd, 102px 570px #5151dd, 136px 570px #5151dd, 170px 570px #5151dd, 204px 570px #5151dd, 238px 570px #5151dd, 272px 570px #5151dd, 306px 570px #5151dd;
- }
- 41.72727273% {
- box-shadow: 34px 0 #5151dd, 68px 285px #5151dd, 102px 570px #5151dd, 136px 570px #5151dd, 170px 570px #5151dd, 204px 570px #5151dd, 238px 570px #5151dd, 272px 570px #5151dd, 306px 570px #5151dd;
- }
- 42.63636364% {
- box-shadow: 34px 0 #5151dd, 68px 0 #5151dd, 102px 285px #5151dd, 136px 570px #5151dd, 170px 570px #5151dd, 204px 570px #5151dd, 238px 570px #5151dd, 272px 570px #5151dd, 306px 570px #5151dd;
- }
- 43.54545455% {
- box-shadow: 34px 0 #5151dd, 68px 0 #5151dd, 102px 0 #5151dd, 136px 285px #5151dd, 170px 570px #5151dd, 204px 570px #5151dd, 238px 570px #5151dd, 272px 570px #5151dd, 306px 570px #5151dd;
- }
- 44.45454545% {
- box-shadow: 34px 0 #5151dd, 68px 0 #5151dd, 102px 0 #5151dd, 136px 0 #5151dd, 170px 285px #5151dd, 204px 570px #5151dd, 238px 570px #5151dd, 272px 570px #5151dd, 306px 570px #5151dd;
- }
- 45.36363636% {
- box-shadow: 34px 0 #5151dd, 68px 0 #5151dd, 102px 0 #5151dd, 136px 0 #5151dd, 170px 0 #5151dd, 204px 285px #5151dd, 238px 570px #5151dd, 272px 570px #5151dd, 306px 570px #5151dd;
- }
- 46.27272727% {
- box-shadow: 34px 0 #5151dd, 68px 0 #5151dd, 102px 0 #5151dd, 136px 0 #5151dd, 170px 0 #5151dd, 204px 0 #5151dd, 238px 285px #5151dd, 272px 570px #5151dd, 306px 570px #5151dd;
- }
- 47.18181818% {
- box-shadow: 34px 0 #5151dd, 68px 0 #5151dd, 102px 0 #5151dd, 136px 0 #5151dd, 170px 0 #5151dd, 204px 0 #5151dd, 238px 0 #5151dd, 272px 285px #5151dd, 306px 570px #5151dd;
- }
- 48.09090909% {
- box-shadow: 34px 0 #5151dd, 68px 0 #5151dd, 102px 0 #5151dd, 136px 0 #5151dd, 170px 0 #5151dd, 204px 0 #5151dd, 238px 0 #5151dd, 272px 0 #5151dd, 306px 285px #5151dd;
- }
- 49% {
- box-shadow: 34px 0 #5151dd, 68px 0 #5151dd, 102px 0 #5151dd, 136px 0 #5151dd, 170px 0 #5151dd, 204px 0 #5151dd, 238px 0 #5151dd, 272px 0 #5151dd, 306px 0 #5151dd;
- }
-}
-#gameboy.purple #cover-vertical {
- background-color: #5151dd;
- -webkit-animation: cover-vertical-purple 8s linear;
- animation: cover-vertical-purple 8s linear;
- box-shadow: 34px 0 #5151dd, 68px 0 #5151dd, 102px 0 #5151dd, 136px 0 #5151dd, 170px 0 #5151dd, 204px 0 #5151dd, 238px 0 #5151dd, 272px 0 #5151dd, 306px 0 #5151dd;
-}
-@-moz-keyframes cover-vertical-red {
- 0% {
- width: 0;
- height: 0;
- box-shadow: none;
- }
- 39% {
- width: 34px;
- height: 0;
- }
- 39.90909091% {
- height: 285px;
- box-shadow: 34px 570px #ff0151, 68px 570px #ff0151, 102px 570px #ff0151, 136px 570px #ff0151, 170px 570px #ff0151, 204px 570px #ff0151, 238px 570px #ff0151, 272px 570px #ff0151, 306px 570px #ff0151;
- }
- 40.81818182% {
- height: 570px;
- box-shadow: 34px 285px #ff0151, 68px 570px #ff0151, 102px 570px #ff0151, 136px 570px #ff0151, 170px 570px #ff0151, 204px 570px #ff0151, 238px 570px #ff0151, 272px 570px #ff0151, 306px 570px #ff0151;
- }
- 41.72727273% {
- box-shadow: 34px 0 #ff0151, 68px 285px #ff0151, 102px 570px #ff0151, 136px 570px #ff0151, 170px 570px #ff0151, 204px 570px #ff0151, 238px 570px #ff0151, 272px 570px #ff0151, 306px 570px #ff0151;
- }
- 42.63636364% {
- box-shadow: 34px 0 #ff0151, 68px 0 #ff0151, 102px 285px #ff0151, 136px 570px #ff0151, 170px 570px #ff0151, 204px 570px #ff0151, 238px 570px #ff0151, 272px 570px #ff0151, 306px 570px #ff0151;
- }
- 43.54545455% {
- box-shadow: 34px 0 #ff0151, 68px 0 #ff0151, 102px 0 #ff0151, 136px 285px #ff0151, 170px 570px #ff0151, 204px 570px #ff0151, 238px 570px #ff0151, 272px 570px #ff0151, 306px 570px #ff0151;
- }
- 44.45454545% {
- box-shadow: 34px 0 #ff0151, 68px 0 #ff0151, 102px 0 #ff0151, 136px 0 #ff0151, 170px 285px #ff0151, 204px 570px #ff0151, 238px 570px #ff0151, 272px 570px #ff0151, 306px 570px #ff0151;
- }
- 45.36363636% {
- box-shadow: 34px 0 #ff0151, 68px 0 #ff0151, 102px 0 #ff0151, 136px 0 #ff0151, 170px 0 #ff0151, 204px 285px #ff0151, 238px 570px #ff0151, 272px 570px #ff0151, 306px 570px #ff0151;
- }
- 46.27272727% {
- box-shadow: 34px 0 #ff0151, 68px 0 #ff0151, 102px 0 #ff0151, 136px 0 #ff0151, 170px 0 #ff0151, 204px 0 #ff0151, 238px 285px #ff0151, 272px 570px #ff0151, 306px 570px #ff0151;
- }
- 47.18181818% {
- box-shadow: 34px 0 #ff0151, 68px 0 #ff0151, 102px 0 #ff0151, 136px 0 #ff0151, 170px 0 #ff0151, 204px 0 #ff0151, 238px 0 #ff0151, 272px 285px #ff0151, 306px 570px #ff0151;
- }
- 48.09090909% {
- box-shadow: 34px 0 #ff0151, 68px 0 #ff0151, 102px 0 #ff0151, 136px 0 #ff0151, 170px 0 #ff0151, 204px 0 #ff0151, 238px 0 #ff0151, 272px 0 #ff0151, 306px 285px #ff0151;
- }
- 49% {
- box-shadow: 34px 0 #ff0151, 68px 0 #ff0151, 102px 0 #ff0151, 136px 0 #ff0151, 170px 0 #ff0151, 204px 0 #ff0151, 238px 0 #ff0151, 272px 0 #ff0151, 306px 0 #ff0151;
- }
-}
-@-webkit-keyframes cover-vertical-red {
- 0% {
- width: 0;
- height: 0;
- box-shadow: none;
- }
- 39% {
- width: 34px;
- height: 0;
- }
- 39.90909091% {
- height: 285px;
- box-shadow: 34px 570px #ff0151, 68px 570px #ff0151, 102px 570px #ff0151, 136px 570px #ff0151, 170px 570px #ff0151, 204px 570px #ff0151, 238px 570px #ff0151, 272px 570px #ff0151, 306px 570px #ff0151;
- }
- 40.81818182% {
- height: 570px;
- box-shadow: 34px 285px #ff0151, 68px 570px #ff0151, 102px 570px #ff0151, 136px 570px #ff0151, 170px 570px #ff0151, 204px 570px #ff0151, 238px 570px #ff0151, 272px 570px #ff0151, 306px 570px #ff0151;
- }
- 41.72727273% {
- box-shadow: 34px 0 #ff0151, 68px 285px #ff0151, 102px 570px #ff0151, 136px 570px #ff0151, 170px 570px #ff0151, 204px 570px #ff0151, 238px 570px #ff0151, 272px 570px #ff0151, 306px 570px #ff0151;
- }
- 42.63636364% {
- box-shadow: 34px 0 #ff0151, 68px 0 #ff0151, 102px 285px #ff0151, 136px 570px #ff0151, 170px 570px #ff0151, 204px 570px #ff0151, 238px 570px #ff0151, 272px 570px #ff0151, 306px 570px #ff0151;
- }
- 43.54545455% {
- box-shadow: 34px 0 #ff0151, 68px 0 #ff0151, 102px 0 #ff0151, 136px 285px #ff0151, 170px 570px #ff0151, 204px 570px #ff0151, 238px 570px #ff0151, 272px 570px #ff0151, 306px 570px #ff0151;
- }
- 44.45454545% {
- box-shadow: 34px 0 #ff0151, 68px 0 #ff0151, 102px 0 #ff0151, 136px 0 #ff0151, 170px 285px #ff0151, 204px 570px #ff0151, 238px 570px #ff0151, 272px 570px #ff0151, 306px 570px #ff0151;
- }
- 45.36363636% {
- box-shadow: 34px 0 #ff0151, 68px 0 #ff0151, 102px 0 #ff0151, 136px 0 #ff0151, 170px 0 #ff0151, 204px 285px #ff0151, 238px 570px #ff0151, 272px 570px #ff0151, 306px 570px #ff0151;
- }
- 46.27272727% {
- box-shadow: 34px 0 #ff0151, 68px 0 #ff0151, 102px 0 #ff0151, 136px 0 #ff0151, 170px 0 #ff0151, 204px 0 #ff0151, 238px 285px #ff0151, 272px 570px #ff0151, 306px 570px #ff0151;
- }
- 47.18181818% {
- box-shadow: 34px 0 #ff0151, 68px 0 #ff0151, 102px 0 #ff0151, 136px 0 #ff0151, 170px 0 #ff0151, 204px 0 #ff0151, 238px 0 #ff0151, 272px 285px #ff0151, 306px 570px #ff0151;
- }
- 48.09090909% {
- box-shadow: 34px 0 #ff0151, 68px 0 #ff0151, 102px 0 #ff0151, 136px 0 #ff0151, 170px 0 #ff0151, 204px 0 #ff0151, 238px 0 #ff0151, 272px 0 #ff0151, 306px 285px #ff0151;
- }
- 49% {
- box-shadow: 34px 0 #ff0151, 68px 0 #ff0151, 102px 0 #ff0151, 136px 0 #ff0151, 170px 0 #ff0151, 204px 0 #ff0151, 238px 0 #ff0151, 272px 0 #ff0151, 306px 0 #ff0151;
- }
-}
-@keyframes cover-vertical-red {
- 0% {
- width: 0;
- height: 0;
- box-shadow: none;
- }
- 39% {
- width: 34px;
- height: 0;
- }
- 39.90909091% {
- height: 285px;
- box-shadow: 34px 570px #ff0151, 68px 570px #ff0151, 102px 570px #ff0151, 136px 570px #ff0151, 170px 570px #ff0151, 204px 570px #ff0151, 238px 570px #ff0151, 272px 570px #ff0151, 306px 570px #ff0151;
- }
- 40.81818182% {
- height: 570px;
- box-shadow: 34px 285px #ff0151, 68px 570px #ff0151, 102px 570px #ff0151, 136px 570px #ff0151, 170px 570px #ff0151, 204px 570px #ff0151, 238px 570px #ff0151, 272px 570px #ff0151, 306px 570px #ff0151;
- }
- 41.72727273% {
- box-shadow: 34px 0 #ff0151, 68px 285px #ff0151, 102px 570px #ff0151, 136px 570px #ff0151, 170px 570px #ff0151, 204px 570px #ff0151, 238px 570px #ff0151, 272px 570px #ff0151, 306px 570px #ff0151;
- }
- 42.63636364% {
- box-shadow: 34px 0 #ff0151, 68px 0 #ff0151, 102px 285px #ff0151, 136px 570px #ff0151, 170px 570px #ff0151, 204px 570px #ff0151, 238px 570px #ff0151, 272px 570px #ff0151, 306px 570px #ff0151;
- }
- 43.54545455% {
- box-shadow: 34px 0 #ff0151, 68px 0 #ff0151, 102px 0 #ff0151, 136px 285px #ff0151, 170px 570px #ff0151, 204px 570px #ff0151, 238px 570px #ff0151, 272px 570px #ff0151, 306px 570px #ff0151;
- }
- 44.45454545% {
- box-shadow: 34px 0 #ff0151, 68px 0 #ff0151, 102px 0 #ff0151, 136px 0 #ff0151, 170px 285px #ff0151, 204px 570px #ff0151, 238px 570px #ff0151, 272px 570px #ff0151, 306px 570px #ff0151;
- }
- 45.36363636% {
- box-shadow: 34px 0 #ff0151, 68px 0 #ff0151, 102px 0 #ff0151, 136px 0 #ff0151, 170px 0 #ff0151, 204px 285px #ff0151, 238px 570px #ff0151, 272px 570px #ff0151, 306px 570px #ff0151;
- }
- 46.27272727% {
- box-shadow: 34px 0 #ff0151, 68px 0 #ff0151, 102px 0 #ff0151, 136px 0 #ff0151, 170px 0 #ff0151, 204px 0 #ff0151, 238px 285px #ff0151, 272px 570px #ff0151, 306px 570px #ff0151;
- }
- 47.18181818% {
- box-shadow: 34px 0 #ff0151, 68px 0 #ff0151, 102px 0 #ff0151, 136px 0 #ff0151, 170px 0 #ff0151, 204px 0 #ff0151, 238px 0 #ff0151, 272px 285px #ff0151, 306px 570px #ff0151;
- }
- 48.09090909% {
- box-shadow: 34px 0 #ff0151, 68px 0 #ff0151, 102px 0 #ff0151, 136px 0 #ff0151, 170px 0 #ff0151, 204px 0 #ff0151, 238px 0 #ff0151, 272px 0 #ff0151, 306px 285px #ff0151;
- }
- 49% {
- box-shadow: 34px 0 #ff0151, 68px 0 #ff0151, 102px 0 #ff0151, 136px 0 #ff0151, 170px 0 #ff0151, 204px 0 #ff0151, 238px 0 #ff0151, 272px 0 #ff0151, 306px 0 #ff0151;
- }
-}
-#gameboy.red #cover-vertical {
- background-color: #ff0151;
- -webkit-animation: cover-vertical-red 8s linear;
- animation: cover-vertical-red 8s linear;
- box-shadow: 34px 0 #ff0151, 68px 0 #ff0151, 102px 0 #ff0151, 136px 0 #ff0151, 170px 0 #ff0151, 204px 0 #ff0151, 238px 0 #ff0151, 272px 0 #ff0151, 306px 0 #ff0151;
-}
-#cover-horizontal {
- position: absolute;
- z-index: 12;
- width: 340px;
- height: 38px;
- bottom: 0;
- left: 0;
-}
-@-moz-keyframes cover-horizontal-transparent {
- 0% {
- width: 0;
- height: 0;
- box-shadow: none;
- }
- 39% {
- width: 0;
- height: 38px;
- }
- 39.625% {
- width: 170px;
- box-shadow: -340px -38px rgba(140, 46, 217, 0.125), -340px -76px rgba(140, 46, 217, 0.125), -340px -114px rgba(140, 46, 217, 0.125), -340px -152px rgba(140, 46, 217, 0.125), -340px -190px rgba(140, 46, 217, 0.125), -340px -228px rgba(140, 46, 217, 0.125), -340px -266px rgba(140, 46, 217, 0.125), -340px -304px rgba(140, 46, 217, 0.125), -340px -342px rgba(140, 46, 217, 0.125), -340px -380px rgba(140, 46, 217, 0.125), -340px -418px rgba(140, 46, 217, 0.125), -340px -456px rgba(140, 46, 217, 0.125), -340px -494px rgba(140, 46, 217, 0.125), -340px -532px rgba(140, 46, 217, 0.125);
- }
- 40.25% {
- width: 340px;
- box-shadow: -170px -38px rgba(140, 46, 217, 0.125), -340px -76px rgba(140, 46, 217, 0.125), -340px -114px rgba(140, 46, 217, 0.125), -340px -152px rgba(140, 46, 217, 0.125), -340px -190px rgba(140, 46, 217, 0.125), -340px -228px rgba(140, 46, 217, 0.125), -340px -266px rgba(140, 46, 217, 0.125), -340px -304px rgba(140, 46, 217, 0.125), -340px -342px rgba(140, 46, 217, 0.125), -340px -380px rgba(140, 46, 217, 0.125), -340px -418px rgba(140, 46, 217, 0.125), -340px -456px rgba(140, 46, 217, 0.125), -340px -494px rgba(140, 46, 217, 0.125), -340px -532px rgba(140, 46, 217, 0.125);
- }
- 40.875% {
- box-shadow: 0 -38px rgba(140, 46, 217, 0.125), -170px -76px rgba(140, 46, 217, 0.125), -340px -114px rgba(140, 46, 217, 0.125), -340px -152px rgba(140, 46, 217, 0.125), -340px -190px rgba(140, 46, 217, 0.125), -340px -228px rgba(140, 46, 217, 0.125), -340px -266px rgba(140, 46, 217, 0.125), -340px -304px rgba(140, 46, 217, 0.125), -340px -342px rgba(140, 46, 217, 0.125), -340px -380px rgba(140, 46, 217, 0.125), -340px -418px rgba(140, 46, 217, 0.125), -340px -456px rgba(140, 46, 217, 0.125), -340px -494px rgba(140, 46, 217, 0.125), -340px -532px rgba(140, 46, 217, 0.125);
- }
- 41.5% {
- box-shadow: 0 -38px rgba(140, 46, 217, 0.125), 0 -76px rgba(140, 46, 217, 0.125), -170px -114px rgba(140, 46, 217, 0.125), -340px -152px rgba(140, 46, 217, 0.125), -340px -190px rgba(140, 46, 217, 0.125), -340px -228px rgba(140, 46, 217, 0.125), -340px -266px rgba(140, 46, 217, 0.125), -340px -304px rgba(140, 46, 217, 0.125), -340px -342px rgba(140, 46, 217, 0.125), -340px -380px rgba(140, 46, 217, 0.125), -340px -418px rgba(140, 46, 217, 0.125), -340px -456px rgba(140, 46, 217, 0.125), -340px -494px rgba(140, 46, 217, 0.125), -340px -532px rgba(140, 46, 217, 0.125);
- }
- 42.125% {
- box-shadow: 0 -38px rgba(140, 46, 217, 0.125), 0 -76px rgba(140, 46, 217, 0.125), 0 -114px rgba(140, 46, 217, 0.125), -170px -152px rgba(140, 46, 217, 0.125), -340px -190px rgba(140, 46, 217, 0.125), -340px -228px rgba(140, 46, 217, 0.125), -340px -266px rgba(140, 46, 217, 0.125), -340px -304px rgba(140, 46, 217, 0.125), -340px -342px rgba(140, 46, 217, 0.125), -340px -380px rgba(140, 46, 217, 0.125), -340px -418px rgba(140, 46, 217, 0.125), -340px -456px rgba(140, 46, 217, 0.125), -340px -494px rgba(140, 46, 217, 0.125), -340px -532px rgba(140, 46, 217, 0.125);
- }
- 42.75% {
- box-shadow: 0 -38px rgba(140, 46, 217, 0.125), 0 -76px rgba(140, 46, 217, 0.125), 0 -114px rgba(140, 46, 217, 0.125), 0 -152px rgba(140, 46, 217, 0.125), -170px -190px rgba(140, 46, 217, 0.125), -340px -228px rgba(140, 46, 217, 0.125), -340px -266px rgba(140, 46, 217, 0.125), -340px -304px rgba(140, 46, 217, 0.125), -340px -342px rgba(140, 46, 217, 0.125), -340px -380px rgba(140, 46, 217, 0.125), -340px -418px rgba(140, 46, 217, 0.125), -340px -456px rgba(140, 46, 217, 0.125), -340px -494px rgba(140, 46, 217, 0.125), -340px -532px rgba(140, 46, 217, 0.125);
- }
- 43.375% {
- box-shadow: 0 -38px rgba(140, 46, 217, 0.125), 0 -76px rgba(140, 46, 217, 0.125), 0 -114px rgba(140, 46, 217, 0.125), 0 -152px rgba(140, 46, 217, 0.125), 0 -190px rgba(140, 46, 217, 0.125), -170px -228px rgba(140, 46, 217, 0.125), -340px -266px rgba(140, 46, 217, 0.125), -340px -304px rgba(140, 46, 217, 0.125), -340px -342px rgba(140, 46, 217, 0.125), -340px -380px rgba(140, 46, 217, 0.125), -340px -418px rgba(140, 46, 217, 0.125), -340px -456px rgba(140, 46, 217, 0.125), -340px -494px rgba(140, 46, 217, 0.125), -340px -532px rgba(140, 46, 217, 0.125);
- }
- 44% {
- box-shadow: 0 -38px rgba(140, 46, 217, 0.125), 0 -76px rgba(140, 46, 217, 0.125), 0 -114px rgba(140, 46, 217, 0.125), 0 -152px rgba(140, 46, 217, 0.125), 0 -190px rgba(140, 46, 217, 0.125), 0 -228px rgba(140, 46, 217, 0.125), -170px -266px rgba(140, 46, 217, 0.125), -340px -304px rgba(140, 46, 217, 0.125), -340px -342px rgba(140, 46, 217, 0.125), -340px -380px rgba(140, 46, 217, 0.125), -340px -418px rgba(140, 46, 217, 0.125), -340px -456px rgba(140, 46, 217, 0.125), -340px -494px rgba(140, 46, 217, 0.125), -340px -532px rgba(140, 46, 217, 0.125);
- }
- 44.625% {
- box-shadow: 0 -38px rgba(140, 46, 217, 0.125), 0 -76px rgba(140, 46, 217, 0.125), 0 -114px rgba(140, 46, 217, 0.125), 0 -152px rgba(140, 46, 217, 0.125), 0 -190px rgba(140, 46, 217, 0.125), 0 -228px rgba(140, 46, 217, 0.125), 0 -266px rgba(140, 46, 217, 0.125), -170px -304px rgba(140, 46, 217, 0.125), -340px -342px rgba(140, 46, 217, 0.125), -340px -380px rgba(140, 46, 217, 0.125), -340px -418px rgba(140, 46, 217, 0.125), -340px -456px rgba(140, 46, 217, 0.125), -340px -494px rgba(140, 46, 217, 0.125), -340px -532px rgba(140, 46, 217, 0.125);
- }
- 45.25% {
- box-shadow: 0 -38px rgba(140, 46, 217, 0.125), 0 -76px rgba(140, 46, 217, 0.125), 0 -114px rgba(140, 46, 217, 0.125), 0 -152px rgba(140, 46, 217, 0.125), 0 -190px rgba(140, 46, 217, 0.125), 0 -228px rgba(140, 46, 217, 0.125), 0 -266px rgba(140, 46, 217, 0.125), 0 -304px rgba(140, 46, 217, 0.125), -170px -342px rgba(140, 46, 217, 0.125), -340px -380px rgba(140, 46, 217, 0.125), -340px -418px rgba(140, 46, 217, 0.125), -340px -456px rgba(140, 46, 217, 0.125), -340px -494px rgba(140, 46, 217, 0.125), -340px -532px rgba(140, 46, 217, 0.125);
- }
- 45.875% {
- box-shadow: 0 -38px rgba(140, 46, 217, 0.125), 0 -76px rgba(140, 46, 217, 0.125), 0 -114px rgba(140, 46, 217, 0.125), 0 -152px rgba(140, 46, 217, 0.125), 0 -190px rgba(140, 46, 217, 0.125), 0 -228px rgba(140, 46, 217, 0.125), 0 -266px rgba(140, 46, 217, 0.125), 0 -304px rgba(140, 46, 217, 0.125), 0 -342px rgba(140, 46, 217, 0.125), -170px -380px rgba(140, 46, 217, 0.125), -340px -418px rgba(140, 46, 217, 0.125), -340px -456px rgba(140, 46, 217, 0.125), -340px -494px rgba(140, 46, 217, 0.125), -340px -532px rgba(140, 46, 217, 0.125);
- }
- 46.5% {
- box-shadow: 0 -38px rgba(140, 46, 217, 0.125), 0 -76px rgba(140, 46, 217, 0.125), 0 -114px rgba(140, 46, 217, 0.125), 0 -152px rgba(140, 46, 217, 0.125), 0 -190px rgba(140, 46, 217, 0.125), 0 -228px rgba(140, 46, 217, 0.125), 0 -266px rgba(140, 46, 217, 0.125), 0 -304px rgba(140, 46, 217, 0.125), 0 -342px rgba(140, 46, 217, 0.125), 0 -380px rgba(140, 46, 217, 0.125), -170px -418px rgba(140, 46, 217, 0.125), -340px -456px rgba(140, 46, 217, 0.125), -340px -494px rgba(140, 46, 217, 0.125), -340px -532px rgba(140, 46, 217, 0.125);
- }
- 47.125% {
- box-shadow: 0 -38px rgba(140, 46, 217, 0.125), 0 -76px rgba(140, 46, 217, 0.125), 0 -114px rgba(140, 46, 217, 0.125), 0 -152px rgba(140, 46, 217, 0.125), 0 -190px rgba(140, 46, 217, 0.125), 0 -228px rgba(140, 46, 217, 0.125), 0 -266px rgba(140, 46, 217, 0.125), 0 -304px rgba(140, 46, 217, 0.125), 0 -342px rgba(140, 46, 217, 0.125), 0 -380px rgba(140, 46, 217, 0.125), 0 -418px rgba(140, 46, 217, 0.125), -170px -456px rgba(140, 46, 217, 0.125), -340px -494px rgba(140, 46, 217, 0.125), -340px -532px rgba(140, 46, 217, 0.125);
- }
- 47.75% {
- box-shadow: 0 -38px rgba(140, 46, 217, 0.125), 0 -76px rgba(140, 46, 217, 0.125), 0 -114px rgba(140, 46, 217, 0.125), 0 -152px rgba(140, 46, 217, 0.125), 0 -190px rgba(140, 46, 217, 0.125), 0 -228px rgba(140, 46, 217, 0.125), 0 -266px rgba(140, 46, 217, 0.125), 0 -304px rgba(140, 46, 217, 0.125), 0 -342px rgba(140, 46, 217, 0.125), 0 -380px rgba(140, 46, 217, 0.125), 0 -418px rgba(140, 46, 217, 0.125), 0 -456px rgba(140, 46, 217, 0.125), -170px -494px rgba(140, 46, 217, 0.125), -340px -532px rgba(140, 46, 217, 0.125);
- }
- 48.375% {
- box-shadow: 0 -38px rgba(140, 46, 217, 0.125), 0 -76px rgba(140, 46, 217, 0.125), 0 -114px rgba(140, 46, 217, 0.125), 0 -152px rgba(140, 46, 217, 0.125), 0 -190px rgba(140, 46, 217, 0.125), 0 -228px rgba(140, 46, 217, 0.125), 0 -266px rgba(140, 46, 217, 0.125), 0 -304px rgba(140, 46, 217, 0.125), 0 -342px rgba(140, 46, 217, 0.125), 0 -380px rgba(140, 46, 217, 0.125), 0 -418px rgba(140, 46, 217, 0.125), 0 -456px rgba(140, 46, 217, 0.125), 0 -494px rgba(140, 46, 217, 0.125), -170px -532px rgba(140, 46, 217, 0.125);
- }
- 49% {
- box-shadow: 0 -38px rgba(140, 46, 217, 0.125), 0 -76px rgba(140, 46, 217, 0.125), 0 -114px rgba(140, 46, 217, 0.125), 0 -152px rgba(140, 46, 217, 0.125), 0 -190px rgba(140, 46, 217, 0.125), 0 -228px rgba(140, 46, 217, 0.125), 0 -266px rgba(140, 46, 217, 0.125), 0 -304px rgba(140, 46, 217, 0.125), 0 -342px rgba(140, 46, 217, 0.125), 0 -380px rgba(140, 46, 217, 0.125), 0 -418px rgba(140, 46, 217, 0.125), 0 -456px rgba(140, 46, 217, 0.125), 0 -494px rgba(140, 46, 217, 0.125), 0 -532px rgba(140, 46, 217, 0.125);
- }
-}
-@-webkit-keyframes cover-horizontal-transparent {
- 0% {
- width: 0;
- height: 0;
- box-shadow: none;
- }
- 39% {
- width: 0;
- height: 38px;
- }
- 39.625% {
- width: 170px;
- box-shadow: -340px -38px rgba(140, 46, 217, 0.125), -340px -76px rgba(140, 46, 217, 0.125), -340px -114px rgba(140, 46, 217, 0.125), -340px -152px rgba(140, 46, 217, 0.125), -340px -190px rgba(140, 46, 217, 0.125), -340px -228px rgba(140, 46, 217, 0.125), -340px -266px rgba(140, 46, 217, 0.125), -340px -304px rgba(140, 46, 217, 0.125), -340px -342px rgba(140, 46, 217, 0.125), -340px -380px rgba(140, 46, 217, 0.125), -340px -418px rgba(140, 46, 217, 0.125), -340px -456px rgba(140, 46, 217, 0.125), -340px -494px rgba(140, 46, 217, 0.125), -340px -532px rgba(140, 46, 217, 0.125);
- }
- 40.25% {
- width: 340px;
- box-shadow: -170px -38px rgba(140, 46, 217, 0.125), -340px -76px rgba(140, 46, 217, 0.125), -340px -114px rgba(140, 46, 217, 0.125), -340px -152px rgba(140, 46, 217, 0.125), -340px -190px rgba(140, 46, 217, 0.125), -340px -228px rgba(140, 46, 217, 0.125), -340px -266px rgba(140, 46, 217, 0.125), -340px -304px rgba(140, 46, 217, 0.125), -340px -342px rgba(140, 46, 217, 0.125), -340px -380px rgba(140, 46, 217, 0.125), -340px -418px rgba(140, 46, 217, 0.125), -340px -456px rgba(140, 46, 217, 0.125), -340px -494px rgba(140, 46, 217, 0.125), -340px -532px rgba(140, 46, 217, 0.125);
- }
- 40.875% {
- box-shadow: 0 -38px rgba(140, 46, 217, 0.125), -170px -76px rgba(140, 46, 217, 0.125), -340px -114px rgba(140, 46, 217, 0.125), -340px -152px rgba(140, 46, 217, 0.125), -340px -190px rgba(140, 46, 217, 0.125), -340px -228px rgba(140, 46, 217, 0.125), -340px -266px rgba(140, 46, 217, 0.125), -340px -304px rgba(140, 46, 217, 0.125), -340px -342px rgba(140, 46, 217, 0.125), -340px -380px rgba(140, 46, 217, 0.125), -340px -418px rgba(140, 46, 217, 0.125), -340px -456px rgba(140, 46, 217, 0.125), -340px -494px rgba(140, 46, 217, 0.125), -340px -532px rgba(140, 46, 217, 0.125);
- }
- 41.5% {
- box-shadow: 0 -38px rgba(140, 46, 217, 0.125), 0 -76px rgba(140, 46, 217, 0.125), -170px -114px rgba(140, 46, 217, 0.125), -340px -152px rgba(140, 46, 217, 0.125), -340px -190px rgba(140, 46, 217, 0.125), -340px -228px rgba(140, 46, 217, 0.125), -340px -266px rgba(140, 46, 217, 0.125), -340px -304px rgba(140, 46, 217, 0.125), -340px -342px rgba(140, 46, 217, 0.125), -340px -380px rgba(140, 46, 217, 0.125), -340px -418px rgba(140, 46, 217, 0.125), -340px -456px rgba(140, 46, 217, 0.125), -340px -494px rgba(140, 46, 217, 0.125), -340px -532px rgba(140, 46, 217, 0.125);
- }
- 42.125% {
- box-shadow: 0 -38px rgba(140, 46, 217, 0.125), 0 -76px rgba(140, 46, 217, 0.125), 0 -114px rgba(140, 46, 217, 0.125), -170px -152px rgba(140, 46, 217, 0.125), -340px -190px rgba(140, 46, 217, 0.125), -340px -228px rgba(140, 46, 217, 0.125), -340px -266px rgba(140, 46, 217, 0.125), -340px -304px rgba(140, 46, 217, 0.125), -340px -342px rgba(140, 46, 217, 0.125), -340px -380px rgba(140, 46, 217, 0.125), -340px -418px rgba(140, 46, 217, 0.125), -340px -456px rgba(140, 46, 217, 0.125), -340px -494px rgba(140, 46, 217, 0.125), -340px -532px rgba(140, 46, 217, 0.125);
- }
- 42.75% {
- box-shadow: 0 -38px rgba(140, 46, 217, 0.125), 0 -76px rgba(140, 46, 217, 0.125), 0 -114px rgba(140, 46, 217, 0.125), 0 -152px rgba(140, 46, 217, 0.125), -170px -190px rgba(140, 46, 217, 0.125), -340px -228px rgba(140, 46, 217, 0.125), -340px -266px rgba(140, 46, 217, 0.125), -340px -304px rgba(140, 46, 217, 0.125), -340px -342px rgba(140, 46, 217, 0.125), -340px -380px rgba(140, 46, 217, 0.125), -340px -418px rgba(140, 46, 217, 0.125), -340px -456px rgba(140, 46, 217, 0.125), -340px -494px rgba(140, 46, 217, 0.125), -340px -532px rgba(140, 46, 217, 0.125);
- }
- 43.375% {
- box-shadow: 0 -38px rgba(140, 46, 217, 0.125), 0 -76px rgba(140, 46, 217, 0.125), 0 -114px rgba(140, 46, 217, 0.125), 0 -152px rgba(140, 46, 217, 0.125), 0 -190px rgba(140, 46, 217, 0.125), -170px -228px rgba(140, 46, 217, 0.125), -340px -266px rgba(140, 46, 217, 0.125), -340px -304px rgba(140, 46, 217, 0.125), -340px -342px rgba(140, 46, 217, 0.125), -340px -380px rgba(140, 46, 217, 0.125), -340px -418px rgba(140, 46, 217, 0.125), -340px -456px rgba(140, 46, 217, 0.125), -340px -494px rgba(140, 46, 217, 0.125), -340px -532px rgba(140, 46, 217, 0.125);
- }
- 44% {
- box-shadow: 0 -38px rgba(140, 46, 217, 0.125), 0 -76px rgba(140, 46, 217, 0.125), 0 -114px rgba(140, 46, 217, 0.125), 0 -152px rgba(140, 46, 217, 0.125), 0 -190px rgba(140, 46, 217, 0.125), 0 -228px rgba(140, 46, 217, 0.125), -170px -266px rgba(140, 46, 217, 0.125), -340px -304px rgba(140, 46, 217, 0.125), -340px -342px rgba(140, 46, 217, 0.125), -340px -380px rgba(140, 46, 217, 0.125), -340px -418px rgba(140, 46, 217, 0.125), -340px -456px rgba(140, 46, 217, 0.125), -340px -494px rgba(140, 46, 217, 0.125), -340px -532px rgba(140, 46, 217, 0.125);
- }
- 44.625% {
- box-shadow: 0 -38px rgba(140, 46, 217, 0.125), 0 -76px rgba(140, 46, 217, 0.125), 0 -114px rgba(140, 46, 217, 0.125), 0 -152px rgba(140, 46, 217, 0.125), 0 -190px rgba(140, 46, 217, 0.125), 0 -228px rgba(140, 46, 217, 0.125), 0 -266px rgba(140, 46, 217, 0.125), -170px -304px rgba(140, 46, 217, 0.125), -340px -342px rgba(140, 46, 217, 0.125), -340px -380px rgba(140, 46, 217, 0.125), -340px -418px rgba(140, 46, 217, 0.125), -340px -456px rgba(140, 46, 217, 0.125), -340px -494px rgba(140, 46, 217, 0.125), -340px -532px rgba(140, 46, 217, 0.125);
- }
- 45.25% {
- box-shadow: 0 -38px rgba(140, 46, 217, 0.125), 0 -76px rgba(140, 46, 217, 0.125), 0 -114px rgba(140, 46, 217, 0.125), 0 -152px rgba(140, 46, 217, 0.125), 0 -190px rgba(140, 46, 217, 0.125), 0 -228px rgba(140, 46, 217, 0.125), 0 -266px rgba(140, 46, 217, 0.125), 0 -304px rgba(140, 46, 217, 0.125), -170px -342px rgba(140, 46, 217, 0.125), -340px -380px rgba(140, 46, 217, 0.125), -340px -418px rgba(140, 46, 217, 0.125), -340px -456px rgba(140, 46, 217, 0.125), -340px -494px rgba(140, 46, 217, 0.125), -340px -532px rgba(140, 46, 217, 0.125);
- }
- 45.875% {
- box-shadow: 0 -38px rgba(140, 46, 217, 0.125), 0 -76px rgba(140, 46, 217, 0.125), 0 -114px rgba(140, 46, 217, 0.125), 0 -152px rgba(140, 46, 217, 0.125), 0 -190px rgba(140, 46, 217, 0.125), 0 -228px rgba(140, 46, 217, 0.125), 0 -266px rgba(140, 46, 217, 0.125), 0 -304px rgba(140, 46, 217, 0.125), 0 -342px rgba(140, 46, 217, 0.125), -170px -380px rgba(140, 46, 217, 0.125), -340px -418px rgba(140, 46, 217, 0.125), -340px -456px rgba(140, 46, 217, 0.125), -340px -494px rgba(140, 46, 217, 0.125), -340px -532px rgba(140, 46, 217, 0.125);
- }
- 46.5% {
- box-shadow: 0 -38px rgba(140, 46, 217, 0.125), 0 -76px rgba(140, 46, 217, 0.125), 0 -114px rgba(140, 46, 217, 0.125), 0 -152px rgba(140, 46, 217, 0.125), 0 -190px rgba(140, 46, 217, 0.125), 0 -228px rgba(140, 46, 217, 0.125), 0 -266px rgba(140, 46, 217, 0.125), 0 -304px rgba(140, 46, 217, 0.125), 0 -342px rgba(140, 46, 217, 0.125), 0 -380px rgba(140, 46, 217, 0.125), -170px -418px rgba(140, 46, 217, 0.125), -340px -456px rgba(140, 46, 217, 0.125), -340px -494px rgba(140, 46, 217, 0.125), -340px -532px rgba(140, 46, 217, 0.125);
- }
- 47.125% {
- box-shadow: 0 -38px rgba(140, 46, 217, 0.125), 0 -76px rgba(140, 46, 217, 0.125), 0 -114px rgba(140, 46, 217, 0.125), 0 -152px rgba(140, 46, 217, 0.125), 0 -190px rgba(140, 46, 217, 0.125), 0 -228px rgba(140, 46, 217, 0.125), 0 -266px rgba(140, 46, 217, 0.125), 0 -304px rgba(140, 46, 217, 0.125), 0 -342px rgba(140, 46, 217, 0.125), 0 -380px rgba(140, 46, 217, 0.125), 0 -418px rgba(140, 46, 217, 0.125), -170px -456px rgba(140, 46, 217, 0.125), -340px -494px rgba(140, 46, 217, 0.125), -340px -532px rgba(140, 46, 217, 0.125);
- }
- 47.75% {
- box-shadow: 0 -38px rgba(140, 46, 217, 0.125), 0 -76px rgba(140, 46, 217, 0.125), 0 -114px rgba(140, 46, 217, 0.125), 0 -152px rgba(140, 46, 217, 0.125), 0 -190px rgba(140, 46, 217, 0.125), 0 -228px rgba(140, 46, 217, 0.125), 0 -266px rgba(140, 46, 217, 0.125), 0 -304px rgba(140, 46, 217, 0.125), 0 -342px rgba(140, 46, 217, 0.125), 0 -380px rgba(140, 46, 217, 0.125), 0 -418px rgba(140, 46, 217, 0.125), 0 -456px rgba(140, 46, 217, 0.125), -170px -494px rgba(140, 46, 217, 0.125), -340px -532px rgba(140, 46, 217, 0.125);
- }
- 48.375% {
- box-shadow: 0 -38px rgba(140, 46, 217, 0.125), 0 -76px rgba(140, 46, 217, 0.125), 0 -114px rgba(140, 46, 217, 0.125), 0 -152px rgba(140, 46, 217, 0.125), 0 -190px rgba(140, 46, 217, 0.125), 0 -228px rgba(140, 46, 217, 0.125), 0 -266px rgba(140, 46, 217, 0.125), 0 -304px rgba(140, 46, 217, 0.125), 0 -342px rgba(140, 46, 217, 0.125), 0 -380px rgba(140, 46, 217, 0.125), 0 -418px rgba(140, 46, 217, 0.125), 0 -456px rgba(140, 46, 217, 0.125), 0 -494px rgba(140, 46, 217, 0.125), -170px -532px rgba(140, 46, 217, 0.125);
- }
- 49% {
- box-shadow: 0 -38px rgba(140, 46, 217, 0.125), 0 -76px rgba(140, 46, 217, 0.125), 0 -114px rgba(140, 46, 217, 0.125), 0 -152px rgba(140, 46, 217, 0.125), 0 -190px rgba(140, 46, 217, 0.125), 0 -228px rgba(140, 46, 217, 0.125), 0 -266px rgba(140, 46, 217, 0.125), 0 -304px rgba(140, 46, 217, 0.125), 0 -342px rgba(140, 46, 217, 0.125), 0 -380px rgba(140, 46, 217, 0.125), 0 -418px rgba(140, 46, 217, 0.125), 0 -456px rgba(140, 46, 217, 0.125), 0 -494px rgba(140, 46, 217, 0.125), 0 -532px rgba(140, 46, 217, 0.125);
- }
-}
-@keyframes cover-horizontal-transparent {
- 0% {
- width: 0;
- height: 0;
- box-shadow: none;
- }
- 39% {
- width: 0;
- height: 38px;
- }
- 39.625% {
- width: 170px;
- box-shadow: -340px -38px rgba(140, 46, 217, 0.125), -340px -76px rgba(140, 46, 217, 0.125), -340px -114px rgba(140, 46, 217, 0.125), -340px -152px rgba(140, 46, 217, 0.125), -340px -190px rgba(140, 46, 217, 0.125), -340px -228px rgba(140, 46, 217, 0.125), -340px -266px rgba(140, 46, 217, 0.125), -340px -304px rgba(140, 46, 217, 0.125), -340px -342px rgba(140, 46, 217, 0.125), -340px -380px rgba(140, 46, 217, 0.125), -340px -418px rgba(140, 46, 217, 0.125), -340px -456px rgba(140, 46, 217, 0.125), -340px -494px rgba(140, 46, 217, 0.125), -340px -532px rgba(140, 46, 217, 0.125);
- }
- 40.25% {
- width: 340px;
- box-shadow: -170px -38px rgba(140, 46, 217, 0.125), -340px -76px rgba(140, 46, 217, 0.125), -340px -114px rgba(140, 46, 217, 0.125), -340px -152px rgba(140, 46, 217, 0.125), -340px -190px rgba(140, 46, 217, 0.125), -340px -228px rgba(140, 46, 217, 0.125), -340px -266px rgba(140, 46, 217, 0.125), -340px -304px rgba(140, 46, 217, 0.125), -340px -342px rgba(140, 46, 217, 0.125), -340px -380px rgba(140, 46, 217, 0.125), -340px -418px rgba(140, 46, 217, 0.125), -340px -456px rgba(140, 46, 217, 0.125), -340px -494px rgba(140, 46, 217, 0.125), -340px -532px rgba(140, 46, 217, 0.125);
- }
- 40.875% {
- box-shadow: 0 -38px rgba(140, 46, 217, 0.125), -170px -76px rgba(140, 46, 217, 0.125), -340px -114px rgba(140, 46, 217, 0.125), -340px -152px rgba(140, 46, 217, 0.125), -340px -190px rgba(140, 46, 217, 0.125), -340px -228px rgba(140, 46, 217, 0.125), -340px -266px rgba(140, 46, 217, 0.125), -340px -304px rgba(140, 46, 217, 0.125), -340px -342px rgba(140, 46, 217, 0.125), -340px -380px rgba(140, 46, 217, 0.125), -340px -418px rgba(140, 46, 217, 0.125), -340px -456px rgba(140, 46, 217, 0.125), -340px -494px rgba(140, 46, 217, 0.125), -340px -532px rgba(140, 46, 217, 0.125);
- }
- 41.5% {
- box-shadow: 0 -38px rgba(140, 46, 217, 0.125), 0 -76px rgba(140, 46, 217, 0.125), -170px -114px rgba(140, 46, 217, 0.125), -340px -152px rgba(140, 46, 217, 0.125), -340px -190px rgba(140, 46, 217, 0.125), -340px -228px rgba(140, 46, 217, 0.125), -340px -266px rgba(140, 46, 217, 0.125), -340px -304px rgba(140, 46, 217, 0.125), -340px -342px rgba(140, 46, 217, 0.125), -340px -380px rgba(140, 46, 217, 0.125), -340px -418px rgba(140, 46, 217, 0.125), -340px -456px rgba(140, 46, 217, 0.125), -340px -494px rgba(140, 46, 217, 0.125), -340px -532px rgba(140, 46, 217, 0.125);
- }
- 42.125% {
- box-shadow: 0 -38px rgba(140, 46, 217, 0.125), 0 -76px rgba(140, 46, 217, 0.125), 0 -114px rgba(140, 46, 217, 0.125), -170px -152px rgba(140, 46, 217, 0.125), -340px -190px rgba(140, 46, 217, 0.125), -340px -228px rgba(140, 46, 217, 0.125), -340px -266px rgba(140, 46, 217, 0.125), -340px -304px rgba(140, 46, 217, 0.125), -340px -342px rgba(140, 46, 217, 0.125), -340px -380px rgba(140, 46, 217, 0.125), -340px -418px rgba(140, 46, 217, 0.125), -340px -456px rgba(140, 46, 217, 0.125), -340px -494px rgba(140, 46, 217, 0.125), -340px -532px rgba(140, 46, 217, 0.125);
- }
- 42.75% {
- box-shadow: 0 -38px rgba(140, 46, 217, 0.125), 0 -76px rgba(140, 46, 217, 0.125), 0 -114px rgba(140, 46, 217, 0.125), 0 -152px rgba(140, 46, 217, 0.125), -170px -190px rgba(140, 46, 217, 0.125), -340px -228px rgba(140, 46, 217, 0.125), -340px -266px rgba(140, 46, 217, 0.125), -340px -304px rgba(140, 46, 217, 0.125), -340px -342px rgba(140, 46, 217, 0.125), -340px -380px rgba(140, 46, 217, 0.125), -340px -418px rgba(140, 46, 217, 0.125), -340px -456px rgba(140, 46, 217, 0.125), -340px -494px rgba(140, 46, 217, 0.125), -340px -532px rgba(140, 46, 217, 0.125);
- }
- 43.375% {
- box-shadow: 0 -38px rgba(140, 46, 217, 0.125), 0 -76px rgba(140, 46, 217, 0.125), 0 -114px rgba(140, 46, 217, 0.125), 0 -152px rgba(140, 46, 217, 0.125), 0 -190px rgba(140, 46, 217, 0.125), -170px -228px rgba(140, 46, 217, 0.125), -340px -266px rgba(140, 46, 217, 0.125), -340px -304px rgba(140, 46, 217, 0.125), -340px -342px rgba(140, 46, 217, 0.125), -340px -380px rgba(140, 46, 217, 0.125), -340px -418px rgba(140, 46, 217, 0.125), -340px -456px rgba(140, 46, 217, 0.125), -340px -494px rgba(140, 46, 217, 0.125), -340px -532px rgba(140, 46, 217, 0.125);
- }
- 44% {
- box-shadow: 0 -38px rgba(140, 46, 217, 0.125), 0 -76px rgba(140, 46, 217, 0.125), 0 -114px rgba(140, 46, 217, 0.125), 0 -152px rgba(140, 46, 217, 0.125), 0 -190px rgba(140, 46, 217, 0.125), 0 -228px rgba(140, 46, 217, 0.125), -170px -266px rgba(140, 46, 217, 0.125), -340px -304px rgba(140, 46, 217, 0.125), -340px -342px rgba(140, 46, 217, 0.125), -340px -380px rgba(140, 46, 217, 0.125), -340px -418px rgba(140, 46, 217, 0.125), -340px -456px rgba(140, 46, 217, 0.125), -340px -494px rgba(140, 46, 217, 0.125), -340px -532px rgba(140, 46, 217, 0.125);
- }
- 44.625% {
- box-shadow: 0 -38px rgba(140, 46, 217, 0.125), 0 -76px rgba(140, 46, 217, 0.125), 0 -114px rgba(140, 46, 217, 0.125), 0 -152px rgba(140, 46, 217, 0.125), 0 -190px rgba(140, 46, 217, 0.125), 0 -228px rgba(140, 46, 217, 0.125), 0 -266px rgba(140, 46, 217, 0.125), -170px -304px rgba(140, 46, 217, 0.125), -340px -342px rgba(140, 46, 217, 0.125), -340px -380px rgba(140, 46, 217, 0.125), -340px -418px rgba(140, 46, 217, 0.125), -340px -456px rgba(140, 46, 217, 0.125), -340px -494px rgba(140, 46, 217, 0.125), -340px -532px rgba(140, 46, 217, 0.125);
- }
- 45.25% {
- box-shadow: 0 -38px rgba(140, 46, 217, 0.125), 0 -76px rgba(140, 46, 217, 0.125), 0 -114px rgba(140, 46, 217, 0.125), 0 -152px rgba(140, 46, 217, 0.125), 0 -190px rgba(140, 46, 217, 0.125), 0 -228px rgba(140, 46, 217, 0.125), 0 -266px rgba(140, 46, 217, 0.125), 0 -304px rgba(140, 46, 217, 0.125), -170px -342px rgba(140, 46, 217, 0.125), -340px -380px rgba(140, 46, 217, 0.125), -340px -418px rgba(140, 46, 217, 0.125), -340px -456px rgba(140, 46, 217, 0.125), -340px -494px rgba(140, 46, 217, 0.125), -340px -532px rgba(140, 46, 217, 0.125);
- }
- 45.875% {
- box-shadow: 0 -38px rgba(140, 46, 217, 0.125), 0 -76px rgba(140, 46, 217, 0.125), 0 -114px rgba(140, 46, 217, 0.125), 0 -152px rgba(140, 46, 217, 0.125), 0 -190px rgba(140, 46, 217, 0.125), 0 -228px rgba(140, 46, 217, 0.125), 0 -266px rgba(140, 46, 217, 0.125), 0 -304px rgba(140, 46, 217, 0.125), 0 -342px rgba(140, 46, 217, 0.125), -170px -380px rgba(140, 46, 217, 0.125), -340px -418px rgba(140, 46, 217, 0.125), -340px -456px rgba(140, 46, 217, 0.125), -340px -494px rgba(140, 46, 217, 0.125), -340px -532px rgba(140, 46, 217, 0.125);
- }
- 46.5% {
- box-shadow: 0 -38px rgba(140, 46, 217, 0.125), 0 -76px rgba(140, 46, 217, 0.125), 0 -114px rgba(140, 46, 217, 0.125), 0 -152px rgba(140, 46, 217, 0.125), 0 -190px rgba(140, 46, 217, 0.125), 0 -228px rgba(140, 46, 217, 0.125), 0 -266px rgba(140, 46, 217, 0.125), 0 -304px rgba(140, 46, 217, 0.125), 0 -342px rgba(140, 46, 217, 0.125), 0 -380px rgba(140, 46, 217, 0.125), -170px -418px rgba(140, 46, 217, 0.125), -340px -456px rgba(140, 46, 217, 0.125), -340px -494px rgba(140, 46, 217, 0.125), -340px -532px rgba(140, 46, 217, 0.125);
- }
- 47.125% {
- box-shadow: 0 -38px rgba(140, 46, 217, 0.125), 0 -76px rgba(140, 46, 217, 0.125), 0 -114px rgba(140, 46, 217, 0.125), 0 -152px rgba(140, 46, 217, 0.125), 0 -190px rgba(140, 46, 217, 0.125), 0 -228px rgba(140, 46, 217, 0.125), 0 -266px rgba(140, 46, 217, 0.125), 0 -304px rgba(140, 46, 217, 0.125), 0 -342px rgba(140, 46, 217, 0.125), 0 -380px rgba(140, 46, 217, 0.125), 0 -418px rgba(140, 46, 217, 0.125), -170px -456px rgba(140, 46, 217, 0.125), -340px -494px rgba(140, 46, 217, 0.125), -340px -532px rgba(140, 46, 217, 0.125);
- }
- 47.75% {
- box-shadow: 0 -38px rgba(140, 46, 217, 0.125), 0 -76px rgba(140, 46, 217, 0.125), 0 -114px rgba(140, 46, 217, 0.125), 0 -152px rgba(140, 46, 217, 0.125), 0 -190px rgba(140, 46, 217, 0.125), 0 -228px rgba(140, 46, 217, 0.125), 0 -266px rgba(140, 46, 217, 0.125), 0 -304px rgba(140, 46, 217, 0.125), 0 -342px rgba(140, 46, 217, 0.125), 0 -380px rgba(140, 46, 217, 0.125), 0 -418px rgba(140, 46, 217, 0.125), 0 -456px rgba(140, 46, 217, 0.125), -170px -494px rgba(140, 46, 217, 0.125), -340px -532px rgba(140, 46, 217, 0.125);
- }
- 48.375% {
- box-shadow: 0 -38px rgba(140, 46, 217, 0.125), 0 -76px rgba(140, 46, 217, 0.125), 0 -114px rgba(140, 46, 217, 0.125), 0 -152px rgba(140, 46, 217, 0.125), 0 -190px rgba(140, 46, 217, 0.125), 0 -228px rgba(140, 46, 217, 0.125), 0 -266px rgba(140, 46, 217, 0.125), 0 -304px rgba(140, 46, 217, 0.125), 0 -342px rgba(140, 46, 217, 0.125), 0 -380px rgba(140, 46, 217, 0.125), 0 -418px rgba(140, 46, 217, 0.125), 0 -456px rgba(140, 46, 217, 0.125), 0 -494px rgba(140, 46, 217, 0.125), -170px -532px rgba(140, 46, 217, 0.125);
- }
- 49% {
- box-shadow: 0 -38px rgba(140, 46, 217, 0.125), 0 -76px rgba(140, 46, 217, 0.125), 0 -114px rgba(140, 46, 217, 0.125), 0 -152px rgba(140, 46, 217, 0.125), 0 -190px rgba(140, 46, 217, 0.125), 0 -228px rgba(140, 46, 217, 0.125), 0 -266px rgba(140, 46, 217, 0.125), 0 -304px rgba(140, 46, 217, 0.125), 0 -342px rgba(140, 46, 217, 0.125), 0 -380px rgba(140, 46, 217, 0.125), 0 -418px rgba(140, 46, 217, 0.125), 0 -456px rgba(140, 46, 217, 0.125), 0 -494px rgba(140, 46, 217, 0.125), 0 -532px rgba(140, 46, 217, 0.125);
- }
-}
-#gameboy.transparent #cover-horizontal {
- background-color: rgba(140, 46, 217, 0.125);
- -webkit-animation: cover-horizontal-transparent 8s linear;
- animation: cover-horizontal-transparent 8s linear;
- box-shadow: 0 -38px rgba(140, 46, 217, 0.125), 0 -76px rgba(140, 46, 217, 0.125), 0 -114px rgba(140, 46, 217, 0.125), 0 -152px rgba(140, 46, 217, 0.125), 0 -190px rgba(140, 46, 217, 0.125), 0 -228px rgba(140, 46, 217, 0.125), 0 -266px rgba(140, 46, 217, 0.125), 0 -304px rgba(140, 46, 217, 0.125), 0 -342px rgba(140, 46, 217, 0.125), 0 -380px rgba(140, 46, 217, 0.125), 0 -418px rgba(140, 46, 217, 0.125), 0 -456px rgba(140, 46, 217, 0.125), 0 -494px rgba(140, 46, 217, 0.125), 0 -532px rgba(140, 46, 217, 0.125);
-}
-@-moz-keyframes cover-horizontal-teal {
- 0% {
- width: 0;
- height: 0;
- box-shadow: none;
- }
- 39% {
- width: 0;
- height: 38px;
- }
- 39.625% {
- width: 170px;
- box-shadow: -340px -38px #01b4dd, -340px -76px #01b4dd, -340px -114px #01b4dd, -340px -152px #01b4dd, -340px -190px #01b4dd, -340px -228px #01b4dd, -340px -266px #01b4dd, -340px -304px #01b4dd, -340px -342px #01b4dd, -340px -380px #01b4dd, -340px -418px #01b4dd, -340px -456px #01b4dd, -340px -494px #01b4dd, -340px -532px #01b4dd;
- }
- 40.25% {
- width: 340px;
- box-shadow: -170px -38px #01b4dd, -340px -76px #01b4dd, -340px -114px #01b4dd, -340px -152px #01b4dd, -340px -190px #01b4dd, -340px -228px #01b4dd, -340px -266px #01b4dd, -340px -304px #01b4dd, -340px -342px #01b4dd, -340px -380px #01b4dd, -340px -418px #01b4dd, -340px -456px #01b4dd, -340px -494px #01b4dd, -340px -532px #01b4dd;
- }
- 40.875% {
- box-shadow: 0 -38px #01b4dd, -170px -76px #01b4dd, -340px -114px #01b4dd, -340px -152px #01b4dd, -340px -190px #01b4dd, -340px -228px #01b4dd, -340px -266px #01b4dd, -340px -304px #01b4dd, -340px -342px #01b4dd, -340px -380px #01b4dd, -340px -418px #01b4dd, -340px -456px #01b4dd, -340px -494px #01b4dd, -340px -532px #01b4dd;
- }
- 41.5% {
- box-shadow: 0 -38px #01b4dd, 0 -76px #01b4dd, -170px -114px #01b4dd, -340px -152px #01b4dd, -340px -190px #01b4dd, -340px -228px #01b4dd, -340px -266px #01b4dd, -340px -304px #01b4dd, -340px -342px #01b4dd, -340px -380px #01b4dd, -340px -418px #01b4dd, -340px -456px #01b4dd, -340px -494px #01b4dd, -340px -532px #01b4dd;
- }
- 42.125% {
- box-shadow: 0 -38px #01b4dd, 0 -76px #01b4dd, 0 -114px #01b4dd, -170px -152px #01b4dd, -340px -190px #01b4dd, -340px -228px #01b4dd, -340px -266px #01b4dd, -340px -304px #01b4dd, -340px -342px #01b4dd, -340px -380px #01b4dd, -340px -418px #01b4dd, -340px -456px #01b4dd, -340px -494px #01b4dd, -340px -532px #01b4dd;
- }
- 42.75% {
- box-shadow: 0 -38px #01b4dd, 0 -76px #01b4dd, 0 -114px #01b4dd, 0 -152px #01b4dd, -170px -190px #01b4dd, -340px -228px #01b4dd, -340px -266px #01b4dd, -340px -304px #01b4dd, -340px -342px #01b4dd, -340px -380px #01b4dd, -340px -418px #01b4dd, -340px -456px #01b4dd, -340px -494px #01b4dd, -340px -532px #01b4dd;
- }
- 43.375% {
- box-shadow: 0 -38px #01b4dd, 0 -76px #01b4dd, 0 -114px #01b4dd, 0 -152px #01b4dd, 0 -190px #01b4dd, -170px -228px #01b4dd, -340px -266px #01b4dd, -340px -304px #01b4dd, -340px -342px #01b4dd, -340px -380px #01b4dd, -340px -418px #01b4dd, -340px -456px #01b4dd, -340px -494px #01b4dd, -340px -532px #01b4dd;
- }
- 44% {
- box-shadow: 0 -38px #01b4dd, 0 -76px #01b4dd, 0 -114px #01b4dd, 0 -152px #01b4dd, 0 -190px #01b4dd, 0 -228px #01b4dd, -170px -266px #01b4dd, -340px -304px #01b4dd, -340px -342px #01b4dd, -340px -380px #01b4dd, -340px -418px #01b4dd, -340px -456px #01b4dd, -340px -494px #01b4dd, -340px -532px #01b4dd;
- }
- 44.625% {
- box-shadow: 0 -38px #01b4dd, 0 -76px #01b4dd, 0 -114px #01b4dd, 0 -152px #01b4dd, 0 -190px #01b4dd, 0 -228px #01b4dd, 0 -266px #01b4dd, -170px -304px #01b4dd, -340px -342px #01b4dd, -340px -380px #01b4dd, -340px -418px #01b4dd, -340px -456px #01b4dd, -340px -494px #01b4dd, -340px -532px #01b4dd;
- }
- 45.25% {
- box-shadow: 0 -38px #01b4dd, 0 -76px #01b4dd, 0 -114px #01b4dd, 0 -152px #01b4dd, 0 -190px #01b4dd, 0 -228px #01b4dd, 0 -266px #01b4dd, 0 -304px #01b4dd, -170px -342px #01b4dd, -340px -380px #01b4dd, -340px -418px #01b4dd, -340px -456px #01b4dd, -340px -494px #01b4dd, -340px -532px #01b4dd;
- }
- 45.875% {
- box-shadow: 0 -38px #01b4dd, 0 -76px #01b4dd, 0 -114px #01b4dd, 0 -152px #01b4dd, 0 -190px #01b4dd, 0 -228px #01b4dd, 0 -266px #01b4dd, 0 -304px #01b4dd, 0 -342px #01b4dd, -170px -380px #01b4dd, -340px -418px #01b4dd, -340px -456px #01b4dd, -340px -494px #01b4dd, -340px -532px #01b4dd;
- }
- 46.5% {
- box-shadow: 0 -38px #01b4dd, 0 -76px #01b4dd, 0 -114px #01b4dd, 0 -152px #01b4dd, 0 -190px #01b4dd, 0 -228px #01b4dd, 0 -266px #01b4dd, 0 -304px #01b4dd, 0 -342px #01b4dd, 0 -380px #01b4dd, -170px -418px #01b4dd, -340px -456px #01b4dd, -340px -494px #01b4dd, -340px -532px #01b4dd;
- }
- 47.125% {
- box-shadow: 0 -38px #01b4dd, 0 -76px #01b4dd, 0 -114px #01b4dd, 0 -152px #01b4dd, 0 -190px #01b4dd, 0 -228px #01b4dd, 0 -266px #01b4dd, 0 -304px #01b4dd, 0 -342px #01b4dd, 0 -380px #01b4dd, 0 -418px #01b4dd, -170px -456px #01b4dd, -340px -494px #01b4dd, -340px -532px #01b4dd;
- }
- 47.75% {
- box-shadow: 0 -38px #01b4dd, 0 -76px #01b4dd, 0 -114px #01b4dd, 0 -152px #01b4dd, 0 -190px #01b4dd, 0 -228px #01b4dd, 0 -266px #01b4dd, 0 -304px #01b4dd, 0 -342px #01b4dd, 0 -380px #01b4dd, 0 -418px #01b4dd, 0 -456px #01b4dd, -170px -494px #01b4dd, -340px -532px #01b4dd;
- }
- 48.375% {
- box-shadow: 0 -38px #01b4dd, 0 -76px #01b4dd, 0 -114px #01b4dd, 0 -152px #01b4dd, 0 -190px #01b4dd, 0 -228px #01b4dd, 0 -266px #01b4dd, 0 -304px #01b4dd, 0 -342px #01b4dd, 0 -380px #01b4dd, 0 -418px #01b4dd, 0 -456px #01b4dd, 0 -494px #01b4dd, -170px -532px #01b4dd;
- }
- 49% {
- box-shadow: 0 -38px #01b4dd, 0 -76px #01b4dd, 0 -114px #01b4dd, 0 -152px #01b4dd, 0 -190px #01b4dd, 0 -228px #01b4dd, 0 -266px #01b4dd, 0 -304px #01b4dd, 0 -342px #01b4dd, 0 -380px #01b4dd, 0 -418px #01b4dd, 0 -456px #01b4dd, 0 -494px #01b4dd, 0 -532px #01b4dd;
- }
-}
-@-webkit-keyframes cover-horizontal-teal {
- 0% {
- width: 0;
- height: 0;
- box-shadow: none;
- }
- 39% {
- width: 0;
- height: 38px;
- }
- 39.625% {
- width: 170px;
- box-shadow: -340px -38px #01b4dd, -340px -76px #01b4dd, -340px -114px #01b4dd, -340px -152px #01b4dd, -340px -190px #01b4dd, -340px -228px #01b4dd, -340px -266px #01b4dd, -340px -304px #01b4dd, -340px -342px #01b4dd, -340px -380px #01b4dd, -340px -418px #01b4dd, -340px -456px #01b4dd, -340px -494px #01b4dd, -340px -532px #01b4dd;
- }
- 40.25% {
- width: 340px;
- box-shadow: -170px -38px #01b4dd, -340px -76px #01b4dd, -340px -114px #01b4dd, -340px -152px #01b4dd, -340px -190px #01b4dd, -340px -228px #01b4dd, -340px -266px #01b4dd, -340px -304px #01b4dd, -340px -342px #01b4dd, -340px -380px #01b4dd, -340px -418px #01b4dd, -340px -456px #01b4dd, -340px -494px #01b4dd, -340px -532px #01b4dd;
- }
- 40.875% {
- box-shadow: 0 -38px #01b4dd, -170px -76px #01b4dd, -340px -114px #01b4dd, -340px -152px #01b4dd, -340px -190px #01b4dd, -340px -228px #01b4dd, -340px -266px #01b4dd, -340px -304px #01b4dd, -340px -342px #01b4dd, -340px -380px #01b4dd, -340px -418px #01b4dd, -340px -456px #01b4dd, -340px -494px #01b4dd, -340px -532px #01b4dd;
- }
- 41.5% {
- box-shadow: 0 -38px #01b4dd, 0 -76px #01b4dd, -170px -114px #01b4dd, -340px -152px #01b4dd, -340px -190px #01b4dd, -340px -228px #01b4dd, -340px -266px #01b4dd, -340px -304px #01b4dd, -340px -342px #01b4dd, -340px -380px #01b4dd, -340px -418px #01b4dd, -340px -456px #01b4dd, -340px -494px #01b4dd, -340px -532px #01b4dd;
- }
- 42.125% {
- box-shadow: 0 -38px #01b4dd, 0 -76px #01b4dd, 0 -114px #01b4dd, -170px -152px #01b4dd, -340px -190px #01b4dd, -340px -228px #01b4dd, -340px -266px #01b4dd, -340px -304px #01b4dd, -340px -342px #01b4dd, -340px -380px #01b4dd, -340px -418px #01b4dd, -340px -456px #01b4dd, -340px -494px #01b4dd, -340px -532px #01b4dd;
- }
- 42.75% {
- box-shadow: 0 -38px #01b4dd, 0 -76px #01b4dd, 0 -114px #01b4dd, 0 -152px #01b4dd, -170px -190px #01b4dd, -340px -228px #01b4dd, -340px -266px #01b4dd, -340px -304px #01b4dd, -340px -342px #01b4dd, -340px -380px #01b4dd, -340px -418px #01b4dd, -340px -456px #01b4dd, -340px -494px #01b4dd, -340px -532px #01b4dd;
- }
- 43.375% {
- box-shadow: 0 -38px #01b4dd, 0 -76px #01b4dd, 0 -114px #01b4dd, 0 -152px #01b4dd, 0 -190px #01b4dd, -170px -228px #01b4dd, -340px -266px #01b4dd, -340px -304px #01b4dd, -340px -342px #01b4dd, -340px -380px #01b4dd, -340px -418px #01b4dd, -340px -456px #01b4dd, -340px -494px #01b4dd, -340px -532px #01b4dd;
- }
- 44% {
- box-shadow: 0 -38px #01b4dd, 0 -76px #01b4dd, 0 -114px #01b4dd, 0 -152px #01b4dd, 0 -190px #01b4dd, 0 -228px #01b4dd, -170px -266px #01b4dd, -340px -304px #01b4dd, -340px -342px #01b4dd, -340px -380px #01b4dd, -340px -418px #01b4dd, -340px -456px #01b4dd, -340px -494px #01b4dd, -340px -532px #01b4dd;
- }
- 44.625% {
- box-shadow: 0 -38px #01b4dd, 0 -76px #01b4dd, 0 -114px #01b4dd, 0 -152px #01b4dd, 0 -190px #01b4dd, 0 -228px #01b4dd, 0 -266px #01b4dd, -170px -304px #01b4dd, -340px -342px #01b4dd, -340px -380px #01b4dd, -340px -418px #01b4dd, -340px -456px #01b4dd, -340px -494px #01b4dd, -340px -532px #01b4dd;
- }
- 45.25% {
- box-shadow: 0 -38px #01b4dd, 0 -76px #01b4dd, 0 -114px #01b4dd, 0 -152px #01b4dd, 0 -190px #01b4dd, 0 -228px #01b4dd, 0 -266px #01b4dd, 0 -304px #01b4dd, -170px -342px #01b4dd, -340px -380px #01b4dd, -340px -418px #01b4dd, -340px -456px #01b4dd, -340px -494px #01b4dd, -340px -532px #01b4dd;
- }
- 45.875% {
- box-shadow: 0 -38px #01b4dd, 0 -76px #01b4dd, 0 -114px #01b4dd, 0 -152px #01b4dd, 0 -190px #01b4dd, 0 -228px #01b4dd, 0 -266px #01b4dd, 0 -304px #01b4dd, 0 -342px #01b4dd, -170px -380px #01b4dd, -340px -418px #01b4dd, -340px -456px #01b4dd, -340px -494px #01b4dd, -340px -532px #01b4dd;
- }
- 46.5% {
- box-shadow: 0 -38px #01b4dd, 0 -76px #01b4dd, 0 -114px #01b4dd, 0 -152px #01b4dd, 0 -190px #01b4dd, 0 -228px #01b4dd, 0 -266px #01b4dd, 0 -304px #01b4dd, 0 -342px #01b4dd, 0 -380px #01b4dd, -170px -418px #01b4dd, -340px -456px #01b4dd, -340px -494px #01b4dd, -340px -532px #01b4dd;
- }
- 47.125% {
- box-shadow: 0 -38px #01b4dd, 0 -76px #01b4dd, 0 -114px #01b4dd, 0 -152px #01b4dd, 0 -190px #01b4dd, 0 -228px #01b4dd, 0 -266px #01b4dd, 0 -304px #01b4dd, 0 -342px #01b4dd, 0 -380px #01b4dd, 0 -418px #01b4dd, -170px -456px #01b4dd, -340px -494px #01b4dd, -340px -532px #01b4dd;
- }
- 47.75% {
- box-shadow: 0 -38px #01b4dd, 0 -76px #01b4dd, 0 -114px #01b4dd, 0 -152px #01b4dd, 0 -190px #01b4dd, 0 -228px #01b4dd, 0 -266px #01b4dd, 0 -304px #01b4dd, 0 -342px #01b4dd, 0 -380px #01b4dd, 0 -418px #01b4dd, 0 -456px #01b4dd, -170px -494px #01b4dd, -340px -532px #01b4dd;
- }
- 48.375% {
- box-shadow: 0 -38px #01b4dd, 0 -76px #01b4dd, 0 -114px #01b4dd, 0 -152px #01b4dd, 0 -190px #01b4dd, 0 -228px #01b4dd, 0 -266px #01b4dd, 0 -304px #01b4dd, 0 -342px #01b4dd, 0 -380px #01b4dd, 0 -418px #01b4dd, 0 -456px #01b4dd, 0 -494px #01b4dd, -170px -532px #01b4dd;
- }
- 49% {
- box-shadow: 0 -38px #01b4dd, 0 -76px #01b4dd, 0 -114px #01b4dd, 0 -152px #01b4dd, 0 -190px #01b4dd, 0 -228px #01b4dd, 0 -266px #01b4dd, 0 -304px #01b4dd, 0 -342px #01b4dd, 0 -380px #01b4dd, 0 -418px #01b4dd, 0 -456px #01b4dd, 0 -494px #01b4dd, 0 -532px #01b4dd;
- }
-}
-@keyframes cover-horizontal-teal {
- 0% {
- width: 0;
- height: 0;
- box-shadow: none;
- }
- 39% {
- width: 0;
- height: 38px;
- }
- 39.625% {
- width: 170px;
- box-shadow: -340px -38px #01b4dd, -340px -76px #01b4dd, -340px -114px #01b4dd, -340px -152px #01b4dd, -340px -190px #01b4dd, -340px -228px #01b4dd, -340px -266px #01b4dd, -340px -304px #01b4dd, -340px -342px #01b4dd, -340px -380px #01b4dd, -340px -418px #01b4dd, -340px -456px #01b4dd, -340px -494px #01b4dd, -340px -532px #01b4dd;
- }
- 40.25% {
- width: 340px;
- box-shadow: -170px -38px #01b4dd, -340px -76px #01b4dd, -340px -114px #01b4dd, -340px -152px #01b4dd, -340px -190px #01b4dd, -340px -228px #01b4dd, -340px -266px #01b4dd, -340px -304px #01b4dd, -340px -342px #01b4dd, -340px -380px #01b4dd, -340px -418px #01b4dd, -340px -456px #01b4dd, -340px -494px #01b4dd, -340px -532px #01b4dd;
- }
- 40.875% {
- box-shadow: 0 -38px #01b4dd, -170px -76px #01b4dd, -340px -114px #01b4dd, -340px -152px #01b4dd, -340px -190px #01b4dd, -340px -228px #01b4dd, -340px -266px #01b4dd, -340px -304px #01b4dd, -340px -342px #01b4dd, -340px -380px #01b4dd, -340px -418px #01b4dd, -340px -456px #01b4dd, -340px -494px #01b4dd, -340px -532px #01b4dd;
- }
- 41.5% {
- box-shadow: 0 -38px #01b4dd, 0 -76px #01b4dd, -170px -114px #01b4dd, -340px -152px #01b4dd, -340px -190px #01b4dd, -340px -228px #01b4dd, -340px -266px #01b4dd, -340px -304px #01b4dd, -340px -342px #01b4dd, -340px -380px #01b4dd, -340px -418px #01b4dd, -340px -456px #01b4dd, -340px -494px #01b4dd, -340px -532px #01b4dd;
- }
- 42.125% {
- box-shadow: 0 -38px #01b4dd, 0 -76px #01b4dd, 0 -114px #01b4dd, -170px -152px #01b4dd, -340px -190px #01b4dd, -340px -228px #01b4dd, -340px -266px #01b4dd, -340px -304px #01b4dd, -340px -342px #01b4dd, -340px -380px #01b4dd, -340px -418px #01b4dd, -340px -456px #01b4dd, -340px -494px #01b4dd, -340px -532px #01b4dd;
- }
- 42.75% {
- box-shadow: 0 -38px #01b4dd, 0 -76px #01b4dd, 0 -114px #01b4dd, 0 -152px #01b4dd, -170px -190px #01b4dd, -340px -228px #01b4dd, -340px -266px #01b4dd, -340px -304px #01b4dd, -340px -342px #01b4dd, -340px -380px #01b4dd, -340px -418px #01b4dd, -340px -456px #01b4dd, -340px -494px #01b4dd, -340px -532px #01b4dd;
- }
- 43.375% {
- box-shadow: 0 -38px #01b4dd, 0 -76px #01b4dd, 0 -114px #01b4dd, 0 -152px #01b4dd, 0 -190px #01b4dd, -170px -228px #01b4dd, -340px -266px #01b4dd, -340px -304px #01b4dd, -340px -342px #01b4dd, -340px -380px #01b4dd, -340px -418px #01b4dd, -340px -456px #01b4dd, -340px -494px #01b4dd, -340px -532px #01b4dd;
- }
- 44% {
- box-shadow: 0 -38px #01b4dd, 0 -76px #01b4dd, 0 -114px #01b4dd, 0 -152px #01b4dd, 0 -190px #01b4dd, 0 -228px #01b4dd, -170px -266px #01b4dd, -340px -304px #01b4dd, -340px -342px #01b4dd, -340px -380px #01b4dd, -340px -418px #01b4dd, -340px -456px #01b4dd, -340px -494px #01b4dd, -340px -532px #01b4dd;
- }
- 44.625% {
- box-shadow: 0 -38px #01b4dd, 0 -76px #01b4dd, 0 -114px #01b4dd, 0 -152px #01b4dd, 0 -190px #01b4dd, 0 -228px #01b4dd, 0 -266px #01b4dd, -170px -304px #01b4dd, -340px -342px #01b4dd, -340px -380px #01b4dd, -340px -418px #01b4dd, -340px -456px #01b4dd, -340px -494px #01b4dd, -340px -532px #01b4dd;
- }
- 45.25% {
- box-shadow: 0 -38px #01b4dd, 0 -76px #01b4dd, 0 -114px #01b4dd, 0 -152px #01b4dd, 0 -190px #01b4dd, 0 -228px #01b4dd, 0 -266px #01b4dd, 0 -304px #01b4dd, -170px -342px #01b4dd, -340px -380px #01b4dd, -340px -418px #01b4dd, -340px -456px #01b4dd, -340px -494px #01b4dd, -340px -532px #01b4dd;
- }
- 45.875% {
- box-shadow: 0 -38px #01b4dd, 0 -76px #01b4dd, 0 -114px #01b4dd, 0 -152px #01b4dd, 0 -190px #01b4dd, 0 -228px #01b4dd, 0 -266px #01b4dd, 0 -304px #01b4dd, 0 -342px #01b4dd, -170px -380px #01b4dd, -340px -418px #01b4dd, -340px -456px #01b4dd, -340px -494px #01b4dd, -340px -532px #01b4dd;
- }
- 46.5% {
- box-shadow: 0 -38px #01b4dd, 0 -76px #01b4dd, 0 -114px #01b4dd, 0 -152px #01b4dd, 0 -190px #01b4dd, 0 -228px #01b4dd, 0 -266px #01b4dd, 0 -304px #01b4dd, 0 -342px #01b4dd, 0 -380px #01b4dd, -170px -418px #01b4dd, -340px -456px #01b4dd, -340px -494px #01b4dd, -340px -532px #01b4dd;
- }
- 47.125% {
- box-shadow: 0 -38px #01b4dd, 0 -76px #01b4dd, 0 -114px #01b4dd, 0 -152px #01b4dd, 0 -190px #01b4dd, 0 -228px #01b4dd, 0 -266px #01b4dd, 0 -304px #01b4dd, 0 -342px #01b4dd, 0 -380px #01b4dd, 0 -418px #01b4dd, -170px -456px #01b4dd, -340px -494px #01b4dd, -340px -532px #01b4dd;
- }
- 47.75% {
- box-shadow: 0 -38px #01b4dd, 0 -76px #01b4dd, 0 -114px #01b4dd, 0 -152px #01b4dd, 0 -190px #01b4dd, 0 -228px #01b4dd, 0 -266px #01b4dd, 0 -304px #01b4dd, 0 -342px #01b4dd, 0 -380px #01b4dd, 0 -418px #01b4dd, 0 -456px #01b4dd, -170px -494px #01b4dd, -340px -532px #01b4dd;
- }
- 48.375% {
- box-shadow: 0 -38px #01b4dd, 0 -76px #01b4dd, 0 -114px #01b4dd, 0 -152px #01b4dd, 0 -190px #01b4dd, 0 -228px #01b4dd, 0 -266px #01b4dd, 0 -304px #01b4dd, 0 -342px #01b4dd, 0 -380px #01b4dd, 0 -418px #01b4dd, 0 -456px #01b4dd, 0 -494px #01b4dd, -170px -532px #01b4dd;
- }
- 49% {
- box-shadow: 0 -38px #01b4dd, 0 -76px #01b4dd, 0 -114px #01b4dd, 0 -152px #01b4dd, 0 -190px #01b4dd, 0 -228px #01b4dd, 0 -266px #01b4dd, 0 -304px #01b4dd, 0 -342px #01b4dd, 0 -380px #01b4dd, 0 -418px #01b4dd, 0 -456px #01b4dd, 0 -494px #01b4dd, 0 -532px #01b4dd;
- }
-}
-#gameboy.teal #cover-horizontal {
- background-color: #01b4dd;
- -webkit-animation: cover-horizontal-teal 8s linear;
- animation: cover-horizontal-teal 8s linear;
- box-shadow: 0 -38px #01b4dd, 0 -76px #01b4dd, 0 -114px #01b4dd, 0 -152px #01b4dd, 0 -190px #01b4dd, 0 -228px #01b4dd, 0 -266px #01b4dd, 0 -304px #01b4dd, 0 -342px #01b4dd, 0 -380px #01b4dd, 0 -418px #01b4dd, 0 -456px #01b4dd, 0 -494px #01b4dd, 0 -532px #01b4dd;
-}
-@-moz-keyframes cover-horizontal-yellow {
- 0% {
- width: 0;
- height: 0;
- box-shadow: none;
- }
- 39% {
- width: 0;
- height: 38px;
- }
- 39.625% {
- width: 170px;
- box-shadow: -340px -38px #f9e52e, -340px -76px #f9e52e, -340px -114px #f9e52e, -340px -152px #f9e52e, -340px -190px #f9e52e, -340px -228px #f9e52e, -340px -266px #f9e52e, -340px -304px #f9e52e, -340px -342px #f9e52e, -340px -380px #f9e52e, -340px -418px #f9e52e, -340px -456px #f9e52e, -340px -494px #f9e52e, -340px -532px #f9e52e;
- }
- 40.25% {
- width: 340px;
- box-shadow: -170px -38px #f9e52e, -340px -76px #f9e52e, -340px -114px #f9e52e, -340px -152px #f9e52e, -340px -190px #f9e52e, -340px -228px #f9e52e, -340px -266px #f9e52e, -340px -304px #f9e52e, -340px -342px #f9e52e, -340px -380px #f9e52e, -340px -418px #f9e52e, -340px -456px #f9e52e, -340px -494px #f9e52e, -340px -532px #f9e52e;
- }
- 40.875% {
- box-shadow: 0 -38px #f9e52e, -170px -76px #f9e52e, -340px -114px #f9e52e, -340px -152px #f9e52e, -340px -190px #f9e52e, -340px -228px #f9e52e, -340px -266px #f9e52e, -340px -304px #f9e52e, -340px -342px #f9e52e, -340px -380px #f9e52e, -340px -418px #f9e52e, -340px -456px #f9e52e, -340px -494px #f9e52e, -340px -532px #f9e52e;
- }
- 41.5% {
- box-shadow: 0 -38px #f9e52e, 0 -76px #f9e52e, -170px -114px #f9e52e, -340px -152px #f9e52e, -340px -190px #f9e52e, -340px -228px #f9e52e, -340px -266px #f9e52e, -340px -304px #f9e52e, -340px -342px #f9e52e, -340px -380px #f9e52e, -340px -418px #f9e52e, -340px -456px #f9e52e, -340px -494px #f9e52e, -340px -532px #f9e52e;
- }
- 42.125% {
- box-shadow: 0 -38px #f9e52e, 0 -76px #f9e52e, 0 -114px #f9e52e, -170px -152px #f9e52e, -340px -190px #f9e52e, -340px -228px #f9e52e, -340px -266px #f9e52e, -340px -304px #f9e52e, -340px -342px #f9e52e, -340px -380px #f9e52e, -340px -418px #f9e52e, -340px -456px #f9e52e, -340px -494px #f9e52e, -340px -532px #f9e52e;
- }
- 42.75% {
- box-shadow: 0 -38px #f9e52e, 0 -76px #f9e52e, 0 -114px #f9e52e, 0 -152px #f9e52e, -170px -190px #f9e52e, -340px -228px #f9e52e, -340px -266px #f9e52e, -340px -304px #f9e52e, -340px -342px #f9e52e, -340px -380px #f9e52e, -340px -418px #f9e52e, -340px -456px #f9e52e, -340px -494px #f9e52e, -340px -532px #f9e52e;
- }
- 43.375% {
- box-shadow: 0 -38px #f9e52e, 0 -76px #f9e52e, 0 -114px #f9e52e, 0 -152px #f9e52e, 0 -190px #f9e52e, -170px -228px #f9e52e, -340px -266px #f9e52e, -340px -304px #f9e52e, -340px -342px #f9e52e, -340px -380px #f9e52e, -340px -418px #f9e52e, -340px -456px #f9e52e, -340px -494px #f9e52e, -340px -532px #f9e52e;
- }
- 44% {
- box-shadow: 0 -38px #f9e52e, 0 -76px #f9e52e, 0 -114px #f9e52e, 0 -152px #f9e52e, 0 -190px #f9e52e, 0 -228px #f9e52e, -170px -266px #f9e52e, -340px -304px #f9e52e, -340px -342px #f9e52e, -340px -380px #f9e52e, -340px -418px #f9e52e, -340px -456px #f9e52e, -340px -494px #f9e52e, -340px -532px #f9e52e;
- }
- 44.625% {
- box-shadow: 0 -38px #f9e52e, 0 -76px #f9e52e, 0 -114px #f9e52e, 0 -152px #f9e52e, 0 -190px #f9e52e, 0 -228px #f9e52e, 0 -266px #f9e52e, -170px -304px #f9e52e, -340px -342px #f9e52e, -340px -380px #f9e52e, -340px -418px #f9e52e, -340px -456px #f9e52e, -340px -494px #f9e52e, -340px -532px #f9e52e;
- }
- 45.25% {
- box-shadow: 0 -38px #f9e52e, 0 -76px #f9e52e, 0 -114px #f9e52e, 0 -152px #f9e52e, 0 -190px #f9e52e, 0 -228px #f9e52e, 0 -266px #f9e52e, 0 -304px #f9e52e, -170px -342px #f9e52e, -340px -380px #f9e52e, -340px -418px #f9e52e, -340px -456px #f9e52e, -340px -494px #f9e52e, -340px -532px #f9e52e;
- }
- 45.875% {
- box-shadow: 0 -38px #f9e52e, 0 -76px #f9e52e, 0 -114px #f9e52e, 0 -152px #f9e52e, 0 -190px #f9e52e, 0 -228px #f9e52e, 0 -266px #f9e52e, 0 -304px #f9e52e, 0 -342px #f9e52e, -170px -380px #f9e52e, -340px -418px #f9e52e, -340px -456px #f9e52e, -340px -494px #f9e52e, -340px -532px #f9e52e;
- }
- 46.5% {
- box-shadow: 0 -38px #f9e52e, 0 -76px #f9e52e, 0 -114px #f9e52e, 0 -152px #f9e52e, 0 -190px #f9e52e, 0 -228px #f9e52e, 0 -266px #f9e52e, 0 -304px #f9e52e, 0 -342px #f9e52e, 0 -380px #f9e52e, -170px -418px #f9e52e, -340px -456px #f9e52e, -340px -494px #f9e52e, -340px -532px #f9e52e;
- }
- 47.125% {
- box-shadow: 0 -38px #f9e52e, 0 -76px #f9e52e, 0 -114px #f9e52e, 0 -152px #f9e52e, 0 -190px #f9e52e, 0 -228px #f9e52e, 0 -266px #f9e52e, 0 -304px #f9e52e, 0 -342px #f9e52e, 0 -380px #f9e52e, 0 -418px #f9e52e, -170px -456px #f9e52e, -340px -494px #f9e52e, -340px -532px #f9e52e;
- }
- 47.75% {
- box-shadow: 0 -38px #f9e52e, 0 -76px #f9e52e, 0 -114px #f9e52e, 0 -152px #f9e52e, 0 -190px #f9e52e, 0 -228px #f9e52e, 0 -266px #f9e52e, 0 -304px #f9e52e, 0 -342px #f9e52e, 0 -380px #f9e52e, 0 -418px #f9e52e, 0 -456px #f9e52e, -170px -494px #f9e52e, -340px -532px #f9e52e;
- }
- 48.375% {
- box-shadow: 0 -38px #f9e52e, 0 -76px #f9e52e, 0 -114px #f9e52e, 0 -152px #f9e52e, 0 -190px #f9e52e, 0 -228px #f9e52e, 0 -266px #f9e52e, 0 -304px #f9e52e, 0 -342px #f9e52e, 0 -380px #f9e52e, 0 -418px #f9e52e, 0 -456px #f9e52e, 0 -494px #f9e52e, -170px -532px #f9e52e;
- }
- 49% {
- box-shadow: 0 -38px #f9e52e, 0 -76px #f9e52e, 0 -114px #f9e52e, 0 -152px #f9e52e, 0 -190px #f9e52e, 0 -228px #f9e52e, 0 -266px #f9e52e, 0 -304px #f9e52e, 0 -342px #f9e52e, 0 -380px #f9e52e, 0 -418px #f9e52e, 0 -456px #f9e52e, 0 -494px #f9e52e, 0 -532px #f9e52e;
- }
-}
-@-webkit-keyframes cover-horizontal-yellow {
- 0% {
- width: 0;
- height: 0;
- box-shadow: none;
- }
- 39% {
- width: 0;
- height: 38px;
- }
- 39.625% {
- width: 170px;
- box-shadow: -340px -38px #f9e52e, -340px -76px #f9e52e, -340px -114px #f9e52e, -340px -152px #f9e52e, -340px -190px #f9e52e, -340px -228px #f9e52e, -340px -266px #f9e52e, -340px -304px #f9e52e, -340px -342px #f9e52e, -340px -380px #f9e52e, -340px -418px #f9e52e, -340px -456px #f9e52e, -340px -494px #f9e52e, -340px -532px #f9e52e;
- }
- 40.25% {
- width: 340px;
- box-shadow: -170px -38px #f9e52e, -340px -76px #f9e52e, -340px -114px #f9e52e, -340px -152px #f9e52e, -340px -190px #f9e52e, -340px -228px #f9e52e, -340px -266px #f9e52e, -340px -304px #f9e52e, -340px -342px #f9e52e, -340px -380px #f9e52e, -340px -418px #f9e52e, -340px -456px #f9e52e, -340px -494px #f9e52e, -340px -532px #f9e52e;
- }
- 40.875% {
- box-shadow: 0 -38px #f9e52e, -170px -76px #f9e52e, -340px -114px #f9e52e, -340px -152px #f9e52e, -340px -190px #f9e52e, -340px -228px #f9e52e, -340px -266px #f9e52e, -340px -304px #f9e52e, -340px -342px #f9e52e, -340px -380px #f9e52e, -340px -418px #f9e52e, -340px -456px #f9e52e, -340px -494px #f9e52e, -340px -532px #f9e52e;
- }
- 41.5% {
- box-shadow: 0 -38px #f9e52e, 0 -76px #f9e52e, -170px -114px #f9e52e, -340px -152px #f9e52e, -340px -190px #f9e52e, -340px -228px #f9e52e, -340px -266px #f9e52e, -340px -304px #f9e52e, -340px -342px #f9e52e, -340px -380px #f9e52e, -340px -418px #f9e52e, -340px -456px #f9e52e, -340px -494px #f9e52e, -340px -532px #f9e52e;
- }
- 42.125% {
- box-shadow: 0 -38px #f9e52e, 0 -76px #f9e52e, 0 -114px #f9e52e, -170px -152px #f9e52e, -340px -190px #f9e52e, -340px -228px #f9e52e, -340px -266px #f9e52e, -340px -304px #f9e52e, -340px -342px #f9e52e, -340px -380px #f9e52e, -340px -418px #f9e52e, -340px -456px #f9e52e, -340px -494px #f9e52e, -340px -532px #f9e52e;
- }
- 42.75% {
- box-shadow: 0 -38px #f9e52e, 0 -76px #f9e52e, 0 -114px #f9e52e, 0 -152px #f9e52e, -170px -190px #f9e52e, -340px -228px #f9e52e, -340px -266px #f9e52e, -340px -304px #f9e52e, -340px -342px #f9e52e, -340px -380px #f9e52e, -340px -418px #f9e52e, -340px -456px #f9e52e, -340px -494px #f9e52e, -340px -532px #f9e52e;
- }
- 43.375% {
- box-shadow: 0 -38px #f9e52e, 0 -76px #f9e52e, 0 -114px #f9e52e, 0 -152px #f9e52e, 0 -190px #f9e52e, -170px -228px #f9e52e, -340px -266px #f9e52e, -340px -304px #f9e52e, -340px -342px #f9e52e, -340px -380px #f9e52e, -340px -418px #f9e52e, -340px -456px #f9e52e, -340px -494px #f9e52e, -340px -532px #f9e52e;
- }
- 44% {
- box-shadow: 0 -38px #f9e52e, 0 -76px #f9e52e, 0 -114px #f9e52e, 0 -152px #f9e52e, 0 -190px #f9e52e, 0 -228px #f9e52e, -170px -266px #f9e52e, -340px -304px #f9e52e, -340px -342px #f9e52e, -340px -380px #f9e52e, -340px -418px #f9e52e, -340px -456px #f9e52e, -340px -494px #f9e52e, -340px -532px #f9e52e;
- }
- 44.625% {
- box-shadow: 0 -38px #f9e52e, 0 -76px #f9e52e, 0 -114px #f9e52e, 0 -152px #f9e52e, 0 -190px #f9e52e, 0 -228px #f9e52e, 0 -266px #f9e52e, -170px -304px #f9e52e, -340px -342px #f9e52e, -340px -380px #f9e52e, -340px -418px #f9e52e, -340px -456px #f9e52e, -340px -494px #f9e52e, -340px -532px #f9e52e;
- }
- 45.25% {
- box-shadow: 0 -38px #f9e52e, 0 -76px #f9e52e, 0 -114px #f9e52e, 0 -152px #f9e52e, 0 -190px #f9e52e, 0 -228px #f9e52e, 0 -266px #f9e52e, 0 -304px #f9e52e, -170px -342px #f9e52e, -340px -380px #f9e52e, -340px -418px #f9e52e, -340px -456px #f9e52e, -340px -494px #f9e52e, -340px -532px #f9e52e;
- }
- 45.875% {
- box-shadow: 0 -38px #f9e52e, 0 -76px #f9e52e, 0 -114px #f9e52e, 0 -152px #f9e52e, 0 -190px #f9e52e, 0 -228px #f9e52e, 0 -266px #f9e52e, 0 -304px #f9e52e, 0 -342px #f9e52e, -170px -380px #f9e52e, -340px -418px #f9e52e, -340px -456px #f9e52e, -340px -494px #f9e52e, -340px -532px #f9e52e;
- }
- 46.5% {
- box-shadow: 0 -38px #f9e52e, 0 -76px #f9e52e, 0 -114px #f9e52e, 0 -152px #f9e52e, 0 -190px #f9e52e, 0 -228px #f9e52e, 0 -266px #f9e52e, 0 -304px #f9e52e, 0 -342px #f9e52e, 0 -380px #f9e52e, -170px -418px #f9e52e, -340px -456px #f9e52e, -340px -494px #f9e52e, -340px -532px #f9e52e;
- }
- 47.125% {
- box-shadow: 0 -38px #f9e52e, 0 -76px #f9e52e, 0 -114px #f9e52e, 0 -152px #f9e52e, 0 -190px #f9e52e, 0 -228px #f9e52e, 0 -266px #f9e52e, 0 -304px #f9e52e, 0 -342px #f9e52e, 0 -380px #f9e52e, 0 -418px #f9e52e, -170px -456px #f9e52e, -340px -494px #f9e52e, -340px -532px #f9e52e;
- }
- 47.75% {
- box-shadow: 0 -38px #f9e52e, 0 -76px #f9e52e, 0 -114px #f9e52e, 0 -152px #f9e52e, 0 -190px #f9e52e, 0 -228px #f9e52e, 0 -266px #f9e52e, 0 -304px #f9e52e, 0 -342px #f9e52e, 0 -380px #f9e52e, 0 -418px #f9e52e, 0 -456px #f9e52e, -170px -494px #f9e52e, -340px -532px #f9e52e;
- }
- 48.375% {
- box-shadow: 0 -38px #f9e52e, 0 -76px #f9e52e, 0 -114px #f9e52e, 0 -152px #f9e52e, 0 -190px #f9e52e, 0 -228px #f9e52e, 0 -266px #f9e52e, 0 -304px #f9e52e, 0 -342px #f9e52e, 0 -380px #f9e52e, 0 -418px #f9e52e, 0 -456px #f9e52e, 0 -494px #f9e52e, -170px -532px #f9e52e;
- }
- 49% {
- box-shadow: 0 -38px #f9e52e, 0 -76px #f9e52e, 0 -114px #f9e52e, 0 -152px #f9e52e, 0 -190px #f9e52e, 0 -228px #f9e52e, 0 -266px #f9e52e, 0 -304px #f9e52e, 0 -342px #f9e52e, 0 -380px #f9e52e, 0 -418px #f9e52e, 0 -456px #f9e52e, 0 -494px #f9e52e, 0 -532px #f9e52e;
- }
-}
-@keyframes cover-horizontal-yellow {
- 0% {
- width: 0;
- height: 0;
- box-shadow: none;
- }
- 39% {
- width: 0;
- height: 38px;
- }
- 39.625% {
- width: 170px;
- box-shadow: -340px -38px #f9e52e, -340px -76px #f9e52e, -340px -114px #f9e52e, -340px -152px #f9e52e, -340px -190px #f9e52e, -340px -228px #f9e52e, -340px -266px #f9e52e, -340px -304px #f9e52e, -340px -342px #f9e52e, -340px -380px #f9e52e, -340px -418px #f9e52e, -340px -456px #f9e52e, -340px -494px #f9e52e, -340px -532px #f9e52e;
- }
- 40.25% {
- width: 340px;
- box-shadow: -170px -38px #f9e52e, -340px -76px #f9e52e, -340px -114px #f9e52e, -340px -152px #f9e52e, -340px -190px #f9e52e, -340px -228px #f9e52e, -340px -266px #f9e52e, -340px -304px #f9e52e, -340px -342px #f9e52e, -340px -380px #f9e52e, -340px -418px #f9e52e, -340px -456px #f9e52e, -340px -494px #f9e52e, -340px -532px #f9e52e;
- }
- 40.875% {
- box-shadow: 0 -38px #f9e52e, -170px -76px #f9e52e, -340px -114px #f9e52e, -340px -152px #f9e52e, -340px -190px #f9e52e, -340px -228px #f9e52e, -340px -266px #f9e52e, -340px -304px #f9e52e, -340px -342px #f9e52e, -340px -380px #f9e52e, -340px -418px #f9e52e, -340px -456px #f9e52e, -340px -494px #f9e52e, -340px -532px #f9e52e;
- }
- 41.5% {
- box-shadow: 0 -38px #f9e52e, 0 -76px #f9e52e, -170px -114px #f9e52e, -340px -152px #f9e52e, -340px -190px #f9e52e, -340px -228px #f9e52e, -340px -266px #f9e52e, -340px -304px #f9e52e, -340px -342px #f9e52e, -340px -380px #f9e52e, -340px -418px #f9e52e, -340px -456px #f9e52e, -340px -494px #f9e52e, -340px -532px #f9e52e;
- }
- 42.125% {
- box-shadow: 0 -38px #f9e52e, 0 -76px #f9e52e, 0 -114px #f9e52e, -170px -152px #f9e52e, -340px -190px #f9e52e, -340px -228px #f9e52e, -340px -266px #f9e52e, -340px -304px #f9e52e, -340px -342px #f9e52e, -340px -380px #f9e52e, -340px -418px #f9e52e, -340px -456px #f9e52e, -340px -494px #f9e52e, -340px -532px #f9e52e;
- }
- 42.75% {
- box-shadow: 0 -38px #f9e52e, 0 -76px #f9e52e, 0 -114px #f9e52e, 0 -152px #f9e52e, -170px -190px #f9e52e, -340px -228px #f9e52e, -340px -266px #f9e52e, -340px -304px #f9e52e, -340px -342px #f9e52e, -340px -380px #f9e52e, -340px -418px #f9e52e, -340px -456px #f9e52e, -340px -494px #f9e52e, -340px -532px #f9e52e;
- }
- 43.375% {
- box-shadow: 0 -38px #f9e52e, 0 -76px #f9e52e, 0 -114px #f9e52e, 0 -152px #f9e52e, 0 -190px #f9e52e, -170px -228px #f9e52e, -340px -266px #f9e52e, -340px -304px #f9e52e, -340px -342px #f9e52e, -340px -380px #f9e52e, -340px -418px #f9e52e, -340px -456px #f9e52e, -340px -494px #f9e52e, -340px -532px #f9e52e;
- }
- 44% {
- box-shadow: 0 -38px #f9e52e, 0 -76px #f9e52e, 0 -114px #f9e52e, 0 -152px #f9e52e, 0 -190px #f9e52e, 0 -228px #f9e52e, -170px -266px #f9e52e, -340px -304px #f9e52e, -340px -342px #f9e52e, -340px -380px #f9e52e, -340px -418px #f9e52e, -340px -456px #f9e52e, -340px -494px #f9e52e, -340px -532px #f9e52e;
- }
- 44.625% {
- box-shadow: 0 -38px #f9e52e, 0 -76px #f9e52e, 0 -114px #f9e52e, 0 -152px #f9e52e, 0 -190px #f9e52e, 0 -228px #f9e52e, 0 -266px #f9e52e, -170px -304px #f9e52e, -340px -342px #f9e52e, -340px -380px #f9e52e, -340px -418px #f9e52e, -340px -456px #f9e52e, -340px -494px #f9e52e, -340px -532px #f9e52e;
- }
- 45.25% {
- box-shadow: 0 -38px #f9e52e, 0 -76px #f9e52e, 0 -114px #f9e52e, 0 -152px #f9e52e, 0 -190px #f9e52e, 0 -228px #f9e52e, 0 -266px #f9e52e, 0 -304px #f9e52e, -170px -342px #f9e52e, -340px -380px #f9e52e, -340px -418px #f9e52e, -340px -456px #f9e52e, -340px -494px #f9e52e, -340px -532px #f9e52e;
- }
- 45.875% {
- box-shadow: 0 -38px #f9e52e, 0 -76px #f9e52e, 0 -114px #f9e52e, 0 -152px #f9e52e, 0 -190px #f9e52e, 0 -228px #f9e52e, 0 -266px #f9e52e, 0 -304px #f9e52e, 0 -342px #f9e52e, -170px -380px #f9e52e, -340px -418px #f9e52e, -340px -456px #f9e52e, -340px -494px #f9e52e, -340px -532px #f9e52e;
- }
- 46.5% {
- box-shadow: 0 -38px #f9e52e, 0 -76px #f9e52e, 0 -114px #f9e52e, 0 -152px #f9e52e, 0 -190px #f9e52e, 0 -228px #f9e52e, 0 -266px #f9e52e, 0 -304px #f9e52e, 0 -342px #f9e52e, 0 -380px #f9e52e, -170px -418px #f9e52e, -340px -456px #f9e52e, -340px -494px #f9e52e, -340px -532px #f9e52e;
- }
- 47.125% {
- box-shadow: 0 -38px #f9e52e, 0 -76px #f9e52e, 0 -114px #f9e52e, 0 -152px #f9e52e, 0 -190px #f9e52e, 0 -228px #f9e52e, 0 -266px #f9e52e, 0 -304px #f9e52e, 0 -342px #f9e52e, 0 -380px #f9e52e, 0 -418px #f9e52e, -170px -456px #f9e52e, -340px -494px #f9e52e, -340px -532px #f9e52e;
- }
- 47.75% {
- box-shadow: 0 -38px #f9e52e, 0 -76px #f9e52e, 0 -114px #f9e52e, 0 -152px #f9e52e, 0 -190px #f9e52e, 0 -228px #f9e52e, 0 -266px #f9e52e, 0 -304px #f9e52e, 0 -342px #f9e52e, 0 -380px #f9e52e, 0 -418px #f9e52e, 0 -456px #f9e52e, -170px -494px #f9e52e, -340px -532px #f9e52e;
- }
- 48.375% {
- box-shadow: 0 -38px #f9e52e, 0 -76px #f9e52e, 0 -114px #f9e52e, 0 -152px #f9e52e, 0 -190px #f9e52e, 0 -228px #f9e52e, 0 -266px #f9e52e, 0 -304px #f9e52e, 0 -342px #f9e52e, 0 -380px #f9e52e, 0 -418px #f9e52e, 0 -456px #f9e52e, 0 -494px #f9e52e, -170px -532px #f9e52e;
- }
- 49% {
- box-shadow: 0 -38px #f9e52e, 0 -76px #f9e52e, 0 -114px #f9e52e, 0 -152px #f9e52e, 0 -190px #f9e52e, 0 -228px #f9e52e, 0 -266px #f9e52e, 0 -304px #f9e52e, 0 -342px #f9e52e, 0 -380px #f9e52e, 0 -418px #f9e52e, 0 -456px #f9e52e, 0 -494px #f9e52e, 0 -532px #f9e52e;
- }
-}
-#gameboy.yellow #cover-horizontal {
- background-color: #f9e52e;
- -webkit-animation: cover-horizontal-yellow 8s linear;
- animation: cover-horizontal-yellow 8s linear;
- box-shadow: 0 -38px #f9e52e, 0 -76px #f9e52e, 0 -114px #f9e52e, 0 -152px #f9e52e, 0 -190px #f9e52e, 0 -228px #f9e52e, 0 -266px #f9e52e, 0 -304px #f9e52e, 0 -342px #f9e52e, 0 -380px #f9e52e, 0 -418px #f9e52e, 0 -456px #f9e52e, 0 -494px #f9e52e, 0 -532px #f9e52e;
-}
-@-moz-keyframes cover-horizontal-green {
- 0% {
- width: 0;
- height: 0;
- box-shadow: none;
- }
- 39% {
- width: 0;
- height: 38px;
- }
- 39.625% {
- width: 170px;
- box-shadow: -340px -38px #85e367, -340px -76px #85e367, -340px -114px #85e367, -340px -152px #85e367, -340px -190px #85e367, -340px -228px #85e367, -340px -266px #85e367, -340px -304px #85e367, -340px -342px #85e367, -340px -380px #85e367, -340px -418px #85e367, -340px -456px #85e367, -340px -494px #85e367, -340px -532px #85e367;
- }
- 40.25% {
- width: 340px;
- box-shadow: -170px -38px #85e367, -340px -76px #85e367, -340px -114px #85e367, -340px -152px #85e367, -340px -190px #85e367, -340px -228px #85e367, -340px -266px #85e367, -340px -304px #85e367, -340px -342px #85e367, -340px -380px #85e367, -340px -418px #85e367, -340px -456px #85e367, -340px -494px #85e367, -340px -532px #85e367;
- }
- 40.875% {
- box-shadow: 0 -38px #85e367, -170px -76px #85e367, -340px -114px #85e367, -340px -152px #85e367, -340px -190px #85e367, -340px -228px #85e367, -340px -266px #85e367, -340px -304px #85e367, -340px -342px #85e367, -340px -380px #85e367, -340px -418px #85e367, -340px -456px #85e367, -340px -494px #85e367, -340px -532px #85e367;
- }
- 41.5% {
- box-shadow: 0 -38px #85e367, 0 -76px #85e367, -170px -114px #85e367, -340px -152px #85e367, -340px -190px #85e367, -340px -228px #85e367, -340px -266px #85e367, -340px -304px #85e367, -340px -342px #85e367, -340px -380px #85e367, -340px -418px #85e367, -340px -456px #85e367, -340px -494px #85e367, -340px -532px #85e367;
- }
- 42.125% {
- box-shadow: 0 -38px #85e367, 0 -76px #85e367, 0 -114px #85e367, -170px -152px #85e367, -340px -190px #85e367, -340px -228px #85e367, -340px -266px #85e367, -340px -304px #85e367, -340px -342px #85e367, -340px -380px #85e367, -340px -418px #85e367, -340px -456px #85e367, -340px -494px #85e367, -340px -532px #85e367;
- }
- 42.75% {
- box-shadow: 0 -38px #85e367, 0 -76px #85e367, 0 -114px #85e367, 0 -152px #85e367, -170px -190px #85e367, -340px -228px #85e367, -340px -266px #85e367, -340px -304px #85e367, -340px -342px #85e367, -340px -380px #85e367, -340px -418px #85e367, -340px -456px #85e367, -340px -494px #85e367, -340px -532px #85e367;
- }
- 43.375% {
- box-shadow: 0 -38px #85e367, 0 -76px #85e367, 0 -114px #85e367, 0 -152px #85e367, 0 -190px #85e367, -170px -228px #85e367, -340px -266px #85e367, -340px -304px #85e367, -340px -342px #85e367, -340px -380px #85e367, -340px -418px #85e367, -340px -456px #85e367, -340px -494px #85e367, -340px -532px #85e367;
- }
- 44% {
- box-shadow: 0 -38px #85e367, 0 -76px #85e367, 0 -114px #85e367, 0 -152px #85e367, 0 -190px #85e367, 0 -228px #85e367, -170px -266px #85e367, -340px -304px #85e367, -340px -342px #85e367, -340px -380px #85e367, -340px -418px #85e367, -340px -456px #85e367, -340px -494px #85e367, -340px -532px #85e367;
- }
- 44.625% {
- box-shadow: 0 -38px #85e367, 0 -76px #85e367, 0 -114px #85e367, 0 -152px #85e367, 0 -190px #85e367, 0 -228px #85e367, 0 -266px #85e367, -170px -304px #85e367, -340px -342px #85e367, -340px -380px #85e367, -340px -418px #85e367, -340px -456px #85e367, -340px -494px #85e367, -340px -532px #85e367;
- }
- 45.25% {
- box-shadow: 0 -38px #85e367, 0 -76px #85e367, 0 -114px #85e367, 0 -152px #85e367, 0 -190px #85e367, 0 -228px #85e367, 0 -266px #85e367, 0 -304px #85e367, -170px -342px #85e367, -340px -380px #85e367, -340px -418px #85e367, -340px -456px #85e367, -340px -494px #85e367, -340px -532px #85e367;
- }
- 45.875% {
- box-shadow: 0 -38px #85e367, 0 -76px #85e367, 0 -114px #85e367, 0 -152px #85e367, 0 -190px #85e367, 0 -228px #85e367, 0 -266px #85e367, 0 -304px #85e367, 0 -342px #85e367, -170px -380px #85e367, -340px -418px #85e367, -340px -456px #85e367, -340px -494px #85e367, -340px -532px #85e367;
- }
- 46.5% {
- box-shadow: 0 -38px #85e367, 0 -76px #85e367, 0 -114px #85e367, 0 -152px #85e367, 0 -190px #85e367, 0 -228px #85e367, 0 -266px #85e367, 0 -304px #85e367, 0 -342px #85e367, 0 -380px #85e367, -170px -418px #85e367, -340px -456px #85e367, -340px -494px #85e367, -340px -532px #85e367;
- }
- 47.125% {
- box-shadow: 0 -38px #85e367, 0 -76px #85e367, 0 -114px #85e367, 0 -152px #85e367, 0 -190px #85e367, 0 -228px #85e367, 0 -266px #85e367, 0 -304px #85e367, 0 -342px #85e367, 0 -380px #85e367, 0 -418px #85e367, -170px -456px #85e367, -340px -494px #85e367, -340px -532px #85e367;
- }
- 47.75% {
- box-shadow: 0 -38px #85e367, 0 -76px #85e367, 0 -114px #85e367, 0 -152px #85e367, 0 -190px #85e367, 0 -228px #85e367, 0 -266px #85e367, 0 -304px #85e367, 0 -342px #85e367, 0 -380px #85e367, 0 -418px #85e367, 0 -456px #85e367, -170px -494px #85e367, -340px -532px #85e367;
- }
- 48.375% {
- box-shadow: 0 -38px #85e367, 0 -76px #85e367, 0 -114px #85e367, 0 -152px #85e367, 0 -190px #85e367, 0 -228px #85e367, 0 -266px #85e367, 0 -304px #85e367, 0 -342px #85e367, 0 -380px #85e367, 0 -418px #85e367, 0 -456px #85e367, 0 -494px #85e367, -170px -532px #85e367;
- }
- 49% {
- box-shadow: 0 -38px #85e367, 0 -76px #85e367, 0 -114px #85e367, 0 -152px #85e367, 0 -190px #85e367, 0 -228px #85e367, 0 -266px #85e367, 0 -304px #85e367, 0 -342px #85e367, 0 -380px #85e367, 0 -418px #85e367, 0 -456px #85e367, 0 -494px #85e367, 0 -532px #85e367;
- }
-}
-@-webkit-keyframes cover-horizontal-green {
- 0% {
- width: 0;
- height: 0;
- box-shadow: none;
- }
- 39% {
- width: 0;
- height: 38px;
- }
- 39.625% {
- width: 170px;
- box-shadow: -340px -38px #85e367, -340px -76px #85e367, -340px -114px #85e367, -340px -152px #85e367, -340px -190px #85e367, -340px -228px #85e367, -340px -266px #85e367, -340px -304px #85e367, -340px -342px #85e367, -340px -380px #85e367, -340px -418px #85e367, -340px -456px #85e367, -340px -494px #85e367, -340px -532px #85e367;
- }
- 40.25% {
- width: 340px;
- box-shadow: -170px -38px #85e367, -340px -76px #85e367, -340px -114px #85e367, -340px -152px #85e367, -340px -190px #85e367, -340px -228px #85e367, -340px -266px #85e367, -340px -304px #85e367, -340px -342px #85e367, -340px -380px #85e367, -340px -418px #85e367, -340px -456px #85e367, -340px -494px #85e367, -340px -532px #85e367;
- }
- 40.875% {
- box-shadow: 0 -38px #85e367, -170px -76px #85e367, -340px -114px #85e367, -340px -152px #85e367, -340px -190px #85e367, -340px -228px #85e367, -340px -266px #85e367, -340px -304px #85e367, -340px -342px #85e367, -340px -380px #85e367, -340px -418px #85e367, -340px -456px #85e367, -340px -494px #85e367, -340px -532px #85e367;
- }
- 41.5% {
- box-shadow: 0 -38px #85e367, 0 -76px #85e367, -170px -114px #85e367, -340px -152px #85e367, -340px -190px #85e367, -340px -228px #85e367, -340px -266px #85e367, -340px -304px #85e367, -340px -342px #85e367, -340px -380px #85e367, -340px -418px #85e367, -340px -456px #85e367, -340px -494px #85e367, -340px -532px #85e367;
- }
- 42.125% {
- box-shadow: 0 -38px #85e367, 0 -76px #85e367, 0 -114px #85e367, -170px -152px #85e367, -340px -190px #85e367, -340px -228px #85e367, -340px -266px #85e367, -340px -304px #85e367, -340px -342px #85e367, -340px -380px #85e367, -340px -418px #85e367, -340px -456px #85e367, -340px -494px #85e367, -340px -532px #85e367;
- }
- 42.75% {
- box-shadow: 0 -38px #85e367, 0 -76px #85e367, 0 -114px #85e367, 0 -152px #85e367, -170px -190px #85e367, -340px -228px #85e367, -340px -266px #85e367, -340px -304px #85e367, -340px -342px #85e367, -340px -380px #85e367, -340px -418px #85e367, -340px -456px #85e367, -340px -494px #85e367, -340px -532px #85e367;
- }
- 43.375% {
- box-shadow: 0 -38px #85e367, 0 -76px #85e367, 0 -114px #85e367, 0 -152px #85e367, 0 -190px #85e367, -170px -228px #85e367, -340px -266px #85e367, -340px -304px #85e367, -340px -342px #85e367, -340px -380px #85e367, -340px -418px #85e367, -340px -456px #85e367, -340px -494px #85e367, -340px -532px #85e367;
- }
- 44% {
- box-shadow: 0 -38px #85e367, 0 -76px #85e367, 0 -114px #85e367, 0 -152px #85e367, 0 -190px #85e367, 0 -228px #85e367, -170px -266px #85e367, -340px -304px #85e367, -340px -342px #85e367, -340px -380px #85e367, -340px -418px #85e367, -340px -456px #85e367, -340px -494px #85e367, -340px -532px #85e367;
- }
- 44.625% {
- box-shadow: 0 -38px #85e367, 0 -76px #85e367, 0 -114px #85e367, 0 -152px #85e367, 0 -190px #85e367, 0 -228px #85e367, 0 -266px #85e367, -170px -304px #85e367, -340px -342px #85e367, -340px -380px #85e367, -340px -418px #85e367, -340px -456px #85e367, -340px -494px #85e367, -340px -532px #85e367;
- }
- 45.25% {
- box-shadow: 0 -38px #85e367, 0 -76px #85e367, 0 -114px #85e367, 0 -152px #85e367, 0 -190px #85e367, 0 -228px #85e367, 0 -266px #85e367, 0 -304px #85e367, -170px -342px #85e367, -340px -380px #85e367, -340px -418px #85e367, -340px -456px #85e367, -340px -494px #85e367, -340px -532px #85e367;
- }
- 45.875% {
- box-shadow: 0 -38px #85e367, 0 -76px #85e367, 0 -114px #85e367, 0 -152px #85e367, 0 -190px #85e367, 0 -228px #85e367, 0 -266px #85e367, 0 -304px #85e367, 0 -342px #85e367, -170px -380px #85e367, -340px -418px #85e367, -340px -456px #85e367, -340px -494px #85e367, -340px -532px #85e367;
- }
- 46.5% {
- box-shadow: 0 -38px #85e367, 0 -76px #85e367, 0 -114px #85e367, 0 -152px #85e367, 0 -190px #85e367, 0 -228px #85e367, 0 -266px #85e367, 0 -304px #85e367, 0 -342px #85e367, 0 -380px #85e367, -170px -418px #85e367, -340px -456px #85e367, -340px -494px #85e367, -340px -532px #85e367;
- }
- 47.125% {
- box-shadow: 0 -38px #85e367, 0 -76px #85e367, 0 -114px #85e367, 0 -152px #85e367, 0 -190px #85e367, 0 -228px #85e367, 0 -266px #85e367, 0 -304px #85e367, 0 -342px #85e367, 0 -380px #85e367, 0 -418px #85e367, -170px -456px #85e367, -340px -494px #85e367, -340px -532px #85e367;
- }
- 47.75% {
- box-shadow: 0 -38px #85e367, 0 -76px #85e367, 0 -114px #85e367, 0 -152px #85e367, 0 -190px #85e367, 0 -228px #85e367, 0 -266px #85e367, 0 -304px #85e367, 0 -342px #85e367, 0 -380px #85e367, 0 -418px #85e367, 0 -456px #85e367, -170px -494px #85e367, -340px -532px #85e367;
- }
- 48.375% {
- box-shadow: 0 -38px #85e367, 0 -76px #85e367, 0 -114px #85e367, 0 -152px #85e367, 0 -190px #85e367, 0 -228px #85e367, 0 -266px #85e367, 0 -304px #85e367, 0 -342px #85e367, 0 -380px #85e367, 0 -418px #85e367, 0 -456px #85e367, 0 -494px #85e367, -170px -532px #85e367;
- }
- 49% {
- box-shadow: 0 -38px #85e367, 0 -76px #85e367, 0 -114px #85e367, 0 -152px #85e367, 0 -190px #85e367, 0 -228px #85e367, 0 -266px #85e367, 0 -304px #85e367, 0 -342px #85e367, 0 -380px #85e367, 0 -418px #85e367, 0 -456px #85e367, 0 -494px #85e367, 0 -532px #85e367;
- }
-}
-@keyframes cover-horizontal-green {
- 0% {
- width: 0;
- height: 0;
- box-shadow: none;
- }
- 39% {
- width: 0;
- height: 38px;
- }
- 39.625% {
- width: 170px;
- box-shadow: -340px -38px #85e367, -340px -76px #85e367, -340px -114px #85e367, -340px -152px #85e367, -340px -190px #85e367, -340px -228px #85e367, -340px -266px #85e367, -340px -304px #85e367, -340px -342px #85e367, -340px -380px #85e367, -340px -418px #85e367, -340px -456px #85e367, -340px -494px #85e367, -340px -532px #85e367;
- }
- 40.25% {
- width: 340px;
- box-shadow: -170px -38px #85e367, -340px -76px #85e367, -340px -114px #85e367, -340px -152px #85e367, -340px -190px #85e367, -340px -228px #85e367, -340px -266px #85e367, -340px -304px #85e367, -340px -342px #85e367, -340px -380px #85e367, -340px -418px #85e367, -340px -456px #85e367, -340px -494px #85e367, -340px -532px #85e367;
- }
- 40.875% {
- box-shadow: 0 -38px #85e367, -170px -76px #85e367, -340px -114px #85e367, -340px -152px #85e367, -340px -190px #85e367, -340px -228px #85e367, -340px -266px #85e367, -340px -304px #85e367, -340px -342px #85e367, -340px -380px #85e367, -340px -418px #85e367, -340px -456px #85e367, -340px -494px #85e367, -340px -532px #85e367;
- }
- 41.5% {
- box-shadow: 0 -38px #85e367, 0 -76px #85e367, -170px -114px #85e367, -340px -152px #85e367, -340px -190px #85e367, -340px -228px #85e367, -340px -266px #85e367, -340px -304px #85e367, -340px -342px #85e367, -340px -380px #85e367, -340px -418px #85e367, -340px -456px #85e367, -340px -494px #85e367, -340px -532px #85e367;
- }
- 42.125% {
- box-shadow: 0 -38px #85e367, 0 -76px #85e367, 0 -114px #85e367, -170px -152px #85e367, -340px -190px #85e367, -340px -228px #85e367, -340px -266px #85e367, -340px -304px #85e367, -340px -342px #85e367, -340px -380px #85e367, -340px -418px #85e367, -340px -456px #85e367, -340px -494px #85e367, -340px -532px #85e367;
- }
- 42.75% {
- box-shadow: 0 -38px #85e367, 0 -76px #85e367, 0 -114px #85e367, 0 -152px #85e367, -170px -190px #85e367, -340px -228px #85e367, -340px -266px #85e367, -340px -304px #85e367, -340px -342px #85e367, -340px -380px #85e367, -340px -418px #85e367, -340px -456px #85e367, -340px -494px #85e367, -340px -532px #85e367;
- }
- 43.375% {
- box-shadow: 0 -38px #85e367, 0 -76px #85e367, 0 -114px #85e367, 0 -152px #85e367, 0 -190px #85e367, -170px -228px #85e367, -340px -266px #85e367, -340px -304px #85e367, -340px -342px #85e367, -340px -380px #85e367, -340px -418px #85e367, -340px -456px #85e367, -340px -494px #85e367, -340px -532px #85e367;
- }
- 44% {
- box-shadow: 0 -38px #85e367, 0 -76px #85e367, 0 -114px #85e367, 0 -152px #85e367, 0 -190px #85e367, 0 -228px #85e367, -170px -266px #85e367, -340px -304px #85e367, -340px -342px #85e367, -340px -380px #85e367, -340px -418px #85e367, -340px -456px #85e367, -340px -494px #85e367, -340px -532px #85e367;
- }
- 44.625% {
- box-shadow: 0 -38px #85e367, 0 -76px #85e367, 0 -114px #85e367, 0 -152px #85e367, 0 -190px #85e367, 0 -228px #85e367, 0 -266px #85e367, -170px -304px #85e367, -340px -342px #85e367, -340px -380px #85e367, -340px -418px #85e367, -340px -456px #85e367, -340px -494px #85e367, -340px -532px #85e367;
- }
- 45.25% {
- box-shadow: 0 -38px #85e367, 0 -76px #85e367, 0 -114px #85e367, 0 -152px #85e367, 0 -190px #85e367, 0 -228px #85e367, 0 -266px #85e367, 0 -304px #85e367, -170px -342px #85e367, -340px -380px #85e367, -340px -418px #85e367, -340px -456px #85e367, -340px -494px #85e367, -340px -532px #85e367;
- }
- 45.875% {
- box-shadow: 0 -38px #85e367, 0 -76px #85e367, 0 -114px #85e367, 0 -152px #85e367, 0 -190px #85e367, 0 -228px #85e367, 0 -266px #85e367, 0 -304px #85e367, 0 -342px #85e367, -170px -380px #85e367, -340px -418px #85e367, -340px -456px #85e367, -340px -494px #85e367, -340px -532px #85e367;
- }
- 46.5% {
- box-shadow: 0 -38px #85e367, 0 -76px #85e367, 0 -114px #85e367, 0 -152px #85e367, 0 -190px #85e367, 0 -228px #85e367, 0 -266px #85e367, 0 -304px #85e367, 0 -342px #85e367, 0 -380px #85e367, -170px -418px #85e367, -340px -456px #85e367, -340px -494px #85e367, -340px -532px #85e367;
- }
- 47.125% {
- box-shadow: 0 -38px #85e367, 0 -76px #85e367, 0 -114px #85e367, 0 -152px #85e367, 0 -190px #85e367, 0 -228px #85e367, 0 -266px #85e367, 0 -304px #85e367, 0 -342px #85e367, 0 -380px #85e367, 0 -418px #85e367, -170px -456px #85e367, -340px -494px #85e367, -340px -532px #85e367;
- }
- 47.75% {
- box-shadow: 0 -38px #85e367, 0 -76px #85e367, 0 -114px #85e367, 0 -152px #85e367, 0 -190px #85e367, 0 -228px #85e367, 0 -266px #85e367, 0 -304px #85e367, 0 -342px #85e367, 0 -380px #85e367, 0 -418px #85e367, 0 -456px #85e367, -170px -494px #85e367, -340px -532px #85e367;
- }
- 48.375% {
- box-shadow: 0 -38px #85e367, 0 -76px #85e367, 0 -114px #85e367, 0 -152px #85e367, 0 -190px #85e367, 0 -228px #85e367, 0 -266px #85e367, 0 -304px #85e367, 0 -342px #85e367, 0 -380px #85e367, 0 -418px #85e367, 0 -456px #85e367, 0 -494px #85e367, -170px -532px #85e367;
- }
- 49% {
- box-shadow: 0 -38px #85e367, 0 -76px #85e367, 0 -114px #85e367, 0 -152px #85e367, 0 -190px #85e367, 0 -228px #85e367, 0 -266px #85e367, 0 -304px #85e367, 0 -342px #85e367, 0 -380px #85e367, 0 -418px #85e367, 0 -456px #85e367, 0 -494px #85e367, 0 -532px #85e367;
- }
-}
-#gameboy.green #cover-horizontal {
- background-color: #85e367;
- -webkit-animation: cover-horizontal-green 8s linear;
- animation: cover-horizontal-green 8s linear;
- box-shadow: 0 -38px #85e367, 0 -76px #85e367, 0 -114px #85e367, 0 -152px #85e367, 0 -190px #85e367, 0 -228px #85e367, 0 -266px #85e367, 0 -304px #85e367, 0 -342px #85e367, 0 -380px #85e367, 0 -418px #85e367, 0 -456px #85e367, 0 -494px #85e367, 0 -532px #85e367;
-}
-@-moz-keyframes cover-horizontal-purple {
- 0% {
- width: 0;
- height: 0;
- box-shadow: none;
- }
- 39% {
- width: 0;
- height: 38px;
- }
- 39.625% {
- width: 170px;
- box-shadow: -340px -38px #5151dd, -340px -76px #5151dd, -340px -114px #5151dd, -340px -152px #5151dd, -340px -190px #5151dd, -340px -228px #5151dd, -340px -266px #5151dd, -340px -304px #5151dd, -340px -342px #5151dd, -340px -380px #5151dd, -340px -418px #5151dd, -340px -456px #5151dd, -340px -494px #5151dd, -340px -532px #5151dd;
- }
- 40.25% {
- width: 340px;
- box-shadow: -170px -38px #5151dd, -340px -76px #5151dd, -340px -114px #5151dd, -340px -152px #5151dd, -340px -190px #5151dd, -340px -228px #5151dd, -340px -266px #5151dd, -340px -304px #5151dd, -340px -342px #5151dd, -340px -380px #5151dd, -340px -418px #5151dd, -340px -456px #5151dd, -340px -494px #5151dd, -340px -532px #5151dd;
- }
- 40.875% {
- box-shadow: 0 -38px #5151dd, -170px -76px #5151dd, -340px -114px #5151dd, -340px -152px #5151dd, -340px -190px #5151dd, -340px -228px #5151dd, -340px -266px #5151dd, -340px -304px #5151dd, -340px -342px #5151dd, -340px -380px #5151dd, -340px -418px #5151dd, -340px -456px #5151dd, -340px -494px #5151dd, -340px -532px #5151dd;
- }
- 41.5% {
- box-shadow: 0 -38px #5151dd, 0 -76px #5151dd, -170px -114px #5151dd, -340px -152px #5151dd, -340px -190px #5151dd, -340px -228px #5151dd, -340px -266px #5151dd, -340px -304px #5151dd, -340px -342px #5151dd, -340px -380px #5151dd, -340px -418px #5151dd, -340px -456px #5151dd, -340px -494px #5151dd, -340px -532px #5151dd;
- }
- 42.125% {
- box-shadow: 0 -38px #5151dd, 0 -76px #5151dd, 0 -114px #5151dd, -170px -152px #5151dd, -340px -190px #5151dd, -340px -228px #5151dd, -340px -266px #5151dd, -340px -304px #5151dd, -340px -342px #5151dd, -340px -380px #5151dd, -340px -418px #5151dd, -340px -456px #5151dd, -340px -494px #5151dd, -340px -532px #5151dd;
- }
- 42.75% {
- box-shadow: 0 -38px #5151dd, 0 -76px #5151dd, 0 -114px #5151dd, 0 -152px #5151dd, -170px -190px #5151dd, -340px -228px #5151dd, -340px -266px #5151dd, -340px -304px #5151dd, -340px -342px #5151dd, -340px -380px #5151dd, -340px -418px #5151dd, -340px -456px #5151dd, -340px -494px #5151dd, -340px -532px #5151dd;
- }
- 43.375% {
- box-shadow: 0 -38px #5151dd, 0 -76px #5151dd, 0 -114px #5151dd, 0 -152px #5151dd, 0 -190px #5151dd, -170px -228px #5151dd, -340px -266px #5151dd, -340px -304px #5151dd, -340px -342px #5151dd, -340px -380px #5151dd, -340px -418px #5151dd, -340px -456px #5151dd, -340px -494px #5151dd, -340px -532px #5151dd;
- }
- 44% {
- box-shadow: 0 -38px #5151dd, 0 -76px #5151dd, 0 -114px #5151dd, 0 -152px #5151dd, 0 -190px #5151dd, 0 -228px #5151dd, -170px -266px #5151dd, -340px -304px #5151dd, -340px -342px #5151dd, -340px -380px #5151dd, -340px -418px #5151dd, -340px -456px #5151dd, -340px -494px #5151dd, -340px -532px #5151dd;
- }
- 44.625% {
- box-shadow: 0 -38px #5151dd, 0 -76px #5151dd, 0 -114px #5151dd, 0 -152px #5151dd, 0 -190px #5151dd, 0 -228px #5151dd, 0 -266px #5151dd, -170px -304px #5151dd, -340px -342px #5151dd, -340px -380px #5151dd, -340px -418px #5151dd, -340px -456px #5151dd, -340px -494px #5151dd, -340px -532px #5151dd;
- }
- 45.25% {
- box-shadow: 0 -38px #5151dd, 0 -76px #5151dd, 0 -114px #5151dd, 0 -152px #5151dd, 0 -190px #5151dd, 0 -228px #5151dd, 0 -266px #5151dd, 0 -304px #5151dd, -170px -342px #5151dd, -340px -380px #5151dd, -340px -418px #5151dd, -340px -456px #5151dd, -340px -494px #5151dd, -340px -532px #5151dd;
- }
- 45.875% {
- box-shadow: 0 -38px #5151dd, 0 -76px #5151dd, 0 -114px #5151dd, 0 -152px #5151dd, 0 -190px #5151dd, 0 -228px #5151dd, 0 -266px #5151dd, 0 -304px #5151dd, 0 -342px #5151dd, -170px -380px #5151dd, -340px -418px #5151dd, -340px -456px #5151dd, -340px -494px #5151dd, -340px -532px #5151dd;
- }
- 46.5% {
- box-shadow: 0 -38px #5151dd, 0 -76px #5151dd, 0 -114px #5151dd, 0 -152px #5151dd, 0 -190px #5151dd, 0 -228px #5151dd, 0 -266px #5151dd, 0 -304px #5151dd, 0 -342px #5151dd, 0 -380px #5151dd, -170px -418px #5151dd, -340px -456px #5151dd, -340px -494px #5151dd, -340px -532px #5151dd;
- }
- 47.125% {
- box-shadow: 0 -38px #5151dd, 0 -76px #5151dd, 0 -114px #5151dd, 0 -152px #5151dd, 0 -190px #5151dd, 0 -228px #5151dd, 0 -266px #5151dd, 0 -304px #5151dd, 0 -342px #5151dd, 0 -380px #5151dd, 0 -418px #5151dd, -170px -456px #5151dd, -340px -494px #5151dd, -340px -532px #5151dd;
- }
- 47.75% {
- box-shadow: 0 -38px #5151dd, 0 -76px #5151dd, 0 -114px #5151dd, 0 -152px #5151dd, 0 -190px #5151dd, 0 -228px #5151dd, 0 -266px #5151dd, 0 -304px #5151dd, 0 -342px #5151dd, 0 -380px #5151dd, 0 -418px #5151dd, 0 -456px #5151dd, -170px -494px #5151dd, -340px -532px #5151dd;
- }
- 48.375% {
- box-shadow: 0 -38px #5151dd, 0 -76px #5151dd, 0 -114px #5151dd, 0 -152px #5151dd, 0 -190px #5151dd, 0 -228px #5151dd, 0 -266px #5151dd, 0 -304px #5151dd, 0 -342px #5151dd, 0 -380px #5151dd, 0 -418px #5151dd, 0 -456px #5151dd, 0 -494px #5151dd, -170px -532px #5151dd;
- }
- 49% {
- box-shadow: 0 -38px #5151dd, 0 -76px #5151dd, 0 -114px #5151dd, 0 -152px #5151dd, 0 -190px #5151dd, 0 -228px #5151dd, 0 -266px #5151dd, 0 -304px #5151dd, 0 -342px #5151dd, 0 -380px #5151dd, 0 -418px #5151dd, 0 -456px #5151dd, 0 -494px #5151dd, 0 -532px #5151dd;
- }
-}
-@-webkit-keyframes cover-horizontal-purple {
- 0% {
- width: 0;
- height: 0;
- box-shadow: none;
- }
- 39% {
- width: 0;
- height: 38px;
- }
- 39.625% {
- width: 170px;
- box-shadow: -340px -38px #5151dd, -340px -76px #5151dd, -340px -114px #5151dd, -340px -152px #5151dd, -340px -190px #5151dd, -340px -228px #5151dd, -340px -266px #5151dd, -340px -304px #5151dd, -340px -342px #5151dd, -340px -380px #5151dd, -340px -418px #5151dd, -340px -456px #5151dd, -340px -494px #5151dd, -340px -532px #5151dd;
- }
- 40.25% {
- width: 340px;
- box-shadow: -170px -38px #5151dd, -340px -76px #5151dd, -340px -114px #5151dd, -340px -152px #5151dd, -340px -190px #5151dd, -340px -228px #5151dd, -340px -266px #5151dd, -340px -304px #5151dd, -340px -342px #5151dd, -340px -380px #5151dd, -340px -418px #5151dd, -340px -456px #5151dd, -340px -494px #5151dd, -340px -532px #5151dd;
- }
- 40.875% {
- box-shadow: 0 -38px #5151dd, -170px -76px #5151dd, -340px -114px #5151dd, -340px -152px #5151dd, -340px -190px #5151dd, -340px -228px #5151dd, -340px -266px #5151dd, -340px -304px #5151dd, -340px -342px #5151dd, -340px -380px #5151dd, -340px -418px #5151dd, -340px -456px #5151dd, -340px -494px #5151dd, -340px -532px #5151dd;
- }
- 41.5% {
- box-shadow: 0 -38px #5151dd, 0 -76px #5151dd, -170px -114px #5151dd, -340px -152px #5151dd, -340px -190px #5151dd, -340px -228px #5151dd, -340px -266px #5151dd, -340px -304px #5151dd, -340px -342px #5151dd, -340px -380px #5151dd, -340px -418px #5151dd, -340px -456px #5151dd, -340px -494px #5151dd, -340px -532px #5151dd;
- }
- 42.125% {
- box-shadow: 0 -38px #5151dd, 0 -76px #5151dd, 0 -114px #5151dd, -170px -152px #5151dd, -340px -190px #5151dd, -340px -228px #5151dd, -340px -266px #5151dd, -340px -304px #5151dd, -340px -342px #5151dd, -340px -380px #5151dd, -340px -418px #5151dd, -340px -456px #5151dd, -340px -494px #5151dd, -340px -532px #5151dd;
- }
- 42.75% {
- box-shadow: 0 -38px #5151dd, 0 -76px #5151dd, 0 -114px #5151dd, 0 -152px #5151dd, -170px -190px #5151dd, -340px -228px #5151dd, -340px -266px #5151dd, -340px -304px #5151dd, -340px -342px #5151dd, -340px -380px #5151dd, -340px -418px #5151dd, -340px -456px #5151dd, -340px -494px #5151dd, -340px -532px #5151dd;
- }
- 43.375% {
- box-shadow: 0 -38px #5151dd, 0 -76px #5151dd, 0 -114px #5151dd, 0 -152px #5151dd, 0 -190px #5151dd, -170px -228px #5151dd, -340px -266px #5151dd, -340px -304px #5151dd, -340px -342px #5151dd, -340px -380px #5151dd, -340px -418px #5151dd, -340px -456px #5151dd, -340px -494px #5151dd, -340px -532px #5151dd;
- }
- 44% {
- box-shadow: 0 -38px #5151dd, 0 -76px #5151dd, 0 -114px #5151dd, 0 -152px #5151dd, 0 -190px #5151dd, 0 -228px #5151dd, -170px -266px #5151dd, -340px -304px #5151dd, -340px -342px #5151dd, -340px -380px #5151dd, -340px -418px #5151dd, -340px -456px #5151dd, -340px -494px #5151dd, -340px -532px #5151dd;
- }
- 44.625% {
- box-shadow: 0 -38px #5151dd, 0 -76px #5151dd, 0 -114px #5151dd, 0 -152px #5151dd, 0 -190px #5151dd, 0 -228px #5151dd, 0 -266px #5151dd, -170px -304px #5151dd, -340px -342px #5151dd, -340px -380px #5151dd, -340px -418px #5151dd, -340px -456px #5151dd, -340px -494px #5151dd, -340px -532px #5151dd;
- }
- 45.25% {
- box-shadow: 0 -38px #5151dd, 0 -76px #5151dd, 0 -114px #5151dd, 0 -152px #5151dd, 0 -190px #5151dd, 0 -228px #5151dd, 0 -266px #5151dd, 0 -304px #5151dd, -170px -342px #5151dd, -340px -380px #5151dd, -340px -418px #5151dd, -340px -456px #5151dd, -340px -494px #5151dd, -340px -532px #5151dd;
- }
- 45.875% {
- box-shadow: 0 -38px #5151dd, 0 -76px #5151dd, 0 -114px #5151dd, 0 -152px #5151dd, 0 -190px #5151dd, 0 -228px #5151dd, 0 -266px #5151dd, 0 -304px #5151dd, 0 -342px #5151dd, -170px -380px #5151dd, -340px -418px #5151dd, -340px -456px #5151dd, -340px -494px #5151dd, -340px -532px #5151dd;
- }
- 46.5% {
- box-shadow: 0 -38px #5151dd, 0 -76px #5151dd, 0 -114px #5151dd, 0 -152px #5151dd, 0 -190px #5151dd, 0 -228px #5151dd, 0 -266px #5151dd, 0 -304px #5151dd, 0 -342px #5151dd, 0 -380px #5151dd, -170px -418px #5151dd, -340px -456px #5151dd, -340px -494px #5151dd, -340px -532px #5151dd;
- }
- 47.125% {
- box-shadow: 0 -38px #5151dd, 0 -76px #5151dd, 0 -114px #5151dd, 0 -152px #5151dd, 0 -190px #5151dd, 0 -228px #5151dd, 0 -266px #5151dd, 0 -304px #5151dd, 0 -342px #5151dd, 0 -380px #5151dd, 0 -418px #5151dd, -170px -456px #5151dd, -340px -494px #5151dd, -340px -532px #5151dd;
- }
- 47.75% {
- box-shadow: 0 -38px #5151dd, 0 -76px #5151dd, 0 -114px #5151dd, 0 -152px #5151dd, 0 -190px #5151dd, 0 -228px #5151dd, 0 -266px #5151dd, 0 -304px #5151dd, 0 -342px #5151dd, 0 -380px #5151dd, 0 -418px #5151dd, 0 -456px #5151dd, -170px -494px #5151dd, -340px -532px #5151dd;
- }
- 48.375% {
- box-shadow: 0 -38px #5151dd, 0 -76px #5151dd, 0 -114px #5151dd, 0 -152px #5151dd, 0 -190px #5151dd, 0 -228px #5151dd, 0 -266px #5151dd, 0 -304px #5151dd, 0 -342px #5151dd, 0 -380px #5151dd, 0 -418px #5151dd, 0 -456px #5151dd, 0 -494px #5151dd, -170px -532px #5151dd;
- }
- 49% {
- box-shadow: 0 -38px #5151dd, 0 -76px #5151dd, 0 -114px #5151dd, 0 -152px #5151dd, 0 -190px #5151dd, 0 -228px #5151dd, 0 -266px #5151dd, 0 -304px #5151dd, 0 -342px #5151dd, 0 -380px #5151dd, 0 -418px #5151dd, 0 -456px #5151dd, 0 -494px #5151dd, 0 -532px #5151dd;
- }
-}
-@keyframes cover-horizontal-purple {
- 0% {
- width: 0;
- height: 0;
- box-shadow: none;
- }
- 39% {
- width: 0;
- height: 38px;
- }
- 39.625% {
- width: 170px;
- box-shadow: -340px -38px #5151dd, -340px -76px #5151dd, -340px -114px #5151dd, -340px -152px #5151dd, -340px -190px #5151dd, -340px -228px #5151dd, -340px -266px #5151dd, -340px -304px #5151dd, -340px -342px #5151dd, -340px -380px #5151dd, -340px -418px #5151dd, -340px -456px #5151dd, -340px -494px #5151dd, -340px -532px #5151dd;
- }
- 40.25% {
- width: 340px;
- box-shadow: -170px -38px #5151dd, -340px -76px #5151dd, -340px -114px #5151dd, -340px -152px #5151dd, -340px -190px #5151dd, -340px -228px #5151dd, -340px -266px #5151dd, -340px -304px #5151dd, -340px -342px #5151dd, -340px -380px #5151dd, -340px -418px #5151dd, -340px -456px #5151dd, -340px -494px #5151dd, -340px -532px #5151dd;
- }
- 40.875% {
- box-shadow: 0 -38px #5151dd, -170px -76px #5151dd, -340px -114px #5151dd, -340px -152px #5151dd, -340px -190px #5151dd, -340px -228px #5151dd, -340px -266px #5151dd, -340px -304px #5151dd, -340px -342px #5151dd, -340px -380px #5151dd, -340px -418px #5151dd, -340px -456px #5151dd, -340px -494px #5151dd, -340px -532px #5151dd;
- }
- 41.5% {
- box-shadow: 0 -38px #5151dd, 0 -76px #5151dd, -170px -114px #5151dd, -340px -152px #5151dd, -340px -190px #5151dd, -340px -228px #5151dd, -340px -266px #5151dd, -340px -304px #5151dd, -340px -342px #5151dd, -340px -380px #5151dd, -340px -418px #5151dd, -340px -456px #5151dd, -340px -494px #5151dd, -340px -532px #5151dd;
- }
- 42.125% {
- box-shadow: 0 -38px #5151dd, 0 -76px #5151dd, 0 -114px #5151dd, -170px -152px #5151dd, -340px -190px #5151dd, -340px -228px #5151dd, -340px -266px #5151dd, -340px -304px #5151dd, -340px -342px #5151dd, -340px -380px #5151dd, -340px -418px #5151dd, -340px -456px #5151dd, -340px -494px #5151dd, -340px -532px #5151dd;
- }
- 42.75% {
- box-shadow: 0 -38px #5151dd, 0 -76px #5151dd, 0 -114px #5151dd, 0 -152px #5151dd, -170px -190px #5151dd, -340px -228px #5151dd, -340px -266px #5151dd, -340px -304px #5151dd, -340px -342px #5151dd, -340px -380px #5151dd, -340px -418px #5151dd, -340px -456px #5151dd, -340px -494px #5151dd, -340px -532px #5151dd;
- }
- 43.375% {
- box-shadow: 0 -38px #5151dd, 0 -76px #5151dd, 0 -114px #5151dd, 0 -152px #5151dd, 0 -190px #5151dd, -170px -228px #5151dd, -340px -266px #5151dd, -340px -304px #5151dd, -340px -342px #5151dd, -340px -380px #5151dd, -340px -418px #5151dd, -340px -456px #5151dd, -340px -494px #5151dd, -340px -532px #5151dd;
- }
- 44% {
- box-shadow: 0 -38px #5151dd, 0 -76px #5151dd, 0 -114px #5151dd, 0 -152px #5151dd, 0 -190px #5151dd, 0 -228px #5151dd, -170px -266px #5151dd, -340px -304px #5151dd, -340px -342px #5151dd, -340px -380px #5151dd, -340px -418px #5151dd, -340px -456px #5151dd, -340px -494px #5151dd, -340px -532px #5151dd;
- }
- 44.625% {
- box-shadow: 0 -38px #5151dd, 0 -76px #5151dd, 0 -114px #5151dd, 0 -152px #5151dd, 0 -190px #5151dd, 0 -228px #5151dd, 0 -266px #5151dd, -170px -304px #5151dd, -340px -342px #5151dd, -340px -380px #5151dd, -340px -418px #5151dd, -340px -456px #5151dd, -340px -494px #5151dd, -340px -532px #5151dd;
- }
- 45.25% {
- box-shadow: 0 -38px #5151dd, 0 -76px #5151dd, 0 -114px #5151dd, 0 -152px #5151dd, 0 -190px #5151dd, 0 -228px #5151dd, 0 -266px #5151dd, 0 -304px #5151dd, -170px -342px #5151dd, -340px -380px #5151dd, -340px -418px #5151dd, -340px -456px #5151dd, -340px -494px #5151dd, -340px -532px #5151dd;
- }
- 45.875% {
- box-shadow: 0 -38px #5151dd, 0 -76px #5151dd, 0 -114px #5151dd, 0 -152px #5151dd, 0 -190px #5151dd, 0 -228px #5151dd, 0 -266px #5151dd, 0 -304px #5151dd, 0 -342px #5151dd, -170px -380px #5151dd, -340px -418px #5151dd, -340px -456px #5151dd, -340px -494px #5151dd, -340px -532px #5151dd;
- }
- 46.5% {
- box-shadow: 0 -38px #5151dd, 0 -76px #5151dd, 0 -114px #5151dd, 0 -152px #5151dd, 0 -190px #5151dd, 0 -228px #5151dd, 0 -266px #5151dd, 0 -304px #5151dd, 0 -342px #5151dd, 0 -380px #5151dd, -170px -418px #5151dd, -340px -456px #5151dd, -340px -494px #5151dd, -340px -532px #5151dd;
- }
- 47.125% {
- box-shadow: 0 -38px #5151dd, 0 -76px #5151dd, 0 -114px #5151dd, 0 -152px #5151dd, 0 -190px #5151dd, 0 -228px #5151dd, 0 -266px #5151dd, 0 -304px #5151dd, 0 -342px #5151dd, 0 -380px #5151dd, 0 -418px #5151dd, -170px -456px #5151dd, -340px -494px #5151dd, -340px -532px #5151dd;
- }
- 47.75% {
- box-shadow: 0 -38px #5151dd, 0 -76px #5151dd, 0 -114px #5151dd, 0 -152px #5151dd, 0 -190px #5151dd, 0 -228px #5151dd, 0 -266px #5151dd, 0 -304px #5151dd, 0 -342px #5151dd, 0 -380px #5151dd, 0 -418px #5151dd, 0 -456px #5151dd, -170px -494px #5151dd, -340px -532px #5151dd;
- }
- 48.375% {
- box-shadow: 0 -38px #5151dd, 0 -76px #5151dd, 0 -114px #5151dd, 0 -152px #5151dd, 0 -190px #5151dd, 0 -228px #5151dd, 0 -266px #5151dd, 0 -304px #5151dd, 0 -342px #5151dd, 0 -380px #5151dd, 0 -418px #5151dd, 0 -456px #5151dd, 0 -494px #5151dd, -170px -532px #5151dd;
- }
- 49% {
- box-shadow: 0 -38px #5151dd, 0 -76px #5151dd, 0 -114px #5151dd, 0 -152px #5151dd, 0 -190px #5151dd, 0 -228px #5151dd, 0 -266px #5151dd, 0 -304px #5151dd, 0 -342px #5151dd, 0 -380px #5151dd, 0 -418px #5151dd, 0 -456px #5151dd, 0 -494px #5151dd, 0 -532px #5151dd;
- }
-}
-#gameboy.purple #cover-horizontal {
- background-color: #5151dd;
- -webkit-animation: cover-horizontal-purple 8s linear;
- animation: cover-horizontal-purple 8s linear;
- box-shadow: 0 -38px #5151dd, 0 -76px #5151dd, 0 -114px #5151dd, 0 -152px #5151dd, 0 -190px #5151dd, 0 -228px #5151dd, 0 -266px #5151dd, 0 -304px #5151dd, 0 -342px #5151dd, 0 -380px #5151dd, 0 -418px #5151dd, 0 -456px #5151dd, 0 -494px #5151dd, 0 -532px #5151dd;
-}
-@-moz-keyframes cover-horizontal-red {
- 0% {
- width: 0;
- height: 0;
- box-shadow: none;
- }
- 39% {
- width: 0;
- height: 38px;
- }
- 39.625% {
- width: 170px;
- box-shadow: -340px -38px #ff0151, -340px -76px #ff0151, -340px -114px #ff0151, -340px -152px #ff0151, -340px -190px #ff0151, -340px -228px #ff0151, -340px -266px #ff0151, -340px -304px #ff0151, -340px -342px #ff0151, -340px -380px #ff0151, -340px -418px #ff0151, -340px -456px #ff0151, -340px -494px #ff0151, -340px -532px #ff0151;
- }
- 40.25% {
- width: 340px;
- box-shadow: -170px -38px #ff0151, -340px -76px #ff0151, -340px -114px #ff0151, -340px -152px #ff0151, -340px -190px #ff0151, -340px -228px #ff0151, -340px -266px #ff0151, -340px -304px #ff0151, -340px -342px #ff0151, -340px -380px #ff0151, -340px -418px #ff0151, -340px -456px #ff0151, -340px -494px #ff0151, -340px -532px #ff0151;
- }
- 40.875% {
- box-shadow: 0 -38px #ff0151, -170px -76px #ff0151, -340px -114px #ff0151, -340px -152px #ff0151, -340px -190px #ff0151, -340px -228px #ff0151, -340px -266px #ff0151, -340px -304px #ff0151, -340px -342px #ff0151, -340px -380px #ff0151, -340px -418px #ff0151, -340px -456px #ff0151, -340px -494px #ff0151, -340px -532px #ff0151;
- }
- 41.5% {
- box-shadow: 0 -38px #ff0151, 0 -76px #ff0151, -170px -114px #ff0151, -340px -152px #ff0151, -340px -190px #ff0151, -340px -228px #ff0151, -340px -266px #ff0151, -340px -304px #ff0151, -340px -342px #ff0151, -340px -380px #ff0151, -340px -418px #ff0151, -340px -456px #ff0151, -340px -494px #ff0151, -340px -532px #ff0151;
- }
- 42.125% {
- box-shadow: 0 -38px #ff0151, 0 -76px #ff0151, 0 -114px #ff0151, -170px -152px #ff0151, -340px -190px #ff0151, -340px -228px #ff0151, -340px -266px #ff0151, -340px -304px #ff0151, -340px -342px #ff0151, -340px -380px #ff0151, -340px -418px #ff0151, -340px -456px #ff0151, -340px -494px #ff0151, -340px -532px #ff0151;
- }
- 42.75% {
- box-shadow: 0 -38px #ff0151, 0 -76px #ff0151, 0 -114px #ff0151, 0 -152px #ff0151, -170px -190px #ff0151, -340px -228px #ff0151, -340px -266px #ff0151, -340px -304px #ff0151, -340px -342px #ff0151, -340px -380px #ff0151, -340px -418px #ff0151, -340px -456px #ff0151, -340px -494px #ff0151, -340px -532px #ff0151;
- }
- 43.375% {
- box-shadow: 0 -38px #ff0151, 0 -76px #ff0151, 0 -114px #ff0151, 0 -152px #ff0151, 0 -190px #ff0151, -170px -228px #ff0151, -340px -266px #ff0151, -340px -304px #ff0151, -340px -342px #ff0151, -340px -380px #ff0151, -340px -418px #ff0151, -340px -456px #ff0151, -340px -494px #ff0151, -340px -532px #ff0151;
- }
- 44% {
- box-shadow: 0 -38px #ff0151, 0 -76px #ff0151, 0 -114px #ff0151, 0 -152px #ff0151, 0 -190px #ff0151, 0 -228px #ff0151, -170px -266px #ff0151, -340px -304px #ff0151, -340px -342px #ff0151, -340px -380px #ff0151, -340px -418px #ff0151, -340px -456px #ff0151, -340px -494px #ff0151, -340px -532px #ff0151;
- }
- 44.625% {
- box-shadow: 0 -38px #ff0151, 0 -76px #ff0151, 0 -114px #ff0151, 0 -152px #ff0151, 0 -190px #ff0151, 0 -228px #ff0151, 0 -266px #ff0151, -170px -304px #ff0151, -340px -342px #ff0151, -340px -380px #ff0151, -340px -418px #ff0151, -340px -456px #ff0151, -340px -494px #ff0151, -340px -532px #ff0151;
- }
- 45.25% {
- box-shadow: 0 -38px #ff0151, 0 -76px #ff0151, 0 -114px #ff0151, 0 -152px #ff0151, 0 -190px #ff0151, 0 -228px #ff0151, 0 -266px #ff0151, 0 -304px #ff0151, -170px -342px #ff0151, -340px -380px #ff0151, -340px -418px #ff0151, -340px -456px #ff0151, -340px -494px #ff0151, -340px -532px #ff0151;
- }
- 45.875% {
- box-shadow: 0 -38px #ff0151, 0 -76px #ff0151, 0 -114px #ff0151, 0 -152px #ff0151, 0 -190px #ff0151, 0 -228px #ff0151, 0 -266px #ff0151, 0 -304px #ff0151, 0 -342px #ff0151, -170px -380px #ff0151, -340px -418px #ff0151, -340px -456px #ff0151, -340px -494px #ff0151, -340px -532px #ff0151;
- }
- 46.5% {
- box-shadow: 0 -38px #ff0151, 0 -76px #ff0151, 0 -114px #ff0151, 0 -152px #ff0151, 0 -190px #ff0151, 0 -228px #ff0151, 0 -266px #ff0151, 0 -304px #ff0151, 0 -342px #ff0151, 0 -380px #ff0151, -170px -418px #ff0151, -340px -456px #ff0151, -340px -494px #ff0151, -340px -532px #ff0151;
- }
- 47.125% {
- box-shadow: 0 -38px #ff0151, 0 -76px #ff0151, 0 -114px #ff0151, 0 -152px #ff0151, 0 -190px #ff0151, 0 -228px #ff0151, 0 -266px #ff0151, 0 -304px #ff0151, 0 -342px #ff0151, 0 -380px #ff0151, 0 -418px #ff0151, -170px -456px #ff0151, -340px -494px #ff0151, -340px -532px #ff0151;
- }
- 47.75% {
- box-shadow: 0 -38px #ff0151, 0 -76px #ff0151, 0 -114px #ff0151, 0 -152px #ff0151, 0 -190px #ff0151, 0 -228px #ff0151, 0 -266px #ff0151, 0 -304px #ff0151, 0 -342px #ff0151, 0 -380px #ff0151, 0 -418px #ff0151, 0 -456px #ff0151, -170px -494px #ff0151, -340px -532px #ff0151;
- }
- 48.375% {
- box-shadow: 0 -38px #ff0151, 0 -76px #ff0151, 0 -114px #ff0151, 0 -152px #ff0151, 0 -190px #ff0151, 0 -228px #ff0151, 0 -266px #ff0151, 0 -304px #ff0151, 0 -342px #ff0151, 0 -380px #ff0151, 0 -418px #ff0151, 0 -456px #ff0151, 0 -494px #ff0151, -170px -532px #ff0151;
- }
- 49% {
- box-shadow: 0 -38px #ff0151, 0 -76px #ff0151, 0 -114px #ff0151, 0 -152px #ff0151, 0 -190px #ff0151, 0 -228px #ff0151, 0 -266px #ff0151, 0 -304px #ff0151, 0 -342px #ff0151, 0 -380px #ff0151, 0 -418px #ff0151, 0 -456px #ff0151, 0 -494px #ff0151, 0 -532px #ff0151;
- }
-}
-@-webkit-keyframes cover-horizontal-red {
- 0% {
- width: 0;
- height: 0;
- box-shadow: none;
- }
- 39% {
- width: 0;
- height: 38px;
- }
- 39.625% {
- width: 170px;
- box-shadow: -340px -38px #ff0151, -340px -76px #ff0151, -340px -114px #ff0151, -340px -152px #ff0151, -340px -190px #ff0151, -340px -228px #ff0151, -340px -266px #ff0151, -340px -304px #ff0151, -340px -342px #ff0151, -340px -380px #ff0151, -340px -418px #ff0151, -340px -456px #ff0151, -340px -494px #ff0151, -340px -532px #ff0151;
- }
- 40.25% {
- width: 340px;
- box-shadow: -170px -38px #ff0151, -340px -76px #ff0151, -340px -114px #ff0151, -340px -152px #ff0151, -340px -190px #ff0151, -340px -228px #ff0151, -340px -266px #ff0151, -340px -304px #ff0151, -340px -342px #ff0151, -340px -380px #ff0151, -340px -418px #ff0151, -340px -456px #ff0151, -340px -494px #ff0151, -340px -532px #ff0151;
- }
- 40.875% {
- box-shadow: 0 -38px #ff0151, -170px -76px #ff0151, -340px -114px #ff0151, -340px -152px #ff0151, -340px -190px #ff0151, -340px -228px #ff0151, -340px -266px #ff0151, -340px -304px #ff0151, -340px -342px #ff0151, -340px -380px #ff0151, -340px -418px #ff0151, -340px -456px #ff0151, -340px -494px #ff0151, -340px -532px #ff0151;
- }
- 41.5% {
- box-shadow: 0 -38px #ff0151, 0 -76px #ff0151, -170px -114px #ff0151, -340px -152px #ff0151, -340px -190px #ff0151, -340px -228px #ff0151, -340px -266px #ff0151, -340px -304px #ff0151, -340px -342px #ff0151, -340px -380px #ff0151, -340px -418px #ff0151, -340px -456px #ff0151, -340px -494px #ff0151, -340px -532px #ff0151;
- }
- 42.125% {
- box-shadow: 0 -38px #ff0151, 0 -76px #ff0151, 0 -114px #ff0151, -170px -152px #ff0151, -340px -190px #ff0151, -340px -228px #ff0151, -340px -266px #ff0151, -340px -304px #ff0151, -340px -342px #ff0151, -340px -380px #ff0151, -340px -418px #ff0151, -340px -456px #ff0151, -340px -494px #ff0151, -340px -532px #ff0151;
- }
- 42.75% {
- box-shadow: 0 -38px #ff0151, 0 -76px #ff0151, 0 -114px #ff0151, 0 -152px #ff0151, -170px -190px #ff0151, -340px -228px #ff0151, -340px -266px #ff0151, -340px -304px #ff0151, -340px -342px #ff0151, -340px -380px #ff0151, -340px -418px #ff0151, -340px -456px #ff0151, -340px -494px #ff0151, -340px -532px #ff0151;
- }
- 43.375% {
- box-shadow: 0 -38px #ff0151, 0 -76px #ff0151, 0 -114px #ff0151, 0 -152px #ff0151, 0 -190px #ff0151, -170px -228px #ff0151, -340px -266px #ff0151, -340px -304px #ff0151, -340px -342px #ff0151, -340px -380px #ff0151, -340px -418px #ff0151, -340px -456px #ff0151, -340px -494px #ff0151, -340px -532px #ff0151;
- }
- 44% {
- box-shadow: 0 -38px #ff0151, 0 -76px #ff0151, 0 -114px #ff0151, 0 -152px #ff0151, 0 -190px #ff0151, 0 -228px #ff0151, -170px -266px #ff0151, -340px -304px #ff0151, -340px -342px #ff0151, -340px -380px #ff0151, -340px -418px #ff0151, -340px -456px #ff0151, -340px -494px #ff0151, -340px -532px #ff0151;
- }
- 44.625% {
- box-shadow: 0 -38px #ff0151, 0 -76px #ff0151, 0 -114px #ff0151, 0 -152px #ff0151, 0 -190px #ff0151, 0 -228px #ff0151, 0 -266px #ff0151, -170px -304px #ff0151, -340px -342px #ff0151, -340px -380px #ff0151, -340px -418px #ff0151, -340px -456px #ff0151, -340px -494px #ff0151, -340px -532px #ff0151;
- }
- 45.25% {
- box-shadow: 0 -38px #ff0151, 0 -76px #ff0151, 0 -114px #ff0151, 0 -152px #ff0151, 0 -190px #ff0151, 0 -228px #ff0151, 0 -266px #ff0151, 0 -304px #ff0151, -170px -342px #ff0151, -340px -380px #ff0151, -340px -418px #ff0151, -340px -456px #ff0151, -340px -494px #ff0151, -340px -532px #ff0151;
- }
- 45.875% {
- box-shadow: 0 -38px #ff0151, 0 -76px #ff0151, 0 -114px #ff0151, 0 -152px #ff0151, 0 -190px #ff0151, 0 -228px #ff0151, 0 -266px #ff0151, 0 -304px #ff0151, 0 -342px #ff0151, -170px -380px #ff0151, -340px -418px #ff0151, -340px -456px #ff0151, -340px -494px #ff0151, -340px -532px #ff0151;
- }
- 46.5% {
- box-shadow: 0 -38px #ff0151, 0 -76px #ff0151, 0 -114px #ff0151, 0 -152px #ff0151, 0 -190px #ff0151, 0 -228px #ff0151, 0 -266px #ff0151, 0 -304px #ff0151, 0 -342px #ff0151, 0 -380px #ff0151, -170px -418px #ff0151, -340px -456px #ff0151, -340px -494px #ff0151, -340px -532px #ff0151;
- }
- 47.125% {
- box-shadow: 0 -38px #ff0151, 0 -76px #ff0151, 0 -114px #ff0151, 0 -152px #ff0151, 0 -190px #ff0151, 0 -228px #ff0151, 0 -266px #ff0151, 0 -304px #ff0151, 0 -342px #ff0151, 0 -380px #ff0151, 0 -418px #ff0151, -170px -456px #ff0151, -340px -494px #ff0151, -340px -532px #ff0151;
- }
- 47.75% {
- box-shadow: 0 -38px #ff0151, 0 -76px #ff0151, 0 -114px #ff0151, 0 -152px #ff0151, 0 -190px #ff0151, 0 -228px #ff0151, 0 -266px #ff0151, 0 -304px #ff0151, 0 -342px #ff0151, 0 -380px #ff0151, 0 -418px #ff0151, 0 -456px #ff0151, -170px -494px #ff0151, -340px -532px #ff0151;
- }
- 48.375% {
- box-shadow: 0 -38px #ff0151, 0 -76px #ff0151, 0 -114px #ff0151, 0 -152px #ff0151, 0 -190px #ff0151, 0 -228px #ff0151, 0 -266px #ff0151, 0 -304px #ff0151, 0 -342px #ff0151, 0 -380px #ff0151, 0 -418px #ff0151, 0 -456px #ff0151, 0 -494px #ff0151, -170px -532px #ff0151;
- }
- 49% {
- box-shadow: 0 -38px #ff0151, 0 -76px #ff0151, 0 -114px #ff0151, 0 -152px #ff0151, 0 -190px #ff0151, 0 -228px #ff0151, 0 -266px #ff0151, 0 -304px #ff0151, 0 -342px #ff0151, 0 -380px #ff0151, 0 -418px #ff0151, 0 -456px #ff0151, 0 -494px #ff0151, 0 -532px #ff0151;
- }
-}
-@keyframes cover-horizontal-red {
- 0% {
- width: 0;
- height: 0;
- box-shadow: none;
- }
- 39% {
- width: 0;
- height: 38px;
- }
- 39.625% {
- width: 170px;
- box-shadow: -340px -38px #ff0151, -340px -76px #ff0151, -340px -114px #ff0151, -340px -152px #ff0151, -340px -190px #ff0151, -340px -228px #ff0151, -340px -266px #ff0151, -340px -304px #ff0151, -340px -342px #ff0151, -340px -380px #ff0151, -340px -418px #ff0151, -340px -456px #ff0151, -340px -494px #ff0151, -340px -532px #ff0151;
- }
- 40.25% {
- width: 340px;
- box-shadow: -170px -38px #ff0151, -340px -76px #ff0151, -340px -114px #ff0151, -340px -152px #ff0151, -340px -190px #ff0151, -340px -228px #ff0151, -340px -266px #ff0151, -340px -304px #ff0151, -340px -342px #ff0151, -340px -380px #ff0151, -340px -418px #ff0151, -340px -456px #ff0151, -340px -494px #ff0151, -340px -532px #ff0151;
- }
- 40.875% {
- box-shadow: 0 -38px #ff0151, -170px -76px #ff0151, -340px -114px #ff0151, -340px -152px #ff0151, -340px -190px #ff0151, -340px -228px #ff0151, -340px -266px #ff0151, -340px -304px #ff0151, -340px -342px #ff0151, -340px -380px #ff0151, -340px -418px #ff0151, -340px -456px #ff0151, -340px -494px #ff0151, -340px -532px #ff0151;
- }
- 41.5% {
- box-shadow: 0 -38px #ff0151, 0 -76px #ff0151, -170px -114px #ff0151, -340px -152px #ff0151, -340px -190px #ff0151, -340px -228px #ff0151, -340px -266px #ff0151, -340px -304px #ff0151, -340px -342px #ff0151, -340px -380px #ff0151, -340px -418px #ff0151, -340px -456px #ff0151, -340px -494px #ff0151, -340px -532px #ff0151;
- }
- 42.125% {
- box-shadow: 0 -38px #ff0151, 0 -76px #ff0151, 0 -114px #ff0151, -170px -152px #ff0151, -340px -190px #ff0151, -340px -228px #ff0151, -340px -266px #ff0151, -340px -304px #ff0151, -340px -342px #ff0151, -340px -380px #ff0151, -340px -418px #ff0151, -340px -456px #ff0151, -340px -494px #ff0151, -340px -532px #ff0151;
- }
- 42.75% {
- box-shadow: 0 -38px #ff0151, 0 -76px #ff0151, 0 -114px #ff0151, 0 -152px #ff0151, -170px -190px #ff0151, -340px -228px #ff0151, -340px -266px #ff0151, -340px -304px #ff0151, -340px -342px #ff0151, -340px -380px #ff0151, -340px -418px #ff0151, -340px -456px #ff0151, -340px -494px #ff0151, -340px -532px #ff0151;
- }
- 43.375% {
- box-shadow: 0 -38px #ff0151, 0 -76px #ff0151, 0 -114px #ff0151, 0 -152px #ff0151, 0 -190px #ff0151, -170px -228px #ff0151, -340px -266px #ff0151, -340px -304px #ff0151, -340px -342px #ff0151, -340px -380px #ff0151, -340px -418px #ff0151, -340px -456px #ff0151, -340px -494px #ff0151, -340px -532px #ff0151;
- }
- 44% {
- box-shadow: 0 -38px #ff0151, 0 -76px #ff0151, 0 -114px #ff0151, 0 -152px #ff0151, 0 -190px #ff0151, 0 -228px #ff0151, -170px -266px #ff0151, -340px -304px #ff0151, -340px -342px #ff0151, -340px -380px #ff0151, -340px -418px #ff0151, -340px -456px #ff0151, -340px -494px #ff0151, -340px -532px #ff0151;
- }
- 44.625% {
- box-shadow: 0 -38px #ff0151, 0 -76px #ff0151, 0 -114px #ff0151, 0 -152px #ff0151, 0 -190px #ff0151, 0 -228px #ff0151, 0 -266px #ff0151, -170px -304px #ff0151, -340px -342px #ff0151, -340px -380px #ff0151, -340px -418px #ff0151, -340px -456px #ff0151, -340px -494px #ff0151, -340px -532px #ff0151;
- }
- 45.25% {
- box-shadow: 0 -38px #ff0151, 0 -76px #ff0151, 0 -114px #ff0151, 0 -152px #ff0151, 0 -190px #ff0151, 0 -228px #ff0151, 0 -266px #ff0151, 0 -304px #ff0151, -170px -342px #ff0151, -340px -380px #ff0151, -340px -418px #ff0151, -340px -456px #ff0151, -340px -494px #ff0151, -340px -532px #ff0151;
- }
- 45.875% {
- box-shadow: 0 -38px #ff0151, 0 -76px #ff0151, 0 -114px #ff0151, 0 -152px #ff0151, 0 -190px #ff0151, 0 -228px #ff0151, 0 -266px #ff0151, 0 -304px #ff0151, 0 -342px #ff0151, -170px -380px #ff0151, -340px -418px #ff0151, -340px -456px #ff0151, -340px -494px #ff0151, -340px -532px #ff0151;
- }
- 46.5% {
- box-shadow: 0 -38px #ff0151, 0 -76px #ff0151, 0 -114px #ff0151, 0 -152px #ff0151, 0 -190px #ff0151, 0 -228px #ff0151, 0 -266px #ff0151, 0 -304px #ff0151, 0 -342px #ff0151, 0 -380px #ff0151, -170px -418px #ff0151, -340px -456px #ff0151, -340px -494px #ff0151, -340px -532px #ff0151;
- }
- 47.125% {
- box-shadow: 0 -38px #ff0151, 0 -76px #ff0151, 0 -114px #ff0151, 0 -152px #ff0151, 0 -190px #ff0151, 0 -228px #ff0151, 0 -266px #ff0151, 0 -304px #ff0151, 0 -342px #ff0151, 0 -380px #ff0151, 0 -418px #ff0151, -170px -456px #ff0151, -340px -494px #ff0151, -340px -532px #ff0151;
- }
- 47.75% {
- box-shadow: 0 -38px #ff0151, 0 -76px #ff0151, 0 -114px #ff0151, 0 -152px #ff0151, 0 -190px #ff0151, 0 -228px #ff0151, 0 -266px #ff0151, 0 -304px #ff0151, 0 -342px #ff0151, 0 -380px #ff0151, 0 -418px #ff0151, 0 -456px #ff0151, -170px -494px #ff0151, -340px -532px #ff0151;
- }
- 48.375% {
- box-shadow: 0 -38px #ff0151, 0 -76px #ff0151, 0 -114px #ff0151, 0 -152px #ff0151, 0 -190px #ff0151, 0 -228px #ff0151, 0 -266px #ff0151, 0 -304px #ff0151, 0 -342px #ff0151, 0 -380px #ff0151, 0 -418px #ff0151, 0 -456px #ff0151, 0 -494px #ff0151, -170px -532px #ff0151;
- }
- 49% {
- box-shadow: 0 -38px #ff0151, 0 -76px #ff0151, 0 -114px #ff0151, 0 -152px #ff0151, 0 -190px #ff0151, 0 -228px #ff0151, 0 -266px #ff0151, 0 -304px #ff0151, 0 -342px #ff0151, 0 -380px #ff0151, 0 -418px #ff0151, 0 -456px #ff0151, 0 -494px #ff0151, 0 -532px #ff0151;
- }
-}
-#gameboy.red #cover-horizontal {
- background-color: #ff0151;
- -webkit-animation: cover-horizontal-red 8s linear;
- animation: cover-horizontal-red 8s linear;
- box-shadow: 0 -38px #ff0151, 0 -76px #ff0151, 0 -114px #ff0151, 0 -152px #ff0151, 0 -190px #ff0151, 0 -228px #ff0151, 0 -266px #ff0151, 0 -304px #ff0151, 0 -342px #ff0151, 0 -380px #ff0151, 0 -418px #ff0151, 0 -456px #ff0151, 0 -494px #ff0151, 0 -532px #ff0151;
-}
-@-moz-keyframes gloss {
- 0% {
- width: 0;
- height: 0;
- left: 170px;
- }
- 46% {
- width: 0;
- height: 0;
- left: 170px;
- }
- 52% {
- width: 232px;
- height: 250px;
- left: 54px;
- }
-}
-@-webkit-keyframes gloss {
- 0% {
- width: 0;
- height: 0;
- left: 170px;
- }
- 46% {
- width: 0;
- height: 0;
- left: 170px;
- }
- 52% {
- width: 232px;
- height: 250px;
- left: 54px;
- }
-}
-@keyframes gloss {
- 0% {
- width: 0;
- height: 0;
- left: 170px;
- }
- 46% {
- width: 0;
- height: 0;
- left: 170px;
- }
- 52% {
- width: 232px;
- height: 250px;
- left: 54px;
- }
-}
-#gloss {
- position: absolute;
- z-index: 13;
- width: 232px;
- height: 250px;
- top: 275px;
- left: 54px;
- border-bottom-left-radius: 116px 20px;
- border-bottom-right-radius: 116px 20px;
- -webkit-animation: gloss 8s linear;
- animation: gloss 8s linear;
-}
-#gameboy.transparent #gloss {
- background-color: rgba(242, 232, 251, 0.43125);
-}
-#gameboy.teal #gloss {
- background-color: #1abce0;
-}
-#gameboy.yellow #gloss {
- background-color: #faea58;
-}
-#gameboy.green #gloss {
- background-color: #97e77e;
-}
-#gameboy.purple #gloss {
- background-color: #5a5adf;
-}
-#gameboy.red #gloss {
- background-color: #ff1a62;
-}
-@-moz-keyframes speaker-holes {
- 0% {
- width: 0;
- }
- 41% {
- width: 0;
- }
- 42% {
- width: 5px;
- }
-}
-@-webkit-keyframes speaker-holes {
- 0% {
- width: 0;
- }
- 41% {
- width: 0;
- }
- 42% {
- width: 5px;
- }
-}
-@keyframes speaker-holes {
- 0% {
- width: 0;
- }
- 41% {
- width: 0;
- }
- 42% {
- width: 5px;
- }
-}
-#speaker-holes {
- background-color: #222222;
- width: 5px;
- height: 5px;
- position: absolute;
- bottom: 42px;
- left: 244px;
- z-index: 14;
- border-radius: 50%;
- box-shadow: 9.5px 8px #222222, 19px 16px #222222, 0px -19px #222222, 9.5px -11px #222222, 19px -3px #222222, 28.5px 5px #222222, 38px 13px #222222, 0px -38px #222222, 9.5px -30px #222222, 19px -22px #222222, 28.5px -14px #222222, 38px -6px #222222, 47.5px 2px #222222, 57px 10px #222222, 9.5px -49px #222222, 19px -41px #222222, 28.5px -33px #222222, 38px -25px #222222, 47.5px -17px #222222, 57px -9px #222222, 66.5px -1px #222222, 28px -52px #222222, 37.5px -44px #222222, 47px -36px #222222, 56.5px -28px #222222, 66px -20px #222222, 47px -56px #222222, 56.5px -48px #222222, 66px -40px #222222;
- -webkit-animation: speaker-holes 8s linear;
- animation: speaker-holes 8s linear;
-}
-@-moz-keyframes power {
- 0% {
- opacity: 0;
- background-color: #303030;
- box-shadow: none;
- }
- 36% {
- opacity: 0;
- }
- 37% {
- opacity: 1;
- }
- 39% {
- box-shadow: 5px 0 #222222, 8px 0 #222222, 12px 0 #222222, 15px 0 #222222, 19px 0 #222222, 22px 0 #222222;
- }
- 40% {
- box-shadow: 5px 0 #222222, 8px 0 #b0b0b0, 12px 0 #222222, 15px 0 #b0b0b0, 19px 0 #222222, 22px 0 #b0b0b0;
- }
- 54% {
- background-color: #303030;
- }
- 55% {
- background-color: #ff0151;
- }
-}
-@-webkit-keyframes power {
- 0% {
- opacity: 0;
- background-color: #303030;
- box-shadow: none;
- }
- 36% {
- opacity: 0;
- }
- 37% {
- opacity: 1;
- }
- 39% {
- box-shadow: 5px 0 #222222, 8px 0 #222222, 12px 0 #222222, 15px 0 #222222, 19px 0 #222222, 22px 0 #222222;
- }
- 40% {
- box-shadow: 5px 0 #222222, 8px 0 #b0b0b0, 12px 0 #222222, 15px 0 #b0b0b0, 19px 0 #222222, 22px 0 #b0b0b0;
- }
- 54% {
- background-color: #303030;
- }
- 55% {
- background-color: #ff0151;
- }
-}
-@keyframes power {
- 0% {
- opacity: 0;
- background-color: #303030;
- box-shadow: none;
- }
- 36% {
- opacity: 0;
- }
- 37% {
- opacity: 1;
- }
- 39% {
- box-shadow: 5px 0 #222222, 8px 0 #222222, 12px 0 #222222, 15px 0 #222222, 19px 0 #222222, 22px 0 #222222;
- }
- 40% {
- box-shadow: 5px 0 #222222, 8px 0 #b0b0b0, 12px 0 #222222, 15px 0 #b0b0b0, 19px 0 #222222, 22px 0 #b0b0b0;
- }
- 54% {
- background-color: #303030;
- }
- 55% {
- background-color: #ff0151;
- }
-}
-#power {
- position: absolute;
- z-index: 15;
- top: 95px;
- left: 35px;
- width: 8px;
- height: 8px;
- border-radius: 50%;
- background-color: #ff0151;
- box-shadow: 5px 0 #222222, 8px 0 #b0b0b0, 12px 0 #222222, 15px 0 #b0b0b0, 19px 0 #222222, 22px 0 #b0b0b0;
- -webkit-animation: power 8s linear;
- animation: power 8s linear;
-}
-#colors {
- position: fixed;
- bottom: 0px;
- right: 20px;
-
- font-family: 'Oxygen', Helvetica, arial, sans-serif;
- font-weight: 300;
- /* width: 100%; */
- margin: 0 auto 20px;
- text-align: center;
-}
-#colors span {
- vertical-align: top;
-}
-#colors .color {
- cursor: pointer;
- width: 20px;
- height: 20px;
- display: inline-block;
- margin-left: 5px;
- border-radius: 3px;
- border: 1px #ffffff;
-}
-#colors .color.active,
-#colors .color:hover {
- opacity: 1 !important;
-}
-#colors .color[data-color="transparent"] {
- border: 1px #9d9d9d dotted;
- opacity: 0.5;
- background: rgba(140, 46, 217, 0.125);
-}
-#colors .color[data-color="red"] {
- opacity: 0.5;
- background: #ff0151;
-}
-#colors .color[data-color="purple"] {
- opacity: 0.5;
- background: #5151dd;
-}
-#colors .color[data-color="green"] {
- opacity: 0.5;
- background: #85e367;
-}
-#colors .color[data-color="yellow"] {
- opacity: 0.5;
- background: #f9e52e;
-}
-#colors .color[data-color="teal"] {
- opacity: 0.5;
- background: #01b4dd;
-}
-
-a {
- color: lightblue;
-}
\ No newline at end of file
diff --git a/static/css/joystick.css b/static/css/joystick.css
deleted file mode 100644
index aba327c9..00000000
--- a/static/css/joystick.css
+++ /dev/null
@@ -1,137 +0,0 @@
-
- .abxy {
- position: absolute;
- width: 161px;
- height: 160px;
- top: 125px;
- left: 451px
- }
-
- .abxy .button {
- position: absolute;
- width: 54px;
- height: 54px;
- }
-
- .abxy .button.a {
- width: 53px;
- height: 53px;
- }
-
- .abxy .button.y {
- width: 55px;
- height: 54px;
- }
-
- .abxy .button.pressed {
- background-position: 0 -55px;
- margin-top: 6px;
- opacity: 1;
- }
-
- .abxy .button.pressed.a {
- background-position: 0 -54px;
- }
-
- .abxy .button.pressed.y {
- background-position: 0 -56px;
- }
-
- .abxy .a {
- background: url(https://gamepadviewer.com/xbox-assets-old/a.png);
- top: 108px;
- left: 55px;
- }
-
- .abxy .b {
- background: url(https://gamepadviewer.com/xbox-assets-old/b.png);
- top: 54px;
- right: 0px;
- }
-
- .abxy .x {
- background: url(https://gamepadviewer.com/xbox-assets-old/x.png);
- top: 54px;
- }
-
- .abxy .y {
- background: url(https://gamepadviewer.com/xbox-assets-old/y.png);
- left: 54px;
- }
-
-
- .dpad {
- background: url(https://gamepadviewer.com/xbox-assets-old/bg.png);
- background-position: -174px -273px;
- border-radius: 100%;
- position: absolute;
- width: 112px;
- height: 112px;
- top: 300px;
- left: 451px;
- }
-
- .dpad .face {
- position: absolute;
- font-size: 30px;
- line-height: 0;
- color: white;
- opacity: 0;
- font-family: 'FontAwesome';
- }
-
- .dpad .face.pressed {
- opacity: 1;
- }
-
- .dpad .face.up {
- left: 42px;
- top: 20px;
- }
-
- .dpad .face.up:after {
- content: "\f062";
- }
-
- .dpad .face.down {
- left: 42px;
- bottom: 20px;
- }
-
- .dpad .face.down:after {
- content: "\f063";
- }
-
- .dpad .face.left {
- top: 56px;
- left: 3px;
- }
-
- .dpad .face.left:after {
- content: "\f060";
- }
-
- .dpad .face.right {
- top: 56px;
- right: 3px;
- }
-
- .dpad .face.right:after {
- content: "\f061";
- }
-
-
- .dpad .joystick {
- background-color: blue;
- border-radius: 100%;
- opacity: 0.5;
- cursor: pointer;
- height: 50%;
- user-select: none;
- width: 50%;
- position: absolute;
- top: 50%;
- left: 50%;
- margin-top: -28px;
- margin-left: -28px;
- }
\ No newline at end of file
diff --git a/static/css/main.css b/static/css/main.css
index fc34d2d9..912abf4d 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -1,5 +1,5 @@
body {
- background-image: url('https://t3.ftcdn.net/jpg/02/41/14/36/500_F_241143639_RW6VdHbqYRM0yfNpDxDlWpj0uXWglAC2.jpg');
+ background-image: url('/static/img/500_F_241143639_RW6VdHbqYRM0yfNpDxDlWpj0uXWglAC2.jpg');
background-repeat: repeat;
}
@@ -153,7 +153,7 @@ body {
}
-.btn-big {
+.btn.big {
display: block;
padding-top: 5px;
text-align: center;
@@ -335,126 +335,141 @@ body {
#game-screen {
+ overflow: hidden;
width: 100%;
height: 100%;
display: none;
background-color: #222222;
}
+
#menu-screen {
- display:none;
- width: 100%;
- height: 100%;
- background-image: url('https://data.whicdn.com/images/275493408/original.gif');
+ position: relative; /*must not static*/
+
+ display: block;
+ overflow: hidden;
+ width: 256px;
+ height: 240px;
+
+ /* background-color: gray; */
+ background-image: url('/static/img/pixel_waterfall_bg__by_isohei-d4xntof.gif');
background-size: cover;
}
-#menu-screen #box-art {
- position: absolute;
- width:55%;
- height: 85%;
- top: 5px;
- left: 50%;
- -webkit-transform: translate(-50%, -0%);
- transform: translate(-50%, -0%);
- border: 1px solid #ddd;
+#menu-item-choice {
+ display: block;
+ position: absolute;
+
+ width: 100%;
+ height: 36px;
+ background-color: lightgreen;
+ opacity: 0.75;
+
+ top: 50%;
+ left: 0;
+ transform: translateY(-50%);
}
+#menu-container {
+ display: block;
+ position: absolute;
+ /* background-color: red; */
+
+
+ width: 100%;
+
+ top: 102px; /* 240px - 36 / 2 */
+ left: 0;
+}
+
+
+
@font-face {
font-family: 'YourFontName'; /*a name to be used later*/
- src: url('/static/fonts/8-Bit-Madness.ttf'); /*URL to font*/
+ src: url('/static/fonts/6809 chargen.ttf'); /*URL to font*/
}
-#menu-screen #title {
- position: absolute;
- width:100%;
- height: 10%;
- bottom: 0px;
- font-family: 'YourFontName';
- overflow: hidden;
-}
+.menu-item {
+ display: block;
+ position: relative;
-#menu-screen #title p {
- position: absolute;
width: 100%;
- height: 100%;
- margin: 0;
- text-align: center;
-
- /* Starting position */
- -moz-transform:translateX(50%);
- -webkit-transform:translateX(50%);
- transform:translateX(50%);
+ height: 36px; /* 35 + 1 border = 36px */
- /* Apply animation to this element */
- -moz-animation: horizontally 5s linear infinite alternate;
- -webkit-animation: horizontally 5s linear infinite alternate;
- animation: horizontally 5s linear infinite alternate;
+ font-family: 'YourFontName';
+ font-size: 19px;
+ /* border-top: 1px dashed blue; */
}
-/* Move it (define the animation) */
+.menu-item div {
+ overflow: hidden;
+ display: block;
+ position: absolute;
+
+ left: 15px;
+ top: 5px;
+ width: 226px;
+ height: 25px;
+
+ /* background-color: yellow; */
+}
+
+.menu-item div span {
+ position: absolute;
+
+ width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: pre;
+ text-align: center;
+}
+
+.menu-item div .pick {
+ overflow: unset;
+ -moz-animation: horizontally 4s linear infinite alternate;
+ -webkit-animation: horizontally 4s linear infinite alternate;
+ animation: horizontally 4s linear infinite alternate;
+}
+
+
@-moz-keyframes horizontally {
- 0% { -moz-transform: translateX(50%); }
- 100% { -moz-transform: translateX(-50%); }
+ 0% { transform: translateX(0%); }
+ 25% { transform: translateX(-20%); }
+ 50% { transform: translateX(0%); }
+ 75% { transform: translateX(20%); }
+ 100% { transform: translateX(0%); }
}
@-webkit-keyframes horizontally {
- 0% { -webkit-transform: translateX(50%); }
- 100% { -webkit-transform: translateX(-50%); }
+ 0% { transform: translateX(0%); }
+ 25% { transform: translateX(-20%); }
+ 50% { transform: translateX(0%); }
+ 75% { transform: translateX(20%); }
+ 100% { transform: translateX(0%); }
}
@keyframes horizontally {
- 0% { transform: translateX(50%); }
- 100% { transform: translateX(-50%); }
+ 0% { transform: translateX(0%); }
+ 25% { transform: translateX(-20%); }
+ 50% { transform: translateX(0%); }
+ 75% { transform: translateX(20%); }
+ 100% { transform: translateX(0%); }
}
-#menu-screen .arrow {
- position: absolute;
- width:20px;
- height: 20px;
- right: 10px;
- top: 50%;
- -moz-transform: translate(0%, -50%);
- -webkit-transform: translate(0%, -50%);
- transform: translate(0%, -50%);
+#noti-box {
+ display: none;
+ padding: 5px 10px 0 10px;
+ height: 20px;
+ background-color: #ddd;
+ opacity: 0.8;
+ position: absolute;
- -moz-animation: breathing 1s infinite normal;
- -webkit-animation: breathing 1s infinite normal;
- animation: breathing 1s infinite normal;
-}
+ border: 5px #000;
+ border-radius: 30px;
+
+ left: 50%;
+ transform: translateX(-50%);
+ bottom: 35px;
-#menu-screen .left {
- left: 10px;
- -webkit-transform: scaleX(-1) translate(0%, -50%);
- -moz-transform: scaleX(-1) translate(0%, -50%);
- transform: scaleX(-1) translate(0%, -50%);
-
- -webkit-animation: breathing 1s infinite normal;
- -moz-animation: breathing 1s infinite normal;
- animation: breathing 1s infinite normal;
-}
-
-
-@-webkit-keyframes breathing {
- 0% { opacity: 1; }
- 25% { opacity: 0.5; }
- 50% { opacity: 0; }
- 75% { opacity: 0.5; }
- 100% { opacity: 1; }
-}
-
-@-moz-keyframes breathing {
- 0% { opacity: 1; }
- 25% { opacity: 0.5; }
- 50% { opacity: 0; }
- 75% { opacity: 0.5; }
- 100% { opacity: 1; }
-}
-
-@keyframes breathing {
- 0% { opacity: 1; }
- 25% { opacity: 0.5; }
- 50% { opacity: 0; }
- 75% { opacity: 0.5; }
- 100% { opacity: 1; }
-}
+ font-size: 12px;
+}
\ No newline at end of file
diff --git a/static/fonts/6809 chargen.ttf b/static/fonts/6809 chargen.ttf
new file mode 100755
index 00000000..bb816087
Binary files /dev/null and b/static/fonts/6809 chargen.ttf differ
diff --git a/static/gameboy2.html b/static/game.html
similarity index 61%
rename from static/gameboy2.html
rename to static/game.html
index c94a4964..5c037e2b 100644
--- a/static/gameboy2.html
+++ b/static/game.html
@@ -5,8 +5,16 @@
-
-
+
+
+
+
+
+
+
+
+
+
@@ -22,23 +30,22 @@
-
+
+
+
- load
- save
- start
- quit
+ load
+ save
+ play
+ quit
-
+
+
+
+ Oh my god
@@ -63,7 +73,7 @@
DEBUG = true;
-
+
@@ -77,6 +87,8 @@
+
+
- 
-