* {
  box-sizing: border-box;
  --number-padding: 0.15em;
  --timer-size: 1.125em;
  --square-size: 1.8rem;
  --gap-size: 1rem;
  --border-properties: 0.2em solid;
  --ff: monospace;
  --main-color: #bebebe;
  --border-color-pushed: #808080 #f9f9f9 #f9f9f9 #808080;
  --border-color-unpushed: #f9f9f9 #808080 #808080 #f9f9f9;
}

html {
  background-color: #377e7f;
}

body {
  margin: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  overflow-x: scroll;
}

.background {
  position: absolute;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: fit-content;
  background-color: var(--main-color);
  border: var(--border-properties);
  border-color: var(--border-color-unpushed);
}

input[type="radio"] {
  opacity: 0;
  position: absolute;
}

input[type="radio"] + label {
  cursor: pointer;
}

label {
  font-family: monospace;
}

a,
.button,
input[type="submit"] {
  cursor: pointer;
  font-family: monospace;
  font-size: 1em;
  background-color: var(--main-color);
  border: var(--border-properties);
  border-color: var(--border-color-unpushed);
}

input[type="submit"] {
  margin: 2em 0 0 0;
  background-color: rgb(139, 171, 139);
  border: var(--border-properties);
  border-color: rgb(198, 227, 198) rgb(94, 125, 94) rgb(94, 125, 94)
    rgb(198, 227, 198);
}

input[type="submit"]:active {
  border-color: rgb(94, 125, 94) rgb(198, 227, 198) rgb(198, 227, 198)
    rgb(94, 125, 94);
}

a:active,
.button:active {
  border-color: var(--border-color-pushed);
}

.button:has(input[type="radio"]:checked) {
  background-color: #a0a0a0;
  border-color: var(--border-color-pushed);
}

#custom-options > * {
  box-sizing: border-box;
  width: 100%;
  padding: 0.5em;
  margin: 0;
}

#smileyface {
  display: block;
  width: calc(var(--square-size) * 1.2);
  aspect-ratio: 1;
  padding: 0.08em;
}

#board {
  display: grid;
  padding: 0;
  margin: var(--gap-size);
  grid-template-columns: repeat(var(--columns), 1fr);
  grid-template-rows: repeat(var(--rows), 1fr);
  background-color: #bfbfbf;
  border: var(--border-properties);
  border-color: var(--border-color-pushed);
}

.menu > * {
  width: 20rem;
  padding: 1em;
  text-align: center;
}

.menu {
  display: flex;
  flex-direction: column;
  padding: var(--gap-size);
  gap: var(--gap-size);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4em;
  margin: var(--gap-size);
  border: var(--border-properties);
  border-color: var(--border-color-pushed);
}

#top-bar {
  margin: calc(var(--gap-size) / 5);
  padding: calc(var(--gap-size) / 5);
  background-color: #00007a;
  font-family: monospace;
  color: #f9f9f9;
  border: none;
}

#top-bar > * {
  padding: 0;
  margin: 0;
}

#close-button {
  height: calc(var(--square-size) * 0.75);
  width: calc(var(--square-size) * 0.75);
  text-decoration: none;
  color: #000;
  text-align: center;
  line-height: 1.4;
}

.times {
  display: flex;
}

#board > * {
  width: var(--square-size);
  height: var(--square-size);
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
}

#board > .hidden {
  background-color: #bebebe;
  border: var(--border-properties);
  border-color: var(--border-color-unpushed);
  cursor: pointer;
}

#board > .clicked-mine {
  background-color: red;
  border: 0.075em solid #808080;
}

#board > .revealed {
  background-color: #c0c0c0;
  border: 0.075em solid #808080;
}

.numb0 {
  content: url(../images/counters/zero.png);
  width: var(--timer-size);
}

.numb1 {
  content: url(../images/counters/one.png);
  width: var(--timer-size);
}

.numb2 {
  content: url(../images/counters/two.png);
  width: var(--timer-size);
}

.numb3 {
  content: url(../images/counters/three.png);
  width: var(--timer-size);
}

.numb4 {
  content: url(../images/counters/four.png);
  width: var(--timer-size);
}

.numb5 {
  content: url(../images/counters/five.png);
  width: var(--timer-size);
}

.numb6 {
  content: url(../images/counters/six.png);
  width: var(--timer-size);
}

.numb7 {
  content: url(../images/counters/seven.png);
  width: var(--timer-size);
}

.numb8 {
  content: url(../images/counters/eight.png);
  width: var(--timer-size);
}

.numb9 {
  content: url(../images/counters/nine.png);
  width: var(--timer-size);
}

.happy {
  content: url(../images/happy.png);
}

.cool {
  content: url(../images/win.png);
}

.dead {
  content: url(../images/dead.png);
}

.click {
  content: url(../images/click.png);
}