:root{
  --bg: rgb(0, 243, 198);
  --font: #f6f6f6;
  --donut:#f5a560;
  --donutshadow:#d87d3c;
  --donutsize:60px;
  --icingcolor: deeppink;
}
* {
  margin:0; padding:0;
  box-sizing:border-box;
  font-family: sans-serif;
}
html, body {
  height:100%; 
  overflow: hidden;
  background:var(--bg);
}
.on{
  display: block;
}
.off{
  display: none;
}
.title{
  color: var(--font);
  text-align: center;
  padding-top: 100px;
}
.title h1{
   font-size: 60px;
}
.subtext{
  color: white;
  padding-bottom: 20px;
  font-size: 25px;
}
.suptext{
  color: #323232;
  font-size: 30px;
}
#game-over{
  position: absolute;
  color: #F50057;
  top: 130px;
  right: 50px;
  font-size: 40px;
  text-align: center;
}
#main-wrapper {
  position:relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap:wrap;
}
#donuts {
  display: flex;
  width: 760px;
  flex-flow: wrap;
  justify-content: center;
  transform: scale(0.8);
  cursor: pointer;
}
.donut-color-1{
  --icingcolor:rgb(62, 6, 14);
}
.donut-color-2{
  --icingcolor:rgb(118, 236, 220);
}
.donut-color-3{
  --icingcolor:rgb(236, 239, 101);
}
.donut-color-4{
  --icingcolor:rgb(8, 7, 47);
}
.donut-color-5{
  --icingcolor:rgb(251, 192, 192);
}
.donut-color-6{
  --icingcolor:deeppink;
}
.donut:before {
  content: '';
  position: absolute;
  top: -52px;
  left: -53px;
  display: block;
  border-radius: 50%;
  width: 130px;
  height: 130px;
  border: 23px solid rgba(255, 255, 255, 0.2);
  border-right: transparent;
  border-bottom: transparent;
  border-right: transparent;
  z-index: 1;
  border-bottom: 0;
  border-right: 0;
}
.donut {
  position: relative;
  width:60px; height:60px;
  width: var(--donutsize);
  height: var(--donutsize);
  border: 75px solid #f5a560;
  border: 75px solid var(--donut);
  border-radius: 50%;
  box-sizing: content-box;
  flex-shrink: 0;
  margin: 1em;
  box-shadow:6px 5px 0px 2px #d87d3c;
  box-shadow:6px 5px 0px 2px var(--donutshadow), inset 6px 5px 0px 0px var(--donutshadow);
  animation: roll 2s cubic-bezier(1,0,.4,1) infinite;
}
.donut .icing,
.donut .icing:before,
.donut .icing:after {
  content: '';
  display: block;
  position: absolute;
  border: 38px solid deeppink;
  border: 38px solid var(--icingcolor);
  border-radius: 10%;
}
.donut .icing {
  top: -45px;
  bottom: -45px;
  right: -45px;
  left: -45px;
}
.donut .icing:before {
  transform: rotate(63deg);
  top: -40px;
  bottom: -40px;
  right: -40px;
  left: -40px;
}
.donut .icing:after {
  transform: rotate(-59deg);
  top: -40px;
  bottom: -40px;
  right: -40px;
  left: -40px;
}

.donut:after {
  content:'';
  position:absolute;
  top: -40px;
  bottom: -40px;
  right: -40px;
  left: -40px;
  background: 
    radial-gradient(circle at 75% 7%, hotpink 0, hotpink 3px, transparent 4px),                 radial-gradient(circle at 12% 89%, gold 0, gold 3px, transparent 4px),                 radial-gradient(circle at 3% 68%, midnightblue 0, midnightblue 3px, transparent 4px),                 radial-gradient(circle at 44% 3%, blueviolet 0, blueviolet 3px, transparent 4px),                 radial-gradient(circle at 8% 60%, aquamarine 0, aquamarine 3px, transparent 4px),                 radial-gradient(circle at 41% 97%, gold 0, gold 3px, transparent 4px),                 radial-gradient(circle at 79% 67%, coral 0, coral 3px, transparent 4px),                 radial-gradient(circle at 24% 24%, hotpink 0, hotpink 3px, transparent 4px),                 radial-gradient(circle at 3% 38%, blueviolet 0, blueviolet 3px, transparent 4px),                 radial-gradient(circle at 6% 87%, deeppink 0, deeppink 3px, transparent 4px),                 radial-gradient(circle at 91% 94%, beige 0, beige 3px, transparent 4px),                 radial-gradient(circle at 91% 34%, darkorange 0, darkorange 3px, transparent 4px),                 radial-gradient(circle at 85% 14%, green 0, green 3px, transparent 4px),                 radial-gradient(circle at 73% 96%, darksalmon 0, darksalmon 3px, transparent 4px),                 radial-gradient(circle at 35% 6%, hotpink 0, hotpink 3px, transparent 4px),                 radial-gradient(circle at 41% 16%, floralwhite 0, floralwhite 3px, transparent 4px),                 radial-gradient(circle at 89% 74%, blue 0, blue 3px, transparent 4px),                 radial-gradient(circle at 59% 17%, hotpink 0, hotpink 3px, transparent 4px),                 radial-gradient(circle at 54% 2%, gold 0, gold 3px, transparent 4px),                 radial-gradient(circle at 96% 45%, midnightblue 0, midnightblue 3px, transparent 4px),                 radial-gradient(circle at 22% 68%, blueviolet 0, blueviolet 3px, transparent 4px),                 radial-gradient(circle at 54% 93%, aquamarine 0, aquamarine 3px, transparent 4px),                 radial-gradient(circle at 96% 4%, gold 0, gold 3px, transparent 4px),                 radial-gradient(circle at 96% 54%, coral 0, coral 3px, transparent 4px),                 radial-gradient(circle at 3% 9%, hotpink 0, hotpink 3px, transparent 4px),                 radial-gradient(circle at 25% 90%, blueviolet 0, blueviolet 3px, transparent 4px),                 radial-gradient(circle at 82% 46%, deeppink 0, deeppink 3px, transparent 4px),                 radial-gradient(circle at 98% 63%, beige 0, beige 3px, transparent 4px),                 radial-gradient(circle at 11% 77%, darkorange 0, darkorange 3px, transparent 4px),                 radial-gradient(circle at 80% 29%, green 0, green 3px, transparent 4px),                 radial-gradient(circle at 10% 23%, darksalmon 0, darksalmon 3px, transparent 4px),                 radial-gradient(circle at 38% 87%, hotpink 0, hotpink 3px, transparent 4px),                 radial-gradient(circle at 13% 44%, floralwhite 0, floralwhite 3px, transparent 4px),                 radial-gradient(circle at 67% 87%, blue 0, blue 3px, transparent 4px);
}

