body, html { /* all pages */
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
  font-family: 'Kanit', sans-serif;
  background-color: black;
  color:white;
}

.kanit-thin { /* all pages */
  font-weight: 100;
}

#threejs-container { /* all pages */
  position: absolute;
  top: 50px;
  left: 0;
  width: 100%;
  height: calc(100% - 50px);
}

#navbar {
  list-style-type: none;
  background-color: #090b0c; 
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000;
}

lu { /* all pages, bottom copywrite statement */ /*adjusted!*/
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: rgb(113, 113, 113);
  position: fixed;
  font-size: 1vw;
  bottom: 3%;
  right: 0%;
  width: 25%;
  z-index: 10000;
}

#logo {
  position: fixed;
  bottom: 3%;
  left: 3%;
  z-index: 10000;
}

.logo-image {
  height: 6vw;
  width: auto;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.logo-image:hover {
  opacity: 1;
}

#logo a {
  text-decoration: none;
  display: block;
  background: none;
  border: none;
  outline: none;
}

#logo a:hover {
  background: none;
  border: none;
  outline: none;
}

/* Large logo for about page */
#about-logo {
  position: absolute;
  top: -5%;
  left: 17%;
  transform: translateX(-50%);
  z-index: 10001;
}

.about-logo-image {
  height: 24vw; /* 3 times the normal 6vw size */
  width: auto;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

.about-logo-image:hover {
  opacity: 1;
}

/* Hide bottom-left logo on about page */
body:has(#about-logo) #logo {
  display: none;
}

/* Alternative method using body class */
.about-page #logo {
  display: none;
}

li { /* all pages, top tab boxes */ /*adjusted!*/
  float: left;
}

li a { /* all pages, top tab word labels */ /*adjusted!*/
  display: block;
  color: white;
  text-align: center;
  padding: 14px 1.6vw;
  text-decoration: none;
}

a:hover { /* all pages, top tab hover */ /*adjusted!*/
  background-color: #111111;
}

#menuTitle { /* index */ /*adjusted!*/
  position: absolute;
  top: 13%;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: 3vw;
  z-index: 10001;
}

#menuDesc { /* index */ /*adjusted!*/
  position: absolute;
  top: 20%;
  transform: translateX(208%);
  color: white;
  font-size: 2vw;
  z-index: 10001;
}

#projectCategory {
  position: absolute;
  bottom: 13%;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: 2vw;
  z-index: 10001;
}

#blueCategory { /* index */ /*adjusted!*/
  position: absolute;
  bottom: 13%;
  left: 50%;
  max-width: 22%;
  transform: translateX(-30%);
  color: white;
  font-size: 2vw;
  z-index: -1;
}

#pinkCategory { /* index */ /*adjusted!*/
  position: absolute;
  bottom: 13%;
  left: 50%;
  max-width: 23%;
  transform: translateX(-148%);
  color: white;
  font-size: 2vw;
  z-index: -1;
}

#yellowCategory { /* index */ /*adjusted!*/
  position: absolute;
  bottom: 13%;
  left: 50%;
  max-width: 23%;
  transform: translateX(76%);
  color: white;
  font-size: 2vw;
  z-index: -1;
}

#aboutHeader { /* about */
  position: absolute;
  top: 15%;
  left: 25%;
  transform: translateX(-50%);
  color: white;
  font-size: 5vw;
  z-index: 10001;
  max-width: 200%;
  white-space: nowrap;
}

#aboutDesc {  /* about */
  position: absolute;
  top: 28%;
  left: 27%;
  transform: translateX(-50%);
  color: white;
  font-size: clamp(1.5rem, 1.6vw, 2.5rem);
  z-index: 10001;
  max-width: 44%;
  white-space: normal;
  outline: 1px solid black;
  background-color: #000000ab;
}

