:root {
  --text-center:          center;
  --font-size-sm:         12px;
  --font-size-md:         16px;
  --font-size-lg:         20px;  
  --font-size-hu:         24px;  
  --color-heading-1:      #800517;
  --color-heading-2:      #4b386f;
  --color-heading-3:      #004E9B;
  --color-text-1:         #005577;
  --color-text-2:         #003399;
  --color-text-3:         #000080;
  --color-text-4:         #4b386f;
  --color-winter:         #0068ff;
  --color-spring:         #347235;
  --color-summer:         #b62650;
  --color-fall:           #9b1203;
  
}

body {
  font-family: "TeX Gyre Pagella", "Libertinus Serif", serif;
}

table {
  border-collapse: separate;
  border-spacing: 5px; 
}

th, td {
  padding: 1px 5px;
  text-align: left;
}

.center-text    { text-align: var(--text-center); }
.heading-1      { color: var(--color-heading-1); }
.heading-2      { color: var(--color-heading-2); }
.heading-3      { color: var(--color-heading-3); }
.text-1         { color: var(--color-text-1); }
.text-2         { color: var(--color-text-2); }
.text-3         { color: var(--color-text-3); }
.text-4         { color: var(--color-text-4); }
.label-sm       { font-size: var(--font-size-sm); }
.label-md       { font-size: var(--font-size-md); }
.label-lg       { font-size: var(--font-size-lg); }
.label-hu       { font-size: var(--font-size-hu); }
.label-winter   { color: var(--color-winter); font-weight: bold;}
.label-spring   { color: var(--color-spring); font-weight: bold;}
.label-summer   { color: var(--color-summer); font-weight: bold;}
.label-fall     { color: var(--color-fall);   font-weight: bold;}


.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}