:root{
  --very-light-gray: #DAD3CE;
  --light-gray: #5B625E;
  --gray: #384137;
  --dark-gray: #374041;
  --very-dark-gray: #282C2D;

  --cyan: #738F8B;
  --blue: #617984;
  --purple: #99879F;
  --green: #678B70;
  --red: #885345;
  --orange: #8B674B;
  --light-orange: #7D7E69;

  --master-font: 'Eagle Lake', cursive;
}

body {
  background-color: var(--very-dark-gray);
  color: var(--very-light-gray);
  font-family: var(--master-font);
}

.container{
  max-width: 100%;
}

input {
  color: var(--light-gray)
}

textarea {
  color: var(--light-gray)
}

ul {
  list-style-type: none;
}

button {
  background-color: var(--purple);
  color: var(--very-light-gray);
  font-family: var(--master-font);
}

a {
  color: var(--cyan)
}

li {
  text-align: center;
}

li button {
  background-color: var(--red);
}

li button:hover {
  background-color: var(--orange);
}

#back a {
  color: var(--very-light-gray);
}

#titles input{
  text-align: center;
  font-size: 110%;
  outline: none;
  box-shadow: none;
  border-color: var(--very-dark-gray);
  text-shadow: 1px 1px var(--red);
}

.damage_btn {
  background-color: var(--red);
}
.heal_btn {
  background-color: var(--green);
}
.actorUtils input {
  background-color: var(--very-dark-gray);
}

#actor_input button{
  background-color: var(--green);
}
#actor_input button:hover{
  background-color: var(--cyan);
}

#monster_list {
  width: 100%;
}
.selectors td{
  background-color: var(--green);
}
.headers th{
  background-color: var(--red);
}
.monsters td{
  background-color: var(--very-light-gray);
  color: var(--dark-gray);
}
.monsters a {
  color: var(--dark-gray);
}

#wminput {
  display: flex;
  justify-content: between;
}
#lvl {
  margin: 0 1rem;
  width:100%;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  width: 100%;
}
.flex-end {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.flex-center {
  display: flex;
  align-items: center;
}
.flex-grow-2 {
  flex-grow: 2;
}
.w-100 {
  width: 100%;
}
#number-names {
  width: 6rem;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid var(--very-light-gray);
  color: var(--very-light-gray);
  border-radius: 0;
  padding: 0 0 0 1rem;
}
#corpus {
  width: 100%;
  height: 25rem;
  margin-bottom: 0;
}

.outline {
  border:  solid var(--very-light-gray);
  overflow-x: scroll;
  padding:1rem;
}

.rounded {
  border-radius: 15px;
}

.lines-hover li {
  display: flex;
  align-content: center;
  padding:0;
  margin: 0;
}

.lines-hover li:hover {
  background-color: var(--light-gray);
}

.lines-hover li:hover .btn-light {
  margin: 0;
  padding: .75rem;
  background-color: var(--very-light-gray);
  content: url(../images/copy-regular.svg);
  height: inherit;
  color: var(--very-light-gray);

}

.lines-hover :nth-child(even){
  background-color:var(--dark-gray);
}
.btn-light {
  width: 3rem;
  color: var(--very-light-gray)
}

@keyframes heartbeat {
  0% {
    transform: scale(.75);
  }
  50% {
    transform: scale(.60)
  }
  100% {
    transform: scale(.75);
  }
}

#heart-to-beat {
  position: relative;
  width: 100px;
  height: 90px;
  animation: heartbeat 1s infinite;
}