@media (prefers-color-scheme:light) {
  :root {
    --backgroundcolor: #ffffff;
    --textcolor: #0d0d0d;
    --textcolor2: #5d5d5d;
    --linkcolor: #2964aa;
    --linkhovercolor: #749ac8;
    --secondarycolor: #000000;
    --secondarytextcolor: #ffffff;
    --tertiarycolor: #f3f3f3;
    --hovercolor1: #393939;
    --hovercolor2: #cfcfcf;
  }
  .maininputbox {
    background-color: var(--backgroundcolor);
    box-shadow: #dcdcdc 0 0.25em 0.5em;
    border: #cdcdcd 0.5px solid;
  }
}
@media (prefers-color-scheme:dark) {
  :root {
    --backgroundcolor: #212121;
    --textcolor: #ececec;
    --textcolor2: #b4b4b4;
    --linkcolor: #7ab7ff;
    --linkhovercolor: #5e83b3;
    --secondarycolor: #ffffff;
    --secondarytextcolor: #000000;
    --tertiarycolor: #303030;
    --hovercolor1: #cfcfcf;
    --hovercolor2: #393939;
  }
  .maininputbox {
    background-color: var(--tertiarycolor);
  }
}
@media (orientation:landscape) {
  :root {
    --sidemargin: 25vw;
    --textsize: 1rem;
    --textsmall: 1rem;
    --titlesize1: 1.5rem;
    --inputwidth: 50vw;
    --messagewidth: 30vw;
  }
  .topleft {
    background-color: none;
  }
}
@media (orientation:portrait) {
  :root {
    --sidemargin: 5vw;
    --textsize: 1rem;
    --textsmall: 0.75rem;
    --titlesize1: 1.1rem;
    --inputwidth: 90vw;
    --messagewidth: 60vw;
  }
  .topleft {
    background-color: var(--backgroundcolor);
    justify-content: center;
  }
  .topleft button {
    position: absolute;
    top: 0.15em;
    left: 0.25em;
  }
}
a {
  text-decoration: none;
  color: var(--linkcolor);
  text-shadow: none;
}
a:hover {
  text-decoration: none;
  color: var(--linkhovercolor);
}
h1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--titlesize1);
  font-weight: 600;
  color: var(--textcolor2);
  margin: 1em 0;
}
p {
  font-family: Arial, Helvetica, sans-serif;
}
p.copyright {
  font-family: 'BlenderPro', monospace;
}
.blinking-cursor {
  position: relative;
  bottom: -1px;
  display: inline-block;
  margin-left: 0.25em;
  background-color: var(--textcolor);
  width: 0.4em;
  height: 1.7ex;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
#isaiahgpt {
  margin: 3em var(--sidemargin);
  min-height: 60vh;
}
div {
  font-size: var(--textsize);
}
button {
  font-family: Arial, Helvetica, sans-serif;
  background-color: var(--secondarycolor);
  background-image: none;
  color: var(--secondarytextcolor);
  border: none;
  border-radius: 1.5em;
  box-shadow: none;
  min-width: 3em;
  width: auto;
}
button:hover:not(.copybutton) {
  box-shadow: none;
  background: var(--hovercolor1);
  background-image: none;
  transition: none;
}
button:disabled, button:disabled:hover {
  background: var(--hovercolor1);
  background-image: none;
  box-shadow: none;
}
button.button2 {
  background-color: var(--backgroundcolor);
  border: var(--tertiarycolor) 1px solid;
  color: var(--textcolor2);
}
button.button2:hover {
  background-color: var(--hovercolor2);
}
.topleft {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: 100vw;
}
.maininput {
  position: sticky;
  bottom: 1em;
  margin: 1em 0;
}
.maininputbox {
  display: flex;
  justify-content: space-between;
  border-radius: 500px;
  width: var(--inputwidth);
}
#helpbox {
  display: flex;
  margin: 20vh 0;
  background-color: var(--tertiarycolor);
  border-radius: 1.5em;
  padding:0.75em 1.5em;
  text-align: center;
}
#chatinput {
  width: 90%;
  background: none;
  border: none;
  box-shadow: none;
  padding: 1em 1.5em;
  font-size: var(--textsize);
  color: var(--textcolor);
}
#chatinput:focus {
  outline: none;
}
#chatbutton {
  min-width: none;
  width: 3em;
  height: 3em;
  padding: 0;
  margin: 0.5em;
}
#chatbutton svg {
  fill: var(--secondarytextcolor);
  width: 1.6em;
  height: 1.6em;
}
#resetbutton {
  min-width: none;
  border: none;
  width: 3em;
  height: 3em;
  padding: 0;
  margin: 0.25em;
  margin-left: 1em;
}
button#resetbutton:hover {
  background-color: var(--backgroundcolor);
}
#resetbutton svg {
  fill: var(--textcolor2);
  height: 1.6em;
  width: 1.6em;
}
#backbutton {
  padding: 0.75em 1.5em;
}
.chat {
  display: flex;
  flex-direction: column;
  margin-top: 3em;
  width: 100%;
  font-family: Arial, Helvetica, sans-serif;
}
.prompt:not(#activeprompt) {
  display: block  ;
  background-color: var(--tertiarycolor);
  border-radius: 1.5em;
  padding:0.75em 1.5em;
  max-width: var(--messagewidth);
  overflow-wrap: break-word;
  align-self: self-end;
}
.prompt, .response {
  margin: 1em 0;
  overflow-wrap: break-word;
}
span.code {
  line-height: 1.25em;
  white-space: pre-wrap;
  font-family: monospace;
  max-width: var(--inputwidth);
}
div.code {
  max-width: var(--inputwidth);
  height: max-content;
  margin: 0.5em 0;
  padding: 0.5em;
  background-color: var(--tertiarycolor);
  border-radius: 0.5em;
}
.CRYMcolor {
  background-color: #000000;
  padding: 0.1em 0.5em;
  border-radius: 0.25em;
}
.CRYMcolor#cyan {
  color: oklch(0.9054 0.1639 194.769);
}
.CRYMcolor#red {
  color: oklch(0.628 0.2838 29.23);
}
.CRYMcolor#yellow {
  color: oklch(0.968 0.2517 109.77);
}
.CRYMcolor#magenta {
  color: oklch(0.7017 0.3605 328.36);
}
@keyframes imageGen {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}
.imageBox {
  display: block;
  margin: 1em 0;
  border-radius: 1em;
  width: 20em;
  height: 20em;
  background-color: var(--tertiarycolor);
  animation: imageGen 1.5s infinite;
}
img {
  display: block;
  margin: 1em 0;
  border-radius: 1em;
  width: 20em;
  height: 20em;
  opacity: 0;
}