@import url('https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400..900&family=Rowdies:wght@300;400;700&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&family=Tac+One&display=swap');

  body {
    background-color: #d8ffd6;
    color: #000000;
    font-family: "Inter", sans-serif;
    padding: 5px;
    border: hidden;
    margin: 0 auto;
    width: 90%;
    height: 90%;
    margin-top: 25px;
    overflow: hidden; /* Hide overflow content during transition */
   overflow-y: scroll;
    animation-duration: 1s;
    animation-name: slideInFromRigh; /* Include the animation name */
  }

  @keyframes slideInFromRight {
    from {
        transform: translateY(95%);
    }
    to {
        transform: translateY(0);
    }
  }

  @keyframes slideOutToLeft {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
  }

  @keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
  }
/* Apply animation to pages */
.page {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden; /* Hide overflow content during transition */
  animation-duration: 0.5s;
}

.page.show {
  animation-name: slideInFromRight;
}

.page.hide {
  animation-name: slideOutToLeft;
}

/* Basic styling for the "Continue as Guest" button */
#continueAsGuestBtn {
    padding: 10px 20px;
    font-size: 16px;
    margin: 10px;
    cursor: pointer;
    background-color: lightblue;
    border: none; /* Optional: Remove border */
    border-radius: 5px; /* Optional: Rounded corners */
    color: white; /* Optional: Text color */
}
h1 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 20px;
}

challenge1 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 15px;
  text-align: center;
  font-family: "Source Sans 3", sans-serif;
}

h4 {
  font-size: 8px;
  font-weight: 700;
  margin-bottom: 15px;
  display: block;
  text-align: center
}
p.a32 {
  font-size: 36px;
    font-weight: 700;
  margin-bottom: 20px;
  display: block;
  margin-top: 10px;
}

h8 {
  font-size: 14px;
  color: #20477E;
  font-weight: 700;
  margin-bottom: 20px;
  font-family: "Source Sans 3", sans-serif;
}
h9 {
  font-size: 13px;
  color: purple;
  font-weight: 1000;
  margin-top: 10px;
  font-family: "Source Sans 3", sans-serif;
  display: block;
  text-align: center;
}

h90 {
  font-size: 13px;
  color: purple;
  font-weight: 1000;
  margin-top: 10px;
  font-family: "Source Sans 3", sans-serif;
  display: block;
  text-align: center;
  line-height: 30px;
  align-items: center;
  justify-content: center;
}

#question {
  font-size: 24px;
  font-weight: 1000;
  font-family: "Source Sans 3", sans-serif;
  margin-bottom: 12px;
}

#image {
  border-radius: 8px;
  margin-bottom: 12px;
}

#answers {
  display: flex;
  flex-direction: column;
  font-weight: 1000;
  font-family: "Source Sans 3", sans-serif;
}

#loadingLogo {
  display: none; /* Initially hidden */
  /* Add your styling here */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  width: 100px; /* Adjust width as needed */
  height: 100px; /* Adjust height as needed */
}

#loadingLogo img {
  width: 100%; /* Ensure the image fills its container */
  height: auto; /* Maintain aspect ratio */
  animation: rotate 1.2s linear infinite; /* Apply rotation animation */
}

#loadingLogoF {
  display: none; /* Initially hidden */
  /* Add your styling here */
  position: relative;
  top: 0%;
  margin-top: 30px;
  justify-content: center;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  width: 80px; /* Adjust width as needed */
  height: 80px; /* Adjust height as needed */
}

#loadingLogoF img {
  width: 100%; /* Ensure the image fills its container */
  height: auto; /* Maintain aspect ratio */
  animation: rotate 1.2s linear infinite; /* Apply rotation animation */
}

.friend-request-notification {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    display: none;
    z-index: 1000;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
#xp-bar-container {
  width: 200px;
  height: 10px;
  border: 1px solid #00762e;
  background-color: #ccc;
  position: relative;
  margin-top: 10px;
}

#xp-bar-fill {
  transition: width 0.5s ease-in-out; 
  width: 0%;
  height: 100%;
  background-color: #30f9e1;
  position: absolute;
  top: 0;
  left: 0;
}

#xp-bar-resttt {
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.2;
}

#xp-level {
  margin-top: 5px;
  font-family: "Source Sans 3", sans-serif;
  font-weight: 200;
  font-size: 20px;
  font-style: normal;
  display: flexbox;
  z-index: 1;
}

#xp-notification {
  display: none;
}

