body {
   background-color: rgba(87, 87, 247, 0.486);
}

.result {
   display: flex;
   position: relative;
   top: 60px;
   /* width: 1138px; */
   width: 100%;
   justify-content: center;
}

.player1 {
   width: 40%;
   height: 50px;
   background-color: wheat;
   display: flex;
   flex-direction: row-reverse;
}

.time {
   width: 10%;
   height: 70px;
   background-color: black;
   color: white;
   text-align: center;
   font-size: 2rem;
}

.player2 {
   width: 40%;
   height: 50px;
   background-color: wheat;
}

.p1Health {
   background-color: tomato;
   height: 50px;
   width: 100%;
}

.p2Health {
   background-color: tomato;
   height: 50px;
   width: 100%;
}

.model-container {
   position: absolute;
   top: 0;
   font-family: system-ui;
   width: 100vw;
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: rgba(1, 200, 5, 0.24);
   /* opacity: 0.2; */
}

.pop-up {
   width: 260px;
   height: 190px;
   background-color: white;
   padding: 20px;
   border-radius: 16px;
   box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
   text-align: center;
   opacity: 1;
}

.winner {
   font-size: 1.5rem;
}

.congrts {
   color: gray;
   margin-bottom: 25px;
}


.close {
   align-items: center;
   appearance: none;
   background-image: radial-gradient(100% 100% at 100% 0, #5adaff 0, #5468ff 100%);
   border: 0;
   border-radius: 6px;
   box-shadow: rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, rgba(58, 65, 111, .5) 0 -3px 0 inset;
   box-sizing: border-box;
   color: #fff;
   cursor: pointer;
   display: inline-flex;
   font-family: "JetBrains Mono", monospace;
   height: 48px;
   justify-content: center;
   line-height: 1;
   list-style: none;
   overflow: hidden;
   padding-left: 16px;
   padding-right: 16px;
   position: relative;
   text-align: left;
   text-decoration: none;
   transition: box-shadow .15s, transform .15s;
   user-select: none;
   -webkit-user-select: none;
   touch-action: manipulation;
   white-space: nowrap;
   will-change: box-shadow, transform;
   font-size: 18px;
}

.close:focus {
   box-shadow: #3c4fe0 0 0 0 1.5px inset, rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
}

.close:hover {
   box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
   transform: translateY(-2px);
}

.close:active {
   box-shadow: #3c4fe0 0 3px 7px inset;
   transform: translateY(2px);
}
.d-none {
   display: none;
}
.wrapper {
   width: 90%;
}
canvas {
   width: 100%;
}