:root {
  --bg-button-prim-color: rgb(234, 250, 255);
  --bg-button-sec-color: #f2f2f2;
  --bg-button-tert-color: #ffffff;
  --bg-negative-color: #b01313;

  --focussed-border-color-triplet: 102, 120, 243;
  --focussed-border-color: rgba(var(--focussed-border-color-triplet), 0.9);
  --disabled-border-color-triplet: 35, 35, 35;
  --disabled-border-color: rgba(var(--focussed-border-color-triplet), 0.5);

  --font-disabled-color: rgba(35, 35, 35, 0.4);

  --main-border: 1px solid rgb(2, 48, 71);
  --dashed-border: 0.5px dashed rgba(2, 48, 71, 0.5);
  --main-bg-color: white;
  --main-font-color: #070707;
  --alert-font-color: #c50000;
  --not-color: #c50000;
  --accept-font-color: #0d9d00;

  --table-bg-color-odd: rgb(243, 243, 243);
  --table-bg-color-even: rgb(226, 226, 226);
  --table-font-color-odd: black;
  --table-font-color-even: black;
  --table-header-bg-color: rgb(37, 37, 37);
  --table-header-font-color: rgb(243, 243, 243);
  --table-footer-bg-color: rgb(37, 37, 37);
  --table-footer-font-color: rgb(243, 243, 243);

  --attribution-bg-color: rgba(225, 225, 225, 0.6);
  --attribution-font-color: #070707;

  --picture-link-bg-color: rgba(51, 51, 51, 0.8);
  --picture-link-font-color: rgb(168, 194, 250);
  --external-link-font-color: rgb(105, 152, 252);

  --nav-bg-color: rgba(7, 7, 7, 0.8);
  --nav-font-color: white;

  --title-font-color: white;

  --footer-font-color: white;
  --footer-bg-color: #070707;

  --header-font-color: white;
  --header-bg-color: #070707;

  --acco-card-shadow:
    -1.2px -3.7px 4.5px rgba(0, 0, 0, 0.017), -1.4px -4.4px 8.9px rgba(0, 0, 0, 0.024),
    -0.4px -1.3px 13.3px rgba(0, 0, 0, 0.03), 1.7px 5.5px 17.9px rgba(0, 0, 0, 0.035),
    4.9px 15.5px 23.3px rgba(0, 0, 0, 0.04), 8.9px 28.2px 30.7px rgba(0, 0, 0, 0.046),
    13.7px 43.1px 43.8px rgba(0, 0, 0, 0.053), 19px 60px 80px rgba(0, 0, 0, 0.07);
  --acco-card-font: black;
  --acco-card-bg: white;

  --occuplan-main-border: 1px solid rgb(2, 48, 71);
  --occuplan-grid-border: 0.2px solid rgba(2, 48, 71, 0.2);
  --occuplan-font-color-main: rgb(2, 48, 71);
  --occuplan-font-color-days: rgb(2, 48, 71);
  --occuplan-font-color-days-header: rgb(2, 48, 71);
  --occuplan-font-color-weeknum: rgba(2, 48, 71, 0.5);
  --occuplan-font-color-months: rgb(2, 48, 71);
  --occuplan-font-color-invalid-days: rgb(25, 25, 25);
  --occuplan-bg-color-days-header: rgb(142, 202, 230);
  --occuplan-bg-color-weeknum: transparent;
  --occuplan-bg-color-months: rgb(142, 202, 230);
  --occuplan-bg-color-main: transparent;
  --occuplan-bg-color-invalid-days: rgba(110, 110, 110, 0.6);
  --occuplan-bg-color-weekend: rgb(2, 48, 71);

  --occupation-type-1-font-color: rgb(2, 48, 71);
  --occupation-type-1-bg-color: rgb(33, 158, 188);
  --occupation-type-2-font-color: black;
  --occupation-type-2-bg-color: #f970f9;
  --occupation-type-3-font-color: yellow;
  --occupation-type-3-bg-color: #007017;

  --longinput-bg-color: #fff7dd;
  --longinput-disabled-bg-color: #eeefde;
  --longinput-font-color: #160067;
}

body,
html {
  font-family: var(--main-font-family, 'sans-serif');
  font-variant: var(--main-font-variant, 'small-caps');
  background-color: var(--main-bg-color, 'white');
  color: var(--main-font-color, 'black');
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*::selection {
  background-color: var(--font-select-color);
}

*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

h4 {
  font-family: var(--header-font-family, 'sans-serif');
  font-variant: var(--header-font-variant, 'small-caps');
  font-size: 1.2rem;
  text-align: center;
  margin-bottom: 0.2rem;
  margin-top: 0.4rem;
}

h3 {
  font-family: var(--header-font-family, 'sans-serif');
  font-variant: var(--header-font-variant, 'small-caps');
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 0.6rem;
  margin-top: 1rem;
}

h2 {
  font-family: var(--header-font-family, 'sans-serif');
  font-variant: var(--header-font-variant, 'small-caps');
  font-size: 2.2rem;
  margin-bottom: 0.8rem;
  margin-top: 1.2rem;
}

h1 {
  font-family: var(--header-font-family, 'sans-serif');
  font-variant: var(--header-font-variant, 'small-caps');
  font-size: 3.2rem;
  margin-bottom: 0.8rem;
  margin-top: 1.2rem;
}

ol {
  padding-left: 0.5rem;
  margin: 1rem;
}

ul {
  margin-left: 1rem;
  padding-left: 0.2rem;
}

input {
  background-color: var(--main-bg-color);
  color: var(--main-font-color);
}