:root {
  --form: #004040;
  --formOutline: #007a7a;
  --formHighlight:#b4ecee;
  --formExtraHighlight:#caf2f3;
  --formDark: #003333;
  --formExtraDark:#002626;
  --ButtonShadow: #3d0000;
  --Button: #7a0000;
  --easeTime: 0.3s;
}
   
/* MOBILE STYLing: */

body {
    height: 100vh;
    width: 100vw;
    margin: auto;
    margin-left:auto;
    color:var(--formHighlight);
    padding: 0;
    display: inline;
    justify-content: center;
    background-color: black;
   transition: background-color 1.5s ease;
  font-family: 'Arial', sans-serif;
  }
  button{
    font-family: 'Tektur', sans-serif;
  }
.model-selector{
  font-family: 'Tektur', sans-serif;
  font-size:0.8em;
}
  header {
    margin: auto;
    text-align: center;
    align: center;
    
  }
  div[type="form"] {
    color: white;
    float: center;
    top: 20%;
    margin: auto;
    width: 80%;
    padding: 1.1em;
    border: 2px solid var(--formOutline);
    border-radius: 10px;
    text-align: center;
    align: center;
    align-items:center;
    box-shadow: 0 4px 8px 0 var(--formOutline), 0 6px 20px 0 var(--formOutline);
    background-color: var(--form)
  }
  
  fieldset {
    display: inline-block;
    border: none;
    width: 50%;
    margin: auto;
    padding: 0;
    align: center;
  }
  
  fieldset legend {
    font-weight: bold;
    margin-bottom: 5px;
    margin:auto;
    padding:auto;
  }
  
  input[type="text"] {
    margin:auto;
    margin-bottom: 0.2em;
    width:90%;
    padding: 0.4em;
    border-radius: 5px;
    border: 1px solid black;
    background-color: #fafafa;
    font-family: Arial, sans-serif;
    display:inline-block;
    text-align:center;
  
  }
.advanced-fields {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out;
}

.advanced-fields.open {
  max-height: 100%; /* Adjust this as needed */
}
.show-advanced{
 color: var(--formHighlight);
  
}

  textarea {
    margin-top: 1%;
    margin-bottom: 3%;
    width: 85%;
    background-color: #fafafa;
    padding: 3%;
    border-radius: 5px;
    border: 1px solid black;
    font-family: Arial, sans-serif;
  }
  
  .startButton {
    margin-top: 0.6em;
    padding: 0.6em 0.7em;
    border-radius: 5px;
    postion: relative;
    border: 1px solid var(--formHighlight);;
    -webkit-text-fill-color: var(--formHighlight);;
    color: var(--formHighlight);;
    background-color: var(--formOutline);
  }
  
  div [type="image"] {
    display: inline-block;
    align:center;
    width: 60vw;
    padding: 5vw;
    padding-right: 1vw;
    padding-left:1vw;
    margin: auto 0.5vw 2vh 0.5vh;
    border: 2px solid var(--formOutline);
    background: var(--form);
    border-radius: 20px;
    justify-content: center;
    justify:center;
    box-shadow: rgba(0, 122, 122, 0.17) 0px -5px 6px 0px inset, rgba(0, 122, 122, 0.15) 0px -6px 5px 0px inset, rgba(0, 122, 122, 0.1) 0px -16px 8px 0px inset, 0 2px 3px 0 var(--formOutline), 0 3px 10px 0 var(--formOutline); /*, rgba(180, 236, 238, 0.06) 0px 2px 1px, rgba(180, 236, 238, 0.09) 0px 4px 2px, rgba(180, 236, 238, 0.09) 0px 8px 4px, rgba(180, 236, 238, 0.09) 0px 16px 8px, rgba(180, 236, 238, 0.09) 0px 32px 16px; */
    text-align:center;
    transition: width var(--easeTime) ease;
  }
  div [type="image"] img {
    border-radius:10px;
  }
