body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

/* Define the custom font using @font-face */
@font-face {
  font-family: "HippieSans";
  src: url("assets/HippieSans.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

video {
  width: 100vw; /* Make the video take the full width */
  height: 100vh; /* Make the video take the full height */
  object-fit: cover; /* Ensures the video covers the screen while keeping aspect ratio */
  transition: all 0.5s;
  opacity: 1;
  left: 0;
  right: 0;
  margin: auto;
}

#background {
  position: fixed;
  background-image: url("./assets/bg.png");
  background-size: cover;
  background-position: center;
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  left: 0;
  right: 0;
  margin: auto;
}

#homeBtn{
  opacity: 0;
  transition: all .5s;
  cursor: pointer;
  touch-action: auto;
  pointer-events: all;
  z-index: 10000000;
}

#background img{
  height: 7%;
  right: 0;
  position: absolute;
  margin: 3%;
}

.default {
  color: #ffffff;
  position: absolute;
  top: 0;
  opacity: 0;
  z-index: -1;
}

.default p {
  opacity: 1;
}

.default p:nth-child(1) {
  font-family: "HippieSans";
}

.default p:nth-child(1) {
  font-family: "HippieSans";
}

#game-sec {
  position: fixed;
  transition: all 1s;
}

.loader {
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.lds-ring {
  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 #ffffff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #ffffff 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);
  }
}

button {
  background: transparent;
  border: none;
}

.topBoardScreen,
.userScreen,
.scoreScreen,
.leaderboardScreen {
  display: flex;
  width: 100%;
  height: 100%;
  position: fixed;
  justify-content: center;
  align-content: center;
  display: none;
  left: 0;
  right: 0;
  margin: auto;
}

.topBoardScreen {
  touch-action: none;
  pointer-events: none;
}

.topBoardScreen img {
  width: 70vw;
  height: auto;
  position: absolute;
  top: -50%;
  transition: all .5s;
}

.boxdiv {
  top: 15vh;
  transition: all .5s;
  /* bottom: 0; */
  left: 0;
  right: 0;
  position: absolute;
  height: 60%;
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  width: 80%; /* Set width relative to the viewport width */
  /* max-width: 600px; */ /* Maximum width of the box */
  aspect-ratio: 9 / 16; /* Aspect ratio of 9:16 (similar to 1080x1920) */
  background-color: rgba(0, 192, 233, 0.6); /* Background color */
  border-radius: 30px; /* Rounded corners */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Optional shadow for effect */
  border: 4px solid white;
  flex-direction: column;
  bottom: -170%;
}

.userScreen .boxdiv{
  height: 60% !important;
}

.scoreScreen .boxdiv{
  height: 70% !important;
}

.leaderboardScreen .boxdiv{
  height: 75% !important;
}

.insideBox {
  width: 100%;
  /* border: 1px solid white; */
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
}

.insideBox input {
  height: 33%;
  border: none;
  border-bottom-width: medium;
  border-bottom-style: none;
  border-bottom-color: currentcolor;
  background: transparent;
  border-bottom: 2px solid black;
  width: 68%;
  touch-action: auto;
  pointer-events: all;
  outline: none;
  text-align: center;
  font-family: "HippieSans";
  font-size: 5vh;
  color: white;
}

/* Container styling to center the content */
.leaderboard-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;font-family: "HippieSans";
  font-size: 3.5vh;color: white;
}

/* Styling for each leaderboard character */
.leaderboardchar {
  width: 100%;                        /* Full width */
  height: 200px;                       /* Set a fixed height */
  background-size: 80% auto;           /* Make the image cover the div */
  background-position: center;         /* Center the image in the div */
  background-repeat: no-repeat;
  display: flex;                       /* Flexbox for the row of inner divs */
  flex-direction: row;                 /* Inner divs arranged in a row */
  justify-content: space-around;       /* Space between the inner divs */
  align-items: center;                 /* Center the inner divs vertically */
  margin-bottom: 10px;                 /* Spacing between leaderboard items */
}

/* Styling for the inner divs */
.inner {
/* Each inner div takes 20% of the width */
  height: 70px;                        /* Set a fixed height for the inner divs */
  border-radius: 10px;                 /* Rounded corners for inner divs */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Adjustments for small screens */
@media (max-width: 768px) {
  .leaderboardchar {
    height: 100%;                     /* Adjust the height for smaller screens */
  }

  .inner {
    height: 100%;                      /* Reduce the height of inner divs for smaller screens */
  }
}

.insideBox {
  height: 60%;
}

.leaderboard-title {
  width: 80%;
}

.leaderboard-container {
  display: flex;
  flex-direction: column;
}

.leaderboardchar {
  display: flex;
  justify-content: space-between;
  margin: 0;
}

.inner {
  width: 12%;
}

.leaderboard-content {
  width: 78%;
  display: flex;
  justify-content: center;
  flex-direction: row;
}

.leaderboard-rank,
.leaderboard-name,
.leaderboard-trophy,
.leaderboard-score {
  height: auto;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.leaderboard-rank {
  width: 15%;
}

.leaderboard-name {
  justify-content: left;
  width: 35%;
}

.leaderboard-trophy {
  width: 15%;
}

.leaderboard-trophy img {
  height: 3vh;
}

.leaderboard-score {
  width: 25%;
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

@keyframes buttonClickEffect {
  0% { transform: scale(1); }
  50% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

.shake {
  animation: shake 0.5s;
}

.buttonClick {
  animation: buttonClickEffect 0.2s;
}

.red-edge-tint {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle,
    transparent,
    transparent 60%,
    rgba(255, 0, 0, 0.8) 100%
  );
  pointer-events: none;
  touch-action: none;
  transition: all 0.5s;
  opacity: 0;
  z-index: -100000000;
  touch-action: none;
  pointer-events: none;
}

#letsplaybtn{
  height: 30%;
}

#leaderboardbtn{
  height: 20%;
}

#letsplayagainbtn{
  height: 20%;
}