:root {
  --animation-speed: 2s;
  --primary-color: #000000;
  --secondary-color: #000;
  --background-color: rgb(3, 3, 3);
  --text-color: #fff;
  --font: sans-serif;
}

body {
  /* remove margins and scroll bars */
  margin: 0;
  overflow: hidden;

  /* style text */
  text-align: center;
  font-size: 12px;
  font-family: Sans-Serif;

  /* color text */
  color: #444;
  background-color: rgb(0, 0, 0);
}

h1 {
  /* position the heading */
  position: absolute;
  width: 100%;

  /* make sure that the heading is drawn on top */
  z-index: 1;
}

label {
	cursor: pointer;
  color: #ffffff;
}

#logotype {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  text-align: center;
  user-select: none;
  cursor: default;
  font-family: 'Kalnia', serif; /* Your font */
  font-weight: 500;
  color: #ffffff;
  font-size: 100px; /* Adjust font size as needed */
}

.letter {
  display: block; /* Stack letters vertically */
  margin-top: -4vh;
  margin-bottom: -4vh;
  transform: rotate(90deg); 
  /* Add additional styling as needed */
}

#interact {
  font-family: 'Pixelify Sans', sans-serif;
  color: #ffffff;
  text-align: center; /* Center align */
  font-size: 35px; /* Or any size you prefer */
  position: fixed; /* To position it at the top of the page */
  width: 100%; /* Full width */
  bottom: 0; /* At the top */
  z-index: 100; /* Ensure it's above other content */
  cursor: default;
  user-select: none;
}

#interact button {
  padding: 5px 5px;
  font-family: 'Pixelify Sans', sans-serif;
  background-color: #ffffff00;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  display: inline-block;
}

#interact button:hover {
  background-color: #ffffff0e; /* Darker green */
}

#interact button:active {
  background-color: #ffffff7a; /* Even darker green */
}

.controls {
  position: absolute;
  text-align: center;
  top: 2000;
  right: 200;
  padding: 10px; /* Add some padding for better appearance */
  z-index: 1000;
}

/* Targeting the input inside the label inside .controls */
.controls label input[type="number"] {
  background-color: #333246; /* background */
  color: #ffffff;             /* text */
  border: 1px solid #000000;  /* border */
  padding: 5px;            /* Some padding inside the input box */
  border-radius: 4px;      /* Rounded corners for the input box */
}

.controls label input[type="button"] {
  background-color: #333246; /* background */
  color: #ffffff;             /* text */
  border: 1px solid #000000;  /* border */
  padding: 10px;              /* Adjust padding as needed */
  width: auto;                /* Auto width based on content */
  box-sizing: border-box;     /* Include padding and border in the width */
  display: inline-block;      /* Inline-block display */
  cursor: pointer;         /* Cursor as pointer to indicate it's clickable */
  border-radius: 10px;   
}

#scene-container {
  /* tell our scene container to take up the full page */
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  /*
    Set the container's background color to the same as the scene's
    background to prevent flashing on load
  */
  /* background-color: rgb(27, 27, 27); */
  /* background-color: rgb(255, 255, 255); */
  user-select: none;
  background-color: rgba(0, 0, 0, 0);
}

#loadingScreen {    
  position: fixed; /* Changed to fixed */
  top: 0;
  left: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  display: flex; /* Using Flexbox */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  background-color: rgb(32, 32, 32);
  z-index: 101; /* High enough to be on top */
}

/* Outer Loading Container */
.loading_container {    
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 150px;
}

/* Loader */
.loading {
  width: 100%;
  height: 100%;
  border-radius: 150px;
  border-right: 0.3rem solid white;
  animation: animate 2s linear infinite;
}

/* Animation */
@keyframes animate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* loading text */
.loading_container > h3 {
  left: 50%;
  top: 47%;
  transform: translate(-50%, -50%);
  font-family: 'Kalnia', serif ; /* Fallback to a generic font */
  font-weight: 400;
  color: rgb(3, 3, 3);
  text-align: center; /* Center align */
  font-size: 25px; /* Or any size you prefer */
  position: fixed; /* To position it at the top of the page */
  width: 100%; /* Full width */
  z-index: 100; /* Ensure it's above other content */
  cursor: default;
  user-select: none;
}