.title-text {
  font-size: 2.3em;
  margin-bottom:0.3em;
  color: #b4ecee;
  text-shadow: 0 0 10px #007a7a, 0 0 20px #007a7a, 0 0 30px #007a7a, 0 0 40px #007a7a;
  text-transform: uppercase;
  letter-spacing: 2px;
  animation: neon 1s ease-in-out infinite alternate;
}

@keyframes neon {
  from {
    text-shadow: 0 0 10px #007a7a, 0 0 20px #007a7a, 0 0 30px #007a7a, 0 0 40px #007a7a;
  }
  to {
    text-shadow: 0 0 15px #007a7a, 0 0 25px #007a7a, 0 0 35px #007a7a, 0 0 45px #007a7a, 0 0 50px #007a7a;
  }
}



  img {
    margin:auto;
    padding:auto;
    display:block;
    max-width:75%;
    height:auto;
    transition: width var(--easeTime) ease;
  }
.avatars {
  text-align:center;
  display:grid;
  grid-template-rows: 32% 64%;
  width: 80vw;
  height:80vh;
  margin:0px;
  justify:left;
  justify-content:left;
  transition: width var(--easeTime) ease;
}
div[id="avatars"]{
  white-space:nowrap;
  display:inline;
  overflow-x: scroll;
  overflow-y:hidden;
  width:100vw;
  position:relative;
  align-items:start;
  vertical-align:top;
  margin-top:0;
  }

.token-counter{
  position:absolute;
  left:2vw;
  text-align:left;
  margin:0;
  padding:0;
  font-size:0.5em;
  opacity:0.9;
}
.token-counter p{
  padding:0;
  margin:0;
}

.OptionsButton {
  display:block;
    margin:0.3em 0 0.3em 0;
    text-align:center;
    padding:0.1em;
    background-color: rgba(7, 180, 230, 0);
    border-bottom: 1px solid var(--formOutline);
    outline: none;
    color: var(--formOutline);  
    transition: width var(--easeTime), padding var(--easeTime), margin var(--easeTime), color var(--easeTime);
  }

.OptionsBar{
    position:fixed;
    display:block;
    top:38%;
    left:83%;
    height: auto;
    padding: 0;
    margin: 0vh;
    transition: width var(--easeTime), padding var(--easeTime), margin var(--easeTime);
  }

  div [type="mega"] {
    align:center;
    width: 80vw;
    height: 90vh;
    display:inline;
    
    padding-top: 0px;
    justify-content: center;
  }
  div [type ="presetOptions"] {
    margin:0 auto;
    width: 99vw;
    padding-bottom: 0.5rem;
    text-align: center;
  }
  label [type="options"]{
    margin:0;
    align:left;
    float: left;
    text-align: left;
    width: 75%;
  }
  
  h4 {
    padding: 0;
    margin: 0;
    margin-top:1px;
    font-size:0.7em;
  }
  h4 button {
    font-size:2em;
  }
  img [type="loading"] { /* - this is never used - */
    position: absolute;
    left: 50%;
    top:50%
    margin-left:-256px;
    transition: width var(--easeTime) ease;
  }
  
  .clickable-button {
    display: inline-block;
    background-color: var(--Button);
    color: #fff;
    padding: 5px 5px;
    margin-left: 5px;
    margin-bottom: 5px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    border: none;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
    transition: background-color 0.3s ease;
  }
  
  .clickable-button.clicked {
    background-color: #006F8C;
  }
  
  .dropdown {
    position: relative;
    display: inline-block;
    background-color: var(--Button);
    color: #fff;
    padding: 5px 3px;
    margin-left: 2px;
    margin-right:2px;
    margin-bottom: 5px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    border: none;
    box-shadow: 0px 2px 2px var(--ButtonShadow);
    transition: background-color 0.3s ease;
  }
  .dropdown-button {
    border: none;
    outline: none;
    background-color: var(--Button);
    color: #fff;
    font-size: 16px;
    font-weight: bold;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    white-space: nowrap;
    padding: 5px;
    cursor: pointer;
    z-index: 1;
    top: 100%;
    left: 0;
    background-color: var(--ButtonShadow);
    box-shadow: 0 3px 1px var(--ButtonShadow);
  }
  
  .dropdown-items {
    border-bottom: 1px solid var(--Button);
     cursor: pointer;
    padding: 2px 4px 2px 4px;
  }
  .dropdown-items:hover {
    background:  var(--Button);
    
  }
  
  .dropdown:hover .dropdown-content {
    display: block;
  }
  .loginButton{
     color:var(--formOutline);
  }
  
  .instruction-screen, .share-screen,.modalOverlay  {
  position: absolute;
    white-space: pre-line;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    width: 80%; /* Change this value to adjust the width of the pop-up */
    height: 50%; /* Change this value to adjust the height of the pop-up */
  }
  .instruction-content, .share-content, .modalWindow {
     background-color: black;
    color:var(--formHighlight);
    border: 2px solid var(--formHighlight);
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    padding: 20px;
    max-width: 100vw;
    max-height:100vh;
    text-align: center;
    overflow: scroll;
  }
  
  .instruction-button, .share-button {
    background-color: rgba(7, 180, 230, 0);
    cursor: pointer;
    border: none;
    outline: none;
    color: var(--formOutline);
    
  }
  .OptionsButton svg, .loginButton svg{
    filter: drop-shadow(1px 2px 3px black);
  }
  .OptionsButton svg:hover, .loginButton svg:hover{
   filter: drop-shadow(0px 0px 1px black);
  }

  .share-button {
    
  }
