body {
  background: lightblue url("background.jpg") no-repeat fixed center;
  background-size: cover;
  font-family: 'cloudcomicfont', cursive;
  font-weight: 400;
  overflow: hidden;
}
.text {
  font-family: 'cloudcomicfont', cursive;
  font-weight: 400;
}
.background {
  color: rgba(255,255,255,0.1);
  width: 100%;
  height: 100%;
}
.center-page, .center-page.skytext {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -300px;
  margin-top: -20px;
  width: 600px;
  height: 40px;
  text-align: center;
  font-size: 40px;
  -webkit-text-stroke-width: 1.5px;
}
.sky-title {
  position: absolute;
  top: 25%;
  left: 50%;
  margin-left: -300px;
  margin-top: -30px;
  width: 600px;
  height: 60px;
  text-align: center;
  font-size: 60px;
}
a:focus, button:focus {
  outline: none;
}
.bottom-page {
  position: absolute;
  top: 75%;
  left: 50%;
  margin-left: -300px;
  margin-top: -30px;
  width: 600px;
  height: 60px;
  text-align: center;
}
.left-half {
  top: 10%;
  width: 50%;
  height: 90%;
  text-align: center;
  left: 0;
  bottom: 0;
  border-left: red;
  float: left;
  position: relative;
  overflow: hidden;
}
.right-half {
  position: absolute;
  top: 10%;
  width: 50%;
  height: 90%;
  text-align: center;
  right: 0;
  bottom: 0;
  border-right: red;
  position: relative;
  float: left;
  overflow: hidden;
}
.center {
  text-align: center;
}
.large-font {
  font-size: 28px;
}
.play-btns button.btn {
  font-size: 30px;
}
.level-btns button.btn {
  width: 100px;
  margin: 15px;
}
.level-btns.center-page {
  margin-top: -150px;
  height: 300px;
}
.skytext {
  font-family: 'cloudcomicfont', cursive;
  font-weight: 900;
  color: white;
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: DodgerBlue;
}
.leveltext {
  font-family: 'cloudcomicfont', cursive;
  font-weight: 600;
}
.hidden {
  display: none;
}
.aboutmargin {
  margin-top: 30px;
}
.about {
  text-align: center;
  text-decoration: underline;
  font-weight: bold;
  font-size: 28px;
}
.aboutp {
  text-align: center;
  margin-top: 10px;
}
.continue-hint {
  width: 70px;
  position: absolute;
  top: 5px;
  right: 160px;
}

.continue-hint2 {
  width: 70px;
  top:-10px;
  left: 200px;
}

.continue-btn {
  position: absolute;
  top: 15px;
  right: 25px;
}
.credits-btn {
  position: absolute;
  left: 25px;
  bottom: 0px;
}
.credits-btns {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding-bottom: 15px;
  text-align: center;
}
.setting-btns {
  margin-top: 100px;
}
.setting-options {
  text-align: left;
  padding-left: 60px;
  padding-top: 25px;
  height: 75%;
}
.setting-btns.bottom {
  position: absolute;
  bottom: 0;
  right: 0;
}
.setting-left {
  text-align: left;
  margin-left: 25px;
}
.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}
.avatar {
  position: absolute;
  width: 50%;
  top: 0;
  left: 25%;
}
.avatar-builder .btns {
  left: 30%;
  max-width: 50%;
}
.avatar-builder .btns .btn-container {
  width: 100%;
}
.avatar-corner .avatar {
  left: 82%;
  top: 10%;
  width: 20%;
}
.avatar-corner .btns {
  display: none;
}
#countdown {
  font-size: 400px;
  margin-top: -300px;
  height: 400px;
}
.lives {
  position: relative;
  right: 0px;
}
.life {
  width: 40px;
}
.fraction {
  font-size: 0.7em;
  display: inline-block;
  position: relative;
  top: 15px;
}
.numerator {
  border-bottom: 1px solid black;
}
.question-fraction {
  top: -0.5em;
}
.game-cloud {
  width: 20%;
  position: absolute;
}
.qbox {
  height: 20%;
}
.cloud-text {
  height: 100%;
  font-size: 2em;
  margin-top: 5%;
  width: 100%;
  text-align: center;
  position: relative;
}
.cloud-img {
  width: 100%;
}
.cloud-img.lightning {
  position: absolute;
  top: 70%;
  left: 25%;
  width: 40%;
}
.cloud-text-finish {
    position: absolute;
    top: 35%;
    left: 50%;
    margin-top: -20px;
    margin-left: -100px;
    font-size: 28px;
}
.cloud-text-points {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -250px;
    font-size: 20px;
    width: 500px;
    text-align: center;
}
#next_level_btn {
  position: absolute;
  top: 63%;
  left: 50%;
  margin-left: -50px;
  height: 37px;
}

