/* ------------------------------------------------------------------------ *
 *  COMMON AND GENERAL                                                      *
 * ------------------------------------------------------------------------ */

:root {
  color-scheme: light dark;

  --xs:  0.3rem;
  --s:   0.5rem;
  --m:   1.0rem;
  --l:   1.4rem;
  --xl:  1.6rem;
  --xxl: 2.0rem;

  --lajt-bg: white;
  --lajt-fg: black;
  --dark-bg: black;
  --dark-fg: white;

  --neutral-a: #801;
  --neutral-b: #069;
  --neutral-c: #550;

  --ordinary-a: #e137b5;
  --ordinary-b: #b537b5;
  --ordinary-c: #f937b5;
  --ordinary-d: #c837b5;
}

html {
  font-family: Noto Sans;
  font-size: 12pt;
}

body, ol, ul {
  margin: 0rem; /* reset */
}

body {
  padding:          0rem;
  background-color: light-dark(var(--lajt-bg), var(--dark-bg));
  color:            light-dark(var(--lajt-fg), var(--dark-fg));
}

* {
  box-sizing: border-box;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}



/* ------------------------------------------------------------------------ *
 *  HEADER                                                                  *
 * ------------------------------------------------------------------------ */

header {
  background-color: light-dark(var(--ordinary-b), var(--ordinary-d));
}