.share-link {
  white-space: pre-line;
  color: black;
  font-weight: bold;
  font-size: 20px;
  
  
  
}
   .instruction-screen, .share-screen {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(7, 180, 230, 0);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    width: 90%; /* Change this value to adjust the width of the pop-up */
    height: 50%; /* Change this value to adjust the height of the pop-up */
  }
  .subtitles-container{
    display:inline-block;
    position:relative;
    text-align:left;
    justify-content:left;
    width:70vw;
    margin:0;
    margin-left:0.7em;
    padding:0;
    z-index:0;
    
  }
  .subtitles{
    height:42vh;
    font-family: Arial, sans-serif;
    display:inline-block;
    width:70vw;
    margin:auto;
    color:  #c0c0c0;
    margin-left:1vw;
    margin-top:0%;
    padding: 1vh;
    padding-top:2.8vh;
    padding-bottom:2vh;
    overflow: auto;
    overflow-x:'hidden';
    background-color: #333333; 
    text-align:left;
    white-space: pre-line;
    z-index:0;
    box-shadow: inset 0 0 5px var(--formOutline); /* Subtle inset shadow */
    border-radius: 5px; /* Rounded corners for the chat window */
      line-height: 1.3;
    transition: scrollTop 0.3s ease-out;
    transition: background-image 2s ease-in-out;
  }

@keyframes waveAnimation {
  0% { background-position: 0 0; }
  50% { background-position: 100% 100%; }
  100% { background-position: 0 0; }
}

.wave-background {
  animation: waveAnimation 3s linear infinite;
  background: linear-gradient(90deg, hsla(229, 16%, 20%, 0.7) 0%, hsla(199, 32%, 18%, 0.7) 49%, hsla(180, 100%, 13%, 0.7) 85%, hsla(229, 16%, 20%, 0.7) 100%);
  background-size: 400% 400%;
}


  .editable-text{
    width: 70vw;
    padding:0;
    color:#bbb;
    font-family: Arial, sans-serif;
    line-height:1.5;
    border:none;
    text-align:left;
    background-color: transparent;
    border-radius:0;
    resize:none;
    overflow:hidden;
    white-space:pre-line;
    height:auto;
    border-right: 2px dashed #007a7a55;
  }

.font-size-toggle,
.dark-mode-toggle {
  position: absolute;
  top: 0%;
  right: 85%;
  padding: 5px;
  display: flex;
  align-items: center;
}
.font-size-toggle {
  left: 40px;
}
  
