@font-face {
    font-family: 'bookinsanity_remakeregular';
    src: url('../fonts/bookinsanity.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'scaly_sans_capsregular';
    src: url('../fonts/scaly_sans_caps.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'nodesto_caps_condensedregular';
    src: url('../fonts/nodesto_caps_condensed.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'mr_eaves_sc_remakemedium';
    src: url('../fonts/mr_eaves_small_caps.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'zatanna_misdirectionregular';
    src: url('../fonts/zatanna_misdirection.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'scaly_sans_remakeregular';
    src: url('../fonts/scaly_sans.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ul, ol {
    padding-left: 3em;
    padding-right: 3em;
}

li, li p {
    margin: 0;
}

img {
    max-width: 100%;
    height: auto;
}

body {
    font-family: 'bookinsanity_remakeregular';

    background-color: #EFEAD4;
    color: #444444;
    line-height: 1.6;
}

body strong {
    font-weight: 900;
}

.warning {
    font-family: 'scaly_sans_remakeregular';
    font-size: 11pt;
    box-sizing: border-box;
    margin-bottom: 1em;
    margin-top: 9px;
    padding: 5px 10px;
    background-color: #F9B4B4;
    border-style: solid;
    border-width: 0px;
    border-top: 2px solid #444444;
    border-bottom: 2px solid #444444;
    box-shadow: 1px 4px 14px #888888;
}

body table {
    font-family: 'scaly_sans_remakeregular';
    width: 100%;
    margin-bottom: 1em;
    font-size: 10pt;
    line-height: 1.1em;
}

body table em {
    font-family: 'scaly_sans_remakeregular';
    font-style: italic;
}

body table strong {
    font-family: 'scaly_sans_remakeregular';
    font-weight: 900;
}

body table thead {
    font-weight: 900;
}

body table thead th {
    font-weight: 900;
}

body table tbody tr td {
    padding: .3em .1em;
}

body table tbody tr:nth-child(odd) {
    background-color: #E0E5C1;
}

.note {
    font-family: 'scaly_sans_remakeregular';
    font-size: 11pt;
    box-sizing: border-box;
    margin-bottom: 1em;
    margin-top: 9px;
    padding: 5px 10px;
    background-color: #E0E5C1;
    border-style: solid;
    border-width: 0px;
    border-top: 2px solid #444444;
    border-bottom: 2px solid #444444;
    box-shadow: 1px 4px 14px #888888;
}

blockquote {
    font-family: 'scaly_sans_remakeregular';
    font-size: 11pt;
    box-sizing: border-box;
    margin-bottom: 1em;
    margin-top: 9px;
    padding: 5px 10px;
    background-color: #e3d1b0;
    border-style: solid;
    border-width: 0px;
    border-top: 2px solid #444444;
    border-bottom: 2px solid #444444;
    box-shadow: 1px 4px 14px #888888;
}

.quote p {
    margin-top: 2px;
    margin-bottom: 2px;
}

.descriptive {
    display: block;
    font-family: 'scaly_sans_remakeregular';
    font-size: 11pt;
    margin-bottom: 1em;
    margin-top: 9px;
    padding: 5px 10px;
    position: relative;
    background-color: #FAF7EA;
    border-style: solid;
    border-width: 0px;
    border-left: 2px solid #444444;
    border-right: 0px solid #444444;
    box-shadow: 0px 0px 6px #FAF7EA;
}

.descriptive:before,
.descriptive:after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: #444444;
    border-radius: 50%;
}

.descriptive:before {
    top: -2px;
    left: -4px;
}

.descriptive:after {
    left: -4px;
}

.monster {
    display: block;
    font-family: 'scaly_sans_remakeregular';
    font-size: 11pt;
    margin-bottom: 1em;
    margin-top: 9px;
    padding: 5px 10px;
    width: 100%;
    max-width:500px;
    position: relative;
    background-color: #FDF1DC;
    border-style: solid;
    border-width: 0px;
    border-top: 2px solid #E69A28;
    border-bottom: 2px solid #E69A28;
    box-shadow: 0px 0px 6px #FAF7EA;
}

.monster hr {
    color: #822000;
}

.monster table {
    font-family: 'scaly_sans_remakeregular';
    width: 100%;
    margin-bottom: 5px;
    margin-top:5px;
    font-size: 10pt;
    line-height: 1.1em;
}

.monster table thead {
    font-weight: 900;
}

.monster table thead th {
    font-weight: 900;
}

.monster table tbody tr td {
    padding: .3em .1em;
    text-align: center;
}

.monster table tbody tr:nth-child(odd) {
    background-color: #FDF1DC;
}

.monster h2 {
    margin-bottom:-5px;
    margin-top:2px;
}

.monster p {
    margin-bottom:2px;
    margin-top:2px;
}

article header {
    text-align: center;
    font-family: 'scaly_sans_remakeregular';
    font-size: 11pt;
    box-sizing: border-box;
    margin-bottom: 1em;
    margin-top: 1em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    background-color: #dcb99c;
    border-style: solid;
    border-width: 0px;
    border-top: 1px solid #444444;
    border-bottom: 1px solid #444444;
}

article footer {
    text-align: center;
    font-family: 'scaly_sans_remakeregular';
    font-size: 10pt;
    box-sizing: border-box;
    margin-bottom: 9px;
    margin-top: 9px;
    padding: 10px 10px;
    background-color: #dcb99c;
    border-style: solid;
    border-width: 0px;
    box-shadow: 1px 4px 14px #888888;
}

article footer p {
    margin-bottom:2px;
}

container {
    width: 80%;
    margin: auto;
    overflow: hidden;
}

header {
    padding: 20px 0;
    background: #FEDCBF;
    text-align: center;
    margin-bottom: 20px;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-logo {
    height: 64px; /* Same height as your h1 font-size */
    margin-right: 10px; /* Add some space between the logo and the title */
}

nav ul {
    list-style: none;
    text-align: center;
}

nav ul li {
    display: inline flex;
    margin: 0 15px;
    margin-bottom: 5px;
}

h1 {
    font-family: 'nodesto_caps_condensedregular';
    color: #FFFFFF;
    font-weight: 800;
    font-size: 64px;
    text-shadow: 0 0 4px #000000;
    -moz-text-shadow: 0 0 4px #000000;
    -webkit-text-shadow: 0 0 4px #000000;
}

h2 {
    font-family: 'mr_eaves_sc_remakemedium';
    color: #58180D;
    font-weight: 800;
    font-size: 26px;
}

h3 {
    font-family: 'mr_eaves_sc_remakemedium';
    color: #58180D;
    font-weight: 800;
    font-size: 20px;
    border-bottom:2px solid #C9AD6A;
}

h4 {
    font-family: 'mr_eaves_sc_remakemedium';
    color: #58180D;
    font-weight: 800;
    font-size: 17px;
}

h5 {
    font-family: 'scaly_sans_capsregular';
    font-weight: 900;
    font-size: 16px;
}

main {
    padding: 20px;
    background: #FFFFFF;
    margin-bottom: 20px;
}

p {
    margin-bottom:10px;
}

A:link
{
	text-decoration: underline;
	color: #444444;
}

A:active
{
	text-decoration: underline;
	color: #444444;
}

A:visited
{
	text-decoration: underline;
	color: #444444;
}

A:hover
{
	text-decoration: none;
	color: #444444;
}

footer {
    text-align: center;
    padding: 20px;
    background: #FEDCBF;
}

/* Main */
.subh3 {
    font-style: italic;
    font-size: 15px;
}

/* Forms */

form .form-group {
    margin-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

form .form-group label {
    font-family: 'scaly_sans_capsregular';
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
}

form input, form textarea, form select {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 1px;
    background-color: white;
    flex: 1 0 100%;
}

form input[type="checkbox"] {
    width: auto; /* Auto width for checkbox */
    flex: 0 0 auto;
    margin-right: 8px; /* Space between checkbox and label */
    vertical-align: middle; /* Aligns checkbox with text */
}

form input[type="text"]:focus, form textarea:focus, form select:focus {
    border-color: #C9AD6A;
    outline: none;
}

form input[type="submit"] {
    padding: 10px 20px;
    width: auto;
    flex: 0 0 auto;
    border: none;
    border-radius: 1px;
    background-color: #F95954;
    color: #FFFFFF;
    cursor: pointer;
    font-family: 'scaly_sans_capsregular';
    font-size: 1em;
}

form input[type="submit"]:hover {
    background-color: #444444;
}

form p {
    margin-top:2px;
    margin-bottom:2px;
}

/* End Of Forms */
}