@font-face {
	font-family: 'SMB';
	src: local('Super Mario Bros.'),
		 url('fonts/Super Mario Bros.ttf') format('truetype');
	font-style: normal;
 }
 
 body, html {
   margin: 0;
   padding: 0;
   min-height: 100%;
 }
 
 #game {
   height: 100%;
   width: 100%;
   position: relative;
   border: 1px solid #ccc;
   overflow: hidden;
 }
 
 #world { 
   margin: 0;
   padding: 0;
   height: 100%;
   width: 100%;
   position: absolute;
   bottom: 0;
   left: 0;
   z-index: 0;
 }
 
 .gauge {
   margin: 0;
   padding: 0;
   height: 50px;
   width: 70px;
   text-align: right;
   font-size: 2em;
   font-weight: bold;
   position: absolute;
   top: 17px;
   right: 52px;
   z-index: 1000;
   font-family: 'SMB';
   color: white;
   text-shadow: 2px 2px 4px #000000;
 }
 
 .gaugeSprite {
   margin: 0;
   padding: 0;
   z-index: 1000;
   position: absolute;
 }
 
 #coinNumber {
   left: 0;
 }
 
 #liveNumber {
   right: 52px;
 }
 
 #coin {
   height: 32px;
   width: 32px;
   background-image: url(../images/sprites/mario-objects.png);
   background-position: 0 0;
   top: 15px;
   left: 70px;
 }

 #live {
   height: 40px;
   width: 40px;
   background-image: url(../images/sprites/mario-sprites.png);
   background-position: 0 -430px;
   top: 12px;
   right: 8px;
 }
 
 .figure {
   margin: 0;
   padding: 0;
   z-index: 99;
   position: absolute;
 }
 
 .matter {
   margin: 0;
   padding: 0;
   z-index: 95;
   position: absolute;
   width: 32px;
   height: 32px;
 }
 
.endlevel-signal {
  margin: 0;
  padding: 0;
  z-index: 100;
  position: absolute;
  width: 160px;
  height: 120px;
  background-image: url(../images/ui/supabalz-logo.png);
  background-size: contain;
  background-repeat: no-repeat;
  animation: float 2s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

#fade-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease-in-out;
}

#fade-overlay.active {
  opacity: 1;
}