html, body {
	background-color: #252830;
	width: 100%;
	height: 100%;
}

body {
	font-family: proxima-nova, sans-serif;
	color: #cfd2da;
	padding-bottom: 50px;
}

h2 {
	color: white;
	font-size: 22px;
	line-height: 28px;
	margin-bottom: 20px;
}

#content {
	min-height: calc(100vh - 30px);
}

.nofooter #content {
	min-height: 100%;
}

footer {
	font-size: 10px;
	text-align: center;
	min-height: 30px;
}

.navbar {
	margin: 0;
}

.tiles {
	padding: 0 0 30px 30px;
}

.tile {
	display: inline-block;
	width: 450px;
	height: 250px;
	margin: 30px 30px 0 0;
	box-shadow: 8px 8px 20px 3px rgba(0, 0, 0, .4);
}

@media (max-width: 500px) {
	.tiles {
		padding-left: 0;
	}

	.tile {
		width: 100%;
		margin-right: 0;
	}
}

@media (min-width: 500px) {
	.tile:hover {
		width: 470px;
		height: 270px;
		margin: 20px 20px -10px -10px;
	}
}

.tile .tile-title {
	background-color: #30343e;
	color: #cfd2da;
}

.tile.bg .tile-title {
	background-color: rgba(0, 0, 0, .5);
	color: white;
}

.tile-title,
.tile-title:active,
.tile-title:visited,
.tile-title:hover {
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	font-size: 22px;
	text-transform: uppercase;
	font-weight: bold;
}

.tile.bg .tile-title:hover {
	transition: all .5s;
	background-color: rgba(0, 0, 0, .3);
}

.bg-chalice {
	background: url('/campaigns/img/tiles/chalice.jpg') center center no-repeat;
}

.bg-mm {
	background: url('/campaigns/img/tiles/mm.jpg') center center no-repeat;
}

.bg-kor {
	background: url('/campaigns/img/tiles/kor.webp') center center no-repeat;
}

.bg-thrice {
	background: url('/campaigns/img/tiles/thrice.webp') center center no-repeat;
}

.bg-calendar {
	background: url('/campaigns/img/tiles/calendar.jpg') center center no-repeat;
}

.bg-strongholds {
	background: url('/campaigns/img/tiles/strongholds.jpg') center center no-repeat;
}

.bg-characters-chalice {
	background: url('/campaigns/img/tiles/characters-chalice.jpg') center center no-repeat;
}

.bg-characters-mm {
	background: url('/campaigns/img/tiles/characters-mm.jpg') center center no-repeat;
}

.bg-char-carmen {
	background: url('/campaigns/img/tiles/carmen.jpg') center center no-repeat;
}

.bg-char-ciel {
	background: url('/campaigns/img/tiles/ciel.jpg') center center no-repeat;
}

.bg-char-flint {
	background: url('/campaigns/img/tiles/flint.jpg') center center no-repeat;
}

.bg-char-igno {
	background: url('/campaigns/img/tiles/igno.jpg') center center no-repeat;
}

.bg-char-mei {
	background: url('/campaigns/img/tiles/mei.jpg') center center no-repeat;
}

.bg-char-owynn {
	background: url('/campaigns/img/tiles/owynn.jpg') center center no-repeat;
}

.bg-char-sora {
	background: url('/campaigns/img/tiles/sora.jpg') center center no-repeat;
}

.bg-char-tili {
	background: url('/campaigns/img/tiles/tili.jpg') center center no-repeat;
}

.bg-char-tova {
	background: url('/campaigns/img/tiles/tova.jpg') center center no-repeat;
}

.bg-char-vraggi {
	background: url('/campaigns/img/tiles/vraggi.jpg') center center no-repeat;
}

.bg-char-winning {
	background: url('/campaigns/img/tiles/winning.jpg') center center no-repeat;
}

.bg-char-friday {
	background: url('/campaigns/img/tiles/friday.jpg') center center no-repeat;
}

.bg-char-yllashana {
	background: url('/campaigns/img/tiles/yllashana.jpg') center center no-repeat;
}

.bg-char-octavia {
	background: transparent;
}

.bg-char-emiliea {
	background: url('/campaigns/img/tiles/emiliea.jpg') center center no-repeat;
}

.bg-char-melkon {
	background: url('/campaigns/img/tiles/melkon.jpg') center center no-repeat;
}

.bg-char-barryl {
	background: url('/campaigns/img/tiles/barryl.jpg') center center no-repeat;
}