.butterbar2 {
  text-color: #FFFFFF;
}

.butterbar {
  width: 20%;
  border: 2.5px solid #303030;
  background: rgba(8, 8, 8, 0.3);
  top: 50px;
  border-radius: 14px;
  height: 28px;
  text-align: center;
  left: 40%;
  position: absolute;
  z-index: 998;
  color: #FFFFFF;
}

.butter-bar {
  width: 100%;
  text-align: center;
  top: 50px;
}

.teacher-cac {
  position: absolute;
  width: 50%;
  left: 25%;
  top: 33%;
  height: 33%;
  border: 1px solid #777;
  border-radius: 5px;
  background: white;
  padding: 15px;
  z-index: 999;
}
.cac-btn1 {
  text-align: center;
  font-size: 18px;
}

.cac-btn2 {
  text-align: center;
  font-size: 18px;
}

.modal {
  top: 33.3%;
  height: 33.4%;
  width: 33.4%;
  left: 33.3%;
}

.credits {
  width: 70%;
  height: 72%;
  left: 15%;
  top: 13%;
  border: 1px solid #777;
  border-radius: 5px;
  background: white;
  padding: 15px;
  z-index: 999;
}
.game-btnanswers {
  position: fixed;
  bottom: 0px;
  width: 600px;
  height: 80px;
  left: 50%;
  margin-left: -300px;
}
#scene1 {
  background: lightblue url("background-title.jpg") no-repeat fixed center;
  background-size: cover;
  height: 100%;
}
#game_front, #clouds {
  width: 100%;
  height: 100%;
  position: relative;
}
.timer {
  position: absolute;
  right: 25px;
  top: 50px;
}
.game-progress {
  position: absolute;
  top: 50%;
  right: 20px;
}
.UquizM {
  background: lightblue;
  border: none;
  width: 20%;
  height: 100%;
  border-radius: 30px;
  font-size: 30px;
  margin-right: 10px;
  margin-left: 10px;
}
.UquizM.wrong {
  background: red;
}
.try-again-btn {
  position: absolute;
  top: 50%;
  left: 23%;
}
.game-navbar.navbar {
  position: absolute;
  top: 0;
  width: 100%;
}
.game-stats {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -200px;
  width: 400px;
  font-size: 30px;
  text-align: center;
  margin-top: -15px;
}
.cloud-grade-complete {
  margin-top: 10%;
}

.assign-class-btn {
  left: 0;
  width: 100%;
  height: 5%;
  postion: absolute;
}

.bounce {
 animation: bounce 2s infinite;
}

.bounce2 {
  animation: bounce2 2s infinite;
  left: 30%;
  top: 32%;
}

@keyframes bounce2 {
 0%, 20%, 50%, 80%, 100% {
   transform: translateX(0);
 }
 40% {
   transform: translateX(30px);
 }
 60% {
   transform: translateX(15px);
 }
}


@keyframes bounce {
 0%, 20%, 50%, 80%, 100% {
   transform: translateX(0);
 }
 40% {
   transform: translateX(-30px);
 }
 60% {
   transform: translateX(-15px);
 }
}

