body {
  background-color: #362d74;
  font-family: 'EB Garamond', serif;
}

img {
  max-width: 100%;
}

header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-bottom: 20px;
  padding-top: 20px;
  width: 100%;
  background: linear-gradient(#d0b3ff, #fff);
}

header p {
  padding: 0 20px;
  margin-bottom: 3px;
}

h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  padding: 0 20px;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
}

h1 img {
  width: 48px;
  margin-right: 15px;
}

h2 {
  font-size: 24px;
  margin-bottom: 20px;
}

h3 {
  display: flex;
  align-items: center;
  font-size: 20px;
  margin-bottom: 5px;
  user-select: none;
}

li {
  font-size: 18px;
  line-height: 1.2;
}

.content {
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  max-width: 960px;
  margin: 40px auto;
}

.character-tables-container {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  flex-wrap: wrap;
  padding: 0 20px;
  box-sizing: border-box;
}

.character-table {
  width: 170px;
  border: 1px solid #f0f0f0;
  box-sizing: border-box;
  margin-right: 10px;
  margin-bottom: 20px;
}

.faction-banner {
  margin-right: 8px;
  width: 24px;
  height: 38px;
}

#banner-be {
  background: url('../img/banners.png') -0 -0;
}

#banner-bl {
  background: url('../img/banners.png') -24px -0;
}

#banner-gd {
  background: url('../img/banners.png') -48px -0;
}

#banner-church {
  background: url('../img/banners.png') -72px -0;
}

#banner-aw {
  background: url('../img/banners.png') -96px -0;
}

#be {
  background: linear-gradient(#dc6f6b, #fff);
}

#bl {
  background: linear-gradient(#a3cbce, #fff);
}

#gd {
  background: linear-gradient(#ebd461, #fff);
}

#church {
  background: linear-gradient(#e6e1df, #fff);
}

#aw {
  background: linear-gradient(#9b9ca0, #fff);
}

.character {
  line-height: 1.9;
  user-select: none;
}

.character label {
  display: flex;
  align-items: center;
  cursor: pointer;
  width: 100%;
}

.support-icon {
  height: 20px;
  margin-left: 3px;
}

.character:hover {
  background-color: #eee;
}

.disabled, .disabled:hover {
  background-color: #fff;
}

.meals {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  border-top: 20px solid #362d74;
  padding: 20px 0;
}