:root {
    --color-lightest: #ffffff;
    --color-lighter: #dfe9f2;
    --color-light: #c2ccd5;
    --color-mid: #7d8a8e;
    --color-dark: #4e575a;
    --color-darker: #323639;
    --color-darkest: #1f2223;
    --color-blue: #007FAD;
    --color-blue-dark: #004a68;
    --color-blue-light: #98d7ff;
    --color-red: #b5050d;
    --color-red-dark: #6e0507;
    --color-red-light: #f3b2b2;
    --color-orange: #ec9a08;
    --color-orange-dark: #7d5506;
    --color-orange-light: #ffd8a6;
    --color-green: #4faa07;
    --color-green-dark: #356b07;
    --color-green-light: #c1eba3;
    --color-gray: #d6d6d6;
    --color-gray-dark: #606060;
    --color-gray-light: #e0e0e0;
    --body-color: var(--color-dark);
    --body-color-faint: var(--color-mid);
    --body-bg-color: var(--color-lightest);
    --link-color: var(--color-blue);
    --link-color-hover: var(--color-blue-dark);
    --border-color: var(--color-gray);
    --size-adjust: 0px;
    --radius-small: 3px;
    --radius: 5px;
    --radius-large: 8px;
    --message-border-size: var(--radius);
    --line-height: 1.4;
    --max-size: 1000px;
    --icon-size-small: calc(16px + var(--size-adjust));
    --icon-size: calc(24px + var(--size-adjust));
    --icon-size-large: calc(30px + var(--size-adjust));
    --gap-tiny: 5px;
    --gap-smaller: 10px;
    --gap-small: 15px;
    --gap: 20px;
    --gap-large: 30px;
    --gap-huge: 40px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --body-color: var(--color-light);
        --body-bg-color: var(--color-darkest);
        --border-color: var(--color-gray-dark);
        --link-color-hover: var(--color-blue-light);
    }
}

body {
    font-family: Roboto, Helvetica, Arial, sans-serif;
    color: var(--body-color);
    background-color: var(--body-bg-color);
}

code {
    background-color: var(--body-bg-color);
}

.container {
    margin-top: var(--gap);
    margin-bottom: var(--gap);
}

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

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

a .icon {
    vertical-align: middle;
}

.temps-table {
  overflow-x: scroll;
}

.date-header {
  text-wrap: nowrap;
  font-weight: bold;
}

.category-header {
  font-style: italic;
  font-size: 90%;
}

.values .obs {
  border-bottom: 3px double rebeccapurple;
}

.diff-0 .obs {
  border-bottom: 2px solid rgba(255,0,0,0.0);
}

.diff-1 .obs {
  border-bottom: 2px solid rgba(255,0,0,0.2);
}

.diff-2 .obs {
  border-bottom: 2px solid rgba(255,0,0,0.4);
}

.diff-3 .obs {
  border-bottom: 2px solid rgba(255,0,0,0.6);
}

.diff-4 .obs {
  border-bottom: 2px solid rgba(255,0,0,0.8);
}

.diff-5 .obs {
  border-bottom: 2px solid rgba(255,0,0,1.0);
}

.diff--1 .obs {
  border-bottom: 2px solid rgba(0,0,255,0.2);
}

.diff--2 .obs {
  border-bottom: 2px solid rgba(0,0,255,0.4);
}

.diff--3 .obs {
  border-bottom: 2px solid rgba(0,0,255,0.6);
}

.diff--4 .obs {
  border-bottom: 2px solid rgba(0,0,255,0.8);
}

.diff--5 .obs {
  border-bottom: 2px solid rgba(0,0,255,1.0);
}
