@import url(https://fonts.googleapis.com/css?family=Press+Start+2P);

:root {
  --delay-mario: 100ms;
  
}

#scene
{
	position:fixed;
	z-index:9000;
	width:100%;
	height: 100%;
	max-width:var(--scr-w);
	overflow-x:hidden;
}

.scene.play
{
	visibility:visible;
	z-index:9000;
}

.mario 
{
  width: 240px;
  height: 280px;
  /*background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/111863/mario-sprite.png);*/
  background-image: url(../img/mario-sprite.png);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform-origin: 50% 100%;
  transform: translateX(-50%) translateY(-80px) scale(0.5);
}

#scene.play .mario
{
	-webkit-animation: run-1 calc(160ms + var(--delay-mario)) steps(2) 6, p-run 320ms steps(4) 960ms 6, takeoff 240ms steps(3) 2880ms 1, fly 240ms steps(3) 3120ms 12, run-2 160ms steps(2) 6000ms 4, jump 320ms steps(4) 6640ms 2, y-axis 7280ms linear;
    animation: run-1 calc(160ms + var(--delay-mario)) steps(2) 6, p-run 320ms steps(4) 960ms 6, takeoff 240ms steps(3) 2880ms 1, fly 240ms steps(3) 3120ms 12, run-2 160ms steps(2) 6000ms 4, jump 320ms steps(4) 6640ms 2, y-axis 7280ms linear;
}

@-webkit-keyframes run-1 {
  from {
    background-position: 0px;
  }
  to {
    background-position: -480px;
  }
}

@keyframes run-1 {
  from {
    background-position: 0px;
  }
  to {
    background-position: -480px;
  }
}
@-webkit-keyframes p-run {
  from {
    background-position: -1440px;
  }
  to {
    background-position: -2400px;
  }
}
@keyframes p-run {
  from {
    background-position: -1440px;
  }
  to {
    background-position: -2400px;
  }
}
@-webkit-keyframes takeoff {
  from {
    background-position: -2400px;
  }
  to {
    background-position: -3120px;
  }
}
@keyframes takeoff {
  from {
    background-position: -2400px;
  }
  to {
    background-position: -3120px;
  }
}
@-webkit-keyframes fly {
  from {
    background-position: -3120px;
  }
  to {
    background-position: -3840px;
  }
}
@keyframes fly {
  from {
    background-position: -3120px;
  }
  to {
    background-position: -3840px;
  }
}
@-webkit-keyframes run-2 {
  from {
    background-position: 0px;
  }
  to {
    background-position: -480px;
  }
}
@keyframes run-2 {
  from {
    background-position: 0px;
  }
  to {
    background-position: -480px;
  }
}
@-webkit-keyframes jump {
  from {
    background-position: -480px;
  }
  to {
    background-position: -1440px;
  }
}
@keyframes jump {
  from {
    background-position: -480px;
  }
  to {
    background-position: -1440px;
  }
}
@-webkit-keyframes y-axis {
  0% {
    bottom: 0%;
  }
  6.5934065934% {
    bottom: 0%;
  }
  13.1868131868% {
    bottom: 0%;
  }
  13.1868131868% {
    bottom: 0%;
  }
  26.3736263736% {
    bottom: 0%;
  }
  39.5604395604% {
    bottom: 0%;
  }
  39.5604395604% {
    bottom: 0%;
  }
  41.2087912088% {
    bottom: 0%;
  }
  42.8571428571% {
    bottom: 0%;
  }
  42.8571428571% {
    bottom: 0%;
  }
  62.6373626374% {
    bottom: 96%;
  }
  82.4175824176% {
    bottom: 0%;
  }
  82.4175824176% {
    bottom: 0%;
  }
  86.8131868132% {
    bottom: 0%;
  }
  91.2087912088% {
    bottom: 0%;
  }
  91.2087912088% {
    bottom: 0%;
  }
  95.6043956044% {
    bottom: 20%;
  }
  100% {
    bottom: 0%;
  }
}
@keyframes y-axis {
  0% {
    bottom: 0%;
  }
  6.5934065934% {
    bottom: 0%;
  }
  13.1868131868% {
    bottom: 0%;
  }
  13.1868131868% {
    bottom: 0%;
  }
  26.3736263736% {
    bottom: 0%;
  }
  39.5604395604% {
    bottom: 0%;
  }
  39.5604395604% {
    bottom: 0%;
  }
  41.2087912088% {
    bottom: 0%;
  }
  42.8571428571% {
    bottom: 0%;
  }
  42.8571428571% {
    bottom: 0%;
  }
  62.6373626374% {
    bottom: 96%;
  }
  82.4175824176% {
    bottom: 0%;
  }
  82.4175824176% {
    bottom: 0%;
  }
  86.8131868132% {
    bottom: 0%;
  }
  91.2087912088% {
    bottom: 0%;
  }
  91.2087912088% {
    bottom: 0%;
  }
  95.6043956044% {
    bottom: 20%;
  }
  100% {
    bottom: 0%;
  }
}
.q {
  position: absolute;
  bottom: calc(20% + 220px);
  right: 0;
  left: calc(100% + 40px);
  width: 80px;
  height: 80px;
  transform: translate(-50%, 0%);
  /*background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/111863/mario-q.png);*/
  background-image: url(../img/mario-q.png);
  background-size: 400px 80px;
}

#scene.play .q
{
	-webkit-animation: q-frames calc(320ms + var(--delay-mario)) steps(4) 5040ms 6, q-block 80ms steps(1) 6960ms forwards, q-in 1600ms linear 5040ms forwards;
	animation: q-frames calc(320ms + var(--delay-mario)) steps(4) 5040ms 6, q-block 80ms steps(1) 6960ms forwards, q-in 1600ms linear 5040ms forwards;
}

@-webkit-keyframes q-frames {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -320px 0;
  }
}