button {
  padding: 11px 18px;
  font-size: 17px;
  font-weight: 720;
  background-color: #80ffb8;
  float: left;
  border: 25px white;
  border-radius: 8px;
  margin-bottom: 10px;
  cursor: pointer;
  transition-duration: 0.4s;
  height: auto;
  color: #1E90FF
}

button:hover {
  background-color: #30ffb8;
  color: #4A80FA;
  font-weight: 815;
}

button.challenge-mode-enabled {
  background-color: #ffd758; /* Button color when Challenge Mode is enabled */
}
button.avatar-owned-enabled {
  background-color: #ff8e80; /* Button color when Challenge Mode is enabled */
  color:#4A50AA;
}

#loginBox {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #20477e;
  padding: 20px;
  border: 2px solid #30a7e5;
  border-radius: 10px;
  z-index: 9999;
  animation: fadeInAnimation ease 0.6s;
  animation-iteration-count: 0.2s;
  animation-fill-mode: forwards;
  display: none;
  flex-direction: column;
  align-items: center;
}
#loginPreventBox{
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.32); /* Semi-transparent background */
  z-index: 999; /* Higher z-index to make the popup appear on top */
  justify-content: center;
  align-items: center;
}
/* Add separation between text and button */
#separation {
  margin-right: 18px; /* Adjust the padding bottom as needed */
  display: flex;
  background-color: #50efe9;
  white-space: nowrap;
  
}
#settingsbutton {
  padding: 12px 20px;
  width: auto; /* Adjust width as needed */
  height: 40px; /* Adjust height as needed */
  font-size: 16px;
  font-weight: 700;
  background-color: #474747;
  border: none;
  border-radius: 8px;
  margin-bottom: 10px;
  cursor: pointer;
  transition-duration: 0.4s;
  color: white;
  background-image: url('ICON_SETTINGS.png');
  background-size: contain; /* Use 'contain' to fit the entire image within the button */
  background-repeat: no-repeat;
  background-position: center center; /* Center the background image */
}
#shopbutton {
  padding: 28px 70px;
  font-size: 20px;
  font-weight: 700;
  background-color: #ffcc01;
  float: none;
  border: 25px white;
  margin-bottom: 10px;
  cursor: pointer;
  transition-duration: 0.4s;
  color: white;
  display: block;
  text-align: center;
  border-radius: 0 100px 100px 0; /* Specific corner rounding */
  background-image: url('ICON_SHOP_TEXT_NEW.png');
  background-size: contain; /* Use 'contain' to fit the entire image within the button */
  background-repeat: no-repeat;
  background-position: center center; /* Center the background image */
  text-indent: -9999px; 
}

#backbutton {
  padding: 28px 44px;
  font-size: 20px;
  font-weight: 700;
  background-color: #80ffb8;
  float: none;
  border: 25px white;
  color: #1E90FF;
  margin-bottom: 10px;
  cursor: pointer;
  transition-duration: 0.4s;
  display: block;
  text-align: center;
  border-radius: 100px 0 0 100px; /* Specific corner rounding */
}
.delete-save-data-btn {
  background-color: #fd0800;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

.delete-save-data-btn:hover {
  background-color: darkred;
}

/* Style the button */
.purple-button {
  background-color: #6C39BC; /* Blue button color */
  color: #FFF; /* White text color */
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  position: relative; /* Needed for pseudo-element positioning */
  transition: background-color 0.2s ease-in-out; /* Add transition for smooth color change */
}

.purple-button:active {  /* Style for button on click (active state) */
  background-color: #177CB0; /* Dark blue color on click */
}

.purple-button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 5px;  /* Adjust positioning as needed */
  transform: translateY(-50%) rotate(90deg); /* Rotate for right arrow */
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid #d2f7ff; /* Match button color */
  transition: border-bottom-color 0.2s ease-in-out; /* Add transition for arrow color change */
}

.purple-button .arrow {
  font-size: 12px; /* Adjust font size as needed */
  margin-left: 7px; /* Adjust spacing between text and changelog */
}

/* Style the button */
.changelog-button {
    background-color: #30A7E5; /* Blue button color */
    color: transparent; /* Make text transparent */
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    background-image: url('ICON_CHANGELOG.png'); /* Replace with your image path */
    background-size: cover; /* Ensure the image covers the button */
    background-repeat: no-repeat; /* Prevent repeating the image */
    text-indent: -9999px; /* Hide the original text */
}
/* Style the button */
.stats-button {
    background-color: #6C39BC; /* Blue button color */
    color: transparent; /* Make text transparent */
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    background-image: url('ICON_STATS.png'); /* Replace with your image path */
    background-size: cover; /* Ensure the image covers the button */
    background-repeat: no-repeat; /* Prevent repeating the image */
    text-indent: -9999px; /* Hide the original text */
}


