/* Plinko
 * Main stylesheet
 */

:root {
  --bg-primary: #2a2a42;
  --bg-secondary: #ffefff;
  --bg-highlight: #b0a0b0;

  --bg-hole-number: #80b080;
  --bg-hole-blank: #a0a0a0;
  --bg-hole-erase: #602222;
  --bg-hole-bomb: #000000;
  --bg-hole-submit: #60ff60;

  --font-primary: #ffefff;
  --font-secondary: #4a4a62;

  --font-hole-number: #000000;
  --font-hole-blank: #200020;
  --font-hole-erase: #d0b0d0;
  --font-hole-bomb: var(--font-primary);
  --font-hole-submit: #200020;

  --border-hole-number: #408040;
  --border-hole-blank: #808080;
  --border-hole-erase: #804444;
  --border-hole-bomb: #202020;
  --border-hole-submit: #80ff80;

  --plinko-peg: #f0f0d0;
  --plinko-ball: #ffffdf;
  --plinko-ball-vector: #dfffdf;
}

html {
  min-width: 100%;
  height: 100%;

  background-color: var(--bg-primary);
  color: var(--font-primary);

  font-family: sans-serif;
}

body {
  margin: 0;
}

hr {
  margin: 64px 0;
  color: var(--font-primary);
}

#header {
  text-align: center;
}

#header-title {
}

#wrapper {
  width: 100%;
}

#input-wrapper {
  display: flex;
  justify-content: center;
  gap: 16px;

  margin-bottom: 32px;
}

#label-telephone {
}

#input-telephone {
}

#plinko-wrapepr {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

#canvas {
  display: block;
  margin: 0 auto;
}

#controls-wrapper {
  display: flex;
  justify-content: center;

  gap: 16px;
}

#btn-release {
  background-color: var(--bg-secondary);
  border: 2px solid var(--bg-highlight);
  border-radius: 4px;

  width: 256px;
  height: 32px;
}

#btn-reroll {
  background-color: var(--bg-secondary);
  border: 2px solid var(--bg-highlight);
  border-radius: 4px;

  width: 32px;
  height: 32px;
}

#btn-release:hover,
#btn-reroll:hover {
  background-color: var(--bg-highlight);
  cursor: pointer;
}

#howto-wrapper {
  padding-bottom: 128px;
}

#howto-title {
  text-align: center;
}

#howto-box {
  margin: 0 auto;
  width: 800px;
}