@font-face {
  font-family: "Asap";
  font-display: swap;
  font-style: normal;  
  font-weight: 100 900;
  src: url("/fonts/Asap[wdth,wght].woff2");
}

:root {
--chat-text: #060708;
--chat-bg: #fbfcfc;
--chat-gray: #455a64;
--chat-shadow: rgba(0,0,0,0.5);

--pink: #a73973;
--red: #c40234;
--orange: #A55A12;
--gold: #826d0a;
--green: #008112;
--cyan: #007979;
--silver: #3a4554;
--blue: #0070bb;
--purple: #7851a9;
/* More colors are doable, but make sure the light and dark mode variants are visible on their respective backgrounds! */
}

[data-theme="dark"] {
--chat-text: #fbfcfc;
--chat-bg: #060708;
--chat-gray: #90a4ae;
--chat-shadow: rgba(0,0,0,0.75);

--pink: #ffb7c5;
--red: #fa2336;
--orange: #EB8639;
--gold: #e8c531;
--green: #109723;
--cyan: #009d9d;
--silver: #7c8fa6;
--blue: #0094c7;
--purple: #9370db;
}

.datetime {
  font-size: 15px;
  color: var(--chat-gray);
  display: flex;
  justify-content: center;
  font-weight: 555;
  font-variant: small-caps;
  padding: -3px 0;
}

/* This was an attempt at adding <hr>-esque lines to either end of a timestamp
.datetime:before {
  border: 0;
  height: 5px;
  background-image: linear-gradient(to right, var(--chat-color), transparent);
  padding: 0;
}
*/

.id {
  font-weight: 650;
  font-size: 17px;
}

.id:after {
  color: var(--chat-text);
  content: ": ";
  font-weight: 400;
  font-size: 16px;
}

.chatbox {
  background-color: var(--chat-bg);
  color: var(--chat-text);
  border: 1px solid var(--chat-gray);
  border-radius: 1em;
  padding: 10px;
  line-height: 1.5;
  display: block;
  box-shadow: 0 0 1em var(--chat-shadow);
  width: fit-content;
  max-width: 750px; /* I think this is adequate to make it full-width on phones but not on desktop, but this will require more experimentation */
  margin: 0 auto;
  font-feature-settings: "zero" 0 !important; /* No slashed 0s */
  font-family: "Asap", "Whitney", "AR One Sans", "Work Sans", "Assistant", "Chivo", "Lato", "Inter", "Open Sans", "Noto Sans", -apple-system, BlinkMacSystemFont, ui-sans-serif, sans-serif, system-ui; /* Amusingly, I believe Discord's Gg Sans bears a resemblance to Asap, particularly with the obliqueness of its italics.  Asap's proper italics aren't really slanted enough for my liking; I did away with Lora for story text for that reason.  Bitter my beloved */
}

.chatbox > p {
  margin: 0.25em 0;
  padding: 0;
  /* Don't use <p> for the first line in a chatbox */
}