body {
  width: 100%;
  margin: 0;
  font-family: 'Roboto', sans-serif;
  background: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  display: flex;
  height: 90%;
  overflow: hidden;
}

.menu {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  height: 100vh;
  white-space: nowrap; /* Make sure buttons stay in one line */
}

.menu .logo {
  justify-content: center;
  align-items: center;
  
}

.menu .logo img {
  width: 25%;
  padding-left: auto;
  margin-left: 91px;

}

.menu .left-buttons {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 16vh;
  margin-top: -5vh;
  align-items: center;
  border: 120px;
  border-color: rgb(112, 103, 103);
}

.menu .left-buttons button {
  font-size: 40px; /* Keep original properties */
  font-weight: 700;
  padding: 20px 100px;
  background: none;
  border: 3px solid rgb(198, 168, 113);
  color: white;
  cursor: pointer;
  margin-bottom: 13px;
  transition: all 0.3s ease;
  border-radius: 10px;
  position: relative;
  right: 0;
  overflow: hidden; /* Ensures animation stays within the button */
}

/* Apply glow animation */
.menu .left-buttons button:before {
  content: '';
  background: linear-gradient(45deg, #aa7272, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing 20s linear infinite;
  opacity: 0;
  transition: opacity .3s ease-in-out;
  border-radius: 10px;
}

.menu .left-buttons button:hover:before {
  opacity: 1;
}

@keyframes glowing {
  0% { background-position: 0 0; }
  50% { background-position: 400% 0; }
  100% { background-position: 0 0; }
}


.menu .bottom-buttons {
  position: absolute;
  bottom: 0px;
  display: flex;
  gap: 130px;
  justify-content: left;
  padding: 0px;
}


.menu .bottom-buttons button {
  padding: 30px;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 24px;
  transition: transform 0.2s, background-color 0.2s ease-in-out;
  border-radius: 5px;
  gap: 0px;

}

.menu .bottom-buttons button:hover {
  transform: scale(1.1,1.1);
  background-color: lightgray;
  color: black;
}
.popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  background: #2a2a2a;
  color: white;
  border-radius: 5px;
  box-shadow: 10px 10px 20px rgba(132, 131, 131, 0.5);
  padding: 10px;
  text-align: center;
}
.popuptutorial {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px; 
    background: #2a2a2a;
    color: white;
    border-radius: 5px;
    box-shadow: 10px 10px 20px rgba(132, 131, 131, 0.5);
    padding: 20px;
    text-align: left;
    overflow-y: auto;
}
.popupcredit {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px; 
    background: #2a2a2a;
    color: white;
    border-radius: 5px;
    box-shadow: 10px 10px 20px rgba(132, 131, 131, 0.5);
    padding: 20px;
    text-align: left;
    overflow-y: auto;
}
.popupcolor {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    background: #2a2a2a;
    color: white;
    border-radius: 5px;
    box-shadow: 10px 10px 20px rgba(132, 131, 131, 0.5);
    padding: 20px;
    text-align: left;   
}
.popup ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.popup li {
  padding: 10px;
  border-bottom: 1px solid #444;
  cursor: pointer;
}

.popup li:hover {
  background: #505050;
}

.setting-button {
  background: none;
  color: white;
  padding: 10px;
  border: none;
  cursor: pointer;
  font-size: 24px;
  transition: transform 0.5s, rotate 0.3s ease;
  border-radius: 5px;
}

.setting-button:hover {
  transform: scale(1.1) rotate(180deg);
  background-color: lightgray;
  color: black;
}

.language-buttons {
  position: fixed;
  bottom: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  width: 100%;
}

.language-buttons button {
  background-color: transparent;
  color: white;
  border: 2px solid transparent;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 16px;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.language-buttons button:hover {
  background-color: lightgray;
  color: black;
  border-color: #333;
}

.language-buttons img {
  margin-left: 5px;
}

body.logo {
  padding: 10px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0px;
  transition: transform 0.2s, background-color 0.2s ease-in-out;
  border-radius: 30px;
  margin-bottom: 7px;
  margin-left: 75px;
}
.video-container {
  position: absolute;
  left: 450px;
  width: 80vw; /* 80% of the viewport width */
  max-width: 900px; /* Limit to 900px to avoid it growing too large */
  margin-left: 70px;
  height: auto; /* Adjust the height to be auto based on the content */
}

.video-container video {
  width: 100%; 
  height: auto; 
  object-fit: cover; 
}
  
.full-screen-logo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black; 
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1; 
  transition: opacity 2s ease-out;
  z-index: 9999; 
}

.full-screen-logo img {
  width: 50%;
  height: auto;
  align-items: center;
  
}

.animted-button_1 .animated-button_1-top-layer .animated-button_1-2fAFG {
  position: relative;
  z-index: 1000;
}
.animted-button_1
  .animated-button_1-top-layer
  .animated-button_1-2fAFG
  .animated-button_1-0tk6y {
  white-space: nowrap;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  color: #fff;
  border-radius: 8px;
  background: #000;
  transition: color 0.3s ease;
}
@keyframes animated-button_ano8CUX {
  0% {
    transform: scaleX(8) scaleY(1.5) rotate(0deg);
    opacity: 1;
  }
  to {
    transform: scaleX(8) scaleY(1.5) rotate(1turn);
    opacity: 1;
  }
}