// trio colour
$ciColor: #691487;
$ciColor: InfoBackground;

html {
  font-family: sans-serif;
}

body {
  display: grid;
  grid-template-areas:
          "navbar navbar"
          "content content";
  grid-template-columns: 20rem 1fr;
  margin: 0;
}

nav {
  grid-area: navbar;
  align-self: center;

  background-color: $ciColor;
  color: white;
  padding: 5px;

  display: grid;
  grid-template-areas: "title rest-nav";
  grid-template-columns: 15em 1fr;

  .app-title {
    margin: 0;
    padding-left: .5em;
    grid-area: title;
    //background-image: url("../img/klammer.svg");
    background-repeat: no-repeat;
    background-size: contain;
  }

  input {
    background-color: white;
    border-radius: .3em;
    border: 1px solid white;
    padding: .4em;
  }

  button {
    line-height: 1.7;
  }

  ul {
    grid-area: rest-nav;
    list-style-type: none;
    margin: 0;
    padding: 0;

    li {
      display: inline-block;
      margin-right: 1rem;
    }
  }
}

main {
  grid-area: content;
}