@import url('https://fonts.googleapis.com/css2?family=Reddit+Mono:wght@200..900&display=swap');

body {
  background-color: #202020;
  overflow: hidden;
  font-family: 'Reddit Mono', monospace;
  margin: 0;
  padding: 0;
}

p {
  color: #ffffff;
  font-family: inherit;
  margin: 0;
}

#center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100dvh;
}

#buttonContainer {
  width: 100dvw;
  height: 100dvw;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

#mainButton {
  width: 80dvw;
  height: 80dvw;
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  background-color: #303030;
  border-radius: 50dvw;
  border: 1px solid #505050;
  
  overflow: hidden;
}

#mainContent {
  font-size: 16%;
}

.number {
  display: inline-block;
  color: #ffffff;
  transition: 0.2s;
}

.colon {
  display: inline-block;
  transform: translateY(-6%);
  color: #888888;
  transition: 0.2s;
}

#clickEffectContainer {
  position: absolute;
  overflow: hidden;
}

.clickEffect {
  position: absolute;
  background-color: #ffffff;
}

.number.stopped {
  color: #aaffaa;
}

.colon.stopped {
  color: #558855;
}