dnd/deadsands/deadsands-theme/static/deadsands/css/style.css

@font-face {
    font-family: 'display'; 
    src: url('/theme/deadsands/fonts/RewardPersonalUseRegular-qZAl5.ttf');
}
@font-face {
    font-family: 'headers'; 
    src: url('/theme/deadsands/fonts/edmunds.otf');
}
@font-face {
    font-family: 'body'; 
    src: url('/theme/deadsands/fonts/LibreBaskerville-Regular.ttf');
    font-weight: normal;
}
@font-face {
    font-family: 'body'; 
    src: url('/theme/deadsands/fonts/LibreBaskerville-Bold.ttf');
    font-weight: bold;
}
@font-face {
    font-family: 'body'; 
    src: url('/theme/deadsands/fonts/LibreBaskerville-Italic.ttf');
    font-style: italic;
    font-weight: normal;
}
@font-face {
    font-family: 'nav';
    src: url('/theme/deadsands/fonts/marlboro.regular.ttf');
}
@font-face {
    font-family: 'dropcase';
    src: url('/theme/deadsands/fonts/edmunds_distressed.otf');
}
@font-face {
    font-family: 'note';
    src: url('/theme/deadsands/fonts/ReenieBeanie-Regular.ttf');
}

html, body {
    width:100%;
    height:100%;
}

/* Space out content a bit */
body {
  background: #702623;
  padding-bottom: 20px;
}

#background {
  position: relative;
  z-index: 1;
  min-height: 500px;
  background: #EFDFBE;
  background-image: url("/theme/deadsands/background.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: bottom;
}

a {
    color: #702623;
    text-decoration: none;
    font-weight: bold;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h5 a {
    font-weight: inherit;
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: 0.05em;
    padding:0px;
    font-family: 'headers';
    text-align: center;
    color: #692F28;
    margin: 0px auto;
    margin-bottom: 0.5em;
    width: 100%;
}

h4, h5, h6 {
    color: inherit;
}

h1 { font-size: 4.0em; }
h2 { font-size: 3.5em; }
h3 { font-size: 2.5em; }
h4 { font-size: 2.0em; }
h5 { font-size: 1.5em; }
h6 { font-size: 1.25em; }

.container h3:before, .container h3:after {
    content: "★";
    font-size: 0.75em;
    padding: 0px 5px;
    color:#cca138;
}
.container a:hover, .container a:active {
    color:#cca138;
}

.container .box h2:first-of-type {
  text-transform: capitalize;
  text-align: center;
}

.container .box h2:first-of-type a {
    color: inherit;
}

.container .box {
    position: relative;
    width: 100%;
    max-width:960px;
    text-align: justify;
    font-family: 'body';
    background: rgb(244,241,232);
    background: radial-gradient(circle, rgba(255,255,255,1) 35%, rgba(244,241,232,1) 100%);
}

.container .box p:last-of-type {
    padding-bottom: 1.5em;
}

.container .box p:first-of-type::first-letter {
    font-family: 'dropcase';
    font-size: 5em;
    float: left;
    margin: 0px;
    margin-top: -0.25em;
    padding: 0px;
    padding-right: 5px;
    color: #692F28;
}

.container .box article.recent p:first-of-type::first-letter,
.summary p:first-of-type::first-letter {
    font-family: inherit !important;
    font-size: inherit !important;
    float: inherit !important;
    margin: inherit !important;
    padding: inherit !important;
    color: inherit !important;
}

img {
    width:100%;
}

.key_image {
    display: block;
    margin: 0px auto;
    max-width: calc(100% - 1em);
    height: auto;
    box-shadow: inset 0px 0px 40px 0px rgba(0,0,0,1); 
    border: 10px solid black;
}
.key_image img {
    background-color:#FFF;
    position: relative;
    z-index: -1;
}

.gallery_image {
    max-width: 300px;
    height: auto;
    margin: 0px auto;
}

.gallery_image a {
    position: relative;
    display: block;
    border: 5px solid black;
}
.gallery_image a:active, .gallery_image a:hover {
    border-color:#cca138;
}
.gallery_iamge a img {
    position: relative;
}
.gallery_image span {
    display: block;
    padding: 10px;
    text-justify: left;
}

.thumbnail {
    float: right;
    max-width: 150px;
    margin-left: 1em;
}
.thumbnail img {
    border: 1px solid black;
    box-shadow: inset 0px 0px 4px 0px rgba(0,0,0,1); 
    max-width: 150px;
    max-height: 150px;
    height: auto;
}

article.recent {
    font-style: italic;
    margin-bottom: 1em;
    width: 100%;
}
article.recent a.title {
    font-weight; bold;
    font-style: normal;
}

article.recent .pull, 
article.recent h3,
article.recent h4,
article.recent h5,
article.recent h6 {
    display: none;
}

/* Custom page header */
.header {
  position: relative;
  display: block;
  margin: 0px auto;
  padding: 0px;
  text-align: center;
}

#header_background {
  width: 100%;
  background: #EFDFBE;
}
/* Make the masthead heading the same height as the navigation */
.header .title {
  position: relative;
  display: block;
  z-index: 2;
}

