:root {
  --gris: #aaa;
  --rojo: #e93d50;
  --verde: #08fb10;
  --verde-oscuro: #001e01c7;
  --rojo-oscuro: #af303f;
  --blanco: #fff;
  --blue: #096fec;
  --aqua: #91e7d9;
  --aqua-dark: #002f27f8;
  --luz: rgb(229, 255, 0);
}
*{
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  align-items: center;
  background: var(--blue); 
  background: -moz-linear-gradient(left, var(--blue) 0%, var(--aqua) 100%); 
  background: -webkit-linear-gradient(left, var(--blue) 0%,var(--aqua) 100%); 
  background: linear-gradient(to right, var(--blue) 0%,var(--aqua) 100%);
  justify-content: center;
  flex-direction: column;
  font-family: Arial, Helvetica, sans-serif;
  min-height: 100vh;
}

.btnsActions{
  display: flex;
  margin: 15px 0;
  padding: 10px;
  align-items: center;
  justify-content: center;
  max-width: 400px;
  width: 90%;
  gap: 10px;
}

.newGame, .nextGame {
  background-color: var(--blanco);
  border-radius: 20px;
  box-shadow: 3px 3px 0 var(--gris);
  color: var(--blue);
  cursor: pointer;
  font-size: 1.25em;
  width: 50%;
  height: 80px;
  font-weight: bold;
  text-align: center;
  border: 0;
}
.newGame:active, .nextGame:active{  
  background-color: var(--aqua);
  border: 4px solid  var(--aqua);
  box-shadow: 3px 3px 0 var(--aqua-dark) inset;
  color: var(--blanco);
  outline: none;
}
.nextGame{
  visibility: hidden;
}
.teclado {
  width: 90%;
  max-width: 400px;
  background: var(--blue); 
  background: -moz-linear-gradient(right, var(--blue) 0%, var(--aqua) 100%); 
  background: -webkit-linear-gradient(right, var(--blue) 0%,var(--aqua) 100%); 
  background: linear-gradient(to left , var(--blue) 0%,var(--aqua) 100%);
  /*box-shadow: 6px 8px 0 6px var(--blue);*/
  border-radius: 20px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  padding: 10px;
}

.tecla {
  background-color: var(--blanco);
  border-radius: 20px;
  box-shadow: 3px 3px 0 var(--gris);
  color: var(--blue);
  cursor: pointer;
  height: 100%;
  width: 100%;
  font-size: 1.75em;
  font-weight: bold;
  line-height: 120px;
  text-align: center;
  border: 0;
  border: 4px solid  transparent;
}
.tecla img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Acomoda la imagen para que cubra todo el botón sin deformarse */
}
.activa{
  background-color: var(--blue);
  border: 4px solid  var(--blue);
  box-shadow: 3px 3px 0 var(--aqua-dark) inset;
  color: var(--blanco);
  outline: none;
}
.customer{
  background-color: var(--aqua);
  border: 4px solid  var(--aqua);
  box-shadow: 3px 3px 0 var(--aqua-dark) inset;
  color: var(--blanco);
  outline: none;
}
.error{
  background-color: var(--rojo);
  border: 4px solid  var(--rojo);
  box-shadow: 3px 3px 0 var(--aqua-dark) inset;
  color: var(--blanco);
  outline: none;
}

.tecla:focus {
  outline: none;
  box-shadow: 3px 3px 0 var(--aqua-dark) inset, 1px 1px 10px var(--luz);
}
.scores{
  display: flex;
  gap: 20px;
  width: 90%;
  max-width: 400px;
  padding: 20px 10px;
  border-radius: 20px;
  border: 5px solid var(--blanco);
  margin-top: 20px;
  font-size: 24px;
  color: var(--blue);
  background-color: #eeeeeeb7;
}
.footer{ 
  display: flex;
  flex-direction: column;
  padding: 5px 5px 5px 5px;
  border-radius: 6px;
  margin: 20px 0;
  box-sizing: border-box;   
  justify-content: space-around; 
  align-items: center;
  flex-wrap: wrap; 
}
.divFooter{
  display: flex; 
  color: #0f2649;
  text-align: end; 
  align-items: center; 
  justify-content: center; 
  margin: 20px 0;
}

.aKofi{
  color: #0f2649;
  margin-top: 10px;
}
img.kofiimg{
  display: initial!important;
  vertical-align:middle;
  padding-top:0!important;
  padding-bottom:0!important;
  border:none;margin-top:0;
  margin-right:5px!important;
  margin-left:0!important;
  margin-bottom:3px!important;content:url('https://storage.ko-fi.com/cdn/cup-border.png')
}
.kofiimg:after{
  vertical-align:middle;
  height:25px;
  padding-top:0;
  padding-bottom:0;
  border:none;
  margin-top:0;
  margin-right:6px;
  margin-left:0;
  margin-bottom:4px!important;
  content:url('https://storage.ko-fi.com/cdn/whitelogo.svg')
}
img.kofiimg {
  height:30px!important;
  width:44px!important;
  display: initial;
  animation: kofi-wiggle 3s infinite;}
  @keyframes kofi-wiggle{
      0%{transform:rotate(0) scale(1)}
      60%{transform:rotate(0) scale(1)}
      75%{transform:rotate(0) scale(1.12)}
      80%{transform:rotate(0) scale(1.1)}
      84%{transform:rotate(-10deg) scale(1.1)}
      88%{transform:rotate(10deg) scale(1.1)}
      92%{transform:rotate(-10deg) scale(1.1)}
      96%{transform:rotate(10deg) scale(1.1)}
      100%{transform:rotate(0) scale(1)}
  }
  .logoimg{
    padding: 4px;
  }