/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
  .sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 250px;
  height: 100%;
  background: linear-gradient(to top, rgba(44,40,40,1), rgba(59,57,57,1));
  padding-top: 60px;
  z-index: 10;
    opacity: 0;
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1),
opacity 0.35s ease;
  box-shadow: 5px 0px 15px 0px rgba(0, 0, 0, 0.4);
}
.sidebar a {
  display: block;
  padding: 15px;
  color: white;
  text-decoration: none;
}
.sidebar a:hover {
    background-color: #333;
}
.sidebar.open {
     transform: translateX(0);
       opacity: 1;
}
.sidebar-logo {
  display: block;
  width: 120px;
  height: auto;
  margin: -90px 10px 20px 10px;
}
.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
}
.menu-btn {
  position: fixed;
  top: 60px;
  left: 100px;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  box-shadow: none;
}
.menu-btn img {
  display: block;
  background: transparent;
}
/* Loading Screen */
#roblox-loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100000; /* above everything */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none; /* ignore clicks when hidden */
  transition: opacity 0.3s ease;
  overflow: hidden;
}

/* Activate loading screen */
#roblox-loading-screen.active {
  opacity: 1;
  pointer-events: all;
}

/* Background texture that repeats */
.background-texture {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('LTexture.png') repeat; /* loopable texture */
  z-index: 1;
}

/* Full-screen vignette overlay */
.loading-vignette {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3; /* above background */
  pointer-events: none;
}

/* Page name text in center */
.page-name {
  position: relative;
  z-index: 4; /* above background but below vignette */
  font-size: 32px;
  font-weight: bold;
  color: #000;
  margin-bottom: 20px;
  text-align: center;
  color:white;
}

/* Loading circle in bottom-right corner */
.loading-circle {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 40px; /* adjust as needed */
  height: 40px;
  z-index: 5; /* above everything else */
  animation: spin 1s linear infinite; /* spinning animation */
}

/* "Joining server..." text at bottom center */
.joining-text {
  position: absolute;
  bottom: 20px;
  text-align: center;
  width: 100%;
  font-size: 16px;
  color: #000;
  z-index: 4;
  color: white;
}

/* Spin keyframes for loading circle */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}