#result {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}

#score {
  font-size: 20px;
  font-weight: 700;
}

#results {
  margin-top: 20px;
  font-size: 20px;
  font-weight: 700;
}

#results p {
  margin-bottom: 10px;
}

#results span {
  color: #ffcc01;
}
/* For PC */
@media (min-width: 768px) {
  #image {
    width: auto;
    height: 250px;
    display: block;
    margin: 0 auto;
  }
}

/* For mobile */
@media (max-width: 767px) {
  #image {
    width: auto;
    height: 185px;
    display: block;
    margin: 0 auto;
  }
}

.modal {
  display: none;
position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffd758;
  padding: 20px;
  border: 2px solid #ffb75a;
  border-radius: 10px;
  z-index: 9999;
  width: 80%;
  height: auto;
  animation: fadeInAnimation ease 0.5s;
      animation-iteration-count: 0.5s;
      animation-fill-mode: forwards;
  }
  @keyframes fadeInAnimation {
      0% {
          opacity: 0;
      }
      100% {
          opacity: 1;
      }

}

.modal-content {
  background-color: #ffd758;
  text-align: center;
}

#challenge-modal-image {
  max-width: 100%;
  height: auto;
  margin-bottom: 20px;
}

.levelup-modal {
  display: none;
position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #8fb8ff;
  padding: 20px;
  border: 2px solid #40cbff;
  border-radius: 10px;
  z-index: 9999;
  width: 80%;
  height: auto;
  animation: fadeInAnimation ease 0.5s;
      animation-iteration-count: 0.5s;
      animation-fill-mode: forwards;
  }
  @keyframes fadeInAnimation {
      0% {
          opacity: 0;
      }
      100% {
          opacity: 1;
      }

}

.levelup-modal-content {
  background-color: #8fb8ff;
  text-align: center;
}

#levelup-modal-image {
  max-width: 100%;
  height: auto;
  margin-bottom: 20px;
}


.profile-container {
  position: relative; /* Ensure child elements are positioned relative to this container */
  width: 128px; /* Set container width */
  height: 128px; /* Set container height */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto; /* Center the container horizontally */
}

.image-container {
  position: relative;
  width: 128px; /* Set the size of the container for images */
  height: 128px;
}
.image-container-update {
  position: sticky;
  width: 128px; /* Set the size of the container for images */
  height: 128px;
}
.background-image {
  position: relative;
  width: 128px; /* Set the size of the background image */
  height: 128px;
  background-size: cover;
  background-position: center;
  z-index: 1; /* Ensure the background is behind the avatar */
}

.avatar-image {
  position: absolute;
  top: -5px;
  left: -1.5px;
  align-items: center;
  background-size: cover;
  background-position: center;
  display: block;
  z-index: 2; /* Ensure the avatar is above the background */
}
/* Your existing CSS styles here */

/* Popup */
.popup {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.32); /* Semi-transparent background */
  z-index: 999; /* Higher z-index to make the popup appear on top */
  justify-content: center;
  align-items: center;
  animation: fadeIn 0.7s; /* Add a fade-in animation */
  color: #ffffff;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}


.popup-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
}

.popup h2 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #ffffff;
}

.popup button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 12px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
}

.popup button:hover {
  background-color: #45a049;
  animation: fadeOut 0.9s;
@keyframes fadeOut {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
}

.profile-mojo-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 10px;
}



.background {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.background img {
  max-width: 100px; /* Adjust the size as needed */
  height: auto;
  border-radius: 50%;
}

.background h3 {
  margin: 10px 0;
}

.background button {
  margin-top: 10px;
}
.avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.avatar img {
  max-width: 100px; /* Adjust the size as needed */
  height: auto;
  border-radius: 50%;
}

.avatar h3 {
  margin: 10px 0;
}

.avatar button {
  margin-top: 10px;
}

.gamename {
  font-family: "Tac One", sans-serif;
  font-weight: 200;
  font-size: 42px;
  font-style: normal;
  display: flex;
  z-index: 1;
}

#centered {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
  gap: 15px;
}

/* Additional styles for the game elements can be placed here */

.centered-button {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0px;
}
.centered-button button {
  margin: 3px;
}



