website/app/styles/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
  @apply h-full w-full bg-slate-50 antialiased;
  font-size: 14px;
  font-family:
    "Inter V",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Circular", sans-serif;
}

html,
body {
  font-size: 16px;
}

html {
  /*overflow-y: scroll;*/
  scrollbar-gutter: stable;
  @apply scroll-smooth;
}

table {
  @apply !text-[13px];
}

thead {
  @apply rounded-md bg-blue-100/50;
}

th,
thead {
  @apply pt-2;
}

thead th:first-child,
tbody td:first-of-type {
  @apply !pl-4;
}

thead th:not(:first-of-type),
tbody td:not(:first-of-type) {
  @apply text-center;
}

.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  @apply !hidden;
}

.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  @apply not-italic bg-blue-100/50 p-1 rounded-md pl-4 py-2;
}


td strong {
  @apply whitespace-nowrap font-display font-bold text-black;
}

td a {
  @apply whitespace-nowrap;
}

th {
  @apply whitespace-nowrap font-display text-black;
}

body {
  position: relative;
}

button {
  outline: 0;
}

/* width */
.scrollbar-light::-webkit-scrollbar {
  @apply h-2 w-2;
}

.scrollbar-light::-webkit-scrollbar-track {
  @apply fixed bg-transparent;
}

.scrollbar-light::-webkit-scrollbar-thumb {
  @apply m-2 mr-2 rounded-md border-l border-l-slate-300 bg-slate-200;
}

.scrollbar-light::-webkit-scrollbar-thumb:hover {
  @apply bg-slate-300;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  font-weight: inherit !important;
  font-family: inherit;
  font-size: inherit;
  color: inherit !important;
}

/**
 * Dracula Theme originally by Zeno Rocha [@zenorocha]
 * https://draculatheme.com/
 *
 * Ported for PrismJS by Albert Vallverdu [@byverdu]
 */

pre code {
  @apply !text-[13px];
}

pre {
  @apply !overflow-x-auto;
}

code[class*="language-"],
pre[class*="language-"] {
  @apply whitespace-pre bg-none !px-2 !py-2 text-left text-[13px] text-white;
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  font-family: "Source Code Pro Variable", Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  /*word-spacing: normal;*/
  /*word-break: normal;*/
  /*word-wrap: normal;*/
  tab-size: 4;

  hyphens: none;
}

/* Code blocks */
pre[class*="language-"] {
  padding: 1em;
  margin: 0.5em 0;
  overflow: hidden;
  border-radius: 0.3em;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
  background-color: var(--tw-prose-pre-bg);
}

/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: 0.1em;
  border-radius: 0.3em;
  white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #6272a4;
}

.token.punctuation {
  color: #f8f8f2;
}

.namespace {
  opacity: 0.7;
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
  color: #ff79c6;
}

.token.boolean,
.token.number {
  color: #bd93f9;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: #50fa7b;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
  color: #f8f8f2;
}

.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
  color: #f1fa8c;
}

.token.keyword {
  color: #8be9fd;
}

.token.regex,
.token.important {
  color: #ffb86c;
}

.token.important,
.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}

.token.entity {
  cursor: help;
}

/**
 * Inspired by gatsby remark prism - https://www.gatsbyjs.com/plugins/gatsby-remark-prismjs/
 * 1. Make the element just wide enough to fit its content.
 * 2. Always fill the visible space in .code-highlight.
 */
.code-highlight {
  float: left; /* 1 */
  min-width: 100%; /* 2 */
}

.code-line {
  display: block;
  padding-left: 16px;
  padding-right: 16px;
  margin-left: -16px;
  margin-right: -16px;
  border-left: 4px solid rgba(0, 0, 0, 0); /* Set placeholder for highlight accent border color to transparent */
}

.code-line.inserted {
  background-color: rgba(16, 185, 129, 0.2); /* Set inserted line (+) color */
}

.code-line.deleted {
  background-color: rgba(239, 68, 68, 0.2); /* Set deleted line (-) color */
}

.highlight-line {
  margin-left: -16px;
  margin-right: -16px;
  background-color: rgba(55, 65, 81, 0.5); /* Set highlight bg color */
  @apply border-l-4 border-l-blue-700;
}

.line-number::before {
  @apply mr-4 inline-block border-r border-r-slate-700 pr-6 text-right text-slate-500;
  width: 1rem;
  content: attr(line);
}