:root {
    --white: whitesmoke;
    --black: black;
    --red: crimson;
    --green: seagreen;
    --ennemy1 : yellow;
    --ennemy2 : gold;
    --ally1 : blue;
    --ally2 : darkblue;
  }

  .dartboard {
    --bullseye-radius: 6.35;
    --bull-radius: 15.9;
    --triple-outer-radius: 107;
    --triple-width: 8;
    --double-outer-radius: 170;
    --double-width: 8;
    --wire-width: 1.4;
    --wire-color: var(--silver, silver);
    --bullseye-color: var(--red, red);
    --bull-color: var(--green, green);
    --scale: calc(85% / var(--double-outer-radius));
    margin: 0;
    padding: 0;
    list-style: none;
    width: calc(100vmin - 20px);
    height: calc(100vmin - 20px);
    display: grid;
    grid-template-areas: "dartboard";
    overflow: hidden;
    background: var(--black, black);
    color: var(--white, white);
    clip-path: circle();
    text-align: center;
    font: 4vmin/2 Futura, sans-serif;
  }
  .dartboard > li {
    --double-color: var(--triple-color);
  }
  .dartboard > li:nth-child(odd) {
    --single-color: var(--black, black);
    --triple-color: var(--red, red);
  }
  .dartboard > li:nth-child(even) {
    --single-color: var(--white, white);
    --triple-color: var(--green, green);
  }

  .dartboard > li.ennemy {
    --single-color: var(--ennemy1, yellow);
    --triple-color: var(--ennemy2, gold);
  }

  .dartboard > li.ally {
    --single-color: var(--ally1, blue);
    --triple-color: var(--ally2, darkblue);
  }

  .dartboard::after {
    content: "";
    grid-area: dartboard;
    background: radial-gradient(closest-side, var(--bullseye-color) 0 calc(var(--bullseye-radius) * var(--scale)), var(--wire-color) 0 calc((var(--bullseye-radius) + var(--wire-width)) * var(--scale)), var(--bull-color) 0 calc(var(--bull-radius) * var(--scale)), var(--wire-color) 0 calc((var(--bull-radius) + var(--wire-width)) * var(--scale)), transparent 0);
    z-index: 0;
  }
  .dartboard > li {
    grid-area: dartboard;
    background: radial-gradient(closest-side, var(--single-color) 0 calc( 					(var(--triple-outer-radius) - var(--triple-width) - 2 * var(--wire-width)) * 						var(--scale) 				), var(--wire-color) 0 calc( 					(var(--triple-outer-radius) - var(--triple-width) - var(--wire-width)) * 						var(--scale) 				), var(--triple-color) 0 calc((var(--triple-outer-radius) - var(--wire-width)) * var(--scale)), var(--wire-color) 0 calc(var(--triple-outer-radius) * var(--scale)), var(--single-color) 0 calc( 					(var(--double-outer-radius) - var(--double-width) - 2 * var(--wire-width)) * 						var(--scale) 				), var(--wire-color) 0 calc( 					(var(--double-outer-radius) - var(--double-width) - var(--wire-width)) * 						var(--scale) 				), var(--double-color) 0 calc((var(--double-outer-radius) - var(--wire-width)) * var(--scale)), var(--wire-color) 0 calc(var(--double-outer-radius) * var(--scale)), transparent 0);
    --tan9deg: 0.158384440324536;
    clip-path: polygon(calc(50% * (1 - var(--tan9deg))) 0, calc(50% * (1 + var(--tan9deg))) 0, 50% 50%);
  }
  .dartboard > li:nth-of-type(2) {
    transform: rotate(calc(1/ 20 * 1turn));
  }
  .dartboard > li:nth-of-type(3) {
    transform: rotate(calc(2/ 20 * 1turn));
  }
  .dartboard > li:nth-of-type(4) {
    transform: rotate(calc(3/ 20 * 1turn));
  }
  .dartboard > li:nth-of-type(5) {
    transform: rotate(calc(4/ 20 * 1turn));
  }
  .dartboard > li:nth-of-type(6) {
    transform: rotate(calc(5/ 20 * 1turn));
  }
  .dartboard > li:nth-of-type(7) {
    transform: rotate(calc(6/ 20 * 1turn));
  }
  .dartboard > li:nth-of-type(8) {
    transform: rotate(calc(7/ 20 * 1turn));
  }
  .dartboard > li:nth-of-type(9) {
    transform: rotate(calc(8/ 20 * 1turn));
  }
  .dartboard > li:nth-of-type(10) {
    transform: rotate(calc(9/ 20 * 1turn));
  }
  .dartboard > li:nth-of-type(11) {
    transform: rotate(calc(10/ 20 * 1turn));
  }
  .dartboard > li:nth-of-type(12) {
    transform: rotate(calc(11/ 20 * 1turn));
  }
  .dartboard > li:nth-of-type(13) {
    transform: rotate(calc(12/ 20 * 1turn));
  }
  .dartboard > li:nth-of-type(14) {
    transform: rotate(calc(13/ 20 * 1turn));
  }
  .dartboard > li:nth-of-type(15) {
    transform: rotate(calc(14/ 20 * 1turn));
  }
  .dartboard > li:nth-of-type(16) {
    transform: rotate(calc(15/ 20 * 1turn));
  }
  .dartboard > li:nth-of-type(17) {
    transform: rotate(calc(16/ 20 * 1turn));
  }
  .dartboard > li:nth-of-type(18) {
    transform: rotate(calc(17/ 20 * 1turn));
  }
  .dartboard > li:nth-of-type(19) {
    transform: rotate(calc(18/ 20 * 1turn));
  }
  .dartboard > li:nth-of-type(20) {
    transform: rotate(calc(19/ 20 * 1turn));
  }
  
  *,
  ::before,
  ::after {
    box-sizing: border-box;
  }

  #btn{
    display:block;
    margin: 15% auto;
    background-color: crimson;
    border: none;
    color: white;
    padding: 25px 42px;
    text-align: center;
    text-decoration: none;
    font-size: 40px;
    font: 2em "Futura", sans-serif;
    width: 254.16px;
  }

