/*# sourceMappingURL=die.css.map */
html {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

body {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline;
  line-height: 1;
  color: #000;
  background: whitesmoke;
  font: 18px sans-serif;
  display: grid;
  max-width: 800px;
  min-height: 0;
  min-width: 400px;
  margin: 0 auto;
  grid-template-rows: 150px 1fr 50px;
  grid-template-columns: auto;
  line-height: 1;
  font: 18px sans-serif;
  display: grid;
  max-width: 800px;
  min-height: 0;
  min-width: 400px;
  margin: 0 auto; }

div {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

span {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

applet {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

object {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

iframe {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

h1 {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline;
  border-bottom: 1px solid #ccc !important;
  text-transform: uppercase;
  text-align: center;
  margin: 1em 0;
  padding-bottom: 1em 0;
  font-weight: bold; }

h2 {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

h3 {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

h4 {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

h5 {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

h6 {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

p {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

pre {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

a {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline;
  color: #111;
  text-decoration: none;
  border-bottom: 1px dotted transparent; }
  a:hover {
    color: #8807eb;
    border-bottom-color: #8807eb; }

abbr {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

acronym {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

address {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

big {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

cite {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

code {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

del {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

dfn {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

em {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline;
  font-style: italic; }

img {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline;
  font-style: italic; }

ins {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

kbd {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

q {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

s {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

samp {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

small {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

strike {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

strong {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline;
  font-weight: bold; }

sub {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

sup {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

tt {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

var {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

dl {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

dt {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

dd {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

ol {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

ul {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

li {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

form {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

label {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

legend {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

table {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

caption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

tbody {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

tfoot {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

thead {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

tr {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

th {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; }

body.body-article {
  grid-template-rows: 1fr 50px !important;
  grid-template-columns: 80px auto; }

#grid-head {
  display: block;
  padding: 1em 0;
  grid-column: 1; }

#grid-head-article {
  display: block;
  padding: 1em 0;
  grid-column: 1; }

#grid-body {
  min-height: 85vh;
  grid-column: 1;
  grid-row: 2; }

#grid-body-article {
  min-height: 85vh;
  grid-column: 2;
  grid-row: 1; }

#grid-foot {
  grid-column: 1; }
  #grid-foot #footer {
    padding: 0;
    text-align: center;
    display: flex;
    justify-content: space-between;
    padding: 1em 0; }

#grid-foot-article {
  grid-column: 2; }
  #grid-foot-article #footer {
    padding: 0;
    text-align: center;
    display: flex;
    justify-content: space-between;
    padding: 1em 0; }

.lightgrey {
  color: #969696; }

.draft-post:before {
  color: red;
  content: "[D]"; }

.no-bullets {
  list-style-type: none !important; }

#header {
  font-size: 18px;
  text-align: center;
  margin: 0 auto;
  width: 17rem;
  place-items: center;
  display: grid; }
  #header #title {
    color: #000;
    font-size: 20px;
    font-weight: 700;
    padding-bottom: 0.25em;
    border-bottom: 2px solid #777; }
  #header #menu {
    margin-top: 0.7em;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 17rem; }

.uppercase {
  text-transform: uppercase; }

.article-entry {
  color: #111;
  padding: 0; }
  .article-entry a {
    border-bottom: 1px dotted #000; }
  .article-entry h1 {
    font-size: 1.5em;
    margin-top: 1vmin;
    border-bottom: 2px solid #777;
    font-weight: 600;
    line-height: 1.4em;
    margin: 1em 0; }
  .article-entry h2 {
    font-size: 1.3em;
    border-bottom: 2px solid #777;
    margin-top: 1em;
    font-weight: 600;
    line-height: 1.4em;
    margin: 1em 0; }
  .article-entry h3 {
    font-size: 1.2em;
    font-weight: 600;
    line-height: 1.4em;
    margin: 1em 0; }
  .article-entry h4 {
    font-size: 1.1em;
    font-weight: 600;
    line-height: 1.4em;
    margin: 1em 0; }
  .article-entry h5 {
    font-size: 1em;
    font-weight: 600;
    line-height: 1.4em;
    margin: 1em 0; }
  .article-entry h6 {
    font-size: 1em;
    color: #939393;
    font-weight: 600;
    line-height: 1.4em;
    margin: 1em 0; }
  .article-entry hr {
    border: 1px dashed #ddd; }
  .article-entry strong {
    font-weight: bold; }
  .article-entry em {
    font-style: italic; }
  .article-entry cite {
    font-style: italic; }
  .article-entry sup {
    font-size: 0.75em;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    top: -0.5em; }
  .article-entry sub {
    font-size: 0.75em;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    bottom: -0.2em; }
  .article-entry small {
    font-size: 0.85em; }
  .article-entry acronym {
    border-bottom: 1px dotted; }
  .article-entry abbr {
    border-bottom: 1px dotted; }
  .article-entry ul {
    margin: 0 20px;
    line-height: 1.4em;
    list-style: inside;
    margin-top: 1.4em;
    margin-bottom: 1.4em; }
    .article-entry ul ul {
      margin-top: 0;
      margin-bottom: 0; }
    .article-entry ul ol {
      margin-top: 0;
      margin-bottom: 0; }
  .article-entry ol {
    margin: 0 20px;
    line-height: 1.4em;
    list-style: decimal;
    margin-top: 1.4em;
    margin-bottom: 1.4em; }
    .article-entry ol ul {
      margin-top: 0;
      margin-bottom: 0; }
    .article-entry ol ol {
      margin-top: 0;
      margin-bottom: 0; }
  .article-entry dl {
    margin: 0 20px;
    line-height: 1.4em;
    margin-top: 1.4em;
    margin-bottom: 1.4em; }
  .article-entry dt {
    font-weight: bold; }
  .article-entry pre {
    margin-top: 1em;
    font-size: 14px;
    background: #23241f;
    padding: 15px 0;
    overflow: auto;
    color: #fff;
    line-height: 22.4px;
    font-family: Consolas, Monaco, Menlo, Consolas, monospace;
    padding: 0.5em;
    white-space: pre-wrap; }
    .article-entry pre code {
      background: none;
      text-shadow: none;
      padding: 0; }
    .article-entry pre .highlight {
      padding: 0; }
  .article-entry .highlight {
    margin: 0;
    font-size: 14px;
    background: #23241f;
    padding: 15px 0;
    overflow: auto;
    color: #fff;
    line-height: 22.4px; }
    .article-entry .highlight .gutter pre {
      color: #666;
      font-size: 0.85em;
      text-align: right; }
    .article-entry .highlight pre {
      border: none;
      margin: 0;
      padding: 0 20px; }
    .article-entry .highlight table {
      margin: 0;
      width: auto; }
    .article-entry .highlight td {
      border: none;
      padding: 0; }
    .article-entry .highlight figcaption {
      font-size: 0.85em;
      color: highlight-comment;
      line-height: 1em;
      margin-bottom: 1em; }
      .article-entry .highlight figcaption a {
        float: right; }
    .article-entry .highlight .line {
      height: 22.4px; }
  .article-entry .gist .gist-file .gist-data .line-numbers {
    color: #666;
    font-size: 0.85em; }
  .article-entry code {
    font-family: Consolas, Monaco, Menlo, Consolas, monospace;
    background: #f2f2f2;
    padding: 0 0.3em; }
  .article-entry:before {
    content: "";
    display: table; }
  .article-entry:after {
    content: "";
    display: table;
    clear: both; }
  .article-entry table {
    line-height: 1.4em;
    margin: 1.4em 0;
    border-collapse: collapse;
    border-spacing: 0; }
  .article-entry p {
    line-height: 1.4em;
    margin: 1.4em 0 0; }
  .article-entry img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: auto; }
  .article-entry video {
    max-width: 100%;
    height: auto;
    display: block;
    margin: auto; }
  .article-entry iframe {
    border: none; }
  .article-entry th {
    font-weight: 600;
    border-bottom: 3px solid #777;
    padding-bottom: 0.5em; }
  .article-entry td {
    border-bottom: 1px solid #777;
    padding: 0.5em 1em; }
  .article-entry blockquote {
    font-family: serif;
    font-size: 1.2em;
    margin: 1.4em 20px;
    text-align: center;
    font-style: italic; }

.archive-card-title {
  font-size: 1.1em; }

.article {
  padding: 15px 0;
  overflow: hidden; }

.article-header {
  margin-bottom: 0.5em;
  padding-bottom: 0.5em;
  font-size: 1em;
  font-weight: 600;
  text-transform: uppercase;
  border-bottom: 2px solid #777;
  font-size: 2em;
  font-weight: 800;
  border: none !important; }

#article-updates {
  border: 1px dotted #000;
  border-radius: 0.5em;
  padding: 0.5em 1em;
  margin-top: 1em; }
  #article-updates ul {
    margin: 0 20px; }

.time {
  color: #888; }

.flex {
  display: flex;
  flex-flow: wrap;
  gap: 0em;
  justify-content: center;
  align-items: stretch;
  gap: 0 !important;
  justify-content: center; }
  .flex section {
    width: 100%; }
    .flex section h3 {
      border-bottom: 2px solid #777;
      text-transform: uppercase;
      margin-top: 2vmin;
      margin-bottom: 0.5em;
      padding-bottom: 0.5em; }
  .flex p {
    margin: 5px 0 !important;
    margin: 5px 0 !important; }
  .flex div {
    flex-basis: 20%;
    flex-basis: 20%; }

.centerflex {
  display: flex;
  flex-flow: wrap;
  gap: 0em;
  justify-content: center;
  align-items: stretch; }
  .centerflex section {
    width: 100%; }
    .centerflex section h3 {
      border-bottom: 2px solid #777;
      text-transform: uppercase;
      margin-top: 2vmin;
      margin-bottom: 0.5em;
      padding-bottom: 0.5em; }
  .centerflex p {
    margin: 5px 0 !important; }
  .centerflex div {
    flex-basis: 20%; }

.card {
  padding: 0.1em;
  border-radius: 2em;
  min-width: 400px;
  padding: 0.1em;
  border-radius: 2em;
  min-width: 400px; }

.card-head {
  border-bottom: 2px solid #aaa;
  border-radius: 2em 2em 0 0;
  padding: 0.5em 0;
  font-variant: small-caps;
  font-weight: bold;
  background: #dddddd;
  font-size: 1.2em;
  border-bottom: 2px solid #aaa;
  border-radius: 2em 2em 0 0;
  padding: 0.5em 0;
  font-variant: small-caps;
  font-weight: bold;
  background: #dddddd;
  font-size: 1.2em; }

.card-body {
  background: #eeeeee;
  min-height: 100px;
  border-radius: 0 0 2em 2em;
  padding: 5px 0;
  background: #eeeeee;
  min-height: 100px;
  border-radius: 0 0 2em 2em;
  padding: 5px 0; }

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

input {
  text-align: center;
  font-size: 1em;
  text-align: center;
  font-size: 1em; }

#starforged_result {
  font-weight: bold;
  font-weight: bold; }

.not_rolled {
  color: #ccc;
  color: #ccc; }

.rolled {
  color: #a00;
  font-weight: bold;
  color: #a00;
  font-weight: bold; }

.smallcaps {
  font-variant: small-caps;
  font-variant: small-caps; }

.red {
  color: red;
  color: red; }

.bold {
  font-weight: bold;
  font-weight: bold; }

.crit {
  font-variant: small-caps;
  font-weight: bold;
  color: red;
  font-variant: small-caps;
  font-weight: bold;
  color: red; }

.roll_preset {
  background: #eee;
  border-radius: 8px;
  padding: 0.3em 0.5em;
  width: 5em;
  font-size: 1em !important;
  border: 1px solid #ccc;
  background: #eee;
  border-radius: 8px;
  padding: 0.3em 0.5em;
  width: 5em;
  font-size: 1em !important;
  border: 1px solid #ccc; }

.hidden {
  display: none;
  display: none; }

select {
  font-size: 1.5em;
  text-align: center;
  font-size: 1.5em;
  text-align: center; }

#minimal-grid-body {
  min-height: 0 !important;
  min-width: 400px !important;
  max-width: 600px !important;
  margin: 0 auto;
  height: fit-content;
  min-height: 0 !important;
  min-width: 400px !important;
  max-width: 600px !important;
  margin: 0 auto;
  height: fit-content; }
  #minimal-grid-body div {
    margin: 4px;
    margin: 4px; }

.margin5px {
  margin: 0 5px !important;
  margin: 0 5px !important; }

.tag {
  font-size: 0.8em;
  border: 1px solid black;
  box-shadow: 3px 3px 0 black;
  padding: 3px 5px;
  margin: 4px 4px; }
  .tag a {
    text-decoration: none; }
    .tag a:hover {
      text-decoration: none; }
  .tag:hover {
    transition: 350ms ease;
    box-shadow: 0em 0em 0 #8807eb !important;
    border: 1px solid #8807eb !important; }

.tag-list {
  align-items: flex-start; }
  .tag-list div {
    flex-basis: initial; }

#menuface {
  width: 80px !important;
  height: 80px !important; }

#tag-header {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  padding-bottom: 0.5em;
  border-bottom: 2px solid #777;
  text-transform: uppercase; }

#plus_input {
  max-width: 3em !important;
  font-size: 1em !important; }

.roll_result_number {
  font-style: italic; }

.roll_selected {
  font-weight: bold;
  text-decoration: underline; }

.roll_just_a_number {
  font-style: italic; }

#custom_rolls > p {
  font-size: 1em !important;
  padding: 0 !important; }

.roll_die_set {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; }
  .roll_die_set:before {
    content: "["; }
  .roll_die_set:after {
    content: "]"; }
  .roll_die_set > span {
    padding: 0 0.5em; }

.spaced {
  padding: 0 0.5em; }

.grid {
  display: grid; }

.plus-number {
  border-radius: 1.6em;
  background: #666;
  color: #fff;
  min-width: 2em;
  min-height: 2em;
  text-align: center;
  line-height: 2em;
  font-size: 1em; }

#preset_checkbox_row {
  margin: 10px 0 !important; }

#roll_card div {
  margin: 0 !important; }

#preset_format_output .flex {
  justify-content: center !important; }
  #preset_format_output .flex span.output_flex_box {
    flex-basis: 49%; }

.output_left_label {
  color: #ccc; }

.output_roll_chunk {
  margin-left: 5px; }

.plus-number-row {
  margin: 10px; }

.hspace_20px {
  min-width: 20px;
  display: inline-block; }

#roll_preset_numbers_die_string {
  border: 1px solid #ddd;
  border-radius: 5px !important;
  padding: 5px;
  background: #efefef; }

#roll_preset_numbers_output {
  border: 1px solid #ddd;
  border-radius: 5px !important;
  padding: 5px;
  background: #efefef; }

#output_header {
  border-bottom: 3px solid #999;
  padding-bottom: 5px;
  color: #999;
  font-weight: bold;
  font-size: 1.5em; }

@media screen and (max-width: 840px) {
  body {
    width: 95% !important;
    text-align: justify; }
  #minimal-grid-body {
    max-width: 100% !important; }
  #me {
    margin: 1em 0.5em 0.5em;
    padding-bottom: 0; }
  #grid-body {
    padding: 0; }
    #grid-body article {
      padding: 0.5em;
      text-align: justify; }
  body.body-article {
    grid-template-rows: [head] "head" 80px [body] "body" 1fr [foot] "foot" 50px;
    grid-template-columns: 1fr; }
  #grid-head-article {
    grid-area: head;
    grid-column: 1;
    grid-row: 1; }
  #grid-body-article {
    grid-area: body;
    grid-column: 1;
    grid-row: 2; }
  #grid-foot-article {
    grid-area: foot;
    grid-column: 1;
    grid-row: 3;
    display: none; }
  #grid-foot {
    margin-top: 1em; }
  #menuface {
    margin: 0 auto; }
  ul {
    text-align: left; }
  .flex {
    justify-content: left;
    gap: 1em; }
    .flex section {
      width: 100%;
      max-width: 100%; }
  .flex.tag-list {
    gap: 0em;
    justify-content: center; }
  .card {
    margin: 0 0.1em !important;
    margin: 0 0.1em !important; }
    .card p {
      margin: 0.2em 0;
      margin: 0.2em 0; } }

@media screen and (max-width: 650px) {
  #minimal-grid-body {
    gap: 10px !important;
    gap: 10px !important; }
    #minimal-grid-body div {
      margin: 0 !important;
      margin: 0 !important; }
  h3 {
    margin: 0;
    margin: 0; }
  #footer {
    justify-content: center !important;
    flex-wrap: wrap;
    flex-direction: column; }
  li {
    margin: 0.2em 0; }
  #menuface {
    margin: 0 auto; }
  header .main-nav-link {
    float: none;
    text-align: center; }
  .card {
    width: 90%;
    max-width: 90%;
    min-width: 90%;
    margin: 0 0.5em;
    width: 90%;
    max-width: 90%;
    min-width: 90%;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important; }
  .card-body p {
    margin: 0 !important;
    margin: 0 !important; }
  .tag {
    font-size: 0.9em; }
  .tag-list div {
    margin: 0.4em 0.3em; }
  body {
    margin: revert !important;
    max-width: 95% !important; }
  .plus-number-row span {
    flex-basis: 7% !important;
    border-radius: 10px;
    line-height: 30px !important;
    min-height: 30px; }
  .plus-number-spacer {
    flex-basis: 100% !important;
    display: block; }
  .plus-number {
    min-width: 1.2em;
    font-size: 0.6em !important; }
  .roll_preset {
    padding: 0.2em 0.1em;
    border-radius: 8px;
    min-width: 3em;
    font-size: 0.8em !important;
    border: 1px solid #ccc;
    flex-basis: 17% !important; }
  .flex {
    gap: 5px 5px !important;
    justify-content: space-evenly; }
    .flex div {
      flex-basis: 17% !important; }
  .margin5px {
    flex-basis: 28% !important;
    margin: 0 !important; }
  #roll_preset_numbers_output .flex {
    padding: 0 10px !important; } }

@media screen and (max-width: 837px) and (min-width: 600px) {
  #minimal-grid-body {
    max-width: 100% !important; }
  .flex {
    gap: 3px !important; }
  .roll_preset {
    font-size: 1.5em !important;
    padding: 0.2em 0.2em !important;
    flex-basis: 17% !important; }
  .margin5px {
    font-size: 1.5em; }
    .margin5px input {
      width: 20px !important;
      height: 20px !important; }
  #roll_card {
    font-size: 1.2em !important; }
  #roll_plus_input {
    font-size: 1.5em !important; }
    #roll_plus_input input {
      width: 20px !important;
      height: 20px !important; }
    #roll_plus_input #plus_input {
      width: 60px !important;
      height: 40px !important; }
  #custom_rolls p {
    padding: 0 !important; } }