:root {
  --bg-color: white;
  --bg-translucent-color: rgba(255, 255, 255, 0.9);
  --bg-secondary-color: rgba(240, 240, 240, 1);
  --fg-color: rgba(85, 85, 90, 1);
  --fg-secondary-color: rgba(85, 85, 90, .7);
  --border-color: rgba(0, 0, 0, .15);
  --heading-color: rgba(50, 50, 55, 1);
  --console-color: rgba(0, 0, 0, .4);
  --console-bg-color: rgba(0, 0, 0, .04);
  --a-color: rgba(65, 105, 190, 1);
  --hl-keyword: rgb(85, 140, 180);
  --hl-string: rgb(115, 105, 175);
  --hl-number: rgb(50, 160, 85);
  --hl-comment: rgba(100, 100, 100);
  --hl-title: rgb(165, 120, 20);
  --hl-inserted-text: rgb(17, 99, 41);
  --hl-inserted-bg: rgb(218, 251, 225);
  --hl-deleted-text: rgb(130, 7, 30);
  --hl-deleted-bg: rgb(255, 235, 233);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  color: var(--fg-color);
  background-color: var(--bg-color);
  line-height: 1.5;
  font-family: system-ui, -apple-system, "Helvetica Neue", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);

  a {
    color: var(--heading-color);
  }
}

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

  &:hover {
    text-decoration: underline;
  }
}

code,
kbd,
pre,
samp {
  font-family: "Roboto Mono", monospace;
}

pre {
  padding: 32px;
  border-radius: 8px;
  background-color: var(--bg-secondary-color);
  line-height: 1.2;
  overflow: auto;

  code {
    display: inline;
    padding: 0;
  }
}

@media (width < 600px) {
  pre {
    padding: 16px;
  }
}

code {
  display: inline-block;
  padding: 0 4px;
  font-size: 0.75rem;
  word-wrap: break-word;
  background-color: var(--bg-secondary-color);
  border-radius: 4px;
}

table {
  width: 100%;
  border-spacing: 0;

  tr {
    th {
      border-top: 1px solid var(--border-color);
    }

    th,
    td {
      padding: 8px;
      border-right: 1px solid var(--border-color);
      border-bottom: 1px solid var(--border-color);

      &:first-child {
        border-left: 1px solid var(--border-color);
      }
    }

    &:first-child {
      th {
        &:first-child {
          border-top-left-radius: 8px;
        }

        &:last-child {
          border-top-right-radius: 8px;
        }
      }
    }

    &:last-child {
      td {
        &:first-child {
          border-bottom-left-radius: 8px;
        }

        &:last-child {
          border-bottom-right-radius: 8px;
        }
      }
    }
  }
}

.gui-form {
  background-color: var(--mat-expansion-container-background-color, var(--mat-sys-surface));
  color: var(--mat-expansion-container-text-color, var(--mat-sys-on-surface));
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
  border-radius: 4px;

  .mat-expansion-panel {
    border-radius: 4px;
  }
}

.hljs-keyword {
  color: var(--hl-keyword);
}

.hljs-number {
  color: var(--hl-number);
}

.hljs-string {
  color: var(--hl-string);
}

.hljs-comment,
.hljs-quote {
  color: var(--hl-comment);
}

.hljs-title {
  color: var(--hl-title);
}

.hljs-addition {
  color: var(--hl-inserted-text);
  background-color: var(--hl-inserted-bg);
}

.hljs-deletion {
  color: var(--hl-deleted-text);
  background-color: var(--hl-deleted-bg);
}

.btn {
  height: 40px;
  padding: 8px;
  background-color: transparent;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  color: var(--fg-color);

  &:hover,
  &:focus {
    background-color: var(--bg-secondary-color);
  }
}
