/* some style */
body {
  background-color: #222;
  color: #DDD;
  font-family: fantasy
}

h1 {
  margin: 0.1em 0.1em;
  margin-bottom: 0.5em;
  font-family: serif;
  font-size: 3rem;
}

button {
  border: 0;
  /* background: none; */
  box-shadow: none;
  border-radius: 0px;
  padding: 1rem 2rem;
  font-size: 2rem;
  text-align: center;
}

.main {
  display: grid;
  grid-template-columns: auto 95px;
  grid-template-rows: 20px 70px auto auto auto;
  grid-template-areas:
  "toprow  toprow"
  "title   dice"
  "roles   dice"
  "stats   dice"
  "refresh refresh";
}

.app-title {
  grid-area: title;
}

.dice-selector {
  grid-area: dice;
}

.dice-board {
  grid-area: roles;
}

.roll-distributions {
  margin-top: 6em;
  grid-area: stats;
}

.crit-fail {
  color: #FF1300;
  /* color: #B70D00 */
}

.crit-roll {
  color: #FFD700;
}

.worst-roll {
  color: #AA99D7;
}

.best-roll {
  color: #00C322;
}

.dice-timeout {
  grid-area: toprow;
  width: 100%;
  height: 5px;
  -webkit-appearance: none;
  appearance: none;
  margin-bottom: 10px;
}

.dice-timeout[value]::-webkit-progress-bar {
  background-color: #222;
  /* background-color: red; */
}

.dice-timeout[value]::-webkit-progress-value {
  background-color: #AAA;
}

.dice-icon {
  width: 95px;
}

@keyframes dice-roll-animation {
  from {transform: rotate(0deg)}
  to {transform: rotate(360deg)}
}

.refresh-icon {
  grid-area: refresh;
  margin: 0px auto;
  height: 60px;
  float: right;
}

.roll-distribution {
  display: inline-block;
  margin-bottom: 25px;
  margin-right: 25px;
}

.roll-distribution p {
  margin: 0;
  text-align: center;
}

.roll-distribution .recharts-wrapper {
  display: inline-block;
}

.roll-summaries__summary {
  margin: 0em 1em;
  display: inline-block;
}


.roll-summaries__summary_value {
  display: block;
  text-align: center;
  font-size: 2.5em;
  margin-bottom: -0.3em;
}

.roll-summaries__summary_label {
  display: inline-block;
  width: 100%;
  text-align: center;
}

.recharts-surface {
  border-left: 2px;
  border-left-style: solid;
  border-left-color: #666;

  border-bottom: 2px;
  border-bottom-style: solid;
  border-bottom-color: #666;
}