:root{
    --left-primero: 100%;
    --left-segundo: 145%;
    --left-tercero: 55%; 
    --top-primero:-2rem;
    --top-segundo:2rem;
    --dimensiones-grupo: 4rem;
}
*{
    user-select: none;
    text-align: center;
    font-family: 'Manrope', sans-serif;
    font-family: 'Poppins', sans-serif;
    font-family: 'Roboto', sans-serif;
}
html{
    background: url(../img/fondo-bar.jpg);
    background-size: cover;
    background-attachment: fixed;
}
button{
    color: whitesmoke;
    background: black;
    font-size: 1.25rem;
    cursor: pointer;
    border-radius: 4px;
    min-width: 4rem;
    max-width: auto;
    min-height: 1.5rem;
    max-height: autp;
}
/* Contenedores principales */
.container-jugadores{
    display: flex;
    justify-content: center;
    left: 30%;
}
.nosotros, .ellos{
    position:relative;
    width: 15rem;
    height: 40rem;
    backdrop-filter: white;
    align-items: center;
    text-align: center;
    margin: 1rem 0 0 1rem;
    overflow: hidden;
    border: black outset 0.5rem;
    backdrop-filter: blur(30px);
}

/* Botones */
.botones{
    padding-top: 1rem;
}
.boton-reset{
    display: flex;
    justify-content: center;
    margin: 1rem;
}

/* Elementos del contador */
img{
    width: 1rem;
    height: 4rem;
}
.grupo{
    position: relative;
    left: 20%;
    width: var(--dimensiones-grupo);
    height: var(--dimensiones-grupo);
    margin-bottom: .75rem;
}
.separador{
    border-top: 2px solid black;
    width: var(--dimensiones-grupo);
    margin: 2rem  0 2rem 36%;
}
.fosforo1{
    position: absolute;
    transform: rotate(90deg);
    top: var(--top-primero);
    left: var(--left-primero);
}
.fosforo2{
    position: absolute;
    transform: rotate(180deg);
    left: var(--left-segundo);
}
.fosforo3{
    position: absolute;
    transform: rotate(270deg);
    top: var(--top-segundo);
    left: var(--left-primero);
}
.fosforo4{
    position: absolute;
    left: var(--left-tercero);
}
.fosforo5{
    position: absolute;
    transform: rotate(45deg);
    left: var(--left-primero);
}
/* Fondo de pantalla */
.fondo-img{
    position: absolute;
}
/* LOADER */
/* LOADER */
.lds-ring {
    background-color: black;
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
  }
  .lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    margin: 8px;
    border: 8px solid #fff;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #fff transparent transparent transparent;
  }
  .lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
  }
  .lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
  }
  .lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
  }
  @keyframes lds-ring {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
.centrado{
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background-color: black;
}
.centralizar{
    text-align: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
}
.hidden{
    overflow: hidden;
}
/* Fin de LOADER */
/* Tabla de puntos */
.guia-puntos{
    display: flex;
    position: relative;
    width: 15rem;
    height: auto;
    font-size: 0.7rem;
    background-color: whitesmoke;
    border: 2px outset black;
}
.hidden2{
    display: none;
}
table{
    border-collapse: collapse;
}
tr, td{
    border: 2px solid black;
}
.envido{
    position: absolute;
    top: 3vh;
    right: 10vw;
}
.flor{
    position: absolute;
    top: 40vh;
    right: 10vw;
}
.truco{
    position: absolute;
    top: 70vh;
    right: 16vw;
    width: auto;
}