:root {
  --primary-color: #461B7E;
  --secondary-color: #E3C567;
  --success-color: #4E9258;
  --error-color: #C36241;
  --white: #FAEBD7;
  --black: #000000;
  --strength-color: red;
  --dexterity-color: blue;
  --constitution-color: yellow;
  --intelligence-color: orange;
  --wisdom-color: green;
  --charisma-color: purple;
  --spacing-small: .5em;
  --spacing-medium: 1em;
  --spacing-large: 2em; }

body {
  background-color: var(--white);
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-template-rows: 3fr 3fr;
  gap: 0px 0px;
  grid-template-areas: "nav main" "footer main";
  height: 100vh;
  width: 100vw;
  font: .75em "Fira Sans", sans-serif;
  margin: 0;
  padding: 0;
  overflow: hidden; }

nav {
  grid-area: nav;
  background-color: var(--primary-color); }

nav h1 {
  padding: var(--spacing-medium);
  color: var(--white); }

nav ul {
  padding: 0; }

nav ul li {
  list-style-type: none; }

nav ul li a {
  color: var(--white);
  text-decoration: none;
  padding: var(--spacing-medium);
  display: inline-block;
  width: calc(100% - 2em); }

nav ul li a.active {
  color: var(--black); }

nav ul li a:hover {
  background-color: var(--black);
  color: var(--white); }

nav ul li a.active:hover {
  color: var(--black); }

nav ul li a.active {
  background-color: var(--secondary-color); }

main {
  grid-area: main;
  overflow-y: scroll; }

footer {
  grid-area: footer;
  background-color: var(--primary-color);
  padding: var(--spacing-medium);
  overflow-y: scroll; }

h3 {
  margin-top: 0; }

.icon {
  width: 1em;
  height: 1em; }