.table-responsive{
  max-width: 900px;
  padding: 15px;
  overflow: auto;
  margin: auto;
}

table{
  width: 100%;
  font-size: 13px;
  white-space: nowrap;
  border-collapse: collapse;
  margin-top: -5%;
  margin-left: auto;
  margin-right: auto;
}

table>tbody>tr>td>img{
  display: inline-block;
  width: 60px;
  height: 60px;
  object-fit:cover;
}

input[type="text"] {
  padding: 20px 30px;
  font-size: 24px;
  font-weight: bold;
  border: none;
  border: 2px solid crimson;
}

input[type="button"] {
  width: 100%;
  padding: 22px 40px;
  background-color: crimson;
  color: white;
  font-size: 24px;
  font-weight: bold;
  border: none;
}

#healthPlayer1, #healthPlayer2{
  margin-right: 10%;
}

.player{
  display:inline-block;
    margin: 5% auto;
    background-color: crimson;
    border: none;
    color: white;
    padding: 25px 42px;
    text-align: center;
    text-decoration: none;
    font-size: 40px;
    width: 40%;
    margin-left: 5%;
    font: 2em "Futura", sans-serif;
}

#rounds{
  display:block;
  margin: 15% auto;
  margin-top: -12%;
  background-color: crimson;
  border: none;
  color: white;
  padding: 25px 42px;
  text-align: center;
  text-decoration: none;
  font-size: 40px;
  font: 2em "Futura", sans-serif;
  width: 254.16px;
}

#swal2-title
{
  font: 2em "Futura", sans-serif;
}

*:not(#canvas){
  z-index: 2;
  position: relative;
}

.swal2-container {
position: absolute !important;
padding: 0 !important;
height: 100vh !important;
background-color: rgba(0, 0, 0, 0.1) !important;
}

canvas{
  position: absolute;
  z-index: 1;
  height: 100% !important;
  width: 100% !important;
}