:root {
  --blue: #505060;

  --bg: #f4eeee;
  --bg-soft: #bebebe;  
  --fg: #1e1e1e;
  --fg-dash: #2e2e2e;
  --fg-pre: #3e3e3e;
  --a: #603030;
  --a-hov: #403030;
  --a-hov2: #cecece;
  --a-bg2: #504040;
  --strong: #0e0e0e;
  --small: #444;
}

:root[data-theme="dark"] {
  --blue: #5050ae;

  --fg: #f4eeee;
  --bg: #151e1e;
  --bg-soft: #303030;
  --fg-dash: #9e9e9e;
  --fg-pre: #deded0;
  --a: #ae5050;
  --a-hov: #703030;
  --a-hov2: #cecece;
  --a-bg2: #ae4040;
  --strong: #cedeae;
  --small: #bcb;
}

:root[data-theme="ivrs"] {
  --blue: #afaf9f;

  --bg: #0b1111;
  --bg-soft: #414141;  
  --fg: #e1e1e1;
  --fg-dash: #d1d1d1;
  --fg-pre: #c1c1c1;
  --a: #9fcfcf;
  --a-hov: #bfcfcf;
  --a-hov2: #313131;
  --a-bg2: #afbfbf;
  --strong: #f1f1f1;
  --small: #bbb;
}

body, body * {
  font-family: 'Cascadia Code', monospace;
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--fg);

  transition: all 100ms ease-in-out;
}

.i18n-load {
  opacity: 0;
}

.main {
  margin: 15px;
  width: 420px;
}

.dash {
  border-top: 0.5px solid var(--fg-dash);
}

.sep {
  margin-top: 10px;
}

.tbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tbar p, .tbar .link2 {
  margin-top: 0;
}

.ok {
  font-size: smaller;
  margin: 5px 10px;
}

.pre {
  font-size: 80%;
  color: var(--fg-pre);
}

.pre2 {
  line-height: 1em;
  margin: 0.2ch 0;
}

.rmarg {
  margin-left: 10px;
}

.rmarg p {
  margin: 0;
  padding-left: 20px;
  text-indent: -20px;
  line-height: 3ch;
}

.log {
  background-color: var(--bg-soft);
  min-height: 100px;
  padding: 5px;
  border-radius: 5px;
}

.link2 {
  margin-top: 6px;
  margin-bottom: 6px;
}

.link2 a{
  background-color: var(--a-bg2);
  color: var(--bg);
  padding: 2px;
  border-radius: 3px;

  transition: all 100ms ease-in-out;
}

.link2 a:hover{
  color: var(--a-hov2);
  padding: 3px;
}

a {
  color: var(--a);
  text-decoration: none;
}

a:hover {
  color: var(--a-hov);
  text-decoration: underline;
}

p {
  margin: 8px 0;
  overflow-wrap: break-word;
}

pre {
  margin: 0;
  font-size: 80%;
  color: var(--fg-pre);
}

strong {
  font-weight: bold;
  color: var(--strong);

}

small {
  color: var(--small);
  font-size: 60%;
}

select {
  background-color: var(--bg);
  border: none;
  color: var(--fg);

  padding: 2.5px;
}

input {
  appearance: none;
  background-color: inherit;
  border: none;
}

input[type="range"] {
  appearance: auto;
}

input[type="number"], input[type="text"] {
  margin-top: 2.5px;
  margin-bottom: 5px;
  appearance: auto;
  background-color: var(--bg-soft);
  color: var(--fg);
  padding: 2.5px;
  border-radius: 5px;
}

textarea {
  appearance: none;
  background-color: var(--bg-soft);
  color: var(--fg);
  border: none;
  font-size: small;
  padding: 2.5px;
  border-radius: 5px;

  box-sizing: border-box;
  width: 100%;
  height: 67px;
}

@font-face {
  font-family: "Cascadia Code";
  src: url(/fonts/cascadia-extreme.woff2);
}

@media (max-width: 500px) {
  body {
    margin: 0;
    width: 100%;
    font-size: smaller;
  }

  .main {
    width: 95%;
    margin: 10px;
  }
}