.header .sun {
    position: absolute;
    top: 1.5em;
    left: 62%;
    display: inline-block;
    width: 6em;
    height: 6em;
    border-radius: 50%;
    background-color: #D9B645;
    z-index: 1;
}

.header .title h1 {
  font-family: 'display';
  font-size: 7em;
  margin: 0;
  padding: 0;
  letter-spacing: 0.15em;
}
.header .title h1 a{
    color: #692F28;
    text-decoration:none;
    font-weight: normal;
}

.byline {
    font-size: 1.25em;
    font-family: 'nav'; 
    text-transform: uppercase;
    margin-bottom: 0.5em;
}

table {
    padding: 1em;
    width: 100%;
    margin: 1em 0em;
}
th {
    border-bottom: 1px solid #999;
}
td {
    width: auto;
    padding-right: 1em;
}
tr:nth-child(even) {
    background: rgba(244,241,232, 0.5);
}
tr:nth-child(odd) {
    background: rgba(255,255,255, 0.5);
}

tr td:last-of-type: {
    width: 100%;
    padding-right: 0;
}

table.archive-list td.date, td.category {
    white-space: nowrap;
    width: auto;
    font-size: 1.25em;
    font-family: 'nav'; 
    text-transform: uppercase;
}
table.archive-list td.title {
    width: 100%;
    text-transform: capitalize;
}

/* Column-first tables /*
/* don't delete */

ol {
    display: block;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: start;
    width: 100%;
    margin: 0;
    list-style: none;
    padding: 0;
    text-justify: left;
}

/* row */
ol > li {
    width: 100%;
}

ol > li:nth-child(even) {
    background: rgba(244,241,232, 0.5);
}
ol > li:nth-child(odd) {
    background: rgba(255,255,255, 0.5);
}

ol > li:first-of-type {
    background: transparent;
    font-weight: bold;
    border-bottom: 1px solid #999;
}
ol > li > ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: start;
    justify-content: space-between;
    padding: 0px;
}

ol > li ul > li {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    list-style-type: none;
    padding: 0.5em;
    text-align: left;
}

ol > li > ul > li:first-child:nth-last-child(1) { min-width: 100%; }
ol > li > ul > li:first-child:nth-last-child(2), ol > li > ul > li:first-child:nth-last-child(2) ~ li { width: 100%; }
ol > li > ul > li:first-child:nth-last-child(3), ol > li > ul > li:first-child:nth-last-child(3) ~ li { width: 50%; }
ol > li > ul > li:first-child:nth-last-child(4), ol > li > ul > li:first-child:nth-last-child(4) ~ li { width: 33%; }
ol > li > ul > li:first-child:nth-last-child(5), ol > li > ul > li:first-child:nth-last-child(5) ~ li { width: 25%; }
ol > li > ul > li:first-child:nth-last-child(6), ol > li > ul > li:first-child:nth-last-child(6) ~ li { width: 20%; }