#mojo {
  color: #ffcc01; /* Set text color */
  font-weight: 300 !important; /* Make text bold */
  font-family: "Rowdies", sans-serif;
  font-size: 22px;
  margin-right: 10px;
  display: inline-block;
  text-align: center;
  justify-content: center;
  align-items: center;
  padding: 6px 10px;
}

.purple-line {
  background-color: purple;
  height: 5px;
  width: 100%;
}
.yellow-line {
  background-color: #ffcc01;
  height: 5px;
  width: 100%;
}
.blue-line {
  background-color: #20477E;
  height: 5px;
  width: 100%;
}
.avatar-line {
  background-color: #ffb4e4;
  height: 8px;
  width: 100%;
}
.avatar-b-line {
  background-color: #b1c1ff;
  height: 8px;
  width: 100%;
}
.avatar-invisible-line {
  margin-bottom: 20px;
}



/* Style the popup */
.changelog,
/* Updated CSS for .changelog class */
.changelog-changelog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #d7a0ff; /* Lighter gray popup background */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding: 20px;
    width: 88%; /* Adjust width as needed */
    display: none; /* Initially hide the popup */
overflow: auto;
    overflow-y: auto; /* Enable vertical scrolling */
    z-index: 10000;
}

.menu {
    float: center;
    margin-right: 11px; /* Add margin to create space between menu and content */
  overflow: auto;
  overflow-y: auto;
}
.no-scroll {
  overflow: hidden;
}

.content,
.changelog-content {
    float: center;
    border: 1px solid #5c00ab; /* Border for the mini box */
    padding: 10px;
    border-radius: 5px;
  height: calc(100% - 40px); /* Subtract padding from height */
  overflow-y: auto; /* Enable vertical scrolling */
}

.menu-item {
  cursor: pointer;
   color: white;
  border: 2px solid #e7ceff;
  background: #9e83ff;
  padding: 5px; /* Add padding for separation */
  overflow: auto;
  overflow-y: auto;
  }
  .menu-item::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: #4CAF50; /* Blue color for the square */
  }

.fade-in {
  animation: fadeInAnimation 0.5s;
}

.fade-out {
  animation: fadeOutAnimation 0.8s;
}

@keyframes fadeInAnimation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOutAnimation {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.changelog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 2px solid #30A7E5; /* Line divider at the top */
    padding-top: 10px; /* Padding at the top */
    margin-bottom: 15px;
}

.changelog-header .date,
.changelog-header .version {
    font-weight: bold;
}

.close-btn {
  color: red !important; /* Red X color with higher specificity */
  display: flex;
  justify-content: center; /* Center the text horizontally */
  align-items: center; /* Center the text vertically */
  font-size: 25px;
  font-weight: bold;
  position: fixed;
  top: 10px;
  right: 10px;
  cursor: pointer;
  width: 30px; /* Set width and height to create a square */
  height: 30px;
  background-color: #f1ddff; /* Gray background color */
  border-radius: 5px; /* Rounded corners */
  text-align: center; /* Center text within the button */
  line-height: 30px; /* Vertically center text */
}

#surpriseButton {
  background-color: #20477E; /* Darker blue background */
  border: 1px;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  border-radius: 0 100px 100px 0; /* Specific corner rounding */
}

#cooldown-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 10px 20px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border-radius: 5px;
    z-index: 1000;
    font-size: 16px;
}





.background {
    z-index: -99;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.squares {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.squares li {
    position: fixed;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: #97ffb2;
    animation: animate 10s linear infinite;
    bottom: -150px;
    opacity: 0.85
}

.squares li:nth-child(1) {
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s
}

.squares li:nth-child(2) {
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 1s;
    animation-duration: 12s;
}

.squares li:nth-child(3) {
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 3s
}

.squares li:nth-child(4) {
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 15s
}

.squares li:nth-child(5) {
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s
}

.squares li:nth-child(6) {
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s
}

.squares li:nth-child(7) {
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s
}

.squares li:nth-child(8) {
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s
}

.squares li:nth-child(9) {
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s
}

.squares li:nth-child(10) {
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s
}

@keyframes animate {
    0% {
        transform: translateY(0) rotate(0deg);
        border-radius: 0
    }
    100% {
        transform: translateY(-1000px) rotate(720deg);
        border-radius: 50%
    }
}
::-webkit-scrollbar {
    width: 5px;
    height: 8px
}

::-webkit-scrollbar-track {
    background: transparent
}

::-webkit-scrollbar-thumb {
    background: #a5ffaf
}

::-webkit-scrollbar-thumb:hover {
    background: #a4ff9d
}