@import url(https://fonts.googleapis.com/css?family=Righteous);/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
html {
font-family: sans-serif;
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */ }
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0; }
/* HTML5 display definitions
========================================================================== */
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
* 2. Add the correct display in IE.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
/* 1 */
display: block; }
/**
* Add the correct display in IE 9-.
*/
audio,
canvas,
progress,
video {
display: inline-block; }
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0; }
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline; }
/**
* Add the correct display in IE 10-.
* 1. Add the correct display in IE.
*/
template,
[hidden] {
display: none; }
/* Links
========================================================================== */
/**
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
a {
background-color: transparent;
/* 1 */
-webkit-text-decoration-skip: objects;
/* 2 */ }
/**
* Remove the outline on focused links when they are also active or hovered
* in all browsers (opinionated).
*/
a:active,
a:hover {
outline-width: 0; }
/* Text-level semantics
========================================================================== */
/**
* 1. Remove the bottom border in Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none;
/* 1 */
text-decoration: underline;
/* 2 */
text-decoration: underline dotted;
/* 2 */ }
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/
b,
strong {
font-weight: inherit; }
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder; }
/**
* Add the correct font style in Android 4.3-.
*/
dfn {
font-style: italic; }
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0; }
/**
* Add the correct background and color in IE 9-.
*/
mark {
background-color: #ff0;
color: #000; }
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%; }
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline; }
sub {
bottom: -0.25em; }
sup {
top: -0.5em; }
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10-.
*/
img {
border-style: none; }
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden; }
/* Grouping content
========================================================================== */
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */ }
/**
* Add the correct margin in IE 8.
*/
figure {
margin: 1em 40px; }
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box;
/* 1 */
height: 0;
/* 1 */
overflow: visible;
/* 2 */ }
/* Forms
========================================================================== */
/**
* 1. Change font properties to `inherit` in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
select,
textarea {
font: inherit;
/* 1 */
margin: 0;
/* 2 */ }
/**
* Restore the font weight unset by the previous rule.
*/
optgroup {
font-weight: bold; }
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input {
/* 1 */
overflow: visible; }
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select {
/* 1 */
text-transform: none; }
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/
button,
html [type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
/* 2 */ }
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0; }
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText; }
/**
* Change the border, margin, and padding in all browsers (opinionated).
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em; }
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box;
/* 1 */
color: inherit;
/* 2 */
display: table;
/* 1 */
max-width: 100%;
/* 1 */
padding: 0;
/* 3 */
white-space: normal;
/* 1 */ }
/**
* Remove the default vertical scrollbar in IE.
*/
textarea {
overflow: auto; }
/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */ }
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto; }
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */ }
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; }
/**
* Correct the text style of placeholders in Chrome, Edge, and Safari.
*/
::-webkit-input-placeholder {
color: inherit;
opacity: 0.54; }
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */ }
/* Prefixer*/
/*/ @author Hugo Giraudel*/
/* Usage*/
/* .selector {*/
/* @include prefix(transform, rotate(45deg), webkit ms);*/
/* }*/
/* Usage*/
/* .button{*/
/* @include linearGradient(#fff, #000);*/
/* }*/
/* Usage*/
/* .main{*/
/* width:1100px;*/
/* @include breakpoint(940){ width:100%; }*/
/* }*/
/* Usage*/
/* @include link(white, blue, green, red);*/
html {
box-sizing: border-box; }
*,
*::after,
*::before {
box-sizing: inherit;
margin: 0 auto;
padding: 0; }
body {
font-size: 18px;
font-family: "Righteous", cursive;
text-transform: uppercase;
text-align: center;
font-weight: 400;
letter-spacing: 1px;
color: #EEE;
background: transparent;
overflow: hidden; }
a {
text-decoration: none;
color: #fff;
outline: none;
cursor: pointer; }
h1 {
font-size: 2em; }
h2 {
font-size: 1.5em; }
p {
font-size: 1em; }
canvas {
position: absolute;
top: 0;
left: 0;
z-index: 0; }
figure {
padding: 0;
margin: 0; }
.game-loader {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: #273355; }
.game-loader__planet {
filter: url("#goo");
position: relative;
width: 100vw;
height: 100vw; }
.game-loader__planet::after {
content: '';
display: block;
width: 7vw;
height: 7vw;
border-radius: 50%;
background: #11DBD9;
box-shadow: #11DBD9 0 0 24px 4px;
margin: 0 auto;
position: absolute;
top: 46.5vw;
left: 46.5vw;
animation: scale 16s linear infinite, color5 8s linear 1; }
.game-loader__planet .loader-mini1 {
position: absolute;
width: 3vw;
height: 3vw;
border-radius: 50%;
background: #11DBD9;
top: 48.5vw;
left: 48.5vw;
animation: move1 8s linear 1, color1 8s linear 1; }
.game-loader__planet .loader-mini2 {
position: absolute;
width: 3.6vw;
height: 3.6vw;
border-radius: 50%;
background: #11DBD9;
top: 48.5vw;
left: 48.5vw;
animation: move2 9s linear 1, color2 9s linear 1; }
.game-loader__planet .loader-mini3 {
position: absolute;
width: 4.2vw;
height: 4.2vw;
border-radius: 50%;
background: #11DBD9;
top: 48.5vw;
left: 48.5vw;
animation: move3 10s linear 1, color3 10s linear 1; }
.game-loader__planet .loader-mini4 {
position: absolute;
width: 4.8vw;
height: 4.8vw;
border-radius: 50%;
background: #11DBD9;
top: 48.5vw;
left: 48.5vw;
animation: move4 11s linear 1, color4 11s linear 1; }
.game-loader__planet .loader-radius1 {
position: absolute;
width: 12vw;
height: 12vw;
border-radius: 50%;
border: 0.5px solid #11DBD9;
opacity: 0.2;
background: transparent;
top: 44vw;
left: 44vw;
transform: scale(0);
animation: orbit1 8s linear 1; }
.game-loader__planet .loader-radius2 {
position: absolute;
width: 18vw;
height: 18vw;
border-radius: 50%;
border: 0.5px solid #11DBD9;
opacity: 0.2;
background: transparent;
transform: scale(0);
top: 41vw;
left: 41vw;
animation: orbit2 9s linear 1; }
.game-loader__planet .loader-radius3 {
position: absolute;
width: 24vw;
height: 24vw;
border-radius: 50%;
border: 0.5px solid #11DBD9;
opacity: 0.2;
background: transparent;
transform: scale(0);
top: 38vw;
left: 38vw;
animation: orbit3 10s linear 1; }
.game-loader__planet .loader-radius4 {
position: absolute;
width: 30vw;
height: 30vw;
border-radius: 50%;
border: 0.5px solid #11DBD9;
opacity: 0.2;
background: transparent;
transform: scale(0);
top: 35vw;
left: 35vw;
animation: orbit4 11s linear 1; }
/* Intro*/
.game-intro {
position: relative;
height: 100vh;
width: 100vw;
background: #273355;
overflow: hidden; }
.decor-intro-star {
position: relative;
z-index: 500;
opacity: 0.8;
border-radius: 50%;
box-shadow: 0px 0px 24px 3px #11DBDA;
background: #11DBD9;
animation: star 8s linear infinite; }
.decor-intro-star::before {
position: absolute;
display: block;
content: "";
top: -50%;
left: -50%;
width: 200%;
height: 200%;
z-index: 400;
opacity: 0.2;
border-radius: 50%;
background: #11DBD9; }
.star--1 {
position: absolute;
display: block;
content: "";
top: 0;
left: 0;
top: 10%;
left: 90%;
width: 0.8em;
height: 0.8em; }
.star--2 {
position: absolute;
display: block;
content: "";
top: 0;
left: 0;
top: 85%;
left: 10%;
width: 0.8em;
height: 0.8em; }
.star--3 {
position: absolute;
display: block;
content: "";
top: 0;
left: 0;
top: 91%;
left: 58%;
width: 0.6em;
height: 0.6em; }
.star--4 {
position: absolute;
display: block;
content: "";
top: 0;
left: 0;
top: 87%;
left: 86%;
width: 0.6em;
height: 0.6em; }
.star--5 {
position: absolute;
display: block;
content: "";
top: 0;
left: 0;
top: 70%;
left: 36%;
width: 0.5em;
height: 0.5em; }
.star--6 {
position: absolute;
display: block;
content: "";
top: 0;
left: 0;
top: 10%;
left: 36%;
width: 0.6em;
height: 0.6em; }
.star--7 {
position: absolute;
display: block;
content: "";
top: 0;
left: 0;
top: 14%;
left: 8%;
width: 0.3em;
height: 0.3em; }
.decor-intro-gradient {
position: absolute;
display: block;
content: "";
top: 0;
left: 0;
top: 0%;
left: 33%;
height: 100%;
width: 67%; }
.decor-intro-planet {
position: absolute;
display: block;
content: "";
top: 0;
left: 0;
top: 0%;
left: 0%;
height: 41em;
width: 45em;
border-radius: 50%;
z-index: 400;
background: transparent url(img/planet.png) no-repeat center center;
background-size: 70%; }
.decor-intro-planet::before {
position: absolute;
display: block;
content: "";
top: 23%;
left: 27%;
height: 52%;
width: 47%;
z-index: 1000;
border-radius: 50%;
background: transparent;
box-shadow: 0px 0px 123px 53px #11DBD9;
animation: illumination 10s linear infinite; }
.game__btn-menu {
position: absolute;
content: "";
display: block;
top: 2%;
right: 1%;
opacity: 0.5;
width: 50px;
height: 50px;
z-index: 100;
cursor: pointer; }
.game__btn-menu:hover, .game__btn-menu:active {
opacity: 1; }
.game-intro__start {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 10;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; }
.start__title {
position: absolute;
top: 20%;
left: 10%;
width: 29vw;
height: 34vh;
z-index: 100;
font-size: 9vh;
text-align: center;
color: #EEE;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1; }
.btn-play {
position: absolute;
top: 58%;
left: 15%;
width: 13rem;
height: 13rem;
z-index: 2000;
cursor: pointer;
background: transparent url(img/planet2.png) no-repeat center center;
background-size: 100%;
transition: 1s; }
.btn-play:hover, .btn-play:active {
transform: scale(1.5); }
.btn-info {
position: absolute;
top: 5%;
left: 77%;
z-index: 100;
background: transparent url(img/ufo.png) no-repeat 50% 50%;
width: 12rem;
height: 12rem;
z-index: 2000;
cursor: pointer;
background-size: 70%;
transition: 1s;
transform: rotate(30deg); }
.btn-info:hover, .btn-info:active {
animation-play-state: paused;
transform: scale(1.5) rotate(30deg); }
.tooltip-content {
position: absolute;
width: 4em;
padding: 0.3em;
bottom: 3em;
left: 1em;
border-radius: 20px;
text-align: center;
color: #fff;
opacity: 0;
cursor: default;
pointer-events: none;
-webkit-font-smoothing: antialiased;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s; }
.tooltip--info {
background: #e35583; }
.tooltip--play {
background: #e35583; }
.btn-play:hover .tooltip-content {
opacity: 1;
-webkit-transform: translate3d(0, 50%, 0) rotate3d(0, 0, 0, 0);
transform: translate3d(0, 50%, 0) rotate3d(0, 0, 0, 0);
pointer-events: auto; }
.btn-info:hover .tooltip-content {
opacity: 1;
-webkit-transform: translate3d(0, 50%, 0) rotate(-30deg);
transform: translate3d(0, 50%, 0) rotate(-30deg);
pointer-events: auto; }
.game__octocat {
position: absolute;
content: "";
display: block;
width: 7em;
height: 7em;
bottom: 2.6em;
right: 2em;
z-index: 2000;
background: transparent url(img/github.png) no-repeat center center;
background-size: 70%;
animation: octocat 6s linear infinite; }
.game__octocat:hover, .game__octocat:active {
animation-play-state: paused;
transform: scale(1.5); }
.game__copyright {
position: absolute;
content: "";
display: block;
width: 7em;
height: 7em;
bottom: 0;
left: 0; }
.copyright__link {
vertical-align: middle;
display: block;
padding: 1%; }
/* Intro-end*/
.game__music-player {
background: white;
width: 10vw;
height: 25vh;
/* margin: -3rem 0 0 -10rem; */
top: 40vh;
padding: 0.5em;
right: 0;
position: absolute;
box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.5);
background: rgba(12, 24, 49, 0.3);
display: flex;
transition: 0.6s;
z-index: 2001; }
.music-player__progress {
width: 100%;
flex: 1;
display: flex;
background-color: rgba(255, 255, 255, 0.73); }
.music-player__progress .progress__bar {
flex: 1;
height: 100%;
width: 2vw;
background-color: #f54d4a; }
.music-player__title {
flex: 12;
display: flex;
flex-direction: column;
/* height: 2em; */
padding: 0em 0em; }
.music-player__title .albumn-cover {
width: 5.5rem;
height: 5.5rem;
padding: 1em 0 0 0; }
.music-player__title .albumn-cover img {
max-width: 100%;
max-height: 100%; }
.track-name {
padding: .75rem;
writing-mode: tb-rl; }
.track-name a {
color: #858585;
text-decoration: none; }
.track-name a:hover {
text-decoration: underline; }
.track-name h1 {
font-size: 1.25em;
margin: 0; }
.track-name h2 {
font-size: .75em;
font-weight: 300;
color: #858585;
padding: 0 0 0.4em 0; }
.track-name h2 a {
color: #858585; }
.track-name h2 a:hover {
color: #858585; }
i {
opacity: 0.7; }
.play {
display: none; }
.player--active {
transition: 0.6s;
-webkit-transform: translate(7vw, 0);
transform: translate(7vw, 0); }
.play--active {
display: flex;
flex-direction: column; }
i:hover {
opacity: 1; }
.controls {
width: 100%;
/* margin-top: 2em; */
flex: 1;
display: flex;
flex-direction: column; }
.controls ul {
margin: 0;
padding: 0;
flex: 1;
display: flex;
flex-direction: column; }
.controls ul li {
flex: 1;
list-style: none;
text-align: center;
position: relative;
height: 2rem;
line-height: 2rem;
cursor: pointer; }
.controls ul li.active, .controls ul li:hover {
color: #fff; }
/* Info*/
.game-intro__info, .info-overlay {
position: absolute;
display: block;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2001;
display: none;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center; }
.info--open {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.info-overlay {
background: rgba(55, 58, 71, 0.5);
visibility: hidden;
z-index: 500; }
.info--open .info-overlay {
visibility: visible;
pointer-events: none; }
.info-content {
width: 50%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
background: white;
color: #757575;
padding: 2em;
text-align: center;
position: relative;
z-index: 2002;
visibility: hidden; }
.info-content__btn-close {
-webkit-box-flex: 1px;
-ms-flex: 1px;
flex: 1px;
position: relative;
height: 1.5em;
width: 1.5em;
cursor: pointer;
-ms-flex-item-align: end;
align-self: flex-end;
content: "";
padding: 1em;
margin: 0; }
.info-content__btn-close::before {
position: absolute;
display: block;
content: "";
top: 0;
left: 0;
top: -50%;
left: 50%;
height: 200%;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border: 2px solid #212121; }
.info-content__btn-close::after {
position: absolute;
display: block;
content: "";
top: 0;
left: 0;
top: -50%;
left: 50%;
height: 200%;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
border: 2px solid #212121; }
.info--open .info-content,
.info--close .info-content {
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards; }
.info--open .info-content {
-webkit-animation-name: modal-open;
animation-name: modal-open;
visibility: visible; }
.info--close .info-content {
-webkit-animation-name: modal-close;
animation-name: modal-close;
visibility: hidden; }
.info-content__title {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
font-size: 2em;
padding: 0em 0em 1em 0;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center; }
.info-content__text {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 1em 1em 1em 1em;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center; }
/* Info end*/
/* Level*/
.game-level {
position: relative;
height: 400vh;
width: 100vw;
background: -moz-linear-gradient(90deg, #273355 0%, #5f2a7a 25%, rgba(23, 167, 207, 0.8) 50%, #ffa283 75%, #370563 100%);
/* ff3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #370563), color-stop(25%, rgba(23, 167, 207, 0.8)), color-stop(50%, #ffa283), color-stop(75%, #5f2a7a), color-stop(100%, #273355));
/* safari4+,chrome */
background: -webkit-linear-gradient(90deg, #273355 0%, #5f2a7a 25%, rgba(23, 167, 207, 0.8) 50%, #ffa283 75%, #370563 100%);
/* safari5.1+,chrome10+ */
background: -o-linear-gradient(90deg, #273355 0%, #5f2a7a 25%, rgba(23, 167, 207, 0.8) 50%, #ffa283 75%, #370563 100%);
/* opera 11.10+ */
background: -ms-linear-gradient(90deg, #273355 0%, #5f2a7a 25%, rgba(23, 167, 207, 0.8) 50%, #ffa283 75%, #370563 100%);
/* ie10+ */
background: linear-gradient(0deg, #273355 0%, #5f2a7a 25%, rgba(23, 167, 207, 0.8) 50%, #ffa283 75%, #370563 100%);
/* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#370563', endColorstr='#273355',GradientType=0 );
/* ie6-9 */ }
.game-level__canvas-block {
position: fixed;
top: 0;
left: 0;
z-index: 0;
width: 100vw;
height: 100vh; }
.game-level__start {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; }
.game__btn-music {
position: fixed;
top: 2%;
right: 1%;
display: inline-block;
z-index: 0;
cursor: pointer;
width: 50px;
height: 50px;
opacity: 0.5;
content: "";
display: block; }
.game__btn-music:hover, .game__btn-music:active {
opacity: 1; }
.btn--musicon {
background: transparent url(img/musicon.png) no-repeat; }
.btn--musicoff {
background: transparent url(img/musicoff.png) no-repeat; }
.game__btn-back {
position: fixed;
content: "";
display: block;
top: 2%;
left: 1%;
background: transparent url(img/Arrow-Down.png) no-repeat right;
opacity: 0.5;
width: 50px;
height: 50px;
z-index: 0;
cursor: pointer; }
.game__btn-back:hover, .game__btn-back:active {
opacity: 1; }
.game-interface {
position: fixed;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
min-height: 10vh;
bottom: 0;
left: 0;
background: transparent; }
.game-interface_life, .game-interface_score {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: left;
padding-left: 2%;
letter-spacing: 10px;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
-webkit-user-select: none;
user-select: none; }
.game-interface_score {
letter-spacing: 1px;
padding-right: 2%;
padding-left: 0;
text-align: right; }
.score-count {
margin-left: 2%;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
-webkit-user-select: none;
user-select: none; }
.game-overlay {
position: absolute;
display: block;
content: "";
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 100%;
background: rgba(55, 58, 71, 0.5);
visibility: hidden;
z-index: 500; }
.overlay--active {
visibility: visible; }
.game-overlay__warn {
position: absolute;
display: block;
content: "";
top: 0;
left: 0;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; }
.warn__title {
-webkit-box-flex: 3;
-ms-flex: 3;
flex: 3;
font-size: 4em;
margin: 0; }
.warn__score {
-webkit-box-flex: 2;
-ms-flex: 2;
flex: 2;
margin-bottom: 2em; }
.warn__btn {
padding: 1em 4em;
border-radius: 50px;
background-color: #c65856;
color: #EEE;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
cursor: pointer;
position: relative;
-webkit-transition: background-color 0.3s, color 0.3s;
transition: background-color 0.3s, color 0.3s;
box-shadow: 0 5px 6px rgba(0, 0, 0, 0.2); }
.warn__btn::before, .warn__btn::after {
position: absolute;
display: block;
content: "";
top: 0;
left: 0;
top: -20px;
left: -20px;
bottom: -20px;
right: -20px;
border-radius: 50px;
background: inherit;
z-index: -1;
opacity: 0.7;
-webkit-transform: scale3d(0.8, 0.5, 1);
transform: scale3d(0.8, 0.5, 1); }
.warn__btn:hover, .warn__btn:active {
-webkit-transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
background-color: #c65856;
color: #ECEFF1;
-webkit-animation: btn-click 0.3s forwards;
animation: btn-click 0.3s forwards; }
.warn__btn:hover::before, .warn__btn:active::before {
-webkit-animation: btn-click-2 0.3s 0.3s forwards;
animation: btn-click-2 0.3s 0.3s forwards; }
/* Level end*/
/* Animation*/
@keyframes star {
0% {
transform: scale(1); }
50% {
transform: scale(1.5); }
100% {
transform: scale(1); } }
@keyframes illumination {
0% {
box-shadow: 0px 0px 123px 53px #11DBD9; }
50% {
box-shadow: 0px 0px 123px 33px #11DBD9; }
100% {
box-shadow: 0px 0px 123px 53px #11DBD9; } }
@keyframes ufo {
0% {
-webkit-transform: translateX(-10%) translateY(10%) rotate(30deg);
transform: translateX(-10%) translateY(10%) rotate(30deg); }
25% {
-webkit-transform: translateX(-15%) translateY(15%) rotate(30deg);
transform: translateX(-15%) translateY(15%) rotate(30deg); }
50% {
-webkit-transform: translateX(-10%) translateY(10%) rotate(30deg);
transform: translateX(-10%) translateY(10%) rotate(30deg); }
75% {
-webkit-transform: translateX(-5%) translateY(5%) rotate(30deg);
transform: translateX(-5%) translateY(5%) rotate(30deg); }
100% {
-webkit-transform: translateX(-10%) translateY(10%) rotate(30deg);
transform: translateX(-10%) translateY(10%) rotate(30deg); } }
@keyframes octocat {
0% {
-webkit-transform: translateX(-10%) translateY(10%) rotate(-30deg);
transform: translateX(-10%) translateY(10%) rotate(-30deg); }
25% {
-webkit-transform: translateX(-15%) translateY(15%) rotate(-30deg);
transform: translateX(-15%) translateY(15%) rotate(-30deg); }
50% {
-webkit-transform: translateX(-10%) translateY(10%) rotate(-30deg);
transform: translateX(-10%) translateY(10%) rotate(-30deg); }
75% {
-webkit-transform: translateX(-5%) translateY(5%) rotate(-30deg);
transform: translateX(-5%) translateY(5%) rotate(-30deg); }
100% {
-webkit-transform: translateX(-10%) translateY(10%) rotate(-30deg);
transform: translateX(-10%) translateY(10%) rotate(-30deg); } }
/* Btn*/
@-webkit-keyframes btn-click {
60% {
-webkit-transform: scale3d(0.8, 0.8, 1);
transform: scale3d(0.8, 0.8, 1); }
85% {
-webkit-transform: scale3d(1.1, 1.1, 1);
transform: scale3d(1.1, 1.1, 1); }
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); } }
@keyframes btn-click {
60% {
-webkit-transform: scale3d(0.8, 0.8, 1);
transform: scale3d(0.8, 0.8, 1); }
85% {
-webkit-transform: scale3d(1.1, 1.1, 1);
transform: scale3d(1.1, 1.1, 1); }
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); } }
@-webkit-keyframes btn-click-2 {
to {
opacity: 0;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); } }
@keyframes btn-click-2 {
to {
opacity: 0;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); } }
/* Modal*/
@-webkit-keyframes modal-open {
0% {
opacity: 0;
-webkit-transform: scale3d(1.1, 1.1, 1);
transform: scale3d(1.1, 1.1, 1); }
100% {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); } }
@keyframes modal-open {
0% {
opacity: 0;
-webkit-transform: scale3d(1.1, 1.1, 1);
transform: scale3d(1.1, 1.1, 1); }
100% {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); } }
@-webkit-keyframes modal-close {
0% {
opacity: 1; }
100% {
opacity: 0;
-webkit-transform: scale3d(0.9, 0.9, 1);
transform: scale3d(0.9, 0.9, 1); } }
@keyframes modal-close {
0% {
opacity: 1; }
100% {
opacity: 0;
-webkit-transform: scale3d(0.9, 0.9, 1);
transform: scale3d(0.9, 0.9, 1); } }
@keyframes move1 {
0% {
transform: skewX(5deg) rotate(0deg) translateY(0em) rotate(0deg) skewX(-5deg) rotate(0deg); }
10% {
transform: skewX(5deg) rotate(180deg) translateY(-6vw) rotate(-180deg) skewX(-5deg) rotate(180deg); }
25% {
transform: skewX(5deg) rotate(360deg) translateY(-12vw) rotate(-360deg) skewX(-5deg) rotate(360deg); }
50% {
transform: skewX(5deg) rotate(720deg) translateY(-12vw) rotate(720deg) skewX(-5deg) rotate(720deg); }
75% {
transform: skewX(5deg) rotate(1080deg) translateY(-12vw) rotate(-1080deg) skewX(-5deg) rotate(1080deg); }
90% {
transform: skewX(5deg) rotate(1260deg) translateY(-6vw) rotate(-1260deg) skewX(-5deg) rotate(1260deg); }
100% {
transform: skewX(5deg) rotate(1440deg) translateY(0em) rotate(-1440deg) skewX(-5deg) rotate(1440deg); } }
@keyframes move2 {
0% {
transform: skewX(5deg) rotate(0deg) translateY(0em) rotate(0deg) skewX(-5deg) rotate(0deg); }
10% {
transform: skewX(5deg) rotate(180deg) translateY(-9vw) rotate(-180deg) skewX(-5deg) rotate(180deg); }
25% {
transform: skewX(5deg) rotate(360deg) translateY(-18vw) rotate(-360deg) skewX(-5deg) rotate(360deg); }
50% {
transform: skewX(5deg) rotate(720deg) translateY(-18vw) rotate(720deg) skewX(-5deg) rotate(720deg); }
75% {
transform: skewX(5deg) rotate(1080deg) translateY(-18vw) rotate(-1080deg) skewX(-5deg) rotate(1080deg); }
90% {
transform: skewX(5deg) rotate(1260deg) translateY(-9vw) rotate(-1260deg) skewX(-5deg) rotate(1260deg); }
100% {
transform: skewX(5deg) rotate(1440deg) translateY(0em) rotate(-1440deg) skewX(-5deg) rotate(1440deg); } }
@keyframes move3 {
0% {
transform: skewX(5deg) rotate(0deg) translateY(0em) rotate(0deg) skewX(-5deg) rotate(0deg); }
10% {
transform: skewX(5deg) rotate(180deg) translateY(-12vw) rotate(-180deg) skewX(-5deg) rotate(180deg); }
25% {
transform: skewX(5deg) rotate(360deg) translateY(-24vw) rotate(-360deg) skewX(-5deg) rotate(360deg); }
50% {
transform: skewX(5deg) rotate(720deg) translateY(-24vw) rotate(720deg) skewX(-5deg) rotate(720deg); }
75% {
transform: skewX(5deg) rotate(1080deg) translateY(-24vw) rotate(-1080deg) skewX(-5deg) rotate(1080deg); }
90% {
transform: skewX(5deg) rotate(1260deg) translateY(-12vw) rotate(-1260deg) skewX(-5deg) rotate(1260deg); }
100% {
transform: skewX(5deg) rotate(1440deg) translateY(0em) rotate(-1440deg) skewX(-5deg) rotate(1440deg); } }
@keyframes move4 {
0% {
transform: skewX(5deg) rotate(0deg) translateY(0em) rotate(0deg) skewX(-5deg) rotate(0deg); }
10% {
transform: skewX(5deg) rotate(180deg) translateY(-15vw) rotate(-180deg) skewX(-5deg) rotate(180deg); }
25% {
transform: skewX(5deg) rotate(360deg) translateY(-30vw) rotate(-360deg) skewX(-5deg) rotate(360deg); }
50% {
transform: skewX(5deg) rotate(720deg) translateY(-30vw) rotate(720deg) skewX(-5deg) rotate(720deg); }
75% {
transform: skewX(5deg) rotate(1080deg) translateY(-30vw) rotate(-1080deg) skewX(-5deg) rotate(1080deg); }
90% {
transform: skewX(5deg) rotate(1260deg) translateY(-15vw) rotate(-1260deg) skewX(-5deg) rotate(1260deg); }
100% {
transform: skewX(5deg) rotate(1440deg) translateY(0em) rotate(-1440deg) skewX(-5deg) rotate(1440deg); } }
@keyframes scale {
0% {
transform: scale(1.5); }
50% {
transform: scale(1); }
100% {
transform: scale(1.5); } }
@keyframes orbit1 {
0% {
transform: scale(0); }
10% {
transform: scale(1); }
25% {
transform: scale(2.2); }
35% {
transform: scale(2.1); }
50% {
transform: scale(2); }
65% {
transform: scale(2.1); }
75% {
transform: scale(2); }
90% {
transform: scale(1); }
100% {
transform: scale(0); } }
@keyframes orbit2 {
0% {
transform: scale(0); }
10% {
transform: scale(1); }
25% {
transform: scale(2.2); }
35% {
transform: scale(2.1); }
50% {
transform: scale(2); }
65% {
transform: scale(2.1); }
75% {
transform: scale(2); }
90% {
transform: scale(1); }
100% {
transform: scale(0); } }
@keyframes orbit3 {
0% {
transform: scale(0); }
10% {
transform: scale(1); }
25% {
transform: scale(2.2); }
35% {
transform: scale(2.1); }
50% {
transform: scale(2); }
65% {
transform: scale(2.1); }
75% {
transform: scale(2); }
90% {
transform: scale(1); }
100% {
transform: scale(0); } }
@keyframes orbit4 {
0% {
transform: scale(0); }
10% {
transform: scale(1); }
25% {
transform: scale(2.2); }
35% {
transform: scale(2.1); }
50% {
transform: scale(2); }
65% {
transform: scale(2.1); }
75% {
transform: scale(2); }
90% {
transform: scale(1); }
100% {
transform: scale(0); } }
@keyframes color1 {
10% {
background: #11DBD9; }
50% {
background: #FF217B; }
90% {
background: #11DBD9; } }
@keyframes color2 {
10% {
background: #11DBD9; }
50% {
background: #FF7878; }
90% {
background: #11DBD9; } }
@keyframes color3 {
10% {
background: #11DBD9; }
50% {
background: #FFA283; }
90% {
background: #11DBD9; } }
@keyframes color4 {
10% {
background: #11DBD9; }
50% {
background: #962A4E; }
90% {
background: #11DBD9; } }
@keyframes color5 {
10% {
background: #11DBD9;
box-shadow: #11DBD9 0 0 24px 4px; }
50% {
background: #13C2D3;
box-shadow: #13C2D3 0 0 24px 4px; }
90% {
background: #11DBD9;
box-shadow: #11DBD9 0 0 24px 4px; } }