#projects-container {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%);
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 50%;
  max-width: 1200px;
  height: 65%;
  padding: 10px;
  margin: 0 auto;
  overflow-y: auto;
  z-index: 500;
  background: rgba(0, 0, 0, 0.5);
}

#filter {
  position: absolute;
  top: 15%;
  left: 75%;
  transform: translateX(-100%);
  z-index: 10002;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

#filter label {
  color: white;
  font-size: 1.2em;
  font-weight: 100;
  text-align: center;
  margin-bottom: 5px;
}

#skillsSearch {
  position: relative;
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  z-index: 10002;
  font-size: 1.1em;
  background: rgba(41, 41, 41, 0.8);
  border: 2px solid rgba(255, 255, 255, 0.3);
  width: auto;
  min-width: 200px;
  max-width: 300px;
  overflow: hidden;
  font-family: 'Kanit', sans-serif;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

#skillsSearch:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(41, 41, 41, 0.9);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

#skillsSearch:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.8);
  background: rgba(41, 41, 41, 0.95);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

#skillsSearch option {
  background: rgba(20, 20, 20, 0.95);
  color: white;
  padding: 10px;
  border: none;
  font-family: 'Kanit', sans-serif;
}

#skillsSearch option:hover {
  background: rgba(60, 60, 60, 0.95);
}

/* Responsive adjustments for the filter */
@media (max-width: 768px) {
  #filter {
    top: 12%;
    left: 75%;
    transform: translateX(-100%);
  }
  
  #skillsSearch {
    min-width: 180px;
    font-size: 1em;
    padding: 10px 15px;
  }
}

.project {
  display: flex;
  gap: 20px;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.project-pic {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 10px;
}

.project-details {
  display: flex;
  flex-direction: column;
}

.project-details h2 {
  margin: 0;
  font-weight: bold;
  font-size: 300%;
  color: #ffffff;
}

.project-details p {
  margin: 0;
  font-weight: 100;
  font-size: 200%;
  color: #ffffff;
}

canvas {
  position: fixed;
  top: 0;
  left: 0;
}

:root {
  --offset-right: 0px;
}

/* ===== Planets Section (responsive container + original selectors) ===== */
#planet-wrapper {
  aspect-ratio: 1600 / 770;
  width: 90vw;
  max-width: 1600px;
  height: auto;
  max-height: 90vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #b4464600;
  box-sizing: border-box;
  /* Optional: add padding or border if needed */
}

#planet-wrapper #rB { /* planets */
  position: absolute;
  bottom: clamp(1vh, 5vw, 10vh);
  right: clamp(41%, 1.5vw, 40.5%);
  width: 3%;
  height: 5.5%;
  opacity: 0;
  transform: translateY(-50%);
  z-index: 99999;
}

#planet-wrapper #lB { /* planets */
  position: absolute;
  bottom: clamp(1vh, 5vw, 10vh);
  left: clamp(41%, 1.5vw, 40.5%);
  width: 3%;
  height: 5.5%;
  opacity: 0;
  transform: translateY(-50%);
  z-index: 99999;
}

#planet-wrapper #planetName { /* planets! */
  /* Base styles for individual planet view */
  position: absolute;
  top: 3.5%;
  left: 6.95%;
  color: white;
  font-size: clamp(0.6rem, 3.5vw, 3.5rem);
  z-index: 10001;
  max-width: 53%;
  white-space: nowrap;
  line-height: 1.2;
}

#planet-wrapper #planetDesc { /* planets! */
  /* Base styles for individual planet view */
  position: absolute;
  top: 15%;
  left: 6.95%;
  color: white;
  font-size: clamp(0.4rem, 2.5vw, 2.5rem);
  z-index: 10001;
  max-width: 53%;
  white-space: nowrap;
  line-height: 1.2;
}

#planet-wrapper #planetName.centered-planet-name { /* planets! */
  position: absolute !important;
  top: 3.5% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  text-align: center !important;
  width: 100% !important;
  z-index: 10002 !important;
  color: white !important;
  font-size: clamp(0.6rem, 3.5vw, 3.5rem) !important;
  max-width: 100% !important;
}