.out-of-time {
  position: absolute;
  top: 50%;
  margin-top: -60px;
  left: 50%;
  margin-left: -400px;
  width: 800px;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
  -webkit-animation-name: outOfTime; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */
  animation-name: outOfTime;
  animation-duration: 3s;
  font-size: 120px;
  color: transparent;
  -webkit-text-stroke: 1px transparent;
}
@keyframes outOfTime {
  from {
    font-size: 40px;
    color: white;
    -webkit-text-stroke: 1px blue;
  }
  to {
    font-size: 120px;
    color: transparent;
    -webkit-text-stroke: 1px transparent;
  }
}
.clouds {
  position: relative;
}
.game-cloud1 {
  bottom: 20%;
  left: 5%;
}
.cloudshift1 {
  -webkit-animation-name: cloudshift1; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
  animation-name: cloudshift1;
  animation-duration: 2s;
  bottom: -34%;
}
@keyframes cloudshift1 {
  from {bottom: 0%;}
  to {bottom: -34%;}
}
.game-cloud2 {
  bottom: 54%;
  right: 17%;
}
.cloudshift2 {
  -webkit-animation-name: cloudshift2; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
  animation-name: cloudshift2;
  animation-duration: 2s;
  bottom: -68%;
}
@keyframes cloudshift2 {
  from {bottom: -34%;}
  to {bottom: -68%;}
}
.game-cloud3 {
  bottom: 88%;
  left: 22%;
}
.cloudshift3 {
  -webkit-animation-name: cloudshift3; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
  animation-name: cloudshift3;
  animation-duration: 2s;
  bottom: -102%;
}
@keyframes cloudshift3 {
  from {bottom: -68%;}
  to {bottom: -102%;}
}
.game-cloud4 {
  bottom: 122%;
  left: 57%;
}
.cloudshift4 {
  -webkit-animation-name: cloudshift4; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
  animation-name: cloudshift4;
  animation-duration: 2s;
  bottom: -136%;
}
@keyframes cloudshift4 {
  from {bottom: -102%;}
  to {bottom: -136%;}
}
.game-cloud5 {
  bottom: 156%;
  left: 14%;
}
.cloudshift5 {
  -webkit-animation-name: cloudshift5; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
  animation-name: cloudshift5;
  animation-duration: 2s;
  bottom: -170%;
}
@keyframes cloudshift5 {
  from {bottom: -136%;}
  to {bottom: -170%;}
}
.game-cloud6 {
  bottom: 190%;
  left: 39%;
}
.cloudshift6 {
  -webkit-animation-name: cloudshift6; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
  animation-name: cloudshift6;
  animation-duration: 2s;
  bottom: -204%;
}
@keyframes cloudshift6 {
  from {bottom: -170%;}
  to {bottom: -204%;}
}
.game-cloud7 {
  bottom: 224%;
  left: 25%;
}
.cloudshift7 {
  -webkit-animation-name: cloudshift7; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
  animation-name: cloudshift7;
  animation-duration: 2s;
  bottom: -238%;
}
@keyframes cloudshift7 {
  from {bottom: -204%;}
  to {bottom: -238%;}
}
.game-cloud8 {
  bottom: 258%;
  left: 62%;
}
.cloudshift8 {
  -webkit-animation-name: cloudshift8; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
  animation-name: cloudshift8;
  animation-duration: 2s;
  bottom: -272%;
}
@keyframes cloudshift8 {
  from {bottom: -238%;}
  to {bottom: -272%;}
}
.game-cloud9 {
  bottom: 292%;
  left: 46%;
}
.cloudshift9 {
  -webkit-animation-name: cloudshift9; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
  animation-name: cloudshift9;
  animation-duration: 2s;
  bottom: -306%;
}
@keyframes cloudshift9 {
  from {bottom: -272%;}
  to {bottom: -306%;}
}
.game-cloud10 {
  bottom: 326%;
  left: 37%;
}
.cloudshift10 {
  -webkit-animation-name: cloudshift10; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
  animation-name: cloudshift10;
  animation-duration: 2s;
  bottom: -340%;
}
@keyframes cloudshift10 {
  from {bottom: -306%;}
  to {bottom: -340%;}
}
.game-cloud11 {
  bottom: 360%;
  left: 37%;
  width: 40% !important;
}
.cloudshift11 {
  -webkit-animation-name: cloudshift11; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
  animation-name: cloudshift11;
  animation-duration: 2s;
  bottom: -360%;
}
@keyframes cloudshift11 {
  from {bottom: -340%;}
  to {bottom: -360%;}
}
.game-cloud-fail {
  bottom: -20%;
  left: 37%;
}
.cloudshift-fail {
  -webkit-animation-name: cloudshift10; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
  animation-name: cloudshift-fail;
  animation-duration: 2s;
  bottom: 20%;
}
@keyframes cloudshift-fail {
  from {bottom: -80%;}
  to {bottom: 20%;}
}