:root {
  --blue-100: #EBF8FF;
  --blue-200: #BEE3F8;
  --blue-300: #90CDF4;
  --blue-400: #63B3ED;
  --blue-500: #4299E1;
  --blue-600: #3182CE;
  --blue-700: #2B6CB0;
  --blue-800: #2C5282;
  --blue-900: #2A4365;
  --gray-100: #F7FAFC;
  --gray-200: #EDF2F7;
  --gray-300: #E2E8F0;
  --gray-400: #CBD5E0;
  --gray-500: #A0AEC0;
  --gray-600: #718096;
  --gray-700: #4A5568;
  --gray-800: #2D3748;
  --gray-900: #1A202C;
}

body {
  display: grid;
  grid-template: "header header" auto "aside  main" 1fr / 1fr 5fr;
  height: 100vh;
  padding: 0;
  margin: 0;
  font-family: Fira Sans;
}

body>* {
  padding: .5em;
}

body>header {
  grid-area: header;
  background: var(--blue-700);
}

body>header h1 {
  color: var(--blue-200);
  text-shadow: -2px 1px 1px var(--blue-900);
  margin: 0;
}

main {
  width: 100%;
  overflow: auto;
  height: 100%;
}

aside {
  background: var(--gray-100);
}

aside details {
  padding: .5em;
  border-bottom: 1px solid var(--gray-200);
}

aside details summary {
  color: var(--gray-700);
  display: flex;
  justify-content: space-between;
}

aside details summary button {
  background:none;
  border:none;
  font-family: OpenMoji;
}


aside details input{
  width: 100%;
}

table {}

th {
  background: var(--gray-100);
  font-size: small;
  color: var(--gray-700);
  border-bottom: 1px solid var(--gray-500);
  text-align: left;
  font-weight: normal;
}

td {
  font-family: Fira Sans;
  color: var(--gray-800);
  padding: .1em;
  border-bottom: 1px solid gray;
}