flappy-es/web/static/css/main.css

/*
   Copyright 2014 Nebez Briefkani
   floppybird - main.css
   
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
*/

@-webkit-keyframes animLand {
   0% { background-position: 0px 0px; }
   100% { background-position: -335px 0px; }
}
@-moz-keyframes animLand {
   0% { background-position: 0px 0px; }
   100% { background-position: -335px 0px; }
}
@-o-keyframes animLand {
   0% { background-position: 0px 0px; }
   100% { background-position: -335px 0px; }
}
@keyframes animLand {
   0% { background-position: 0px 0px; }
   100% { background-position: -335px 0px; }
}

@-webkit-keyframes animSky {
   0% { background-position: 0px 100%; }
   100% { background-position: -275px 100%; }
}
@-moz-keyframes animSky {
   0% { background-position: 0px 100%; }
   100% { background-position: -275px 100%; }
}
@-o-keyframes animSky {
   0% { background-position: 0px 100%; }
   100% { background-position: -275px 100%; }
}
@keyframes animSky {
   0% { background-position: 0px 100%; }
   100% { background-position: -275px 100%; }
}

@-webkit-keyframes animBird {
   from { background-position: 0px 0px; }
   to { background-position: 0px -96px; }
}
@-moz-keyframes animBird {
   from { background-position: 0px 0px; }
   to { background-position: 0px -96px; }
}
@-o-keyframes animBird {
   from { background-position: 0px 0px; }
   to { background-position: 0px -96px; }
}
@keyframes animBird {
   from { background-position: 0px 0px; }
   to { background-position: 0px -96px; }
}

@-webkit-keyframes animPipe {
   0% { left: 900px; }
   100% { left: -100px; }
}
@-moz-keyframes animPipe {
   0% { left: 900px; }
   100% { left: -100px; }
}
@-o-keyframes animPipe {
   0% { left: 900px; }
   100% { left: -100px; }
}
@keyframes animPipe {
   0% { left: 900px; }
   100% { left: -100px; }
}

@-webkit-keyframes animCeiling {
   0% { background-position: 0px 0px; }
   100% { background-position: -63px 0px; }
}
@-moz-keyframes animCeiling {
   0% { background-position: 0px 0px; }
   100% { background-position: -63px 0px; }
}
@-o-keyframes animCeiling {
   0% { background-position: 0px 0px; }
   100% { background-position: -63px 0px; }
}
@keyframes animCeiling {
   0% { background-position: 0px 0px; }
   100% { background-position: -63px 0px; }
}


*,
*:before,
*:after
{
   /* border box */
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   /* gpu acceleration */
   -webkit-transition: translate3d(0,0,0);
   /* select disable */
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

#gamecontainer
{
   position: relative;
   width: 300px;
   height: 250px;

   margin: 3rem auto;
}

/*
Screen - Game
*/
#gamescreen
{
   position: absolute;
   width: 300px;
   height: 250px;
}

#sky
{
   position: absolute;
   top: 0;
   width: 300px;
   height: 200px;
   background-image: url('../assets/sky.png');
   background-repeat: repeat-x;
   background-position: 0px 100%;
   background-color: #4ec0ca;
   
   -webkit-animation: animSky 7s linear infinite;
   animation: animSky 7s linear infinite;
}

#flyarea
{
   position: absolute;
   bottom: 0;
   height: 200px;
   width: 250px;
}

#ceiling
{
   position: absolute;
   top: -16px;
   height: 16px;
   width: 300px;
   background-image: url('../assets/ceiling.png');
   background-repeat: repeat-x;
   
   -webkit-animation: animCeiling 481ms linear infinite;
   animation: animCeiling 481ms linear infinite;
}

#land
{
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 20%;
   background-image: url('../assets/land.png');
   background-repeat: repeat-x;
   background-position: 0px 0px;
   background-color: #ded895;
   
   -webkit-animation: animLand 2516ms linear infinite;
   animation: animLand 2516ms linear infinite;
}

#bigscore
{
   position: absolute;
   top: 20px;
   left: 10px;
   z-index: 100;
}

#bigscore img
{
   display: inline-block;
   padding: 1px;
}

#splash
{
   position: absolute;
   opacity: 0;
   top: 75px;
   left: 65px;
   width: 188px;
   height: 170px;
   background-image: url('../assets/splash.png');
   background-repeat: no-repeat;
}

#scoreboard
{
   position: absolute;
   display: none;
   opacity: 0;
   top: 64px;
   left: 43px;
   width: 236px;
   height: 280px;
   background-image: url('../assets/scoreboard.png');
   background-repeat: no-repeat;
   
   z-index: 1000;
}

#medal
{
   position: absolute;
   opacity: 0;
   top: 114px;
   left: 32px;
   width: 44px;
   height: 44px;
}

#currentscore
{
   position: absolute;
   top: 105px;
   left: 107px;
   width: 104px;
   height: 14px;
   text-align: right;
}

#currentscore img
{
   padding-left: 2px;
}

#highscore
{
   position: absolute;
   top: 147px;
   left: 107px;
   width: 104px;
   height: 14px;
   text-align: right;
}

#highscore img
{
   padding-left: 2px;
}

#replay
{
   position: absolute;
   opacity: 0;
   top: 205px;
   left: 61px;
   height: 115px;
   width: 70px;
   cursor: pointer;
}

.boundingbox
{
   position: absolute;
   display: none;
   top: 0;
   left: 0;
   width: 0;
   height: 0;
   border: 1px solid red;
}

#player
{
   left: 60px;
   top: 200px;
}

.bird
{
   position: absolute;
   width: 34px;
   height: 24px;
   background-image: url('../assets/bird.png');
   
   -webkit-animation: animBird 300ms steps(4) infinite;
   animation: animBird 300ms steps(4) infinite;
}

.pipe
{
   position: absolute;
   left: -100px;
   width: 52px;
   height: 100%;
   z-index: 10;
   text-align: left;
   
   /*-webkit-animation: animPipe 7500ms linear;*/
   /*animation: animPipe 7500ms linear;*/
}

.pipe_upper
{
   position: absolute;
   top: 0;
   width: 52px;
   background-image: url('../assets/pipe.png');
   background-repeat: repeat-y;
   background-position: center;
}

.pipe_upper:after
{
   content: "";
   position: absolute;
   bottom: 0;
   width: 52px;
   height: 26px;
   background-image: url('../assets/pipe-down.png');
}

.pipe_lower
{
   position: absolute;
   bottom: 0;
   width: 52px;
   background-image: url('../assets/pipe.png');
   background-repeat: repeat-y;
   background-position: center;
}

.pipe_lower:after
{
   content: "";
   position: absolute;
   top: 0;
   width: 52px;
   height: 26px;
   background-image: url('../assets/pipe-up.png');
}

#footer
{
   width: 100%;
   position: absolute;
   bottom: 3px;
   left: 3px;
}

#footer a,
#footer a:link,
#footer a:visited,
#footer a:hover,
#footer a:active
{
   padding: 2px;
   text-decoration: none;
   color: #fff;

   display: flex;
}

.links {
  flex: 1;
  display: flex;
  justify-content: middle;
}

.github {
  font-size: 0;
}

.github .fa {
  font-size: 20px;
}