body {
  font-family: "Dosis", sans-serif;
  font-weight: "400";
  color: #555; }

li h3, li h4 {
  margin: 0; }

.center-text {
  text-align: center; }

.title-text {
  font-size: 3rem; }

.red-text {
  color: #D64337; }

.inline {
  display: inline; }

.half {
  width: 50%;
  margin: auto; }

.hide {
  display: none; }

.footer {
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  max-height: 10%;
  margin: auto;
  width: 60%; }

.back {
  position: fixed;
  bottom: 50%;
  left: 0;
  height: 6rem; }

.next {
  position: fixed;
  bottom: 50%;
  right: 0;
  height: 6rem; }

.invert {
  color: #fff;
  background-color: #555; }

button {
  border: 2px solid #555;
  border-radius: 10px;
  background-color: #fff;
  font-family: "Dosis", sans-serif;
  font-size: 1.25rem;
  margin: 5px;
  padding: 0.5rem;
  min-width: 10rem; }

button.stretch {
  width: 100%;
  font-size: 2rem; }

button:hover {
  color: #fff;
  background-color: #555; }

button:disabled,
button[disabled],
button:disabled:hover {
  color: #C4C4C4;
  border: 2px solid #C4C4C4;
  background-color: #fff;
  cursor: not-allowed; }

input.name-input {
  -webkit-appearance: none;
  border: 2px solid #555;
  font-size: 1.25rem;
  font-family: "Dosis", sans-serif;
  color: #555;
  padding: 0.5rem;
  min-width: 40%; }

div.spacer {
  padding: 1rem; }

.container {
  margin-bottom: 10%;
  margin: auto;
  width: 60%; }

.card-list {
  display: flex;
  flex-flow: row wrap;
  justify-content: center; }

.single-col {
  width: 33%;
  margin: auto; }

.nav {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around; }

.flex {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: baseline; }
  .flex table {
    flex-basis: 45%; }

.card {
  border: 2px solid #555;
  box-shadow: 5px 5px;
  background-color: #fff;
  margin: 1%;
  flex-basis: 28%;
  justify-content: center;
  cursor: pointer; }
  .card .card-info {
    position: static;
    float: right;
    margin: 0;
    padding: 0; }
  .card .card-header {
    margin: 0;
    padding: 5px 10px;
    text-align: center;
    color: #fff;
    background-color: #555; }
  .card .card-content {
    padding: 10px; }

.card-selected {
  border: 2px solid #555;
  box-shadow: 5px 5px;
  background-color: #555;
  color: #fff;
  margin: 1%;
  flex-basis: 28%;
  justify-content: center;
  cursor: pointer; }
  .card-selected .card-info {
    position: static;
    float: right;
    margin: 0;
    padding: 0; }
  .card-selected .card-header {
    margin: 0;
    padding: 5px 10px;
    color: #fff;
    background-color: #555; }
  .card-selected .card-content {
    padding: 10px; }

.row-of-2 {
  flex-basis: 45%; }

.skill-card {
  flex-basis: 100%;
  text-align: center;
  box-shadow: 0px 0px;
  margin: 5px;
  padding: 5px 10px;
  color: #fff;
  background-color: #555; }

.card:hover {
  box-shadow: 0px 0px; }

h3.card-title {
  font-size: 1.5rem;
  margin: 0; }

.nav-item {
  border: 2px solid #555;
  font-size: 2.5rem;
  flex-basis: 33.33%;
  margin: 0;
  text-align: center;
  cursor: pointer; }
  .nav-item:first-child {
    border-right: 0px; }
  .nav-item:nth-child(3) {
    border-left: 0px; }

.nav-item-full {
  border: 2px solid #555;
  font-size: 2.5rem;
  flex-basis: 33.33%;
  margin: 0;
  text-align: center;
  cursor: pointer; }

.nav-active {
  color: #fff;
  background-color: #555; }

table {
  display: table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-color: grey; }

thead {
  vertical-align: center; }

tbody {
  display: table-row-group;
  vertical-align: middle;
  border-color: inherit; }

tr {
  display: table-row;
  vertical-align: inherit;
  border-color: inherit; }

th, td {
  border-bottom: 0.1rem solid grey;
  padding: 1.2rem 1.5rem;
  text-align: left; }

.attr-rolls {
  width: 60%;
  margin: auto;
  display: flex;
  justify-content: space-between; }
  .attr-rolls button {
    flex-basis: 60%; }

.attr-roll {
  display: inline;
  flex-basis: 15%;
  text-align: center;
  border: 1px solid #555;
  cursor: pointer; }

.attr-wrap {
  display: flex;
  justify-content: center;
  margin: 5px 0px 5px 0px; }

.attr-target {
  min-width: 5rem;
  min-height: 100%;
  border: 1px solid #555;
  float: right;
  margin: 0;
  text-align: center;
  cursor: pointer; }
  .attr-target h1 {
    margin: 0; }

h1.attr-name {
  margin: 0;
  min-width: 12rem; }

.highlighted {
  -webkit-box-shadow: 0px 0px 25px 2px #FFEE51;
  box-shadow: 0px 0px 25px 2px #FFEE51; }

.name-wrap {
  display: flex;
  justify-content: center; }

.rand-name-wrap {
  margin-top: 6rem;
  text-align: center; }

.name-select {
  display: inline-block;
  font-size: 1.5rem;
  font-family: "Dosis", sans-serif;
  width: 20%;
  border: 2px solid #555;
  border-radius: 10px;
  line-height: 1.5;
  padding: 4px 2px 4px 20px;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  text-align: center;
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat, repeat;
  background-position: right 0.7em top 50%, 0 0;
  background-size: 0.65em auto, 100%;
  margin-right: 1rem; }

.char-name {
  margin: 3rem; }

.summary-grid {
  display: grid;
  grid-template-columns: [c1s] 3fr [c1e c2s] 3fr [c2e c3s] 2fr [c3e];
  grid-template-rows: [r1s] 1fr [r1e r2s] 1fr [r2e r3s] 1fr [r3e r4s] 1fr [r4e r5s] 3fr [r5e r6s] 3fr [r6e]; }

.attr-cell {
  grid-area: r1s/c1s/r4e/c1e;
  border: 1px solid #555;
  text-align: center;
  display: grid;
  grid-template-columns: [ns] 3fr [ne ss] 1fr [se ms] 1fr [me];
  grid-template-rows: [strs] 1fr [stre dexs] 1fr [dexe cons] 1fr [cone ints] 1fr [inte wiss] 1fr [wise chas] 1fr [chae]; }

.str-name {
  grid-area: strs/ns/stre/ne;
  margin-left: 1rem; }

.str-score {
  grid-area: strs/ss/stre/se; }

.str-mod {
  grid-area: strs/ms/stre/me; }

.dex-name {
  grid-area: dexs/ns/dexe/ne;
  margin-left: 1rem; }

.dex-score {
  grid-area: dexs/ss/dexe/se; }

.dex-mod {
  grid-area: dexs/ms/dexe/me; }

.con-name {
  grid-area: cons/ns/cone/ne;
  margin-left: 1rem; }

.con-score {
  grid-area: cons/ss/cone/se; }

.con-mod {
  grid-area: cons/ms/cone/me; }

.int-name {
  grid-area: ints/ns/inte/ne;
  margin-left: 1rem; }

.int-score {
  grid-area: ints/ss/inte/se; }

.int-mod {
  grid-area: ints/ms/inte/me; }

.wis-name {
  grid-area: wiss/ns/wise/ne;
  margin-left: 1rem; }

.wis-score {
  grid-area: wiss/ss/wise/se; }

.wis-mod {
  grid-area: wiss/ms/wise/me; }

.cha-name {
  grid-area: chas/ns/chae/ne;
  margin-left: 1rem; }

.cha-score {
  grid-area: chas/ss/chae/se; }

.cha-mod {
  grid-area: chas/ms/chae/me; }

.name-cell {
  grid-area: r1s/c3s/r1e/c3e;
  border: 1px solid #555; }

.race-cell {
  grid-area: r2s/c3s/r2e/c3e;
  border: 1px solid #555; }

.class-cell {
  grid-area: r3s/c3s/r3e/c3e;
  border: 1px solid #555; }

.bg-cell {
  grid-area: r4s/c3s/r4e/c3e;
  border: 1px solid #555; }

.focus-cell {
  grid-area: r5s/c2s/r5e/c3e;
  border: 1px solid #555; }

.skills-cell {
  grid-area: r1s/c2s/r2e/c2e;
  border: 1px solid #555; }

.equip-cell {
  grid-area: r5s/c1s/r5e/c1e;
  border: 1px solid #555; }

.derive-cell {
  grid-area: r3s/c2s/r4e/c2e;
  border: 1px solid #555; }

.info-cell {
  grid-area: r6s/c1s/r6e/c3e;
  border: 1px solid #555; }

.extras-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  max-height: 10rem; }

.extras-list {
  flex-basis: 20%;
  padding-right: 5px; }
  .extras-list:nth-child(even) {
    border-left: 1px solid #555;
    border-right: 1px solid #555; }