ul.chevrons {
	list-style: none;
	display: inline-block;
	float: left;
	margin: 0;
	padding: 0;
}

ul.chevrons li {
	float: left;
}

ul.chevrons li a {
	color: #777;
	display: block;
	background: transparent;
	text-decoration: none;
	position: relative;
	height: 48px;
	line-height: 48px;
	padding: 0 10px 0 5px;
	text-align: center;
	margin-right: 23px;
}

ul.chevrons li:first-child a {
	padding-left: 15px;
}

ul.chevrons li:first-child a:before {
	border: none;
}

ul.chevrons li a:before,
ul.chevrons li a:after {
	content: '';
	position: absolute;
	top: 0;
	border-style: solid;
	border-color: #222;
	border-width: 24px 10px;
	width: 0;
	height: 0;
}

ul.chevrons li a:before {
	left: -20px;
	border-left-color: transparent;
}

ul.chevrons li a:after {
	left: 100%;
	border-color: #080808;
	border-left-color: #222;
}

ul.chevrons li a:hover,
ul.chevrons li.active a {
	background-color: #080808;
	color: white;
}

ul.chevrons li a:hover:before,
ul.chevrons li.active a:before {
	border-color: #080808;
	border-left-color: transparent;
}

ul.chevrons li a:hover:after,
ul.chevrons li.active a:after {
	border-left-color: #080808;
}

ul.chevrons li.tombstone a {
	cursor: default;
}

ul.chevrons li.tombstone a:hover {
	background-color: transparent;
}

ul.chevrons li.tombstone a:after {
	border: none;
}

ul.chevrons li.tombstone a:hover:before {
	border-color: #222;
	border-left-color: transparent;
}

ul.chevrons li.tombstone a:hover:after {
	border-left-color: #222;
}

select {
	background: transparent;
	border: none;
	cursor: pointer;
	outline: none;
}

option {
	color: black;
}

input.year {
	background: transparent;
	border: 0;
	width: 3em;
}

a.circle {
	transition: .2s ease-in-out;
	color: #999;
	display: inline-block;
	padding: 4px 12px;
	border-radius: 50%;
	font-weight: bold;
	margin: 0 8px;
}

a.circle:hover {
	text-decoration: none;
	background-color: #434857;
	color: white;
}

.calendar {
	width: 100%;
	height: calc(100vh - 126px);
	border: 1px solid #434857;
	border-right-width: 0;
	border-bottom-width: 0;
}

.calendar-day {
	display: inline-block;
	width: 20%;
	height: 16%;
	border: 1px solid #434857;
	border-top-width: 0;
	border-left-width: 0;
	padding: 4px;
	float: left;
}

.calendar-day.max-width {
	width: 100%;
}

.calendar-day.half-width {
	width: 50%;
}

.calendar-day.holiday {
	height: 14%;
}

.calendar-day-label {
	width: 100%;
	text-align: center;
	font-weight: bold;
}

.calendar-day-label.holiday {
	font-size: 20px;
	color: #999;
	font-variant: all-small-caps;
	font-weight: normal;
}

.calendar-event {
	margin-top: 4px;
	padding: 4px 4px 4px 32px;
	border-radius: 4px;
	width: 100%;
	max-width: 350px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border: 1px solid #111;
	background-color: #1e2127;
	font-size: 12px;
	cursor: default;
}

.event-bg-current {
	background: url('/campaigns/img/icons/calendar-entry-current.webp') #1e2127 left no-repeat;
}

.event-bg-start {
	background: url('/campaigns/img/icons/calendar-entry-start.webp') #1e2127 left no-repeat;
}

.event-bg-quest {
	background: url('/campaigns/img/icons/calendar-entry-quest.webp') #1e2127 left no-repeat;
}

.event-bg-death {
	background: url('/campaigns/img/icons/calendar-entry-death.webp') #1e2127 left no-repeat;
}

.event-bg-schedule {
	background: url('/campaigns/img/icons/calendar-entry-schedule.webp') #1e2127 left no-repeat;
}

.event-bg-battle {
	background: url('/campaigns/img/icons/calendar-entry-battle.webp') #1e2127 left no-repeat;
}

@media (min-width: 1920px) {
	.calendar-day {
		width: 10%;
		height: 33%;
	}

	.calendar-day.holiday {
		height: 25%;
	}
}

@media (max-width: 450px) {
	.calendar {
		height: auto;
	}

	.calendar-day,
	.calendar-day.holiday {
		width: 100%;
		height: 200px;
	}
}

