@import url('https://fonts.googleapis.com/css?family=Quicksand:300,400,500,600,700&display=swap');

body {
  margin: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
}

.main-container {
  height: 100%;
  width: calc(100vw - 300px);
  position: relative;
  background-image: url("images/background-candy.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.bonus-container {
  height: 100%;
  width: 300px;
  box-shadow: -2px 0 15px 5px rgba(10, 10, 10, 0.8);
  user-select: none;
  z-index: 1;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
  background-color: rgba(252, 142, 40, 0.884);
  position: relative;
}

#canvas-container {
  height: 200px;
  width: 200px;
  border-radius: 100px;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  z-index: 2;
}

#bigCanvas {
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  height: 200px;
  width: 200px;
  border-radius: 100px;
  position: absolute;
  cursor: pointer;
}

/* Kirby animations*/
@keyframes xAxis1 {
  0% { left: 50% }
  50% { left: 10% }
  100% { left: 50% }
}

@keyframes yAxis1 {
  0% { top: 50% }
  25% { top: -20vh }
  50% { top: 50% }
  75% { top: 45vh }
  100% { top: 50% }
}

@keyframes xAxis2 {
  0% { left: 50% }
  50% { left: 90% }
  100% { left: 50% }

}

@keyframes yAxis2 {
  0% { top: 50% }
  25% { top: -20vh }
  50% { top: 50% }
  75% { top: 45vh }
  100% { top: 50% }
}

@keyframes xAxis3 {
  0% { left: 50% }
  25% { left: 10% }
  75% { left: 90% }
  100% { left: 50% }
}

@keyframes yAxis3 {
  0% { top: 50% }
  50% { top: -20vh }
  100% { top: 50% }
}

@keyframes xAxis4 {
  0% { left: 50% }
  25% { left: 10% }
  75% { left: 90% }
  100% { left: 50% }
}

@keyframes yAxis4 {
  0% { top: 50% }
  50% { top: 45vh }
  100% { top: 50% }
}
/* Kirby animations END*/

.score {
  margin: auto;
  margin-top: 10px;
  pointer-events: none; 
  width:200px;
  height:60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
  background-color: rgba(252, 142, 40, 0.884);
  border-radius: 10px;
  user-select: none;
}

#numbers {
   font-family: sans-serif;
   font-size: 24px;
   color: white;
   pointer-events: none; 
}

.score img {
  height: 30px;
  padding-left: 5px;
}

/* MEHMET */

.kirby-life {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 20px;
  left: 30px;
  font-family: sans-serif;
  font-size: 22px;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
  background-color: rgba(252, 142, 40, 0.884);
  padding: 5px 15px 5px 0;
  font-weight: 900;
  border-radius: 10px;
  color: white;
  width: 100px;
  pointer-events: none;
  user-select: none;
}

.hearth {
  width: 70px;
}
.game-over {
  position: absolute;
  height: 100vh;
  width: 100vw;
  bottom: 100%;
  z-index: 5;
}
@keyframes gameOver{
  0% {bottom:100%}
  70% {bottom: 0}
  85% {bottom: 10%}
  90% {bottom:0}
  95% {bottom: 5%}
  100% {bottom:0}
}
.gif-retry {
  position: absolute;
  z-index: 5;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%);
  display: flex;
  width: 350px;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}

.gif-retry img {
  height: 150px;
  width: 150px;
}
@keyframes gifRetry{
  0% {bottom:100%}
  100% {bottom:70%}
}

@keyframes buttonRetry{
  0% {opacity: 0}
  100% {opacity: 0}
}
.gif-retry button{
  opacity: 1;
  height: 50px;
  width: 150px;
  background-color: transparent;
  font-family: sans-serif;
  font-size: 24px;
  color: white;
  border: 5px solid white;
  border-radius: 20px;
  cursor: pointer;
  user-select: none;
}

.score-container {
  position: absolute;
  top: 10px;
  left: 30px;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
  background-color: rgba(252, 142, 40, 0.884);
  border-radius: 10px;
  width: 200px;
  font-family: sans-serif;
  font-size: 20px;
  color: white;
  padding: 5px;
  user-select: none;
}

.score-container div {
  display: flex;
  align-items: center;
}

.score-container img {
  height: 50px;
  width: 50px;
}
.star{
  width: 20%;
  opacity: 0;
  position : absolute;
  bottom: 160px;
  right: 100px; 
  z-index: 4;
  pointer-events: none
}
@keyframes falling{
0%{
  opacity: 1;
  
}
50%{
  opacity: 1;
  transform: translate(-75px, -10px)
}
100%{opacity: 0;
  transform: translate(-100px,150px)}
}

@keyframes falling2{
  0%{
    opacity: 1;
    
  }
  50%{
    opacity: 1;
    transform: translate(75px, -10px)
  }
  100%{opacity: 0;
    transform: translate(100px,150px)}
  }

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bonus-container li button{
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
  background-color: rgba(252, 142, 40, 0.884);
  color: white;
  width: 100%;
  height: 50px;
  font-family: 'Quicksand', sans-serif;
  font-size: 22px;
  font-weight: 500;
  border: none;
  cursor: pointer;
}

#chrono {
  display: flex;
  justify-content: center;
}

.arrow {
  transform: rotateY(180deg)
}

.bonus-container li button div {
  display: flex;
  align-items: center;
}

.button-fire {
  padding-left: 0;
}

.button-fire img{
  height: 50px !important;
}

.bonus-container li img {
  height: 40px;
}

.price img {
  height: 20px !important;
}

.price {
  display: flex;
  align-items: center;
  background: linear;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
  background-color: rgb(255, 20, 20);
  border-radius: 5px;
  height: 30px;
  width: 80px;
  justify-content: space-around;
  font-size: 18px !important;
}

.button-fire, .button-water, .button-frost, .button-rainbow {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
  background-color: rgba(45, 65, 105, 0.884) !important;
}

.bonus-container > img {
  position: absolute;
  bottom: 70px;
  transform: translate(-50%);
  left: 50%;
  height: 200px;
  opacity: 0.8;
}

.bonus-container > p {
  position: absolute;
  bottom: 80px;
  transform: translate(-30%);
  left: 50%;
  color: white;
  font-family: 'Quicksand', sans-serif;
  font-size: 50px;
  font-weight: 700
}

.disabled {
  cursor: default;
  background-color: rgba(109, 142, 212, 0.884) !important;
}
#freelife{
  width:50%;
  opacity: 0;
  position : absolute;
  transform: translate(50%, -100%);
  z-index: 4;
  pointer-events: none
}
@keyframes fallinglife{
  0% {bottom:10%;
    opacity: 1;}
  100% {bottom:70%;
  opacity:0;}
 
  }


/* Responsive */
@media only screen and (max-width: 600px) {
.main-container {
  width: calc(1000vw - 300px);
  background-size: 500% 100%;
}
.bonus-container {
  height: 100%;
  width: 30px;
}
.bonus-container > img {
  height: 20px;
}