#landing {
  background-color: var(--bg, #efefef);
}

#landing .spinner-container {
  width: 100%;
  height: 100%;
  background-color: var(--bg-alt);
  transition: 0.2s opacity, 0.2s visibility;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  z-index: 3;
}

#landing .spinner-container.visible {
  opacity: 1;
  visibility: unset;
  transition: visibility 0s 0s, opacity 0.2s 0s;
}

@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.spinner div {
  position: absolute;
  animation: spinner 0.35s linear infinite;
  width: 240px;
  height: 240px;
  top: 5px;
  left: 5px;
  border-radius: 50%;
  box-shadow: 0 5.75px 0 0 #30a2ff;
  transform-origin: 120px 122.875px;
}
.spinner-body {
  width: 250px;
  height: 250px;
  display: inline-block;
  overflow: hidden;
  background: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.spinner {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(1);
  backface-visibility: hidden;
  transform-origin: 0 0; /* see note above */
}
.spinner div {
  box-sizing: content-box;
}
/* generated by https://loading.io/ */

#landing .button-outside {
  font-size: 3em;
  line-height: 1em;
  margin-bottom: 5px;
  color: var(--green);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2px 20px 2px 2px;
}

#landing .buttonz {
  font-size: 1em;
  line-height: 1em;
  color: var(--text);
  background-color: var(--bg-alt);
  border-radius: var(--border-radius, 16px);
  align-items: center;
  border: 2px solid #30a2ff;
  margin-left: 15px;
  font-family: var(--font-family);
}

#landing .buttonz:hover {
  color: var(--bg-alt);
  background-color: #30a2ff;
}

#landing .landing-screen {
  width: 100%;
  height: 100%;
}

#landing .menu-out {
  position: absolute; /* Can stay as is, doesn't need to be fixed */
  top: 10px; /* Position the menu container from the top */
  right: 10px; /* Position the menu container from the right */
}

#landing .menu-button {
  position: fixed; /* Fix the button to the screen */
  cursor: pointer; /* Change cursor to pointer to indicate it's clickable */
  transition: transform 0.2s ease, background-color 0.2s ease; /* Smooth transition for hover effect */
  width: 35px;
  height: auto;
  top: 10px; /* Position the button from the top of the screen */
  right: 10px; /* Position the button from the right of the screen */
  z-index: 9999; /* Ensure the button is always above other content */
}

#landing .menu-button:hover {
  transform: scale(1.1); /* Slightly scale up the image when hovered */
  background-color: rgba(
    0,
    0,
    0,
    0.1
  ); /* Optional: Add a background color when hovered */
}

#landing .settings-overlay {
  display: none; /* Hide the overlay by default */
  position: fixed; /* Position the overlay fixed to cover the entire screen */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  backdrop-filter: blur(5px); /* Blur the background */
  z-index: 2; /* Ensure the overlay is above other elements */
  justify-content: center; /* Center the settings menu horizontally */
  align-items: center; /* Center the settings menu vertically */
  display: flex; /* Use flexbox for centering */
}

#landing .settings-menu {
  background-color: white; /* Set background color */
  border: 1px solid #ccc; /* Add a border */
  padding: 20px; /* Add some padding */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Add a shadow for better visibility */
  z-index: 3; /* Ensure the settings menu is above the overlay */
  border-radius: 10px; /* Add rounded corners */
}

#landing .settings-menu .button-outside {
  margin-bottom: 10px; /* Add some space between buttons */
}

#landing .sign-in-text {
  font-size: 5em;
  line-height: 1em;
  margin-bottom: 12px;
}

#landing .demo-label {
  font-size: 3em;
  line-height: 1em;
  margin-bottom: 12px;
  color: crimson;
}

#landing .logo {
  height: 90vmin;
  position: absolute;
  opacity: 0.05;
  z-index: 1;
}

#landing .auth {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#landing .auth-buttons {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: var(--border-radius, 16px);
  z-index: 2;
  margin: 10px;
}

#landing .auth-buttons > div {
  border: 2px solid var(--light-gray);
  border-radius: var(--border-radius, 16px);
  background-color: var(--bg-alt);
  width: 100%;
  padding: 2px 20px 2px 2px;
  margin-bottom: 10px;
}

#landing .auth-buttons > div.active {
  border: 2px solid var(--accent);
  cursor: pointer;
}

#landing .auth-buttons > div,
#landing .auth-buttons > div * {
  transition: 250ms all;
}

#landing .auth-buttons > div > i {
  color: var(--bg-alt, #fefefe);
  background-color: var(--light-gray);
  font-size: 1.75em;
  padding: 14px;
  border-radius: 12px 0 0 12px;
  margin-right: 10px;
}

#landing .auth-buttons > div.active > i {
  background-color: #30a2ff;
}

#landing .auth-buttons > div > span {
  color: var(--gray, #bebebe);
  font-size: 1.75em;
  line-height: 0;
}

#landing .auth-buttons > div.active > span {
  color: var(--text, #bebebe);
}

#landing .auth-buttons > div.active:hover > span {
  color: var(--bg-alt);
}

#landing .auth-buttons > div.active:hover {
  background-color: var(--accent);
}

#landing .versionString {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
}