/* credit for scrollbar code: u/lift_spin_d/ (reddit) */
/* hide page scrollbar */
html { scrollbar-width: none; } /* Firefox */
body { -ms-overflow-style: none; } /* IE and Edge */
body::-webkit-scrollbar, body::-webkit-scrollbar-button { display: none; } /* Chrome */
/* end hide page scrollbar */

html {
  -webkit-text-size-adjust: 100%;
}

@font-face
{
  font-family: JetBrains;
  src: url("./public/JetBrains-Regular.ttf");
  font-weight: normal;
}

@font-face
{
  font-family: JetBrains;
  src: url("./public/JetBrains-Bold.ttf");
  font-weight: bold;
}

:root
{
  font-family: JetBrains, monospace;
  font-weight: bold;

  display: flex;
  flex-direction: column-reverse;

  --background: #111121;
  --foreground: #e3e3e3;
  --foreground-2: #a3a3a3;
  --highlight: #fa9db8;
  --link: #4c73f3;

  --color-box-1: #2B2B2B;
  --color-box-2: #8B3A3A;
  --color-box-3: #5F8B5F;
  --color-box-4: #B5A35F;
  --color-box-5: #4A5F8B;
  --color-box-6: #8B5F8B;
  --color-box-7: #5FA3A3;
  --color-box-8: #C0C0C0;
  --color-box-9: #555555;
  --color-box-10: #D88B8B;
  --color-box-11: #8BCB8B;
  --color-box-12: #E0D18B;
  --color-box-13: #8BA2D1;
  --color-box-14: #D18BD1;
  --color-box-15: #8BD1D1;
  --color-box-16: #E0E0E0;

  --font-sm: 14px;
}

body
{
  background-color: var(--background);
  color: var(--foreground);
  line-height: 1.2em;
  font-size: var(--font-sm);
  overflow-x: hidden;

  padding: 2ch 4ch;
  white-space: nowrap;
  font-weight: bold;
}

::selection
{
  background-color: var(--foreground);
  color: var(--background);
}

.hlc::selection
{
  background-color: var(--highlight);
  color: var(--background);
}

.fgc2::selection
{
  background-color: var(--foreground-2);
  color: var(--background);
}

.link::selection,
.linkc::selection,
a::selection
{
  background-color: var(--link);
  color: var(--background);
}

pre,
a,
p,
span
{
  display: inline;
  text-align: left;
}

a,
.link
{
  text-decoration: none;
  color: var(--link);
  border: none;
  background: none;
  border-radius: 4px;
  transition: color 100ms ease-in-out, background-color 200ms ease-in-out;
  font: inherit;
  cursor: pointer;
}

a:hover,
.link:hover
{
  color: var(--background);
  background-color: var(--link);
}

.linkc
{
  color: var(--link);
}

#real_prompt input
{
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  outline: none;
  width: 31ch;
  caret-color: transparent;
  opacity: 0;
  z-index: 999;
}

#real_prompt_output
{
  position: relative;
}

#real_prompt_output::after
{
  content: "";
  position: absolute;
  top: 0;
  right: -1ch;
  background-color: var(--foreground-2);
  height: 100%;
  width: 1ch;
  font: inherit;
  animation: blink 900ms infinite;
}

@keyframes blink
{
  0% {opacity: 0%;}
  50% {opacity: 100%;}
  100% {opacity: 0%;}
}

#real_prompt input:focus
{
  outline: none;
}

.pointer
{
  cursor: pointer;
}

.hlc
{
  color: var(--highlight);
}

.fgc2
{
  color: var(--foreground-2);
}

/*
.b 
{
  font-weight: bold !important;
}
*/

.parent
{
  font-size: 0;
}

.parent > *
{
  font-size: var(--font-sm);
}

.pl-1
{
  padding-left: 1ch;
}

.pl-4
{
  padding-left: 4ch;
}

.pr-1
{
  padding-right: 1ch;
}

.flex 
{
  display: flex;
}

.jc 
{
  justify-content: center;
}

.ac 
{
  align-items: center;
}

.unselectable 
{
  user-select: none;
}

.color-box-1
{
  background-color: var(--color-box-1);
  color: var(--color-box-1);
}

.color-box-2
{
  background-color: var(--color-box-2);
  color: var(--color-box-2);
}

.color-box-3
{
  background-color: var(--color-box-3);
  color: var(--color-box-3);
}

.color-box-4
{
  background-color: var(--color-box-4);
  color: var(--color-box-4);
}

.color-box-5
{
  background-color: var(--color-box-5);
  color: var(--color-box-5);
}

.color-box-6
{
  background-color: var(--color-box-6);
  color: var(--color-box-6);
}

.color-box-7
{
  background-color: var(--color-box-7);
  color: var(--color-box-7);
}

.color-box-8
{
  background-color: var(--color-box-8);
  color: var(--color-box-8);
}

.color-box-9
{
  background-color: var(--color-box-9);
  color: var(--color-box-9);
}

.color-box-10
{
  background-color: var(--color-box-10);
  color: var(--color-box-10);
}

.color-box-11
{
  background-color: var(--color-box-11);
  color: var(--color-box-11);
}

.color-box-12
{
  background-color: var(--color-box-12);
  color: var(--color-box-12);
}

.color-box-13
{
  background-color: var(--color-box-13);
  color: var(--color-box-13);
}

.color-box-14
{
  background-color: var(--color-box-14);
  color: var(--color-box-14);
}

.color-box-15
{
  background-color: var(--color-box-15);
  color: var(--color-box-15);
}

.color-box-16
{
  background-color: var(--color-box-16);
  color: var(--color-box-16);
}