.font-button, .dark-button {
  background: var(--form);
  color: var(--formHighlight);
  border: 1px solid var(--formOutline);
}
  .font-button:hover, .dark-button:hover{
    background: var(--formOutline);
  }


  .blue-button,.reddit-button {
    border: none;
    outline: none;
    background-color: #4d004d;
    color: white;
    border-radius: 5px;
    border: none;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
    transition: background-color 0.3s ease;
    align: right;
    position: fixed;
    top: 72%;
    left: 86%;
    z-index:30;
  }
  
  .blue-button:hover {
    background-color: #97207e;
    box-shadow: 0px 1px 1px rgba(0,0,0,0.2)
  }
.reddit-button{
  top:77%;
  background-color: #992900;
  
}
.reddit-button:hover{
    background-color: #FF5700;
    box-shadow: 0px 1px 1px rgba(0,0,0,0.2)
  }
  
  .logo{
    width: 45vw;
    width:100%;
    height: auto;
    margin-top:2vh;
    padding: auto;
    z-index:200;
    display:block;
  }


  .logo-div{
    display:flex;
    justify-content:center;
    align-items: center;
    margin:auto;
    margin-top:10px;
  }
  .logo-a{
    flex: 0 0 auto;
    
  }

  .statusText{
    visibility:visible;
    margin:0;
    
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    padding:auto;
    align: center;
    transition: color 1s ease;
    position:absolute;
  }

.MainLinks {
    position:float;
    bottom:1%;
    left:25%;
    width: 50vw;
    margin:auto;
    margin-bottom: 1em;
    display: flex;
    justify-content: space-between;
    color: var(--formOutline)
}
  a:link {
  color: var(--formOutline);
}
  a:visited {
  color: var(--formOutline);
}
div[type="AdventureResume"] {
    color: white;
    top: 50%;
    margin: 20vh auto 25vh auto;
    width: 45%;
    height: 25%;
    padding: 20px;
    border: 2px solid var(--formOutline);
    border-radius: 10px;
    text-align: center;
    align: center;
    box-shadow: 0 4px 8px 0 var(--formOutline), 0 6px 20px 0 var(--formOutline);
    background-color: var(--form)
  }
.keyboard-input {
    width: 90vw;
    height: 50px;
    padding-bottom:1em;
    display: flex; 
    alignItems: center; 
    resize: none;
    margin:auto;
    margin-bottom:25px;
    margin-left:1vw;
    background-color:#242631;
  }
  .keyboard-textarea{
    background-color:#191919;
    font-size:16px;
    font-family: Arial, sans-serif;
    color:var(--formOutline);
  }  
  .keyboard-submit-button {
    height:80%;
    width:auto;
    margin:auto;
    padding:5px;
    background: transparent;
    background-color:#191919;
    border: none;
    margin-left: 10px;
    cursor: pointer;
    border-radius: 5px;
    color: var(--formOutline);
    border: 1px solid var(--formOutline);
}
.popupMenu{
  color: var(--formOutline)
}
.cookie-banner-container {
          background-color: #2b373b;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0;
          flex-wrap: wrap;
          white-space:pre-line;
          max-width: 100%;
          box-sizing: border-box;
          z-index:999;
        }

        .cookie-banner-content {
          flex: 1 1 auto;
          max-width: 90%; /* 100px is the estimated width of the button */
          color: #ffffff;
        }

        .cookie-banner-button {
          background-color: #4e503b;
          color: #ffffff;
          font-size: 13px;
          margin-left: 1rem;
          padding: 0rem 1rem;
          border: none;
          cursor: pointer;
          flex-shrink: 0;
        }

/*----------DESKTOP STYLE --------*/ 
/*#################################*/

