/******************************************
/* CSS
/*******************************************/
:root {
  --red: #e94445;
  --navy: #264c5e;
  --maroon: #a34c50;
  --white: #fff;
  --cream: #cec2ae;
  --purple: #4a2932;
  --heading: 'Orelega One', cursive;
  --body: 'Roboto Slab', serif;
  --serif: 'Merriweather', serif;
}
/* Box Model Hack */
*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/******************************************
/* LAYOUT
/*******************************************/
.container {
  padding: 0 1rem;
  margin: 0 auto;
  max-width: 1700px;
}

.row {
  display: flex;
}

body {
  font-family: var(--body);
}

.mb-0 {
  margin-bottom: 0 !important;
}

/******************************************
/* Headings
/*******************************************/
h1 {
  color: var(--red);
  font-size: 2rem;
  font-family: var(--heading);
  text-transform: uppercase;
}
h1 span {
  font-family: var(--serif);
  font-size: 1.5rem;
  text-transform: lowercase;
}

#display h3 {
  color: var(--red);
  font-family: var(--heading);
  letter-spacing: 2px;
  font-size: 2.25rem;
  margin: 1rem 0 1.5rem 0;
}

#display h6 {
  color: #000;
  padding: 0;
  margin: 0;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}


/******************************************
/* Monster index
/*******************************************/
#index {
  flex: 1 0 20%;
  color: #000;
}

#index-list {
  list-style: none;
  max-height: 90vh;
  overflow: scroll;
  padding: 0.5rem 0;
}
#index-list li {
  text-decoration: underline;
  cursor: pointer;
  font-size: 1.125rem;
  margin-bottom: 0.35rem;
}

/******************************************
/* Monster Display
/*******************************************/
#display {
  display: flex;
  flex-direction: column;
  flex: 1 0 80%;
  padding: 0 1rem;
  background-color: var(--cream);
  background-image: url("/img/med.png");
}

#display section {
  flex: 0 1 auto;
  border-bottom: 3px solid var(--red);
  margin-bottom: 2rem;
}
#display section ul {
  margin-left: 1rem;
  margin-bottom: 1rem;
}

#display section li {
  list-style: none;
  color: var(--purple);
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

#display span {
  color: var(--purple);
}