.rpg-ff-page{
width: 75%;
  margin: 50px auto;
  background: var(--accent1);
}

.rpg-ff-modal-box h3 {
font-size: 20px;
  font-family: var(--mainfont);
  text-transform: lowercase;
  color: var(--golden);
  margin: 0px;
  margin-bottom: 5px;
	margin-bottom:20px;
}

.rpg-ff-modal{display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.65);align-items:center;justify-content:center;padding:20px}
.rpg-ff-modal.is-open{display:flex}

.rpg-ff-modal-content h1 {
margin-bottom: 10px !important;
  margin-top: 20px;
}

.rpg-ff-modal-content h1 span {
background: none !important;
  height: 10px !important;
  font-family: var(--font) !important;
  color: var(--fontcolor) !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  border: 1px solid var(--golden);
  padding: 5px 8px !important;
  width: auto !important;
  border-bottom: 1px solid var(--golden) !important;
  display: unset !important;
}

.rpg-ff-modal-box{
position: relative;
  max-width: 700px;
  width: 100%;
  max-height: 80vh;
  overflow: auto;
  padding: 22px;
  background: var(--accent2);
  border: 1px solid var(--line);
}

.rpg-ff-modal-close{position:absolute;top:10px;right:12px;border:0;background:transparent;color:#f5d78e;font-size:28px;cursor:pointer}

.rpg-ff-modal-open{
cursor: pointer;
  padding: 5px 8px;
  border: 1px solid var(--golden);
}

.rpg-ff-subspecies {
display: flex;
  justify-content: center;
  margin-top: 15px;
}

.rpg-ff-modal-content{
line-height: 170%;
  text-align: justify;
  font-size: 12px;
}

.rpg-ff-pagination{margin:22px 0;text-align:center}.rpg-ff-pagination .pagination{display:inline-flex;gap:6px;flex-wrap:wrap;justify-content:center}

.db_line {
height: 1px;
  background: var(--line);
  width: 50%;
  margin: auto;
  margin-top: 15px;
}

.db_fact {
margin-bottom:10px;
	font-size:12px;
}

.rpg-ff-card-body div strong {
font-size: 10px;
  text-transform: uppercase;
  color: var(--golden);
  letter-spacing: 1px;
}

.db_facts {
display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: left;
	margin-bottom: 10px;
}

.rpg-ff-page h1 span {
border-bottom: 1px solid var(--line);
  font-size: 30px;
  font-weight: bold;
  font-family: var(--mainfont);
  text-transform: lowercase;
  color: var(--golden);
  padding: 20px;
  background-image: var(--header);
  background-position-y: 95%;
  height: 100px;
  display: flex;
  align-items: center;
  padding-left: 60px;
  background-size: 100%;
}

.rpg-ff-filter{
display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0 0 20px;
  justify-content: center;
}

.rpg-ff-filter label{
font-weight: bold;
  font-size: 10px;
  display: block;
  width: 100%;
  margin-bottom: -6px;
  text-transform: uppercase;
  color: var(--golden);
  letter-spacing: 1px;
	height: 25px;
  margin-top: 10px;
}

.rpg-ff-filter select,.rpg-ff-filter button{padding:7px 9px}

.rpg-ff-grid{
display: flex;
  gap: 10px;
  flex-wrap: wrap;
	box-sizing: border-box;
  padding: 20px;
}

.rpg-ff-card {
	background: var(--accent2);
  width: 32.6%;
}

.rpg-ff-image img{display:block;width:100%;height:180px;object-fit:cover}.rpg-ff-placeholder{height:180px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);opacity:.8}.rpg-ff-card-body{padding:14px}

.rpg-ff-category{
display: inline-block;
  margin-bottom: 6px;
  padding: 2px 8px;
  background: var(--golden);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: bold;
}

.rpg-ff-card h2{
margin: 0 0 8px;
  font-size: 20px;
  color: var(--golden);
  text-transform: lowercase;
  font-family: var(--mainfont);
}
.rpg-ff-occurrence{
text-transform: uppercase;
  font-size: 9px;
  border: 1px solid var(--golden);
  padding: 3px 5px;
}

.rpg-ff-description{
line-height: 170%;
  margin-top: 12px;
  height: 140px;
  overflow: auto;
  text-align: justify;
  font-size: 12px;
  padding-right: 16px;
}

.rpg-ff-empty{padding:20px;border:1px dashed rgba(255,255,255,.2);border-radius:10px;text-align:center;grid-column:1/-1}