.donut-wrapper {
  animation: bounce 1s infinite forwards;
}
.doughnut-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.doughnut-shadow {
  width: 12rem;
  height: .6rem;
  margin: 0 auto;
  background-color: #333;
  border-radius: 100%;
  opacity: .35;
  animation: shadow 1s infinite;
}
@keyframes shadow {
  50% {
    opacity: 0.3;
    transform: scale(.90);
  }   
}

@keyframes roll {
  100% {
     transform: rotate(360deg)
  }   
}

@keyframes bounce {
  100% {
      transform: translate3d(0,-5%,0)
  }
}

.js-bounce-dount {
  animation: js-bounce 2.5s ease infinite;
}
@keyframes js-bounce {
  50% {
     transform: translate3d(0,-100%,0); 
  }
  100% {
    transform: translate3d(0,0,0); 
  }   
}

.button {
  font-size: 5vw;
  border: none;
  background-color: #ebebf0;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  user-select: none;
  position: relative;
  z-index: 1;
  padding: 0;
  cursor: pointer;
}
@media (min-width: 40em) {
  .button {
    font-size: 2em;
  }
}
.footer{
  text-align: center;
}
.button:before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 10px;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 10, 50, 0.2);
  transition: transform 0.6s cubic-bezier(0, 0.9, 0.13, 0.9);
  transform: translate3D(0, 0, 0);
}
.button:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #ebebf0;
  z-index: -1;
}
.button:hover:before, .button:focus:before {
  transform: translate3D(10px, 0, 0);
}
.button:active:before {
  transform: translate3D(0, 0, 0);
}
.button:focus, .button:active {
  outline: none;
}
.button .button__inner {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--font);
  padding: 1em 1.5em;
  background-color: #fbfbfb;
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0, 0.9, 0.13, 0.9);
  position: relative;
}
.button:hover .button__inner, .button:focus .button__inner {
  transform: translate3D(0, -10px, 0);
}
.button:active .button__inner {
  transform: translate3D(0, 0, 0);
}
.button:hover .button__inner, .button:focus .button__inner {
  background-color: #fff;
}
.button--secondary {
  background-color: #ff0081;
  z-index: 0;
}
.button--secondary:after {
  background-color: #ff0081;
}
.button--secondary .button__inner {
  background-color:  #ff67b3
}
.button--secondary:hover .button__inner, .button--secondary:focus .button__inner {
  background-color:  #ff67b3
}
.cloud {
  position: absolute;
  top: 70px;
  width: 70px;
  height: 24px;
  background: linear-gradient(to bottom, rgba(242, 249, 254, 1) 5%, rgba(214, 240, 253, 1) 100%);
  border-radius: 20px;
  animation: cloud 15s linear infinite;
}

.cloud.x2 {
  top: 100px;
  transform: scale(3.0);
  animation-delay: -3s;
  animation-duration: 20.5s;
}
.cloud.x3 {
  top: 150px;
  transform: scale(2.6);
  animation-delay: -5s;
  animation-duration: 16.5s;
}
.cloud.x4 {
  top: 50px;
  transform: scale(0.8);
  animation-delay: -1.5s;
  animation-duration: 10.5s;
}

.cloud.x5 {
  top: 80px;
  transform: scale(2.5);
  animation-delay: -8s;
  animation-duration: 10.5s;
}

