@font-face {
  font-family: "sigil";
  src: url("fonts/sigil.ttf") format("truetype");
}
@font-face {
  font-family: "Ronish";
  src: url("fonts/fnh.ttf") format("truetype");
}
 
/*del {
  text-decoration: none;
  font-family: sigil;
  font-size: 3rem;
  font-variant: normal;
  letter-spacing: 2px;
  
}*/

html {
  background-color: #e0e0e0;
}

@media only print{
  body{
    font-family: sans-serif;
    font-size: 15px;
    width: 100%;
  }
}

@media only screen and (min-width: 600px){
  html{
    font-size: 16px;
  }
  
  body {
    font-family: sans-serif;
    font-size: 1em;
    width: 90%;
    border: 5px outset black;
    padding: 3px;
    margin: auto;
    background-color: white;
  }
}

@media only screen and (max-width: 600px){
  html{
    font-size: 12px;
  }

  body {
    font-family: sans-serif;
    margin: 0px;
    border: 0px black ridge;
    max-width: 100vw;
    min-width: 100%;
    max-height: 100vw;
  }
  
  td,th{
    font-size: 2rem;
  }
}

body{
  font-family: sans-serif;
  background-color: white;
}

a,a:visited {
  text-decoration: underline;
  color: #505050;
}

a:hover {
  color: red;
}

h1 {
  background-color: #b8b8b8;
  border-top: 3px solid black;
  border-bottom: 3px solid black;
  font-size: 2rem;
  font-variant: small-caps;
  padding-left: 10px
}

h2 {
  font-size: 1.8rem;
  border-top: 3px double black;
  border-bottom: 1px dotted black;
  padding-left: 3px;
  background-color: #d7d7d7;
}

h3 {
  font-size: 1.2rem;
  font-style: italic;
  background-color: #dfdfdf;
}

h4 {
  font-size: 1rem;
  font-style: italic;
  background-color: #e7e7e7;
}

h5 {
  font-size: 0.95rem;
  font-style: italic;
  background-color: #efefef;
}

h6 {
  font-size: 0.9rem;
  font-style: italic;
  background-color: #f7f7f7;
}

table {
  border-collapse: collapse;
  border: 1px solid black;
  overflow-x: auto;
}

.table {
  overflow-x: auto;
}

tr:nth-child(even
){
  background-color: #eeeeee;
}

td,th {
  border-collapse: collapse;
  border: 1px solid black;
  min-width: min-content;
  padding: 3px;
  font-size: 1em;
}

blockquote{
    font-variant: small-caps;
    border-left: 3px outset lightgrey;
    padding: 5px;
    background-color: #eeeeee;
}
blockquote p{
  margin: 3px;
}

img.rune {
  float: left;
  max-width: 30px;
  max-height: 30px;
}
span.rune {
  font-size: 2em;
  font-family: sigil;
}

span.large{
  font-size: 5em;
}

span.sigil{
  border: 1px black solid;
  border-radius: 100%;
}

.playtest {
  background-color: #ffd9d9;
  padding: 2px 2px 2px 2px;
  border: 1px red outset;
}

.ronish {
  font-family: Ronish;
  font-size: 1.5rem;
  letter-spacing: 3px;
}

.footer {
  background-color: #c0c0c0;
  border-top: 2px solid black;
  font-size: 0.75rem;
  padding: 5px 0px 5px 10px;
}



div.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  
}
div.flex-item{
  width: min-content;
  border: 1px black outset;
  padding: 2px;
  justify-content: center;
  text-align: center;
}

.important {
  border: 2px red ridge;
  margin: 3px;
  padding: 3px;
  background-color: white;
  color: red;
  font-weight: bold;
}