@font-face {
  font-family: Metropolis;
  src: url(../../fonts/Metropolis-Bold.otf);
}

body {
  font-family: 'Metropolis';
  background-image: linear-gradient(to right, #ffafbd , #ffc3a0);
  text-align: center;
}

/* Loader */

#loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 80px;
  height: 80px;
  border: 10px solid transparent;
  border-radius: 50%;
  border-top: 10px solid white;
  animation: spin 1s linear infinite;
  transform-origin: center center;
  animation-fill-mode: forwards;
  margin: -40px 0 0 -40px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes animation {
  from{ bottom:-40px; opacity:0 }
  to{ bottom: 0px; opacity: 1}
}

.animation {
  position: relative;
  animation: animation 1s;

}

#loaderDiv {
  display: none;
}

/* Main game */

button {
  display: inline-block;
  padding: 22px 42px;
  font-size: 32px;
  cursor: pointer;
  text-decoration: none;
  outline: 2px solid transparent;
  color: #fff;
  background-color: #f0adc5;
  border: none;
  border-radius: 10px;
  font-family: 'Metropolis';
  box-shadow: 0 9px #999;
  transition: 0.05s;
  -webkit-tap-highlight-color: transparent;
}

button#upgrade {
  margin-bottom: 30px;  
}

button:active {
  background-color: #df7298;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

a#openSidenav {
  font-size: 50px;
  color: #fff;
  transition: 0.3s;
}

a#openSidenav:hover {
  color: #555;
}

h1#title {
  margin-top: 22px;
  font-size: 55px;
  margin-bottom: 100px;
}

h1#clickCount {
  font-size: 40px;
}

h1#statusText {
  font-size: 40px;
}

h2#currentPerClick, 
h2#upgradeText {
  font-size: 30px;
}

p#versionText {
  margin-bottom: 60px;
}

/* Sidebar */

div#sidenav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 0;
  height: 100%;
  overflow-x: hidden;
  background: #555;
  transition: 0.5s;
  -webkit-tap-highlight-color: transparent;
}

div#sidenav a,
div#sidenav h2 {
  display: block;
  text-decoration: none;
  color: #fff;
  font-size: 25px;
  margin-bottom: 20px;
  -webkit-tap-highlight-color: transparent;
}

#sidenav #close {
  position: absolute;
  top: 15px;
  right: 206px;
  font-size: 40px;
}

div#sidenav h2 {
  font-size: 34px;
  margin-bottom: 30px;
  margin-top: 20px;
}

div#sidenav a:hover {
  color: #f0adc5;
  cursor: pointer;
}

div#sidenav a:active {
  color: #df7298;
  cursor: pointer;
}

div#stickToLeft {
  text-align: left;
}