/* Reset some default styles */
body, h1, h2, ul, li {
  margin: 0;
  padding: 0;
}

/* Set the background color to a cool black */
body {
  background-color: #1f1f1f; /* Dark grayish-black */
  font-family: 'Rajdhani-Regular', sans-serif;
  background: black;
  color: #f9f9f9;
  letter-spacing: 0.02rem;
}

/* Container styles */
#moonContainer {
  width: 100%;
  height: 100%;
}

/* Navbar styles */
.navbar {
/* background-color: #333; */
overflow: hidden;
position: absolute;
z-index: 30;
right: 0;
top: 0;
font-family: 'Rajdhani-Bold', sans-serif;
font-size: 1.5rem;
/* border: 1px solid rgba(45, 45, 45, 0.8); */
padding: 0.5rem 1rem;
color: #f9f9f9;
letter-spacing: 0.02rem;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}


element.style {
}
.menu ul, .moons ul {
  /* list-style: none; */
  margin-bottom: 0;
}

.accordion {
  /* list-style-type: none; */
  /*background: rgba(25, 25, 25, 0.5);*/
  border: 1px solid rgba(45, 45, 45, 0.8);
  border-bottom: 0;
  border-radius: 2px;
  margin-left: 0;
}

.navbar a:hover {
  background-color: #ddd;
  color: black;
}
  
/* The switch - the box around the slider */

/* Container for the text and toggle switch */
.toggle-container {
  display: flex; /* Use flexbox to align items horizontally */
  align-items: center; /* Vertically center items */
  padding: 0.5rem 1rem;
  line-height: 1;
  font-size: 0.75rem;
  color: white;
  position: relative;
  border-bottom: 1px solid rgba(45, 45, 45, 0.8);
}

/* Style for the text */
.toggle-container p {
  margin-right: 10px; /* Add some spacing between the text and toggle switch */
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 23px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 15px;
  width: 50%;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(80%);
}


/* Center the moonquake-element using Flexbox */
.moonquake-parent {
  display: none;
/* Center-align text within moonquake-parent */
}
.moonquake-element {
  display: None;
}

.landingSite-container{
  display: none;
  font-size: small;
}

.landingSite-info{
  display: none;
  font-size: small;
}

.otherMissions-container{
  display: none;
  font-size: small;
}

.otherMissions-info{
  display: none;
  font-size: small;
}

body {
font-family: 'Rajdhani-Regular', sans-serif;
background: black;
color: #f9f9f9;
letter-spacing: 0.02rem;
position: relative;
-webkit-font-smoothing: antialiased;
}

input[type="range"] {
  /* removing default appearance */
  -webkit-appearance: none;
  appearance: none; 
  /* creating a custom design */
  width: 100%;
  cursor: pointer;
  outline: none;
  border-radius: 15px;
  /*  overflow: hidden;  remove this line*/
  
  /* New additions */
  height: 6px;
  background: #ccc;
}

/* Thumb: webkit */
input[type="range"]::-webkit-slider-thumb {
  /* removing default appearance */
  -webkit-appearance: none;
  appearance: none; 
  /* creating a custom design */
  height: 15px;
  width: 15px;
  background-color: rgb(99, 99, 238);
  border-radius: 50%;
  border: none;

  /* box-shadow: -407px 0 0 400px #f50; emove this line */
  transition: .2s ease-in-out;
}




/* Thumb: Firefox */
input[type="range"]::-moz-range-thumb {
  height: 15px;
  width: 15px;
  background-color: rgb(99, 99, 238);
  border-radius: 50%;
  border: none;
  
  /* box-shadow: -407px 0 0 400px #f50; emove this line */
  transition: .2s ease-in-out;
}

/* Hover, active & focus Thumb: Webkit */

input[type="range"]::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 10px rgba(188, 188, 243, 0.1)
}
input[type="range"]:active::-webkit-slider-thumb {
  box-shadow: 0 0 0 13px rgba(188, 188, 243, 0.1)
}
input[type="range"]:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 13px rgba(188, 188, 243, 0.1)
}

/* Hover, active & focus Thumb: Firfox */

input[type="range"]::-moz-range-thumb:hover {
  box-shadow: 0 0 0 10px rgba(188, 188, 243, 0.1)
}
input[type="range"]:active::-moz-range-thumb {
  box-shadow: 0 0 0 13px rgba(188, 188, 243, 0.1)
}
input[type="range"]:focus::-moz-range-thumb {
  box-shadow: 0 0 0 13px rgba(188, 188, 243, 0.1)  
}


.wrapper {
  width: 100%;
  width: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.range {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 auto;
  height: 4rem;
  width: 100%;
  padding: 0px 10px;
}

.value {
  font-size: 26px;    
  width: 50px;
  text-align: center;
}

.spin {
  animation: spin 3.5s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(90deg); }
  50% { transform: rotate(180deg); }
  75% { transform: rotate(270deg); }
  100% { transform: rotate(360deg); }
}