.cloud:before, .cloud:after {
  position: absolute;
  content: "";
  background: inherit;
}
.cloud:before {
  width: 36px;
  height: 36px;
  top: -18px;
  right: 10px;
  border-radius: 40px;
}
.cloud:after {
  width: 20px;
  height: 20px;
  top: -10px;
  left: 10px;
  border-radius: 20px;
}
@keyframes cloud {
  0% {
    right: -140px;
  }
  100% {
    right: calc(100% + 140px);
  }
}

/* start of road */
#road{
  position: absolute;
  background-color: #555;
  width: 100%;
  height: 100px;
  bottom: 0px;
  overflow: hidden;
  animation-name: road;
  animation-duration: 60s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes road {
  0% {background-color: #555;}
  /* //10% {background-color: #555;} */
  /* //20% {background-color: #555;} */
  30% {background-color: #aaa;}
  /* //40% {background-color: #555;} */
  50% {background-color: #555;}
  60% {background-color: #333;}
  70% {background-color: #333;}
  80% {background-color: #333;}
  /* //90% {background-color: #444;} */
  100% {background-color: #444;}
}
#road-lane {
  position: relative;
  width:50%;
  height:10px;
  float: right;
  top: 35%;
  background-color: #fff;
  opacity: 0.8;
  animation-name: road-lane;
  animation-duration: 5s;
  animation-delay: 0s;
  animation-direction: normal;
  animation-play-state: running;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}
@keyframes road-lane{
  0%{right:-50%; transform: skewX(45deg); }
  100%{right:100%; transform: skewX(-45deg); }
}

/* end of road */

.game-canvas{
  position: absolute;
    bottom: 0;
    width: 100vw;
    height: 300px;
}


/* CAR */

.car-color-1{
  background-color: #FF1744 !important;
}
.car-color-2{
  background-color: #F50057 !important;
}
.car-color-3{
  background-color: #D500F9 !important;
}
.car-color-4{
  background-color: #651FFF !important;
}
.car-color-5{
  background-color: #3D5AFE !important;
}
.car-color-6{
  background-color: #FFEA00 !important;
}
.car-color-7{
  background-color: #FF9100 !important;
}
.car-color-8{
  background-color: #4E342E !important;
}
.car-color-9{
  background-color: #424242 !important;
}
.car-color-10{
  background-color: #37474F !important;
}
.car {
  position: absolute;
  bottom: 60px;
  right: -10px;
  width: 330px;
  animation: start 5s linear infinite;
}
.car-top {
  position: relative;
  width: 330px;
  height: 80px;
  overflow: hidden;
}
.car-offline{
  font-weight: 700;
  font-family: sans-serif;
  font-size: 20px;
  color: white;
  bottom: 10px;
  right: calc(50% - 40px);
  position: absolute;
  letter-spacing: 2px;
}
.front {
  width: 70px;
  height: 50px;
  background-color: #FFEA00;
  position: absolute;
  left: 0;
  bottom: 0;
  border-radius: 30px 0 0 0;
}
.body {
  width: 200px;
  height: 80px;
  background-color: #FFEA00;
  position: absolute;
  left: 60px;
  border-radius: 10px 10px 0 0;
}
.body .window-1 {
  width: 80px;
  height: 30px;
  background-color: black;
  position: absolute;
  top: 10px;
  left: 10px;
  border-radius: 10px 0 0 0;
}
.body .window-2 {
  width: 80px;
  height: 30px;
  background-color: black;
  position: absolute;
  top: 10px;
  right: 10px;
  border-radius: 0 10px 0 0;
}
.back {
  width: 60px;
  height: 50px;
  background-color: #FFEA00;
  position: absolute;
  right: 10px;
  bottom: 0;
  border-radius: 0 10px 0 0;
}
.whell {
  height: 50px;
  width: 250px;
  position: relative;
  margin: 0 auto;
  margin-top: -20px;
}
.whell div h1 {
  margin: 1px 0 0 0;
  color: #fff;
  text-align: center;
}
.whell-1 {
  width: 50px;
  height: 50px;
  background-color: #333;
  position: absolute;
  left: 0;
  bottom: 0;
  border: 5px #3a3a3a solid;
  border-radius: 100%;
  -webkit-animation: round 1s;
  animation: round 1s infinite linear ;
}
.whell-2 {
  width: 50px;
  height: 50px;
  background-color: #333;
  position: absolute;
  right: 0;
  bottom: 0;
  border: 5px #3a3a3a solid;
  border-radius: 100%;
  -webkit-animation: round 1s;
  animation: round 1s infinite linear ;
}
@keyframes round {
  from {
    transform: rotate(480deg);
  }
  to {
    transform: rotate(0deg);
  }
}
@keyframes start {
  from {
    right: -10px;
  }
  to {
    right: calc(100% + 10px);
  }
}
.score-card{
  position: absolute;
  top: 30px;
  font-size: 40px;
  right: calc(50%  - 50px);
}

.heart {
  position: relative;
  width: 100px;
  height: 90px;
}
.heart:before, .heart:after {
  content: '';
  position: absolute;
  top: 0;
  width: 50px;
  height: 80px;
  background: #fc2e5a;
  border-radius: 50px 50px 0 0;
}
.heart:before {
  left: 50px;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
.heart:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}