#mySidebarContainer {
  transition: 1.5s;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 40px; /* Full width */
  height: 100%; /* Full height */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  background-color: #00000000;
  z-index: 9; /* High enough to be on top */
  background-position: right; /* Center the image in the div */
  background-repeat: repeat;
  background-size: 300px 300px; /* Replace with your desired size */
  max-width: 900px;
  min-width: 40px;
}


#mySidebarBg {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 40px; /* Full width */
  height: 100%; /* Full height */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  background-color: #525252;
  z-index: 9; /* High enough to be on top */
  border-top-right-radius: 100%; /* Rounded top right corner */
  border-bottom-right-radius: 100%; /* Rounded bottom right corner */
  /* -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px); */
  /* backdrop-filter: blur(5px);*/
  background-position: right; /* Center the image in the div */
  background-repeat: repeat;
  background-size: 300px 300px; /* Replace with your desired size */
  max-width: 900px;
  min-width: 40px;
}

.sidebarBg {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 1.5s;
}

.sidebarBg, .sidebarTxt {
  transition: width 1.5s, height 1.5s, top 1.5s, left 1.5s, opacity 1.5s, min-width 1.5s ;
}

.sidebarTxt {
  height: 100%;
  width: 47%;
  position: fixed;
  z-index: 9;
  top: 0;
  left: -70%;
  overflow-x: hidden;
  transition: 1.5s;
  padding-top: 60px;
  overflow-y: scroll;
  scrollbar-width: none; /* For Firefox */
  opacity: 0%;
  max-width: 840px;
  min-width: 400px;
}

.sidebarTxt a {
  padding: 40px 8px 20px 32px;
  text-decoration: none;
  font-family: 'Kalnia', serif; /* Fallback to a generic font */
  font-weight: 400;
  font-size: 30px;
  color: #ffffff;
  display: block;
  transition: 0.3s;
}

.sidebarTxt b {
  padding: 8px 8px 8px 2px;
  font-size: 18px;
  font-family: 'Kalnia', serif; /* Fallback to a generic font */
  font-weight: 400;
  color: #e7e7e7;
  
  width: 75%; /* Set width to 75% of the container */
  margin: 0 auto; /* Center horizontally */
  text-align: justify; /* Justify text */
  display: block;
  transition: 0.3s;
  max-width: 700px;
  min-width: 350px;
}

.sidebarTxt b::before {
  content: '\00a0\00a0\00a0\00a0\00a0\00a0'; /* This is a non-breaking space character */
}


.sidebarTxt::-webkit-scrollbar {
  display: none; /* For Chrome, Safari, and Opera */
}

.sidebarTxt a:hover {
  color: #eaee1e;
}

#changeOrbitButton {
  position: absolute;
  font-size: 20px;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0);
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 150px;
  z-index: 1000;
  right: -4px; /* Position it to the right outside the sidebar */
  transform: translateY(-50%); /* Align center with the sidebar vertically */
  top: 50%; /* Center vertically */
}

img {
  max-width: 100%;
  height: auto;
  margin: 0 auto; /* Center horizontally */
  text-align: justify; /* Justify text */
  display: block;
  transition: 0.3s;
  padding-top: 0px;
  padding-bottom: 0px;
}


.imgLabel {
  width: 80%; /* Set width to 75% of the container */
  border-radius: 100%; /* Example border-radius for imgLabel */
  max-width: 500px;
  min-width: 300px;
  cursor: pointer;
  user-select: none;
  -webkit-user-drag: none;
  padding-bottom: 5px;
}

.imgSleeve {
  width: 77%; /* Example width for imgSleeve */
  border-radius: 5%;
  max-width: 500px;
  min-width: 300px;
}