@media only screen and (min-width: 768px) {
  div[id='root']{
    width:100%;
  }
  body {
    margin: 0;
    color: var(--formHighlight);
    padding: 0;
    display: flex;
    justify-content: center;
    background-color: black;
   transition: background-color 2.5s ease;
  }
  header {
    margin: auto;
    text-align: center;
    align: center;
  }
  
  .avatars {
  display: grid;
  grid-template-columns: 40% 60%;
  grid-template-rows:null;
  gap: 2vw;
  text-align:center;
  width: 75vw;
  margin:0;
  justify:left;
  justify-content:left;
  transition: width var(--easeTime) ease;
}
  div[id="avatars"]{
    overflow-y: scroll;
    white-space:normal;
    overflow-x:hidden;
    display:block;
    position:relative;
    resize:horizontal;
    width:26vw;
    max-width:24vw;
    height:85vh;
    border-right: 2px solid var(--form)
  }

  .reminder-textbox {
   max-width:450px;
    min-height:65px;
  }
  
  div[type="form"] {
    color: white;
    top: 20%;
    margin: auto;
    width: 47%;
    padding: 20px;
    border: 2px solid var(--formOutline);
    border-radius: 10px;
    text-align: center;
    align: center;
    box-shadow: 0 4px 8px 0 var(--formOutline), 0 6px 20px 0 var(--formOutline);
    background-color: var(--form)
  }
  div[type="AdventureResume"] {
    color: white;
    top: 50%;
    margin: 20vh auto auto auto;
    width: 25%;
    height: 25%;
    padding: 20px;
    border: 2px solid var(--formOutline);
    border-radius: 10px;
    text-align: center;
    align: center;
    box-shadow: 0 4px 8px 0 var(--formOutline), 0 6px 20px 0 var(--formOutline);
    background-color: var(--form)
  }
  
  fieldset {
    float: center;
    border: none;
    width: 49%;
    margin: 0 auto;
    padding: 0;
    align: center;
  }
  
  fieldset legend {
    font-weight: bold;
    margin-bottom: 0.5vh;
    font-size: 20px;
  }

  .character-right{
    border-left:solid var(--formOutline) 2px;
    border-bottom:solid var(--formOutline) 2px;
    
  }
  .character-left{
    border-bottom:solid var(--formOutline) 2px;
    
  }
  
  input[type="text"] {
    margin-bottom: 5px;
    margin-left: 3px;
    padding: 0.4vh;
    border-radius: 5px;
    border: 1px solid black;
    background-color: #fafafa;
    font-family: Arial, sans-serif;
    display:inline-block;
    text-align:center;
  }
  
  textarea {
    margin-top: 2px;
    margin-bottom: 5px;
    width: 85%;
    background-color: #fafafa;
    padding: 0.5vh;
    border-radius: 5px;
    border: 1px solid black;
    font-family: Arial, sans-serif;
  }
  
  .startButton{
    margin-top: 10px;
    postion:relative;
    padding: 5px 10px;
    cursor:pointer;
    border-radius: 5px;
    color:white;
    border: 1px solid var(--formHighlight);
    -webkit-text-fill-color: white;
    background-color: var(--formOutline);
  }
  
  div [type="image"] {
    vertical-align:top;
    display:inline-block;
    justify:right;
    width:100%;
    max-width: min(22vw,100%);
    height: auto;
    padding: 1.2em 0.5em 1em 0.5em;
    margin: auto 1em auto 0.5em;
    box-sizing: border-box;
    background: var(--form);
    border-radius: 40px;
    box-shadow: 0 4px 8px 0 var(--formOutline), 0 6px 20px 0 var(--formOutline), rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
    box-shadow: rgba(0, 122, 122, 0.17) 0px -10px 10px 0px inset, rgba(0, 122, 122, 0.15) 0px -36px 30px 0px inset, rgba(0, 122, 122, 0.1) 0px -79px 40px 0px inset, 0 4px 8px 0 var(--formOutline), 0 6px 20px 0 var(--formOutline);
    transition: width var(--easeTime) ease; height var(--easeTime) ease;
  }
  img {
    margin:auto;
    display:block;
    border-radius: 3px;
    width: 18vw;
    height:auto;
    transition: width var(--easeTime) ease;
  }
  div [type="image"] img {
  margin:auto;
  width:auto;
  border-radius:10px;
  }
  div [type="image"] h4 {
  width:auto;
    display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
    margin-top:8px;
    font-size:1em;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  max-height: 32px; /* replace X with the calculated line height multiplied by 2 (line-height * 2) */
  line-height: 16px; /* replace Y with the line-height you want */
  height:32px;
  word-break: break-word;
  }
  
  
  div [type="mega"] {
    align:center;
    width: 80vw;
    height: 90vh;
    padding: 2vw;
    padding-top: 0px;
    justify-content: center;
  }
  div [type ="presetOptions"] {
    margin: auto;
    margin-bottom: 0px;
    width: 50%;
    padding-bottom: 1vh;
    text-align: center;
  }
  label [type="options"]{
    display:block;
    margin:0;
    align:left;
    float: left;
    text-align: left;
    width: 75%;
  }
  .labelOptions{
    
  }
  .token-counter{
  position:absolute;
  left:2vw;
  text-align:left;
  margin:0;
  padding:0;
  font-size:0.5em;
  opacity:0.9;
  margin-top:-3em;
}
  
  h4 {
    padding: 0;
    margin: 0;
    margin-top:2vh;
    font-size:1.1em;
  }
  img [type="loading"] {
    position: absolute;
    left: 50%;
    top:50%
    margin-left:-256px;
    transition: width var(--easeTime) ease;
  }
  
  .clickable-button {
    display: inline-block;
    background-color: var(--Button);
    color: #fff;
    padding: 5px 5px;
    margin-left: 5px;
    margin-bottom: 5px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    border: none;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
    transition: background-color 0.3s ease;
  }
  
  .clickable-button.clicked {
    background-color: #006F8C;
  }
  
  .dropdown {
    position: relative;
    display: inline-block;
    background-color: var(--Button);
    color: #fff;
    padding: 5px 3px;
    margin-left: 5px;
    margin-bottom: 5px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    border: none;
    box-shadow: 0px 2px 2px var(--ButtonShadow);
    transition: background-color 0.3s ease;
  }
  .dropdown-button {
    border: none;
    outline: none;
    background-color: var(--Button);
    color: #fff;
    font-size: 16px;
    font-weight: bold;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    white-space: nowrap;
    padding: 5px;
    cursor: pointer;
    z-index: 1;
    top: 100%;
    left: 0;
    background-color: var(--ButtonShadow);
    box-shadow: 0 3px 1px var(--ButtonShadow);
  }
  
  .dropdown-items {
    border-bottom: 1px solid var(--Button);
     cursor: pointer;
    padding: 2px 4px 2px 4px;
  }
  .dropdown-items:hover {
    background:  var(--Button);
    
  }
  
  .dropdown:hover .dropdown-content {
    display: block;
  }
  .OptionsBar{
  position:absolute;
    display: block;
    left: 75%;
    top: 13%;
    vertical-align:top;
    max-width: 10%;
    height: auto;
    padding: 3vh;
    margin: 4vh;
    border: 2px solid var(--formOutline);
    background: var(--form);
    border-radius: 40px;
    box-shadow: 0 4px 8px 0 var(--formOutline), 0 6px 20px 0 var(--formOutline);
        transition: width var(--easeTime), padding var(--easeTime), margin var(--easeTime);
  }
  
  .instruction-screen, .share-screen {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(7, 180, 230, 0);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    width: 50%; /* Change this value to adjust the width of the pop-up */
    height: 50%; /* Change this value to adjust the height of the pop-up */
  }
  .instruction-content, .share-content {
     background-color: black;
    color: black;
    border: 2px solid var(--formHighlight);
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    padding: 20px;
    max-width: 100vw;
    max-height:100vh;
    text-align: center;
  }
  
  .OptionsButton, .loginButton {
    display:block;
    align-content:center;
    margin:auto;
    margin-top:1vh;
    margin-bottom:1vh;
    border: none;
    border-bottom: 1px dotted var(--formOutline);
    white-space:nowrap;
    background-color: rgba(7, 180, 230, 0);
    cursor: pointer;
    outline: none;
    color: var(--formOutline);  
    transition: width var(--easeTime), padding var(--easeTime), margin var(--easeTime), color var(--easeTime);
    
  }
  path{
    margin:auto;
  }
  .share-button {
  }
  .instruction-button:hover {
  
  }
  .blue-button,.reddit-button {
    border: none;
    outline: none;
    background-color: #700070;
    color: white;
    border-radius: 5px;
    border: none;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
    transition: background-color 0.3s ease;
    align: right;
    position: fixed;
    top: 90%;
    left:90%;
  }
  
  .blue-button:hover {
    background-color: #97207e;
    box-shadow: 0px 1px 1px rgba(0,0,0,0.2)
  }
  .reddit-button{
    background-color:#FF4500;
    top:85%;
  }
  .reddit-button:hover{
    background-color: #FF5700;
    box-shadow: 0px 1px 1px rgba(0,0,0,0.2)
  }
  .logo{
    display:inline;
    width:20vw;
    max-width:300px;
    height: auto;
    margin: auto auto auto auto;
    padding: auto;
    transition: width var(--easeTime) ease;

    
  }
  .statusText{
    visibility:visible;
    margin:auto;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    pading:auto;
    align: center;
    transition: color 1s ease;
    position:absolute;
  }
  .subtitles {
  font-family: Arial, sans-serif;
  height: 30vh;
  margin: auto;
  margin-left:calc(1.5vw);
  left:0;
  padding: 2vw;
  color: #bbb; 
  width: 30vw;
  overflow: auto;
  background-color: #333; 
  box-shadow: inset 0 0 10px var(--formOutline); 
  border-radius: 5px; 
  text-align: left;
  white-space: pre-line;
  line-height: 1.5; 
}
  .editable-text{
    width: 30vw;
    padding:0;
    padding-right:0.7em;
    color:#bbb;
    font-family: Arial, sans-serif;
    line-height:1.5;
    border:none;
    text-align:left;
    background-color: transparent;
    border-radius:0;
    resize:none;
    overflow:hidden;
    white-space:pre-line;
    height:auto;
    border-right: 2px dashed #007a7a66;
  }
  .subtitles-container{
    position: relative;
    left:0;
    display: inline-block;
    width: calc(50vw + 15vw - 33vw);
    margin:0;
    margin-top:1em;
    padding:0;
    
  }
  .font-size-toggle,
.dark-mode-toggle {
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px;
  display: flex;
  align-items: center;
}

.font-size-toggle {
  right: 40px;
}
  
.font-button, .dark-button {
  background: var(--form);
  color: var(--formHighlight);
  border: 1px solid var(--formOutline);
}
  .font-button:hover, .dark-button:hover{
    background: var(--formOutline);
  }

  .keyboard-input {
    width: 34vw;
    margin:0;
    margin-top: 0.5em;
    margin-left:calc(50vw - 15vw - 33vw);
    height: 50px;
    display: flex; 
    alignItems: left; 
    resize: none;
    background-color:#242631;
  }
  .keyboard-textarea{
    background-color:#191919;
    width:30vw;
    margin-left:0;
    font-size:16px;
    font-family: Arial, sans-serif;
    color:var(--formOutline);
  }  
  .keyboard-submit-button {
    height:80%;
    width:auto;
    margin:auto;
    padding:5px;
    background: transparent;
    background-color:#191919;
    border: none;
    margin-left: 10px;
    cursor: pointer;
    border-radius: 5px;
    color: var(--formOutline);
    border: 1px solid var(--formOutline);
}
  .subtitle-button {
    border: none;
    margin:auto;
    outline: none;
    background-color: var(--form);
    color: #ccc;
    font-size: 16px;
    font-weight: bold;
    white-space: nowrap;
    padding: 5px;
    border-radius: 5px;
    border: none;
    box-shadow: 0px 2px 2px 2px var(--formOutline);
    transition: color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .subtitle-buttondiv {    
  }
  .subtitle-button:hover {
    box-shadow: 0px 2px 1px 1px var(--formOutline);
  }

  .TOS {
    overflow: auto;
    text-align:left;
    width: 65%;
    margin:auto;
    padding: 20px;
    color:black;
    background-color:white;
    white-space: pre-line;
  }
  .MainLinks {
    position:fixed;
    bottom:1%;
    left:89%;
    width: 10vw;
    margin:10px auto;
    display: flex;
    justify-content: space-between;
    color: var(--formOutline)
}
  a:link {
  color: var(--formOutline);
}
  a:visited {
  color: var(--formOutline);
}

  .cookie-banner-container {
  max-width:30%;
  }
  }