@charset "UTF-8";

body {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-gap: 0;

  width: 100vw;
  height: 100vh;
}

body > header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  justify-items: center;
  z-index: 2;

  padding: var(--size-xs);

  background: var(--color-primary);
  box-shadow: 0px 0px 4px var(--color-primary);

  color: var(--color-text-inverted);
}
body > header > div {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: auto;
  
  justify-items: center;
  align-items: center;
}
body > header > div > a.btn {
  display: grid;
  justify-items: center;
  align-items: center;

  width: var(--size-xl);
  height: var(--size-xl);
}
body > header > div:nth-of-type(1) {
  justify-self: left;
}
body > header > div:nth-of-type(2) img {
  display: block;

  height: var(--size-2xl);
}
body > header > div:nth-of-type(3) {
  justify-self: right;
}

body > main {
  background: #30295310;

  overflow: auto;
}

h1 {
  padding: var(--size-xs);

  background: var(--color-light);

  text-align: center;
  text-transform: uppercase;

  font-size: var(--size-m);
}

/*
section:not(:nth-of-type(1)) {
  margin: var(--size-l) 0 0;
}
*/
section {
  padding: var(--size-l);

  background: var(--color-light);
}

ul li {
  display: block;
  padding: var(--size-xs) 0;
}
ul li.index {
  padding:var(--size-xs);
  background:var(--color-primary);
  color:var(--color-text-inverted);

  cursor: pointer;
}
li.index .fa-caret-down {
  -webkit-transition: var(--speed-slow) ease-in-out;
  -moz-transition: var(--speed-slow) ease-in-out;
  -o-transition: var(--speed-slow) ease-in-out;
  transition: var(--speed-slow) ease-in-out;
}
li.index.closed .fa-caret-down {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
ul li:not(:nth-of-type(1)) {
  border-top: var(--size-3xs) solid var(--color-primary);
}


.searchbar {
  overflow: hidden;

  display: grid;
  grid-template-columns: var(--size-2xl) 1fr;
  grid-gap: var(--size-2xs);
  
  align-items: center;
  justify-items: center;
  
  height: var(--size-2xl);
  
  padding: var(--size-2xs);
  
  background: var(--color-primary);

  color: var(--color-text-inverted);

  -webkit-transition: var(--speed-slow) ease-in-out;
  -moz-transition: var(--speed-slow) ease-in-out;
  -o-transition: var(--speed-slow) ease-in-out;
  transition: var(--speed-slow) ease-in-out;
}
.searchbar.closed {
  height: 0;
  
  padding: 0;
}
.searchbar input {
  width: 100%;
  height: 100%;

  border: 0;
  padding: var(--size-2xs);
}


.buttonbar {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  grid-gap: var(--size-3xs);
  
  align-items: center;
  justify-items: center;
  
  width: 100%;
}
.buttonbar button, .buttonbar a {
  width: 100%;
}

.icon {display:inline-block;width:1.1em; text-align: left}

.hidden {display:none !important}
.nowrap {white-space: nowrap}