:root {
  --fondo-html: #dfdfdf;
  --fondo-titulo: #d7b575;
  --fondo-titulo-claro: #f4e6cc;
  --texto-titulo: #353535;
  --fondo-card: #f0f0f0;
  --sombra-card: #b7b7b7;
}
/*Clases para JS*/
.hidden{
  display: none;
}

html {
  background-color: var(--fondo-html);
}

body {
  margin: auto;
  padding: 0;
  /*max-width: 400px;*/
  max-height: 100vh;
  max-height: 100%;
  border-radius: 10px;
  background-color: white;
  box-shadow: 1px 1px 10px var(--sombra-card);
}

h1 {
  background: var(--fondo-titulo);
  color: var(--texto-titulo);
  padding: 25px 0;
  margin: 0;
  text-align: center;
}

main {
  text-align: center;
  padding: 30px;
}
/* Selector tipos dados */

select {
  width: 100%;
  background-color: var(--fondo-titulo);
  border: none;
  border-radius: 10px;
  padding: 10px 10px;
  margin-bottom: 20px;
  font-size: 25px;
  color: var(--texto-titulo);
}
select option:hover {
  background-color: var(--fondo-titulo-claro);
}

/* Lista de dados */
.lista-dados {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.dice-type.std {
  background-image: url(../img/std.jpg);
}
.dice-type.fate {
  background-image: url(../img/fate.jpg);
}
.dice-type.poquer {
  background-image: url(../img/poquer.jpg);
}

.dice-type.d4 {
  background-image: url(../img/d4.jpg);
}

.dice-type.d6 {
  background-image: url(../img/d6.jpg);
}

.dice-type.d8 {
  background-image: url(../img/d8.jpg);
}

.dice-type.d10 {
  background-image: url(../img/d10.jpg);
}

.dice-type.d10-2 {
  background-image: url(../img/d10-2.jpg);
}

.dice-type.d12 {
  background-image: url(../img/d12.jpg);
}

.dice-type.d20 {
  background-image: url(../img/d20.jpg);
}

.dice-type {
  border: 1px solid #d7d7d7;
  border-radius: 10px;
  background-size: contain;
  background-repeat: no-repeat;
  height: 150px;
  width: 110px;
  overflow: hidden;
  display: flex;
  align-items: end;
}

.dice-type input {
  width: 100%;
  background: none;
  border: none;
  font-size: 25px;
  text-align: center;
}

#dado-fate input, #dado-poquer input {
  display: none;
}

.btn-cantidad {
  padding: 10px 15px;
  margin: 0px 0px;
  border-radius: 10px;
  border: none;
  background-color: #d7d7d7;
  font-size: 17px;
}

/* Boton de lanzar y resultados*/
.boton-lanzar {
  width: 100%;
  text-align: center;
  margin-top: 25px;
  font-size: 30px;
  border: none;
  border-radius: 10px;
  padding: 10px 0;
  background-color: var(--fondo-titulo);
  color: var(--texto-titulo);
}
#suma {
  font-weight: bold;
  font-size: 25px;
  margin: 15px;
}

#tabla-resultados table {
  width: 100%;
  border: 1px solid #a4a4a4;
  border-radius: 10px;
  border-spacing: 0;
  overflow: hidden;
}
#tabla-resultados thead {
  font-weight: bold;
  background-color: var(--fondo-titulo);
}
tr:nth-child(even) {
  background-color: var(--fondo-titulo-claro);
}
.fate tbody tr, .poquer tbody tr {
  height: 35px;
}
.fate tbody td:nth-child(2), .poquer tbody td:nth-child(2) {
  font-weight: bold;
  font-size: 25px;
}