@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');

html {
  scroll-behavior: smooth;
  font-family: "Geist", sans-serif;

  letter-spacing: -6%;
}
*{
  margin:0px;
  padding:0px;
}
body {
  margin: 0;
  padding: 0;
  overflow-x:scroll;
  width: 100vw;
}


#control-panel, #shape-select-panel, #text-input-panel {
  opacity: 1;
  pointer-events: auto; /* Initially disable interaction */
}

a {
  text-decoration: underline;
  color: black;
}

a:visited {
  color: inherit; /* or specify the original color */
}


#gra {
  font-size: 17pt;
  left: 2%;
  position: fixed;
  padding: 1%;
  top: 2%;

  cursor: pointer;
}
#gra:hover {
  text-decoration: underline;
}

#info {
  font-size: 19pt;
  width: 780px;
  left: 2%;
  padding: 1%;
  top: 10%;
  position: fixed;
  display: none;
}

#control-panel {
  position: fixed;
  top: 78.5%;
  left: 2%;
  transform: translateY(-50%); 

  font-size: 17pt;
  padding: 1%;
}

#shape-select-panel {
  position: fixed;
  top: 60%;
  left: 2%;
  padding: 0.8%;
  padding-left: 1.2%;
  width: 240px;
  font-family: "Geist", sans-serif;
  font-size: 17pt;
  gap: 15px;
  display: flex;
  visibility: hidden;
  flex-direction: row;
  align-items: center;
}

#textcontainer{
  overflow-x:scroll;
  width:400vw;
  z-index:-100;
}

/* Panel label */
#shape-select-panel span {
  display: inline-block;
  color: #000;
  white-space: nowrap;
  text-align: center;
  align-items: center;
}

#shape-select-panel select {
  width: 50%;  
  background-color:black;
  font-size: 12pt;
  color: white;
  border: #000;
  appearance: non e;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  transition: all 0.2s;
  flex-grow: 1;
}

object {
  position: absolute;
  width:160px;
  height: auto;
  right: 2vw;

}


#shape-select-panel select option {
  color: #333;
}



input[type="range"] {
  width: 150%;       
  height: 2px;       
  background: black;    
  outline: none;        
  appearance: none;     
  color: black;
}


input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 5px;
  height: 20px;
  background: black;
  cursor: pointer;
}


input[type="range"]::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  cursor: pointer;
}


#text-input-panel {
  position: fixed;
  top: 92.5%;
  left: 2%;
  transform: translateY(-50%);
  padding: 8px;
  padding-left: 16px;
  mix-blend-mode: multiply;
  display: flex;
  align-items: center;
  font-size: 17pt;
}

/* Style for the label */
#text-input-panel span {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  color: #000000;
  white-space: nowrap;
}

/* Style for the input field */
#text-input-panel input {

  font-size: 17pt;
  color: black;
  width: 150px;
  appearance: none;
  border: none;
  border-bottom: 2.5px solid black; /* This adds the underline */
  height: 20px;
}


#text-input-panel input:focus {
  outline: none;
}




#control-panel, #shape-select-panel, #text-input-panel {
  position: fixed;
  left: 2%;
  /* Add this to initially hide the panels */
  opacity: 1;
}
 
@media screen and (max-width:782px) {
  #info {
    width: 650px;
  }
  #control-panel, #shape-select-panel, #text-input-panel {
    opacity: 1;
    pointer-events: auto; /* Initially disable interaction */

  }
}
@media screen and (max-width:600px) {
  #info {
    width: 500px;
  }
}
  @media screen and (max-width:320px) {
    #info {
      width: 300px;
    }
}

@media screen and (max-width:320px) {
  #title{
    font-size:30vw;
    line-height:90%;
  }

  .landing-content {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 60vw auto 5vw;
    height: 100%;
    padding-left: 1vh;
  }
}
#zoom-control-panel {
  position: fixed;
  top: 65%;
  left: 2%;
  transform: translateY(-50%);
  padding: 8px;
  padding-left: 16px;
  display: flex;
  align-items: center;
  font-size: 17pt;
}

#zoom-control-panel span {
  font-family: "Geist", sans-serif;
  color: #000000;
  white-space: nowrap;
  margin-right: 10px;
}

#zoom-control-panel input[type="range"] {
  width: 150%;       
  height: 2px;       
  background: black;    
  outline: none;        
  appearance: none;     
  color: black;
}

#zoom-control-panel input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 5px;
  height: 20px;
  background: black;
  cursor: pointer;
}

#zoom-control-panel input[type="range"]::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  cursor: pointer;
}
#theme-toggle-panel {
  position: fixed;
  top: 58.7%;
  left: 2%;
  padding: 8px;
  padding-left: 16px;
  display: flex;
  align-items: center;
  font-size: 17pt;
  gap: 10px;
}

#theme-toggle-panel span {
  font-family: "Geist", sans-serif;
  color: #000000;
  white-space: nowrap;
}

#theme-toggle-panel label {
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: 8px;
  font-size: 17pt;
}

#theme-toggle-panel input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: black;
}

/* Dark mode styles for UI elements */
body.dark-mode {
  background-color: #000;
  color: #fff;
}

body.dark-mode #gra,
body.dark-mode #info,
body.dark-mode #control-panel,
body.dark-mode #theme-toggle-panel span,
body.dark-mode #zoom-control-panel span,
body.dark-mode #text-input-panel span {
  color: #fff;
}

body.dark-mode #text-input-panel {
  mix-blend-mode: normal;
}

body.dark-mode #text-input-panel input {
  color: white !important;
  border-bottom: 2.5px solid white !important;
  background-color: transparent !important;
}

body.dark-mode a {
  color: white;
}
body.dark-mode #shape-select-panel span {
  color: white;

}
body.dark-mode input[type="range"] {
  background: white !important;
}

body.dark-mode input[type="range"]::-webkit-slider-thumb {
  background: white !important;
}

body.dark-mode input[type="range"]::-moz-range-thumb {
  background: white !important;
}