html,
body {
  height: 100%;
  margin: 0;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  cursor: pointer;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

#score {
  position: absolute;
  top: 30px;
  right: 30px;
  font-size: 2em;
  font-weight: 900;
}

#introduction {
  width: 200px;
  height: 150px;
  position: absolute;
  font-weight: 600;
  font-size: 0.8em;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  text-align: center;
  transition: opacity 2s;
}

#restart {
  width: 120px;
  height: 120px;
  position: absolute;
  border-radius: 50%;
  color: white;
  background-color: red;
  border: none;
  font-weight: 700;
  font-size: 1.2em;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  display: none;
  cursor: pointer;
}

#perfect {
  position: absolute;
  opacity: 0;
  transition: opacity 2s;
}

#youtube {
  display: none;
}

@media (min-height: 425px) {
  
  #youtube {
    z-index: 2;
    display: block;
    width: 100px;
    height: 70px;
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: red;
    border-radius: 50% / 11%;
    transform: scale(0.8);
    transition: transform 0.5s;
  }

  #youtube:hover,
  #youtube:focus {
    transform: scale(0.9);
  }

  #youtube::before {
    content: "";
    display: block;
    position: absolute;
    top: 7.5%;
    left: -6%;
    width: 112%;
    height: 85%;
    background: red;
    border-radius: 9% / 50%;
  }

  #youtube::after {
    content: "";
    display: block;
    position: absolute;
    top: 20px;
    left: 40px;
    width: 45px;
    height: 30px;
    border: 15px solid transparent;
    box-sizing: border-box;
    border-left: 30px solid white;
  }

  #youtube span {
    font-size: 0;
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
  }
}
.jss32 {
    margin: 0;
    box-sizing: border-box;
	}
	
	.jss51 {
    justify-content: space-around;
}

	.jss31 {
    width: 100%;
    display: flex;
    z-index: 1;
    flex-wrap: wrap;
    box-sizing: border-box;
	}
	
	.jss39 {
    align-items: center;
}

	.jss1 {
    color: #ffcd00;
	}
	
	.jss125 {
    text-shadow: 2px 2px 2px #00476c;
    font-weight: bold;
}
	
body{padding:0;margin:0;font-family:'Open Sans', sans-serif}
#game-container{z-index:0;position:absolute;left:0;right:0;top:0;bottom:28px;background-color:#5a7371;box-shadow:0px 5px 5px #888888}
#game-container.fullscreen{bottom:0}
.game-footer{/* z-index:0; */position:absolute;bottom:0;left:0;right:0;height:28px;}
.game-btn{background:3CC0DC;background:linear-gradient(to bottom,#259cd8 0%,#3CC0DC 100%);cursor:pointer;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;text-shadow:1px 1px 3px #666666;color:#ffffff;font-size:20px;font-weight:bold;text-decoration:none;border:solid #d0e0ea 2px;text-transform:uppercase;padding:10px;display:block;margin:0 auto}
.game-btn:hover{background:#00a6e7;background-image:linear-gradient(to bottom, #00a6e7, #1a91cf);text-decoration:none}
.game-btn-link:hover{text-decoration:none}
.game-footer{-webkit-user-select:none;-moz-user-select:none;box-sizing:content-box}
.game-footer .game-footer-logo{height:28px;font-size:24px;line-height:28px;padding:0 10px;margin:0}
.game-footer .game-footer-logo a,
.game-footer .game-footer-logo a:hover,
.game-footer .game-footer-logo a:active{text-decoration:none;color:inherit}
.game-footer .game-footer-btn{color:white;height:28px;overflow-y:hidden;margin-left:5px;cursor:pointer;font-weight:bold;}
.game-footer .game-footer-btn.game-footer-logo{margin:0}
.game-footer .game-footer-btn:hover{background-color:#719290}
.game-footer .game-footer-btn a.game-footer-link{line-height:28px;height:28px;display:inline-block;}
.game-footer .game-footer-btn a.game-footer-link:link,
.game-footer .game-footer-btn a.game-footer-link:visited{color:inherit;text-decoration:none;}
.game-footer .game-footer-more{text-transform:uppercase;padding:0 15px;font-size:16px}
.game-footer .game-footer-img-button{width:70px;overflow-x:hidden;height:28px;cursor:pointer}
.game-footer .game-footer-img-button div{height:28px;text-align:center}
.game-footer .game-footer-img-button div a{font-size:0;height:28px;width:70px;line-height:62px}
.gameloader{-webkit-user-select:none;-moz-user-select:none;overflow:hidden}
.gameloader .gameloader-game-name{font-size:20px;font-weight:bold;text-transform:uppercase;color:white;margin-left:auto;margin-right:auto;text-align:center;text-shadow:1px 1px 1px #00476c}
.gameloader .gameloader-logo{margin-left:auto;margin-right:auto;margin:8px 0 15px 0;width:300px}
.gameloader .gameloader-logo img{width:100%;border-radius:5px;box-shadow:0 2px 5px 0 rgba(0, 0, 0, 0.3)}
.gameloader .gameloader-progressbar{width:300px;height:1.2vh;border-radius:0.6vh;background-color:#fff;flex-grow:1;transition:0.2s ease-out all;}

.gameloader .gameloader-progressbar .gameloader-progressbar-progress{width:0;height:100%;border-radius:0.6vh;background-color:#3CF7DC;transition:0.2s ease-out all;animation-name:fillColor;animation-duration:3.5s;animation-iteration-count:infinite;animation-fill-mode:both;}
.gameloader .gameloader-progress-info{margin-left:auto;margin-right:auto;margin-top:6px;font-size:14px;color:#fff;text-align:center;text-shadow:1px 1px 1px #00476c}
.loader-hidden{display:none}
.loader-active{display:block}
a{text-decoration:none}
a:hover{text-decoration:none}
.ball-beat,.ball-beat > div{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.ball-beat{display:block;font-size:0;color:#fff}.ball-beat > div{display:inline-block;float:none;background-color:currentColor;border:0 solid currentColor}.ball-beat{width:108px;height:36px}.ball-beat > div{width:20px;height:20px;margin:8px;border-radius:100%;-webkit-animation:ball-beat .7s -.15s infinite linear;-moz-animation:ball-beat .7s -.15s infinite linear;-o-animation:ball-beat .7s -.15s infinite linear;animation:ball-beat .7s -.15s infinite linear}.ball-beat > div:nth-child(2n-1){-webkit-animation-delay:-.5s;-moz-animation-delay:-.5s;-o-animation-delay:-.5s;animation-delay:-.5s}@-webkit-keyframes ball-beat{50%{opacity:.2;-webkit-transform:scale(.75);transform:scale(.75)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@-moz-keyframes ball-beat{50%{opacity:.2;-moz-transform:scale(.75);transform:scale(.75)}100%{opacity:1;-moz-transform:scale(1);transform:scale(1)}}@-o-keyframes ball-beat{50%{opacity:.2;-o-transform:scale(.75);transform:scale(.75)}100%{opacity:1;-o-transform:scale(1);transform:scale(1)}}@keyframes ball-beat{50%{opacity:.2;-webkit-transform:scale(.75);-moz-transform:scale(.75);-o-transform:scale(.75);transform:scale(.75)}100%{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}