* {
    --c1: #cbc;
  }
  
  body {
    padding: 0; 
    margin: 0;
  }
  
  body > div:first-child  {
    margin: 0%;
    width:100%;
    min-width: 500px;
  }
  
  nav a:hover{
    background: lightgrey;
  }
  .invisible {
    display: none;
  }
  
input {
  border: 0;
  box-shadow: 3px 3px 2px black;
}
  #fondo {
    position: fixed;
    top: 70px; left: 0;
    width: 100%;
    height: 120%;
    background-color: rgba(250,250, 250, 0.7);
    z-index: 1;
  }
  #avisador {
    position: absolute;
    z-index: 2;
    top: 20%; left: -10%;
    margin-left: 16%;
    min-width: 300px;
    width: 60%;
    text-align: center;
    line-height: 1;
    padding: 30px;
    color: white;
    border-radius: 10px;
  }
  
  .bien {
    background-color: blue;
    color: white;
    font-weight: bold;
  }
  
  .mal {
    background-color: darkorange;
  }
  #avisador:hover{
  
  }
  
  #avisador input {
    padding: 20px;
    font-size: 14pt;
    margin-top: 30px;
  }
  
  h1 {
    text-align: center;
  }
  
  body > div div:nth-child(3) {
    text-align: center;
  }
  
  #seguir {float: right; 
    height: 3em;}
  
  #volver {float: left; 
    height: 3em;}
  
  #comotellamas {
    position: absolute;
    z-index: 2;
    background: white; 
    border: 1px solid grey;
    top: 20%; left: -10%;
    margin-left: 16%;
    min-width: 300px;
    width: 75%;
    text-align: center;
    line-height: 1;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 7px 7px 3px #333;
  }
  
  #comotellamas p {
    margin-top: 30px;
  }
  
  #comotellamas input[type="button"]{  
    padding: 3px 8px;
    font-style: italic;
    margin: 0.5ex;
    border-radius: 5px;
  }
  
  #marcador {
    padding: 10px 20px;
    background: #DACD22;
    border-bottom: 4px solid orange;
  }
  
  #recuento {

    border-bottom: 3px solid orange;
    background: white;
  }
  #recuento table{ 
    margin: 0;
    height: 10px;
    border-collapse: collapse;
    border-spacing: 0;
  }
  #recuento td {
    text-align: center;
    width: 5vw;
    margin: 0; 
    border-radius: 0;
  }
  
  #recuento .right {
    background-color: #33E46D;
  }
  
  #recuento .wrong {
    background-color: #E4336D;
    
  }
  
  
  .grande {
    font-size: 30pt; 
    text-align: center; 
    margin: 20px 0;
  }
  
  .auxiliar {
    font-style: italic;
  }
  
  #tarjeta {
    padding: 20px;
    text-align: center;
  }
  
  /*
  #F43779,#33A7E4,
  #33E46D,#FF9439,
  #FF5039,#F43779
  ,#33A7E4,#33E46D
  */
  
  .color1 {
    background: #22ADC2 ;
  }
  .color2 {
    background: #33E46D; color: #003;
  }
  .color3 {
    background:  #F43779; color: #114;
  }
  
  #tarjeta input[type="button"] {
    padding: 8px 20px;
    border-radius: 8px;
  }
  #tarjeta input {
   margin: 5px;
  }
  .selected {
    background: lightblue;
  }
  
  #tarjeta input[type="number"]{
    width: 3em;
  }
  #tarjeta table {
    margin: auto;
    background: white;
    opacity: 0.8;
    border-radius: 10px;
  }
  
  #tarjeta td {
    border-radius: 50%;
    text-align: center;
    height: 30px; width: 30px;
  
  }
  
  #tarjeta table tr:nth-child(1) td, #tarjeta table tr td:nth-child(1) {
    color: black;
    font-style: italic;
  }