@keyframes q-frames {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -320px 0;
  }
}
@-webkit-keyframes q-block {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -320px 0;
  }
}
@keyframes q-block {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -320px 0;
  }
}
@-webkit-keyframes q-in {
  from {
    left: calc(100% + 40px);
  }
  to {
    left: 50%;
  }
}
@keyframes q-in {
  from {
    left: calc(100% + 40px);
  }
  to {
    left: 50%;
  }
}
.bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #0076ba;
  /*background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/111863/mario-ground.png);*/
  background-image: url(../img/mario-ground.png);
  background-size: 80px 80px;
  background-repeat: repeat-x;
  background-position: 0 bottom;
}

#scene.play .bg
{
	-webkit-animation: ground 6640ms linear forwards;
	animation: ground 6640ms linear forwards;
}

@-webkit-keyframes ground {
  from {
    background-position: 0 bottom;
  }
  to {
    background-position: -1820px bottom;
  }
}

@keyframes ground {
  from {
    background-position: 0 bottom;
  }
  to {
    background-position: -1820px bottom;
  }
}
.title {
  position: absolute;
  font-family: "Press Start 2P", cursive;
  color: white;
  font-size: 4rem;
  text-align: center;
  bottom: calc(20% + 220px);
  width: 100%;
  text-shadow: 4px 4px 0px rgba(0, 0, 0, 0.2);
  transform: scale(0);
  transform-origin: 50% 100%;
}

#scene.play .title
{
	-webkit-animation: title calc(500ms + var(--delay-mario)) steps(4) infinite, title-in 500ms  steps(10) 6960ms forwards;
	animation: title calc(500ms + var(--delay-mario)) steps(4) infinite, title-in 500ms  steps(10) 6960ms forwards;
}



@-webkit-keyframes title {
  0%, 100% {
    color: white;
  }
  50% {
    color: #CCC;
  }
}

@keyframes title {
  0%, 100% {
    color: white;
  }
  50% {
    color: #CCC;
  }
}
@-webkit-keyframes title-in {
  from {
    transform: scale(0);
    bottom: calc(30% + 220px);
  }
  to {
    transform: scale(1);
    bottom: calc(40% + 220px);
  }
}
@keyframes title-in {
  from {
    transform: scale(0);
    bottom: calc(30% + 220px);
  }
  to {
    transform: scale(1);
    bottom: calc(40% + 220px);
  }
}




.title2 {
  position: absolute;
  font-family: "Press Start 2P", cursive;
  color: white;
  font-size: 3rem;
  text-align: center;
  top: calc(5% + 120px);
  width: 100%;
  text-shadow: 4px 4px 0px rgba(0, 0, 0, 0.2);
  transform: scale(0);
  transform-origin: 50% 100%;
}

#scene.play .title2
{
	-webkit-animation: title2 calc(1000ms + var(--delay-mario)) steps(4) infinite, title2-in 500ms  steps(10) 7960ms forwards;
	animation: title2 calc(1000ms + var(--delay-mario)) steps(4) infinite, title2-in 500ms  steps(10) 7960ms forwards;
}

@-webkit-keyframes title2 {
  0%, 100% {
    color: white;
  }
  50% {
    color: #CCC;
  }
}

@keyframes title2 {
  0%, 100% {
    color: white;
  }
  50% {
    color: #CCC;
  }
}
@-webkit-keyframes title2-in {
  from {
    transform: scale(0);
    top: calc(5% + 50px);
  }
  to {
    transform: scale(1);
    top: calc(10% + 50px);
  }
}
@keyframes title2-in {
  from {
    transform: scale(0);
    top: calc(5% + 50px);
  }
  to {
    transform: scale(1);
    top: calc(10% + 50px);
  }
}

@media (min-width: 990px ) 
{
	
	.title 
	{
	  font-size: 3rem;
	  bottom: calc(20% + 220px);
	}
	
	.title2 
	{
		font-size: 2rem;
		top: calc(1% + 10px);
	}
	
	@keyframes title2-in 
	{
	  from {
		transform: scale(0);
		top: calc(5% + 10px);
	  }
	  to {
		transform: scale(1);
		top: calc(1% + 10px);
	  }
	}
	
}


@media (max-height: 1000px ) 
{
	.title 
	{
	  font-size: 2rem;
	  bottom: calc(20% + 220px);
	}
	
	.title2 
	{
		font-size: 1rem;
		top: calc(1% + 120px);
	}
	
	@keyframes title2-in 
	{
	  from {
		transform: scale(0);
		top: calc(5% + 10px);
	  }
	  to {
		transform: scale(1);
		top: calc(1% + 10px);
	  }
	}

}