.overlay {
   visibility: hidden;
   opacity: 0;
   background-color: white;
   z-index: 1;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;

   transition-property: opacity, visibility;
   transition-duration: 750ms;
   transition-timing-function: ease-in-out;

}

.overlay.show {
   opacity: 0.4;
   visibility: visible;

}


.endscreen {
   visibility: hidden;
   position: absolute;
   z-index: 2;
   left: 0;
   right: 0;
   width: 38vw;
   height: fit-content;
   margin-left: 31vw;
   margin-right: 31vw;
   margin-top: 15vh;
   background-color: white;
   padding: 20px;

   opacity: 1;

   display: flex;
   flex-direction: column;
   justify-content: baseline;
   align-content: flex-end;
   border-radius: 6px;
   box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 15px;

   /* transition-delay: 750ms; */
   transition-duration: 1s;
   transition-property: top, opacity, visibility;
   transition-timing-function: ease-in-out;

   top: 15vw;
   opacity: 0;


   text-align: center;

}

.endscreen>p {
   padding: 10px;
}

.endscreen.show {

   visibility: visible;

   top: 0px;
   opacity: 1;
}


/* mozda bi bilo lijepo napravit animaciju kad se copy button  klikne opet */

.endscreen-button {
   margin: 10px;
   margin-left: auto;
   margin-right: auto;

   width: 40%;
}

.win-text {
   font-size: 24px;
   font-weight: 600;
   /*trebamo nac neki bolji font*/
}