#planet-wrapper #planetDesc.centered-planet-desc { /* planets! */
  position: absolute !important;
  top: 15% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  text-align: center !important;
  width: 100% !important;
  z-index: 10002 !important;
  color: white !important;
  font-size: clamp(0.4rem, 2.5vw, 2.5rem) !important;
  max-width: 100% !important;
}



#planet-wrapper .descContainer { /* planets */
  position: absolute;
  top: clamp(1vh, 6vw, 20vh);
  right: 10%;
  width: 28%;
  height: clamp(5vh, 28vw, 750vh); /*  key line adjusted */
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1rem;
  border-radius: 10px;
  z-index: 100;

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: #fff transparent;
}
#planet-wrapper .descContainer::-webkit-scrollbar { width: 10px; background: transparent; }
#planet-wrapper .descContainer::-webkit-scrollbar-thumb { background: #fff; }

#planet-wrapper .descContainer > * {
  position: static !important;
  transform: none !important;
  max-width: 100% !important;
  margin: 0 !important;
}

#planet-wrapper #overview,
#planet-wrapper #description { /* planets */
  position: absolute;
  color: white;
  padding: 0rem 1rem;
  border-radius: 5px;
  font-size: clamp(0.5rem, 1.5vw, 1.5rem);
  z-index: 10005;
  text-decoration: underline;
  cursor: pointer;
}

#planet-wrapper #overview  { right: 27.2%; top: 10%; }
#planet-wrapper #description { right: 23.3%; top: 10%; }

#planet-wrapper #overviewDesc,
#planet-wrapper #projectDesc { /* planets */
  position: absolute;
  right: 8%;
  padding-top: 0.25rem;
  padding-right: 0rem;
  padding-bottom: 0.25rem;
  padding-left: 1rem;
  border-radius: 5px;
  font-size: clamp(0.5rem, 1.5vw, 1.5rem);
  z-index: 100;
  max-width: 28%;
}

#planet-wrapper #skills { /* planets */
  position: absolute;
  top: 11%;
  right: 11%;
  padding: 0.25rem 1rem;
  border-radius: 5px;
  font-size: clamp(0.5rem, 1.5vw, 1.5rem);
  color: white;
  text-decoration: underline;
  z-index: 10002;
}

#planet-wrapper #skillList { /* planets */
  position: static;
  padding-left: 1.5em;
  list-style-type: disc;
  list-style-position: inside;
  margin: 0;
  max-width: 100%;
  font-size: clamp(0.5rem, 1.25vw, 1.5rem);
}

#planet-wrapper #skillList li { /* planets */
  display: list-item !important;
  float: none !important;
  padding: 0.2em 0 0.2em 0.5em !important;
  background: transparent !important;
  border-radius: 0 !important;
}

#planet-wrapper #visitability {
  position: absolute;
  bottom: clamp(4.25vh, 7vw, 12.8vh);
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(0.1rem, 1.2vw, 1.5rem);
  color: white;
  text-shadow: #000000 0 0 10px;
  z-index: 10001;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 25%;
}

#planet-wrapper .trailers {
  position: absolute;
  top: 53.5%;
  left: 22.3%;
  transform: translate(-50%, -50%);
  height: 31%;
  z-index: 101;
  opacity: 0.9;
}

#planet-wrapper .rightArrow,
#planet-wrapper .leftArrow {
  position: absolute;
  bottom: clamp(4vh, 7vw, 11.5vh);
  width: 3%;
  height: auto;
  z-index: 101;
}
#planet-wrapper .rightArrow { right: clamp(41.5%, 1.5vw, 40.5%); }
#planet-wrapper .leftArrow { left: clamp(41.5%, 1.5vw, 40.5%); }

