/*REGLAS GENERALES*/
*{
  margin: 0px;
  padding: 0px;
  }
a{
  color: inherit;
  text-decoration: none;
}
p{
  margin-top: 5px;
  margin-bottom: 5px;
}

/* para hacer columnas*/
.flex-container{
  display: flex;
  flex-wrap: wrap;
}
.flex1{flex:1;}
.flex2{flex:2;}
.flex3{flex:3;}
.flex4{flex:4;}
.flex5{flex:5;}
.flex6{flex:6;}

/* INICIO HOJA DE ESTILOS */

html{
  display: flex;
  background-color: grey;
}
  /*de mi cosecha*/
body{
  padding: 10px;
  width: 100vw;
  height: 90vh;
  border-radius: 20px;
  box-shadow: 2px 2px 2px black;
}

/*HEADER*/
header h1{
  text-align: center;
  padding: 1% 1% 1% 1%;
  font-size: 3em;
  font-style: italic;
  text-decoration: underline;
  text-shadow: 2px 2px white;
}
#marcador{
  display: flex;
}  
#marcador label{
  box-shadow: 2px 2px 2px black;
  border-radius: 30px; 
  background-color: green;
  padding: 1% 5% 1% 5%;
  text-decoration: underline;
  font-size: 110%;
  color: white;
  text-shadow: 2px 2px black;
}
#marcador output{
  color: white;
  font-size: 120%;
  padding: 1% 1% 1% 1%; 
  background-color: green;
  border-radius: 20px;
  text-shadow: 2px 2px black;
}
#tablero{
  height: 0.5%;
  background-color: rgba(100,100,100,0.76);
  padding: 3% 20% 15% 20%;
  border-radius: 10px;
}
#tablero figure img{
  width: 140px;
  height: 110px;
  padding: 1% 1% 1% 1%;
}
#tablero figcaption{
  padding: 2% 1% 1% 1%;
  border: solid 2px black;
  background-color: green;
  color: white;
  align-self: center;
  text-shadow: 2px 2px black;
}
#tablero label{
  text-align: center;
  padding: 3%1%1%1%;
  color: white;
}
#tablero div{
  display: flex;
}
#resultat{
  padding: 1% 1% 2% 1%;
  text-align: center;
}
#result{
  text-align: center;
  background-color: rgba(0,200,0,0.35);
  border-radius: 30px;
  color: antiquewhite;
  padding: 1% 1% 1% 1%;
  font-size: 190%;
  text-decoration: underline;
  text-shadow: 2px 2px 2px black;
}
#sheldondice{
  display: flex;
  padding: 1% 1% 1% 1%;
}
#sheldondice output{
  text-align: center;
  padding: 1% 1%;
  font-size: 120%;
  text-decoration: underline;
  color: white;
  text-shadow: 2px 2px 2px brown;
  background-color: green;
  border-radius: 10px;
}
/*MAIN */
main{
  height: 1%;
}
#jugada{
  max-width: 100%;
  text-align: center;
}
#jugada figure img{
  max-width: 50%;
  padding: 1% 1% 1% 1%;
}
#jugada figure img:hover{
  background: red;
  transform: scale(1.2,1.2);
}

#eleccion h1{
  text-align: center;
   text-shadow: 2px 2px white;
}