:root {
  --foreground: #2E3945;
  --background: #ECEEEB;
  --accent-light: #8AADBE;
  --accent-dark: #836849;
  --attention: #97434D;
  --header-height: 5em;
}


body {
  margin: 0;
}

#shell {
  min-height: 100vh;
}

#header {
  position: absolute;
  top: 0;
  width: 100%;
  height: var(--header-height);
  /*background: aliceblue;*/
  background: var(--accent-light);
  color: var(--foreground);
  text-align: center;
}

#footer {
  position: absolute;
  /*bottom: 0;*/
  width: 100%;
  height: 2.5rem; /* Footer height */
  text-align: center;
}

#mainView {
  margin-top: var(--header-height);
}

#todoView {
    position: fixed;
    top: 6rem; /* spacing to account for header */
    left: 10%;
}

.todoList {
  border: var(--accent-light) solid 1px;
}

.todoList:hover {
  cursor: pointer;
}

#completed {
  background-color: var(--checkmark-color);
}

#tally, #grandTotal {
  position: relative;
  float: right;
  margin-right: 2em;
  margin-top: calc(-0.7 * var(--header-height));
}

#grandTotal {
  margin-top: calc(-0.5 * var(--header-height));
  font-style: italic;
  font-size: smaller;
}