:root {
  --fc: white;
  --bc: black;
}
/* Options Section Div */
.div-left {
  background-color: var(--bc);
  height: 100vh;
}

.div-left-heading {
  color: aliceblue;

}

/* History Section*/
#history {
  height: 30vh;
  overflow: scroll;
  overflow-x: hidden;
}

.div-left-heading{
  padding: 10px;
  font-size: 200%;
  font-family: 'Audiowide', sans-serif;
}

.div-left-heading:hover{cursor: pointer;}
.history-add {
  padding-left: 10px;
  font-size: 18px;
  color: white;
  border: 1px solid black;
  border-radius: 5px;
  overflow: scroll;
  overflow-x: hidden;
  height: 30px;
  font-family: 'Roboto Mono', monospace;

}

.history-add:hover {
  background-color: grey;
  cursor: pointer;
}

/* Optional Fiter Section  */
.sec-option-text {
  color: var(--fc);
  margin: 0;
  font-family: 'Roboto Mono', monospace;
  font-size: 120%;
  padding: 5px 0px;
}

#options {
  background-color: var(--bc);
  color: var(--fc);
  font-family: 'Pacifico', cursive;
  padding: 10px 25px;
  border: 2px solid white;
  border-radius: 10px;
  width: 80%;
}

option {
  background-color: black;
  padding: 10px 15px;
  border-radius: 10px;
}

#output-token {
  background-color: var(--bc);
  border: 2px solid white;
  padding: 8px 10px;
  border-radius: 10px;
  width: 80%;
  color: var(--fc);
  font-family: 'Roboto Mono', monospace;
}

#stop-sequence {
  background-color: var(--bc);
  border: 2px solid white;
  padding: 8px 10px;
  border-radius: 10px;
  width: 80%;
  color: var(--fc);
  font-family: 'Roboto Mono', monospace;
}
#temperature
{
  width: 80%;
}

#temperature-value{
  border: 1px solid white;
  font-size: 90%;
  padding: 3px;
  border-radius: 10px;
  text-align: right;
}
input[type=file]{
display: none;;
}

/* Main Section Div */
.div-main {
  background-color: var(--bc);
  color: var(--fc);
  height: 100vh;
  width: 100%;
}

.div-main-heading {
  color: var(--fc);
  height: 5vh;
  font-family: 'Mansalva', sans-serif;
  display: inline;
}

/* Chat Display Section */
.div-main-section {
  height: 80vh;
  overflow: scroll;
  overflow-x: hidden;
  padding: 0px;
}

/* Content Suggestion Section */
.sugg {
  padding: 0;
}

.dis {
  bottom: 15vh;
  position: fixed;
  height: 25vh;
  width: 80%;
}

.suggestion-button {
  height: 10vh;
  background-color: var(--bc);
  width: 100%;
  margin: 0;
  margin: 1.5vh 0vh;
  border: 2px solid white;
  border-radius: 10px;
  padding: 1vh;
  font-size: 100%;
  font-family: 'Roboto Mono', monospace;
  cursor: pointer;
}
.suggestion-span{
  font-size: 90%;
}
#center-info{
  bottom: 60vh;
  position: fixed;
  width: 80%;
  height: 10vh;
}
.cen-info{
  background-color: yellowgreen;
  height: 15vh;

}

/* Center Section Display */
.welcome{
  margin-top: 10vh;
text-align: center;

}
#welcome-text{
  font-size: 130%;
  font-family: 'Roboto Mono', monospace;
}

/* Input Section */

.entry {
  height: 10vh;
  background-color: var(--bc);
  bottom: 0;
  text-align: center;
}
#file-upload-button{
  background-color: black;
  border: solid black 1px;
  display: none;
}

#text_input {
  height: 8vh;
  width: 90%;
  background-color: var(--bc);
  color: var(--fc);
  border: 3px solid white;
  border-radius: 8px;
  margin: 2px 0px;
  font-family: 'Roboto Mono', monospace;
  font-size: 120%;
}

.upload-icon {
  height: 6.5vh;
  width: 4%;
}

.upload-icon:hover {
  cursor: pointer;
}

.developer {
  height: 1vh;
  text-align: center;
  font-family: 'Roboto Mono', monospace;
}



/* Mobile Display CSS */
@media screen and (max-width: 786px) {
  .div-left {
    display: none;
  }

  #text_input {
    width: 87%;
  }

  .upload-icon {
    width: 11%;
  }

  .dis {
    margin: 0 auto;
    width: 100%;
  }

  .mobile {
    display: none;
  }

  .sugg {
    
  }

  .welcome-img{
    width: 60%;
    margin-top: 10vh;
  }
}