ol > li:first-child > ul > li:last-of-type {
    display: none;
}
ol > li > ul li:last-of-type {
    flex-direction: column;
    width: 100% !important;
    margin-left: 3em;
    margin-bottom: 1em;
}

.archive-list {
}
.archive-list  ul {
}
.archive-list li {
    list-style: none;
    font-family: 'nav'; 
    font-size: 1.25em;
}

/* Custom page footer */
.footer {
    text-align: right;
}

#content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: start;
    width: 100%;
}

.content {
    font-family: 'body';
    position: relative;
}

.column {
    margin: 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: row;
}

.cards {
    flex-direction: row;
    margin: 1em auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: start;
    width: 100%;
}

.cards .card {
    display: flex;
    flex: 0 1 calc(50% - 2em);
    margin: 1em auto;
    width: 100%;
    min-height: 200px;
}
.cards .card article {
    width: 100%;
    min-height: 100px;
}

.scrap {
    display: block;
    float: right;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    
}

.scrap .note {
    font-family: 'note';
    font-size: 1.5em;
    line-height: 1.0em;
    text-align: left;
    width: 200px;
    padding: 10px;
    min-height: 200px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 60%), 0 0 25px rgba(0, 0, 0, 20%) inset;
    background: #e8d4b3;

}
.note address{
    display:inline;
}

.bottom-nav{display:none;}
.bottom-nav a{margin-left:15px;}

.container {
    position: relative;
    z-index: 1;
    padding: 20px 0px;
    max-width:960px;
}

.container:after {
    content:"";
    display:block;
    clear:both;
    visibility:hidden;
    height:0;
    font-size:0;
}

hr {
  font-size: 2em;
  position: relative;
  outline: 0;
  border: 0;
  color: #692F28;
  text-align: center;
  margin: 10px auto;
  opacity: 1;
}

