@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@600');

body {
  background-color: #404045;
}

/* Classes CSS */
.text {
  color: #dddddd;
  font-family: "Inconsolata";
}

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.button:hover {
  cursor: pointer;
}



/* Main CSS */
#header {
  font-size: 3vw;
  width: 12.5vw;
  
  border: 4px solid #dddddd;
  border-style: none solid solid none;
  border-bottom-right-radius: 1vw;
}



/* Clix Game CSS */
#game {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  
  text-align: center;
}

#click {
  background-color: #606065;
  width: 20vw;
  aspect-ratio: 3/1;
  border: none;
  border-radius: 1vw;
  font-size: 4vw;
}

#click:active {
  background-color: #707075;
  transform: scale(1.05);
  transition: transform 20ms ease-in-out;
}

#counter {
  font-size: 2.5vw;
}