#planet-wrapper .petitesight {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -51%);
  width: 90%;
  max-width: 1800px;
  height: auto;
  z-index: 100;
  object-fit: contain;
}

#planet-wrapper .launch {
  position: absolute;
  bottom: clamp(3.7vh, 5.9vw, 12vh);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(1rem, 10vw, 10rem);
  height: auto;
  z-index: 101;
  object-fit: contain;
}

#contactHeader {
  position: absolute;
  top: 16%;
  right: 7.5%;
  color: white;
  font-size: 4.6vw;
  z-index: 10001;
  max-width: 200%;
  white-space: nowrap;
}

#contactInstructions {
  position: absolute;
  top: 50%;
  left: 20%;
  color: white;
  font-size: 3vw;
  z-index: 10001;
  max-width: 100%;
  white-space: nowrap;
}

.contact-container {
  position: absolute;
  top: 50px;
  left: 0;
  width: 100%;
  height: calc(100% - 50px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  pointer-events: auto;
}

.contact-left {
  position: absolute;
  left: 51%;
  width: 42%;
  height: 70%;
  top: 25%;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 20px;
}

.contact-inputs {
  width: 100%;
  max-width: 95%;
  left: 55%;
  height: 60px;
  border: none;
  outline: none;
  padding: 10px 20px;
  color: white;
  font-size: 90%;
  background-color: rgba(62, 62, 62, 0.7);
  border-radius: 25px;
  font-size: 16px;
}

.contact-inputs:focus {
  border: 2px solid #b44646;
}

.contact-inputs::placeholder {
  color: #a9a9a9;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

#projectHeader {
  position: absolute;
  top: 10%;
  left: 34%;
  transform: translateX(-50%);
  color: white;
  font-size: 500%;
  z-index: 10001;
  max-width: 200%;
  white-space: nowrap;
}

button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 35%;
  height: 14%;
  background-color: #333;
  color: white;
  font-size: 3vw;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  padding: 10px 10px;
}

button:hover {
  background-color: #b44646;
}

/* Styling for clickable visitability links */
.visitability-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.visitability-link:hover {
    color: #ffffff; /* Gold color on hover */
    text-decoration: underline;
    transform: scale(1.05);
}

.visitability-link:active {
    transform: scale(0.95);
}

/* Styling for clickable visitability text */
.clickable-visitability {
    transition: all 0.3s ease;
}

.clickable-visitability:hover {
    color: #ffd700; /* Gold color on hover */
    text-decoration: underline;
    transform: scale(1.05);
}

.clickable-visitability:active {
    transform: scale(0.95);
}