hr:before {
    content: '';
    background: linear-gradient(to right, transparent, #000, transparent);
    background: #000;
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
}
hr:after {
    content: '⭑';
    position: relative;
    display: inline-block;
    color: #000;
    font-weight: bold;
    padding: 0 0.25em;
    line-height: 1.5em;
    background: transparent;
    text-shadow: -2px 0 #FFF, 0 2px #FFF, 2px 0 #FFF, 0 -2px #FFF;
}


hr.divider {
  font-size: 2em;
  font-weight: bold;
  line-height: 1em;
  position: relative;
  outline: 0;
  border: 0;
  color: #000;
  text-align: center;
  height: 1.5em;
  margin: 0px auto;
  width: 100%;
}
hr.divider:before {
    content: '';
    background: #000;
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
  }
hr.divider:after {
    content: '☠';
    position: relative;
    display: inline-block;
    color: #000;
    font-weight: bold;
    padding: 0 0.25em;
    line-height: 1.5em;
    background-color: transparent;
    text-shadow: none;
}

.pager {
    font-family: 'nav';
    text-align:center;
    text-justify: center;
}
.pager .prev {
    flex: 0 1 calc(50% - 2em);
    line-height: 2em;
}
.pager .middle {
    display: none;
    flex: 0 1 2em;
    font-size: 2em;
    line-height: 1em;
    padding: 0px;
}
.pager .next {
    flex: 0 1 calc(50% - 2em);
    line-height: 2em;
}

ul.nav {
    font-family: 'nav';
    display: block;
    padding: 0px;
    margin: 0px;
}
ul.nav li {
    width: 100%;
    display: block;
    padding: 0px 10px;
}
ul.nav li:hover, ul.nav li:active {
    background-color: #D9B645;
}

ul.nav li a, .pager a {
    text-transform: uppercase;
    font-size: 1.5em;
    color: #000;
}
ul.nav li:first-child:before {
    display: none;
    content: '⭑';
    padding-right: 1em;
}
ul.nav li:after {
    display: none;
    content: '⭑';
    padding-left: 1em;
}

ul.nav li a:hover, ul.nav li a:active {
    text-decoration: underline;
}

ul.cloud {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  line-height: 2.75rem;
  width: 450px;
}

ul.cloud a {
  /*
  Not supported by any browser at the moment :(
  --size: attr(data-weight number);
  */
  --size: 4;
  --color: #a33;
  color: var(--color);
  font-family: 'headers';
  font-size: calc(var(--size) * 1.0rem + 0.5rem);
  display: block;
  padding: 0.125rem 0.25rem;
  position: relative;
  text-decoration: none;
  /*
  For different tones of a single color
  opacity: calc((15 - (9 - var(--size))) / 15);
  */
}

ul.cloud a[data-weight="1"] { --size: 1; }
ul.cloud a[data-weight="2"] { --size: 2; }
ul.cloud a[data-weight="3"] { --size: 3; }
ul.cloud a[data-weight="4"] { --size: 4; }
ul.cloud a[data-weight="5"] { --size: 6; }
ul.cloud a[data-weight="6"] { --size: 8; }
ul.cloud a[data-weight="7"] { --size: 10; }
ul.cloud a[data-weight="8"] { --size: 13; }
ul.cloud a[data-weight="9"] { --size: 16; }

ul[data-show-value] a::after {
  content: " (" attr(data-weight) ")";
  font-size: 1rem;
}

ul.cloud li:nth-child(2n+1) a { --color: #181; }
ul.cloud li:nth-child(3n+1) a { --color: #33a; }
ul.cloud li:nth-child(4n+1) a { --color: #c38; }

ul.cloud a:focus {
  outline: 1px dashed;
}

ul.cloud a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 100%;
  background: var(--color);
  transform: translate(-50%, 0);
  opacity: 0.15;
  transition: width 0.25s;
}

a.disabled,
a.disabled:active,
a.disabled:hover {
    color: #333;        
}

.two-column {
    column-count: 2;
    display: block;
}

.two-column div {
    break-inside: avoid-column;
}

.read {
    margin: 1em;
    margin-top: 0em;
    text-align: left;
    padding: 10px;
    background: rgba(255,255,255, 0.5);
}

/* Stat block typography */

.statblock {
    padding: 1em;
    margin: 3em;
    background: #e8d4b3;
    background: rgba(244,241,232, 0.5);
    border: 1px solid #333;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 60%), 0 0 25px rgba(0, 0, 0, 20%) inset;
}

.statblock h4, h5, h6 {
    text-transform: capitalize;
    text-align: left;
    margin: 0;
}

.statblock table {
    margin: 0;
}

.statblock table tr, .statblock table tr td {
    background: inherit;
}
.statblock table tr th, 
.statblock table tr td {
    vertical-align: top;
    padding-right: 2em;
}
.statblock table tr td:first-of-type {
    font-weight: bold;
    white-space: nowrap;
}
.statblock table tr td:first-of-type:last-of-type {
    font-weight: normal;
    white-space: wrap;
}

.statblock table tr:last-child,
.statblock table tr:last-child {
    padding-right: 1em;
}
.statblock table tr:nth-child(even) {
    background: rgba(244,241,232, 0.5);
}
.statblock table tr:nth-child(odd) {
    background: rgba(255,255,255, 0.3);
}



.statblock dl {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  width: 100%;
  overflow: visible;
}
.statblock dl dt {
  flex: 0 0 25%;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-bottom: 2em;
}
.statblock dl dd {
  flex:0 0 75%;
  margin-left: auto;
  margin-bottom: 3em;
  text-align: left;
  text-overflow: ellipsis;
  overflow: hidden;
}

.statblock .inner {
    display: none;
}

.statblock > .stat {
    font-weight: bold;
}

.statblock > .stat > .value {
    font-weight: normal;
    margin-left: 0.5em;
}

.monster {
    font-family: Roboto,Helvetica,sans-serif !important;
    text-align: justify;
    font-size: 0.9em;
    column-count: 2;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;
}

.monster h3, h4 {
    margin-bottom: 0;
}

.monster h4 {
    margin-top: 1em;
    border-bottom: 1px solid #000;
}

.monster hr {
    content: "";
    display: block;
    width: 100%;
    margin: 10px 0px;
}

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


.pull {
    float: right;
    max-width: 40%;
    margin: 1em;
    margin-top: 0px;
    background: rgba(244,241,232, 0.5);
    padding: 1em;
    border: 1px solid #888;
    text-justify: left !important;
}
.pull h4 {
    font-size: 1.5em;
}


@media screen and (min-width: 900px) {
  .column {
      flex: 0 1 calc(50% - 2em);
      flex-direction: column;
      margin: 0px;
  }
}
@media screen and (min-width: 768px) {

  /* affix the background */
  #background {
      background-attachment: fixed;
      min-height: 100%;
  }

  /* set nav bars to horizontal */
  ul.nav {
    display: inline-flex;
    justify-content: space-between;
  }
  ul.nav li {
      display: flex;
      width: auto;
  }

  .pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .pager .middle {
      display: block;
  }

  .pager .prev {
    text-align: right;
  }
  .pager .next {
      text-align: left;
  }

  div.location {
      display: block;
      clear: both;
  }
  div.location:hover, div.location:active {
      background: rgba(244,241,232, 0.5);
      cursor: pointer;
  }

  div.location:hover h4 a, div.location:active h4 a {
    color:#cca138;
  }

  .container .box p:first-of-type::first-letter {
    margin-bottom: -0.5em;
  }

  /* enable fancy star decorations */
  ul.nav li:first-child:before,ul.nav li:after {
      display: inherit;
  }

  /* disable background highlight on hover */
  ul.nav li:hover, ul.nav li:active {
      background: inherit;
  }

  .scrap {
      margin-top: -7.5em;
      margin-right: -4em;
      padding: 20px;
  }
  .scrap .note {
      transform: rotate(6deg);
  }

}

/* Curled corners */
.curled {
    position: relative;
    border: 1px solid #efefef;
    -moz-border-radius: 0 0 120px 120px / 0 0 6px 6px;
    border-radius: 0 0 120px 120px / 0 0 6px 6px;
    padding: 1em;
    margin: 2em 0px;
    background: #fff;
    -webkit-box-shadow: 0 1px 4px rgb(0 0 0 / 60%), 0 0 40px rgb(0 0 0 / 30%) inset;
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 0, 0, 0.3) inset;
    box-shadow: 0 1px 4px rgb(0 0 0 / 60%), 0 0 40px rgb(0 0 0 / 30%) inset;
}


.curled:before,
.curled:after {
    content:"";
    position:absolute;
    z-index:-2;
    bottom:17px;
    left:10px;
    width:50%;
    height:55%;
    max-width: 200px;
    max-height: 100px;

    -webkit-box-shadow:0 26px 6px rgba(0, 0, 0, 0.6);
    -moz-box-shadow:0 26px 6px rgba(0, 0, 0, 0.6);
    box-shadow:0 26px 6px rgba(0, 0, 0, 0.6);
    -webkit-transform:skew(-8deg) rotate(-3deg);
    -moz-transform:skew(-8deg) rotate(-3deg);
    -ms-transform:skew(-8deg) rotate(-3deg);
    -o-transform:skew(-8deg) rotate(-3deg);
    transform:skew(-8deg) rotate(-3deg);
}

.curled:after {
    right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
    -moz-transform:skew(8deg) rotate(3deg);
    -ms-transform:skew(8deg) rotate(3deg);
    -o-transform:skew(8deg) rotate(3deg);
    transform:skew(8deg) rotate(3deg);
}

.dm {
    display: none !important;
}