.strongholds {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}

.stronghold {
	width: 470px;
	border: 8px solid #434857;
	padding: 20px;
	margin: 40px 0 0 0;
	box-shadow: 2px 3px 10px 0 rgba(0, 0, 0, .7);
}

.stronghold-title {
	padding: 0 0 20px 0;
	margin: 0;
	font-size: 18px;
	font-variant: small-caps;
	font-weight: bold;
	border-bottom: 1px solid #434857;
	text-align: center;
	color: #51586a;
}

.attributes {
	padding-top: 12px;
}

.attributes .row {
	margin: 0;
}

.attribute {
	padding: 8px 0;
}

.de-emphasise {
	color: #999;
}

.lozenge {
	margin: 8px 16px;
	border: 2px solid #434857;
	position: relative;
	padding: .75rem 1.25rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-radius: 1rem;
	box-shadow: inset 0 0 6px 0 rgba(0, 0, 0, .7);
	z-index: 0;
}

.progress-bar {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	display: block;
	background-color: black;
	border-radius: 1rem;
}

.icon {
	display: inline-block;
	width: 32px;
	height: 32px;
}

.icon-gp {
	background: transparent url('/campaigns/img/icons/gp.webp') center center no-repeat;
}

.icon-pos-right {
	background-position-x: right;
}

.chart {
	margin-top: 20px;
}

.chart-label {
	text-align: center;
	margin-top: 20px;
	font-weight: bold;
}

.character {
	padding: 40px;
}

.character.heroic {
	padding-top: 160px;
}

.portrait {
	float: left;
	width: 400px;
	margin-right: 20px;
	position: relative;
}

.portrait .overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 48px;
	font-weight: bold;
	color: black;
	background-color: transparent;
	flex-direction: column;
}

.portrait .overlay.opaque {
	background-color: rgba(255, 255, 255, .3);
	mix-blend-mode: screen;
	backdrop-filter: blur(5px);
}

.portrait .overlay span:last-child {
	font-size: 80px;
}

.portrait .overlay span {
	display: none;
}

.portrait .overlay.opaque span {
	display: inline;
}

section {
	overflow: hidden;
}

.character-name,
.character-classes {
	font-variant: small-caps;
	font-size: 26px;
}

.character-name {
	font-weight: bold;
	position: relative;
	z-index: 2;
}

.character-classes {
	color: #51586a;
	font-weight: bold;
}

.character-race {
	font-size: 18px;
	font-style: italic;
	position: relative;
	z-index: 2;
}

.character-class {
	position: relative;
	z-index: 0;
}

.character-class img {
	filter: invert(1);
	position: absolute;
	top: calc(50% - 48px);
	left: calc(50% - 48px);
	width: 96px;
	opacity: .1;
	z-index: -1;
}

.character-abilities {
	padding-top: 10px;
}

.character-ability {
	display: inline-block;
	padding: 0 20px 20px 0;
}

.ability-name {
	text-transform: uppercase;
	color: #51586a;
	font-size: 16px;
	padding-bottom: 4px;
	font-weight: bold;
	text-align: center;
}

.ability-score {
	border: 4px solid #434857;
	padding: 8px 16px;
	font-size: 18px;
	font-weight: bold;
	width: 60px;
	text-align: center;
}

.ability-mod {
	border: 2px solid #434857;
	border-top: none;
	padding: 4px 16px;
	color: #999;
	font-size: 16px;
	text-align: center;
}

.character h2 {
	color: #51586a;
	font-variant: small-caps;
	font-size: 18px;
	border-bottom: 1px solid #434857;
	margin-top: 0;
}

.feat,
.spell,
.equipment-item,
.move,
.boon {
	display: inline-block;
	margin: 0 20px 20px 0;
}

.feat,
.spell,
.equipment-item,
.move {
	border: 4px solid #434857;
}

.item-common {
	border-color: #999;
}

.item-uncommon {
	border-color: #10630d;
}

.item-rare {
	border-color: #366cab;
}

.item-very-rare {
	border-color: #6b0e9c;
}

.item-legendary {
	border-color: #9c7d2f;
}

.item-artefact {
	border-color: #be8972;
}

.feat img,
.equipment-item img,
.spell img,
.move img,
.boon img {
	width: 56px;
	height: 56px;
}

.feat-placeholder,
.item-placeholder {
	width: 64px;
	height: 64px;
}

.character-followers {
	display: flex;
	flex-wrap: wrap;
}