@media (max-width: 768px){ /* mobile */

  lu { /* all pages, bottom copywrite statement */ /*adjusted!*/
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: rgb(113, 113, 113);
    position: fixed;
    font-size: 2vw;
    bottom: 3vw;
    right: 3%;
    width: auto;
    z-index: 10000;
  }

  #menuTitle { /* index */ 
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    width:53%;
    font-size: 5vw;
    z-index: 10001;
  }
  
  #menuDesc { /* index */ 
    position: absolute;
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 4vw;
    z-index: -1;
  }

  #projectCategory { /* index */ /*adjusted!*/
    position: absolute;
    bottom: 13%;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 2vw;
    z-index: -1;
  }
  
  #blueCategory {
    position: absolute;
    bottom: 38%;
    left: 50%;
    max-width: 30%;
    transform: translateX(-50%);
    color: white;
    font-size: 4vw;
    z-index: 10001;
    transition: color 0.3s ease, text-shadow 0.3s ease; /* Smooth transition */
  }
  
  #blueCategory:hover {
    color: lightblue; /* Change text color to light blue */
    text-shadow: 0 0 10px lightblue, 0 0 20px lightblue, 0 0 30px lightblue; /* Add glowing effect */
  }
  
  #pinkCategory { /* index */ /*adjusted!*/
    position: absolute;
    bottom: 17%;
    left: 50%;
    max-width: 34%;
    transform: translateX(-50%);
    color: white;
    font-size: 4vw;
    z-index: 10001;
    transition: color 0.3s ease, text-shadow 0.3s ease; /* Smooth transition */
  }

  #pinkCategory:hover {
    color: rgb(255, 106, 210); /* Change text color to light blue */
    text-shadow: 0 0 10px rgb(255, 82, 235), 0 0 20px rgb(255, 81, 241), 0 0 30px rgb(255, 67, 249); /* Add glowing effect */
  }

  #yellowCategory { /* index */ /*adjusted!*/
    position: absolute;
    bottom: 58%;
    left: 50%;
    max-width: 34%;
    transform: translateX(-50%);
    color: white;
    font-size: 4vw;
    z-index: 10001;
    transition: color 0.3s ease, text-shadow 0.3s ease; /* Smooth transition */
  }

  #yellowCategory:hover {
    color: rgb(255, 228, 22); /* Change text color to light blue */
    text-shadow: 0 0 10px rgb(255, 223, 15), 0 0 20px rgb(255, 215, 17), 0 0 30px rgb(255, 206, 28); /* Add glowing effect */
  }

  #aboutHeader { /* about */
     position: absolute;
     top: 12vw;
     left: 18vw;
     color: white;
     font-size: 14vw;
     z-index: 10001;
     transform: translateX(0%);
     white-space: nowrap;
 }

 #aboutDesc { /* about */
     position: absolute;
     bottom: 7vw;
     top: auto;
     left: 8vw;
     color: white;
     font-size: 4vw;
     z-index: 10001;
     max-width: 84vw;
     white-space: normal;
     transform: translateX(0%);
 }

  #contactHeader {
  position: absolute;
  top: 19vw;
  right: 17vw;
  color: white;
  font-size: 7.6vw;
  z-index: 10001;
  max-width: 200%;
  white-space: nowrap;
}

  #contactInstructions {
  position: absolute;
  bottom: 52.5vw;
  top: auto;
  right: 25vw;
  left: auto;
  color: white;
  font-size: 3vw;
  z-index: 10001;
  max-width: 100%;
  white-space: nowrap;
}

  .contact-left {
  position: absolute;
  left: 8.5%;
  width: 80vw;
  height: 36%;
  top: 25vw;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 20px;
}

  #projectHeader {
  position: absolute;
  top: 14vw;
  left: 31vw;
  transform: translateX(-50%);
  color: white;
  font-size: 360%;
  z-index: 10001;
  max-width: 200%;
  white-space: nowrap;
}



  #projects-container {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 90vw;
  max-width: 1200px;
  height: 120vw;
  padding: 10px;
  margin: 0 auto;
  overflow-y: auto;
  z-index: 500;
  background: rgba(0, 0, 0, 0.5);
}

  .project {
  display: flex;
  gap: 15px;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.project-pic {
  width: 15vw;
  height: 15vw;
  object-fit: cover;
  border-radius: 10px;
}

.project-details {
  display: flex;
  flex-direction: column;
}

.project-details h2 {
  margin: 0;
  font-weight: bold;
  font-size: 7vw;
  color: #ffffff;
}

.project-details p {
  margin: 0;
  font-weight: 100;
  font-size: 4vw;
  color: #ffffff;
}
  
  #planet-wrapper {
    width: 95vw;
    max-width: none;
  }
  
  .project {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }
  
  .project-pic {
    width: 120px;
    height: 120px;
  }
  
  .project-details h2 {
    font-size: 200%;
  }
  
  .project-details p {
    font-size: 150%;
  }
  
  #logo {
    bottom: 2%;
    left: 2%;
  }
  
  .logo-image {
    height: 40px;
  }
  
  #about-logo {
    top: 20%;
  }
  
  .about-logo-image {
    height: 60px; /* 3 times the mobile logo size (40px) */
  }
}