/* @import url('https://fonts.googleapis.com/css2?family=Comme&family=Chivo+Mono&family=Playwrite+CU&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Chivo+Mono&family=Comme&family=Playwrite+CU&display=swap');


:root {
  --tool-color-main:rgb(255, 255, 255);
  --tool-background-color-main: rgb(16, 16, 16);
  --tool-background-image-main: url("../images/noise.svg");
  --tool-font-family-main: "Comme", sans-serif;

  --tool-background-color-nav-button:#e9edf5;
  --tool-background-color-hover-nav-button:#f3f6fb;
  --tool-border-color-nav-button: #b8c0ce;

  --tool-font-family-digit-button: "Chivo Mono", monospace;
}

* {
	margin: 0;
	padding: 0;
	border: none;
  font-weight: 400;
  font-style: normal;
}

body {
	background-image: var(--tool-background-image-main);
	background-color: var(--tool-background-color-main);
	background-blend-mode: lighten;
	color: var(--tool-color-main);
	font-family: var(--tool-font-family-main) !important;
}

.game-overlay {
	padding-bottom: 1em;
	padding-top: 1em;
}

.game-overlay > header {
	margin-bottom: 1em;
}

.game-overlay > header > h1.name {
	font-size: 4em !important;
	font-weight: 700 !important;
}

.game-overlay > header > h2.version {
	font-size: 2em !important;
	font-weight: 700 !important;
	margin-top: -0.25em;
	margin-bottom: 0.5em;
}

.game-overlay .loading-message {
  font-size: 2em !important;
  text-transform: uppercase;
  margin-top: 1em;
}

.game-overlay button {
	padding: 0.125em 0.25em;
	border-radius: 0.25em;
	font-size: 2.5em !important;
	margin-top: 1em;
	cursor: pointer;
}

.game-overlay button + button {
	margin-left: 0.5em;
}

.game-overlay .number {
	font-size: 8em !important;
}

.game-overlay select,
.game-overlay label {
	font-size: 2.5em !important;
}

body[data-digits-count="32"] .game-overlay button.digit {
	font-size: 1.0625em !important;
}

body[data-digits-count="24"] .game-overlay button.digit {
	font-size: 1.4375em !important;
}

body[data-digits-count="16"] .game-overlay button.digit {
	font-size: 2.1875em !important;
}

.game-overlay button.digit {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1.375em;
  line-height: 1.375em;
  text-align: center;
  background: #111;
  color: #eee;
  border-radius: 0.375em;
  padding: 0;
  font-family: var(--tool-font-family-digit-button) !important;
  box-shadow: 
	inset 0 0.125em 0.25em rgba(255, 255, 255, 0.075),
	inset 0 -0.125em 0.25em rgba(0, 0, 0, 0.5),
	0 0.125em 0.375em rgba(0,0,0,0.375);
}

.game-overlay button.digit::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
	linear-gradient(to bottom,
	  rgba(255,255,255,0.12) 0%,
	  rgba(255,255,255,0.02) 40%,
	  rgba(0,0,0,0.4) 60%,
	  rgba(0,0,0,0.7) 100%);
  pointer-events: none;
}

.game-overlay button.digit:active {
  transform: translateY(0.015625em);
}

.game-overlay nav button {
	background: var(--tool-background-color-nav-button);
  color: var(--tool-background-color-main);
  border: 0.0625em solid var(--tool-border-color-nav-button);
  transition: background-color 0.25s, box-shadow 0.25s, transform 0.125s, color 0.25s;
}

.game-overlay nav button:hover {
  background-color: var(--tool-background-color-hover-nav-button);
  box-shadow: 0 0 0.1875em rgba(255,255,255,0.125);
  color: #000;
}

/*
.game-overlay nav button:active {
  transform: scale(0.96875);
}
*/

.game-overlay select {
  appearance: none;
  padding: 0.25em 1em 0.25em 0.375em;
  border-radius: 0.125em;
  cursor: pointer;
  background-image: url("../images/select_arrow.svg");
  background-repeat: no-repeat;
  background-position: right 0.5em center;
  background-size: 0.375em;
  transition: box-shadow .25s, border-color .25s;
  display: inline-block;
  margin-top: 1em;
}

.game-overlay label {
	display: block;
  font-family: "Playwrite CU", cursive !important;
}