:root {
    --color: #444;
    --color--dark: #ddd;
    --bg-color: #fafafa;
    --bg-color--dark: #000;
    --primary-color: #fafafa;
    --primary-color--dark: #fafafa;
    --primary-bg-color: #cd440d;
    --primary-bg-color--dark: #cd440d;
    --border-hover-color: #cd440d;
    --border-hover-color--dark: #cd440d;
}

 -->
<STYLE preload import=Page.css>
@media (prefers-color-scheme: dark) {
  :root {
    --color: var(--color--dark);
    --bg-color: var(--bg-color--dark);
    --primary-bg-color: var(--primary-bg-color--dark);
    --primary-color: var(--primary-color--dark);
    --border-hover-color: var(--border-hover-color--dark);
  }
}
:root {
  /* --bg-color: #ddd; */
  --body-padding: 0 min(1rem, 3vw);
  --body-padding-left-right: min(1rem, 3vw);
  --icon-unused: #444;
  --scrollbar: 16px; /* will be overwrited in JavaScript */
  --vw: calc((100vw - var(--scrollbar)) / 100);
  --vw5: calc(5 * (var(--vw)));
  --vw10: calc(10 * (var(--vw)));
  --vw15: calc(15 * (var(--vw)));
  --vw20: calc(20 * (var(--vw)));
  --vw25: calc(25 * (var(--vw)));
  --vw30: calc(30 * (var(--vw)));
  --vw33: calc(33.33 * (var(--vw)));
  --vw40: calc(40 * (var(--vw)));
  --vw50: calc(50 * (var(--vw)));
  --vw60: calc(60 * (var(--vw)));
  --vw66: calc(66.66 * (var(--vw)));
  --vw70: calc(70 * (var(--vw)));
  --vw75: calc(70 * (var(--vw)));
  --vw80: calc(80 * (var(--vw)));
  --vw90: calc(90 * (var(--vw)));
  --vw100: calc(100 * (var(--vw)));
  --used-height: calc(var(--pre-header-height) + var(--header-height) + var(--menu-height) + var(--breadcrumb-height));
  --available-height: calc(100vh - var(--used-height));
}


* {
  box-sizing: border-box;
  font-family: Tahoma, Verdana, sans-serif;
  touch-action: auto;
}
html {
  scroll-behavior: smooth;
  /* font-size: 62.5%; */
}

/* Safari hack against auto-zoom in inputs */
input[type="date"],
input[type="datetime"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="number"],
input[type="range"],
input[type="text"],
input[type="url"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="button"],
input[type="checkbox"],
input[type="radio"],
input[type="file"],
form select {
  font-size: 16px !important;
}


html, body, #pre-header, #header, #menu, #main, #aside, #footer { 
  display: block;
  width: 100%; 
  min-width: 320px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overscroll-behavior: contain;
}
html.layer #layer {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 100vh;
  background-color: rgba(0,0,0, 0.9);
  z-index: 20;
  overflow: hidden;
}
html.layer body {
  overflow: hidden;
}
main {
  padding-bottom: 6rem;
}

img[srcset] {
    max-width: 100%;
    height: auto;
}

@keyframes numbersUpdated {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
    color: var(--primary-color);
    /* background-color: var(--primary-bg-color); */
  }
  100% {
    transform: scale(1);
  }
}

@keyframes textUpdated {
  0% {
    color: var(--primary-color);
  }
  50% {
    color: var(--primary-bg-color);
  }
  100% {
    color: var(--primary-color);
  }
}



/* Anchors */
a {
  color: var(--primary-bg-color);
  text-decoration: none;
}

/* icons */
.i {
  background-color: currentColor;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-image: var(--icon);
  mask-image: var(--icon);
  width: 1rem;
  height: 1rem;
} 
label {
  /* caret-color: rgba(0,0,0,0); */
  user-select: none;
}

/* disable button style for icons */
button.btn,
button.i {
  color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}
button.btn {
  background-color: var(--primary-bg-color);
  color: var(--primary-color);
  padding: 0.5rem 1rem;
  font-weight: bold;
  border-radius: 0.2rem;
}
button[disabled] {
  opacity: 0.3;
}
button.button[disabled]:hover,
button.button[disabled]:focus {
    border: 1px solid var(--primary-bg-color);
}


input {
  outline: none;
}

/* hide content */
.hide,
html.logged .hide-logged,
html:not(.logged) .hide-not-logged { 
  display: none !important; 
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  70% {
    transform: scale(0.75);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes fade {
  0% {
    display: block;
    opacity: 1;
  }
  99% {
    display: block;
    opacity: 0;
  }
  100% {
    display: none;
    opacity: 0;
    /* height: 0; */
  }
}

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


img.background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-attachment: fixed;
}

.error {
  color: red;
  font-style: italic;
}