body { padding: 0; margin: 0; overflow: hidden;  }
#unity-container { position: absolute }
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
#unity-container.unity-mobile { width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; max-height: 100%; }
 #unity-canvas {width: auto; height: 100.5vh; background: #F1F1F1 } 
.unity-mobile #unity-canvas { width: 100%; height: 100.1% }
#unity-custom-loading-screen {  width: 100%; height: 100%;}

@font-face {
    font-family: shine_bubble_regular;
    src: url('./TemplateData/shine_bubble_regular.ttf');
  }

  #background {
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    position: absolute;
    background-image: url('./TemplateData/game_background.jpg');
    background-size: auto 105%; 
    background-repeat:no-repeat;
    background-position: center center; 
    width: 100%;
    height: 100.1%;
    overflow: hidden;
    touch-action: none
  }

  #background-loading {
    color : #b8f5f6;
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    position: absolute;
    background-color: #b8f5f6;
    background-repeat:no-repeat;
    background-position: center center; 
    width: 100%;
    height: 100%;
    overflow: hidden;
    touch-action: none
  }


#custom-logo, #custom-loader {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    touch-action: none
}

#custom-logo {
    background-image: url('./TemplateData/background.jpg');
    background-size:auto 105%; 
    background-repeat: no-repeat;
    background-position: center center; 
    width: 100%;
    height: 100%;
    touch-action: none
}


#custom-loader-container 
  {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    touch-action: none
  }


#custom-loader-bg {
    position: absolute;
    left: 50%;
    bottom: 2%;
    transform: translateX(-50%);
    width: 8vh;
    height: 8vh;

    background-image: url('./TemplateData/loading_ui.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    touch-action: none
}


#custom-loader-bg .label {
    position: relative;
    top: 35%;
    font-size: 1.5vh;
    text-align: center;
    color: white;
    font-family: shine_bubble_regular;
    touch-action: none
}



#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #00000080;
  display: flex; 
  justify-content: center;
  align-items: center;
  z-index: 10;
  touch-action: none
}

#overlay-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  border-radius: 30px; /* Rounded borders */
  padding: 15px; /* Padding */
  touch-action: none
}

#alert-text {
  color:  rgb(0, 0, 0);
  margin-bottom: 10px;
  font-family: shine_bubble_regular;
  touch-action: none
}

#button-copy {
background-color: #000000;
border: none;
color: rgb(255, 255, 255);
padding: 5px 20px;
border-radius: 30px; 
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
font-family: shine_bubble_regular;
touch-action: none
}


/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
  visibility: hidden; /* Hidden by default. Visible on click */
  min-width: 250px; /* Set a default minimum width */
  margin-left: -141px; /* Divide value of min-width by 2 */
  background-color: #333; /* Black background color */
  color: #fff; /* White text color */
  text-align: center; /* Centered text */
  border-radius: 2px; /* Rounded borders */
  padding: 16px; /* Padding */
  position: fixed; /* Sit on top of the screen */
  z-index: 1; /* Add a z-index if needed */
  left: 50%; /* Center the snackbar */
  bottom: 30px; /* 30px from the bottom */
  font-family: shine_bubble_regular;
  touch-action: none
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}