/* Background */

body{
  margin:0;
  height:100vh;
  overflow:hidden;
  font-family:Arial;
  text-align:center;

  background:
  linear-gradient(
    180deg,
    #fff700 0%,
    #ffcc00 20%,
    #ff9900 45%,
    #ff6600 70%,
    #ff3300 100%
  );

  background-size:400% 400%;

  animation:bgmove 10s ease infinite;
}

/* Moving Gradient */

@keyframes bgmove{

  0%{
    background-position:0% 50%;
  }

  50%{
    background-position:100% 50%;
  }

  100%{
    background-position:0% 50%;
  }
}

/* Main Container */

.container{
  width:80%;
  margin:20px auto;
  padding:20px;

  background-color:
  rgba(255,255,255,0.85);

  border-radius:20px;

  box-shadow:
  0 10px 30px rgba(0,0,0,0.4);
}

/* Title */

h1{
  font-size:60px;
  color:#d35400;
}

/* Burger */

.burger{
  font-size:220px;
  cursor:pointer;
  user-select:none;

  transition:0.15s;

  animation:float 2s infinite ease-in-out;
}

/* Floating Animation */

@keyframes float{

  0%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-15px);
  }

  100%{
    transform:translateY(0px);
  }
}

/* Hover Effect */

.burger:hover{
  transform:scale(1.08);
}

/* Click Animation */

.pop{
  animation:pop 0.2s;
}

@keyframes pop{

  0%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.2);
  }

  100%{
    transform:scale(1);
  }
}

/* Score */

h2{
  font-size:45px;
  color:#c0392b;
}

/* Stats */

.stats{
  font-size:28px;
  margin-top:20px;
}

/* Upgrade Area */

.upgrades{
  margin-top:30px;
}

/* Buttons */

button{
  margin:10px;
  padding:15px 20px;
  font-size:18px;
  border:none;
  border-radius:12px;
  cursor:pointer;

  background-color:#ff9800;
  color:white;

  transition:0.2s;
}

/* Hover Effect */

button:hover{
  transform:scale(1.08);
  background-color:#ff6600;
}

/* Rebirth Button */

.rebirth{
  background-color:#0099ff;
}

/* Raining Emojis */

.rain{
  position:fixed;
  top:-100px;
  font-size:40px;
  animation:fall linear infinite;
  z-index:-1;
}

@keyframes fall{

  0%{
    transform:
    translateY(-100px)
    rotate(0deg);
  }

  100%{
    transform:
    translateY(120vh)
    rotate(360deg);
  }
}