:root {

  /* Sternico Farbenwelt */
  --rb-color-sternico-blue-120: #002a4c;
  --rb-color-sternico-blue-110: #013b6b;
  --rb-color-sternico-blue-100: #00467f;
  --rb-color-sternico-blue-90: #005188;
  --rb-color-sternico-blue-80: #1e5e92;
  --rb-color-sternico-blue-70: #3d6b9d;
  --rb-color-sternico-blue-60: #567aa9;
  --rb-color-sternico-blue-50: #6b89b5;
  --rb-color-sternico-blue-40: #849bc1;
  --rb-color-sternico-blue-30: #9dafce;
  --rb-color-sternico-blue-20: #bbc7dd;
  --rb-color-sternico-blue-10: #d9e0ee;

  --rb-color-sternico-red-120: #791811;
  --rb-color-sternico-red-110: #b6251a;
  --rb-color-sternico-red-100: #d52b1e;
  --rb-color-sternico-red-90: #d94035;
  --rb-color-sternico-red-80: #dd554b;
  --rb-color-sternico-red-70: #e26b62;
  --rb-color-sternico-red-60: #e68078;
  --rb-color-sternico-red-50: #ea958f;
  --rb-color-sternico-red-40: #eeaaa5;
  --rb-color-sternico-red-30: #f2bfbb;
  --rb-color-sternico-red-20: #f7d5d2;
  --rb-color-sternico-red-10: #fbeae9;

  --rb-color-sternico-gray-100: #000000;
  --rb-color-sternico-gray-90: #3c3c3b;
  --rb-color-sternico-gray-80: #706f6f;
  --rb-color-sternico-gray-70: #706f6f;
  --rb-color-sternico-gray-60: #878787;
  --rb-color-sternico-gray-50: #9d9d9d;
  --rb-color-sternico-gray-40: #b2b2b2;
  --rb-color-sternico-gray-30: #c6c6c6;
  --rb-color-sternico-gray-20: #dadada;
  --rb-color-sternico-gray-10: #ededed;

  /* Theme */
  --rb-color-background: white;
  --rb-color-text-secondary: var(--rb-color-sternico-gray-90);
  --rb-color-workspace-background: #f7f7f7;
  --rb-shadow-15: 0px 3px 15px #00000029;

  /* Icon Palette */
  --rb-color-icon-primary: var(--rb-color-sternico-gray-70);
  --rb-color-icon-primary-hover: var(--rb-color-sternico-gray-80);
  --rb-color-icon-primary-light: var(--rb-color-sternico-gray-40);
  --rb-color-icon-primary-light-hover: var(--rb-color-sternico-gray-70);
  --rb-color-icon-secondary: var(--rb-color-sternico-blue-100);
  --rb-color-icon-secondary-hover: var(--rb-color-sternico-blue-100);
  --rb-color-icon-secondary-light: var(--rb-color-sternico-blue-50);
  --rb-color-icon-secondary-light-hover: var(--rb-color-sternico-blue-60);
  --rb-color-icon-highlight: var(--rb-color-sternico-red-100);
  --rb-color-icon-highlight-hover: var(--rb-color-sternico-red-110);
  --rb-color-icon-magenta: deeppink;
  --rb-color-icon-magenta-hover: deeppink;
  --rb-color-icon-positiv: #108915;
  --rb-color-icon-positiv-hover: #03b608;
  --rb-color-icon-yellow: #fbd600;
  --rb-color-icon-yellow-hover: #fbf100;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    /* Theme */
    --rb-color-background: #ffffff08;
    --rb-color-text-secondary: var(--rb-color-sternico-gray-30);
    --rb-color-workspace-background: #131313;
    --rb-shadow-15: 0px 3px 15px #00000047;
  
    /* Icon Palette */
    --rb-color-icon-primary: white;
    --rb-color-icon-primary-hover: #d3d4d5;
    --rb-color-icon-primary-light: var(--rb-color-sternico-gray-40);
    --rb-color-icon-primary-light-hover: var(--rb-color-sternico-gray-60);
    --rb-color-icon-secondary: var(--rb-color-sternico-blue-50);
    --rb-color-icon-secondary-hover: var(--rb-color-sternico-blue-60);
    --rb-color-icon-secondary-light: var(--rb-color-sternico-blue-20);
    --rb-color-icon-secondary-light-hover: var(--rb-color-sternico-blue-30);
    --rb-color-icon-highlight: var(--rb-color-sternico-red-100);
    --rb-color-icon-highlight-hover: var(--rb-color-sternico-red-110);
  }
}

body {
  background-color: var(--rb-color-workspace-background);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: sans-serif;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  font-size: 25px;
  font-style: normal;

  padding-left: 50px;
  padding-right: 50px;
  text-align: left;
  width: 70%;
  height: 150px;
  background: var(--rb-color-sternico-blue-100);
  color: whitesmoke;
  border-radius: 5px;
}

.version-info {
  font-size: 0.75rem;
  color: var(--rb-color-text-secondary);
  margin-top: 1rem;
  width: 70%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

input {
  background: whitesmoke;
  font-size: 20px;
  padding-left: 15px;
  margin-left: 20px;
  height: 50px;
  width: 250px;
  border-radius: 5px;
}

.icon-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 70%;
  margin-top: 0.5rem;
}

.icon-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: var(--rb-color-background);
  min-height: 250px;
  min-width: 250px;
  margin: 20px;
  box-shadow: var(--rb-shadow-15);
  border-radius: 5px;
  cursor: pointer;
}

.icon-card svg {
  height: 50px;
  width: 50px;
  margin-bottom: 10px;
  fill: #706F6F;
}

/* Icon Palette */

.icon-card svg {
  fill: var(--rb-color-icon-primary);
}

.icon-card svg:hover {
  fill: var(--rb-color-icon-primary-hover);
}

.icon-card svg .primary {
  fill: var(--rb-color-icon-primary);
}

.icon-card svg:hover .primary {
  fill: var(--rb-color-icon-primary-hover);
}

.icon-card svg .primaryLight {
  fill: var(--rb-color-icon-primary-light);
}

.icon-card svg:hover .primaryLight {
  fill: var(--rb-color-icon-primary-light-hover);
}

.icon-card svg .secondary {
  fill: var(--rb-color-icon-secondary);
}

.icon-card svg:hover .secondary {
  fill: var(--rb-color-icon-secondary-hover);
}

.icon-card svg .secondaryLight {
  fill: var(--rb-color-icon-secondary-light);
}

.icon-card svg:hover .secondaryLight {
  fill: var(--rb-color-icon-secondary-light-hover);
}

.icon-card svg .highlight {
  fill: var(--rb-color-icon-highlight);
}

.icon-card svg:hover .highlight {
  fill: var(--rb-color-icon-highlight-hover);
}

.icon-card svg .magenta {
  fill: var(--rb-color-icon-magenta);
}

.icon-card svg:hover .magenta {
  fill: var(--rb-color-icon-magenta-hover);
}

.icon-card svg .positiv {
  fill: var(--rb-color-icon-positiv);
}

.icon-card svg:hover .positiv {
  fill: var(--rb-color-icon-positiv-hover);
}

.icon-card svg .yellow {
  fill: var(--rb-color-icon-yellow);
}

.icon-card svg:hover .yellow {
  fill: var(--rb-color-icon-yellow-hover);
}