:root {
    --col-white: #fafaee;
    --col-gray: #dbdbc3;
    --col-black: #57574e;

    --col-blue: #214d78;
    --col-purple: #8f3268;
    --col-green: #746724;
    --col-orange: #c77d17;

    --col-blue-l: #2f6dab;
    --col-purple-l: #c2438d;
    --col-green-l: #a69433;
    --col-orange-l: #fa9d1c;

    --col-blue-t: #abd0ba;
    --col-purple-t: #e7c4a4;
    --col-green-t: #dcd9b0;
    --col-orange-t: #efe2a9;
}

html {
    background: var(--col-white);
    color: var(--col-black);
}

body {
    margin: 1rem;
}

h1,
h2 {
    font-style: italic;
}

hr {
    border: 1px solid var(--col-gray);
}

a {
    color: var(--col-blue-l);
}

.txt-hl-blue {
    background: var(--col-blue-t);
    color: var(--col-blue);
}

.txt-hl-purple {
    background: var(--col-purple-t);
    color: var(--col-purple);
}

.txt-hl-green {
    background: var(--col-green-t);
    color: var(--col-green);
}

.txt-hl-orange {
    background: var(--col-orange-t);
    color: var(--col-orange);
}

.header {
    display: flex;
    flex-direction: row;
  }
  .header .ident {
    display: flex;
    flex-direction: row;
  }
  .header .ident .name.mobile {
    display: none;
    align-self: center;
    margin-left: 1rem;
  }
  .header .logo {
    height: 5rem;
  }
  .header .name {
    font-weight: bold;
    font-size: 1.2rem;
    margin-left: 2rem;
  }
  .header .links {
    user-select: none;
    width: 100%;
  }
  .header ul {
    padding: 0;
    margin-left: 2rem;
    margin-top: 0.5rem;
  }
  .header li {
    font-size: 1rem;
    list-style: none;
    margin-top: 0.25rem;
  }
  .header li a {
    padding: 0.1rem 0.25rem;
    text-decoration: none;
    color: var(--col-black);
  }
  .header li a:hover {
    color: var(--col-white);
    background: var(--col-black);
    cursor: pointer;
  }
  .header li.selected a{
    color: var(--col-white);
    background: var(--col-black);
  }
  .header .columns {
    display: flex;
    flex-direction: row;
  }
  @media screen and (max-width: 600px) {
    .header {
      flex-direction: column;
    }
    .header .ident .name.mobile {
      display: block;
    }
    .header .logo {
      height: 3rem;
    }
    .header .links .name {
      display: none;
    }
    .header .links .columns>ul:first-child {
      margin-left: 0;
    }
  }