.follower {
	width: 340px;
	border: 8px solid #434857;
	padding: 12px 20px;
	margin: 20px 20px 0 0;
	box-shadow: 2px 3px 10px 0 rgba(0, 0, 0, .7);
}

.follower.unit {
	border-color: #c53131;
}

.follower-name {
	text-align: center;
	color: #51586a;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 18px;
	border-bottom: 1px solid #434857;
	padding-bottom: 10px;
	margin-bottom: 10px;
}

.unit .follower-name {
	color: #c53131;
}

.follower-ancestry {
	text-transform: uppercase;
	color: #999;
	margin-bottom: 10px;
	font-weight: bold;
}

.follower-ancestry + .follower-ancestry {
	margin-top: -10px;
}

.follower-stats {
	border-top: 1px solid #434857;
}

.follower-pair {
	border-bottom: 1px solid #434857;
	display: flex;
	justify-content: space-between;
}

.follower-pair.half-width:nth-child(odd) {
	padding-right: 10px;
}

.follower-pair.half-width:nth-child(even) {
	padding-left: 10px;
}

.follower-pair.half-width {
	display: inline-flex;
	width: 50%;
}

.follower-pair strong {
	text-transform: uppercase;
}

.num {
	font-family: sans-serif;
}

.follower h3 {
	font-size: 14px;
	text-transform: uppercase;
	font-weight: bold;
	color: #51586a;
	margin: 0 0 4px 0;
}

.follower .follower-pair + h3 {
	margin-top: 20px;
}

.follower p {
	margin-bottom: 6px;
}

.follower .spell {
	margin: 0 10px 10px 0;
}

.follower .spell img {
	width: 40px;
	height: 40px;
}

.border {
	border-width: 16px;
	border-style: solid;
	border-image-repeat: round;
	border-image-width: 5;
}

.border.standard {
	border-image-source: url('/campaigns/img/borders/standard.png');
	border-image-slice: 272;
}

.border.heroic {
	border-image-source: url('/campaigns/img/borders/heroic.png');
	border-image-slice: 486;
	border-image-width: 10;
	width: 437px;
	left: -20px;
	height: 576px;
	top: -10px;
}

.border.item {
	border-image-source: url('/campaigns/img/borders/item.png');
	border-image-slice: 284;
}

.portrait .decoration {
	position: absolute;
	left: -28px;
	display: flex;
	width: 450px;
}

.portrait .decoration.top {
	justify-content: space-between;
	align-items: flex-end;
	top: -114px;
}

.portrait .decoration.bottom {
	justify-content: center;
	align-items: flex-start;
	gap: 24px;
}

.portrait .decoration.centrepiece {
	justify-content: center;
	top: -22px;
}

.decoration .angel {
	width: 123px;
	height: 157px;
	background-image: url('/campaigns/img/borders/heroic-angel.png');
	background-size: cover;
}

.decoration .angel.left {
	transform: scaleX(-1);
}

.decoration .filigree {
	width: 102px;
	height: 25px;
	background-image: url('/campaigns/img/borders/heroic-bottom.png');
	background-size: cover;
}

.decoration .filigree.right {
	transform: scaleX(-1);
}

.decoration.top .centrepiece {
	display: flex;
	align-items: center;
	justify-content: center;
}

.decoration .wings {
	width: 77px;
	height: 36px;
	background-image: url('/campaigns/img/borders/heroic-top.png');
	background-size: cover;
}

.decoration .wings.right {
	transform: scaleX(-1);
}

.decoration .stud {
	width: 35px;
	height: 35px;
	background-image: url('/campaigns/img/borders/heroic-stud.png');
	background-size: cover;
}

#item-card {
	position: absolute;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	width: 256px;
	box-shadow: 2px 2px 15px rgba(0, 0, 0, .75);
}

.item-name {
	font-size: 18px;
	width: 100%;
	text-align: center;
	background-color: #252830;
}

.item-name.border.item {
	border-width: 8px;
}

.item-img {
	background-color: #f3f3f3;
	height: 256px;
	width: 256px;
	background-position: center;
}

.followers h2 {
	margin-bottom: 0;
}

.followers + .epilogue {
	margin-top: 20px;
}

.epilogue {
	border-bottom: 1px solid #434857;
}

.epilogue h2 {
	margin: 0;
}

.epilogue p {
	margin: 0;
	padding: 0 10px 10px;
	background-color: rgba(0, 0, 0, .15);
	font-style: italic;
	font-size: 16px;
	text-align: justify;
}

.epilogue h2 + p {
	padding-top: 10px;
}