:root {
  --breakpoint-mobil: 31em;

  --color-background: #004000; /* Default page/popup Background */
  --color-background-alt: #002000; /* Alternative page/popup Background */

  --color-danger: #800000; /* Error/Dangerous-operation color */
  --color-danger-disabled: color-mix(in srgb, var(--color-danger) 20%, gray);
  --color-danger-hover: color-mix(in srgb, var(--color-danger) 80%, white);
  --color-danger-border: #ff0000; /* Error/Dangerous-operation border color */
  --border-danger: solid 1px var(--color-danger-border);

  --color-success: #008000; /* Success/Safe-operation color */
  --color-success-disabled: color-mix(in srgb, var(--color-success) 20%, gray);
  --color-success-hover: color-mix(in srgb, var(--color-success) 80%, white);
  --color-success-border: #00ff00; /* Success/Safe-operation border color */
  --border-success: solid 1px var(--color-success-border);

  --color-text: #ffffff; /* Default text color */
  --color-text-disabled: color-mix(in srgb, var(--color-text) 60%, gray);
  --color-text-focus: color-mix(in srgb, var(--color-text) 80%, gray);
  --color-text-alt: #000000; /* Alternative text color */
}

html, body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;

  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;

  background-image: radial-gradient(var(--color-background), var(--color-background-alt));

  color: var(--color-text);

  height: 100%;
  max-width: 100%;

  margin: 0;
}

.header-items {
  display: flex;
  list-style-type: none;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0em;
  margin-inline-end: 0em;
  padding-inline-start: 0em;
}

.header-item {
  margin-left: 0.1em;
  margin-right: 0.1em;
  margin-top: 0.9em;
  width: auto;
}

.header-item a {
  border-bottom: 0.25em solid transparent;
  color: var(--color-text);
  height: 100%;
  padding: 0em 0.6em;
  padding-top: 1em;
  padding-bottom: 0.8em;
  text-decoration: none;
  width: auto;
}

.header-item a.active,
.header-item a:active {
  background-color: var(--color-success);
  border-bottom: solid 0.25em var(--color-success-border);
  color: var(--color-text);
}

.header-item a:hover {
  background-color: var(--color-success-hover);
  border-bottom: solid 0.25em var(--color-success-border);
  color: var(--color-text);
}