/* Global Styling */
body {background-color: #dfdfdf; margin: 0px;}
table {margin-bottom: 16px; width:100%}
table, th, td {border:1px solid black;}

/* ID element stylings */
#content {background-color: #dfdfdf; color: #000; font-family: arial; margin: 0; min-width: 0; overflow: hidden; width: auto;}
#content h1 {border-bottom: 2px dotted #cccdc8; font: 24px "Bebas Neue", sans-serif; font-style: italic; padding-bottom: 4px;}
#footer {background: #cccdc8; font-family: arial; padding: 4px; text-align: center;}
#footer-rune {font-family: "Iokharic Regular" !important;}
#header {background-color: #cccdc8; border-bottom: solid 1px #222; height: 7em; margin: 0; text-align: center;}
#main-content {margin: 0 auto; padding-left: 16px; text-align: left;}
#nav {background-color: #cccdc8; border-bottom: solid 1px #222; padding: 6px; margin: 0; text-align: center;}
#nav a {color: #555;}
#stone-stairs {width: 700px;}
#title {display: block; font-size: 4em; font-family: "Bebas Neue", sans-serif; font-weight: 400; font-style: normal; margin-bottom: -4px; padding-left: 10px; padding-right: 10px; padding-top: 10px;}
#welcome {background-color: #cccdc8; color: #000; font-family: arial; left: 12px; padding-bottom: 6px; padding-left: 12px; padding-right: 2px; margin-top: 0}

/* Class element stylings */ 
.center-text {text-align: center;}
.community, a:hover {color: black;}
.community, a:visited {color: #333;}
.container {display: block; margin: 0 auto; width: 100%; max-width: 700px;}
.container img {display: block; height: auto; max-width: 100%;}
.email {text-decoration: underline;}
.h1-text {font: 32px "Bebas Neue", sans-serif !important; margin-bottom: 12px;}
.h1-text-center {font: 36px "Bebas Neue", sans-serif !important; margin-bottom: 12px; text-align: center;}
.h1-rune {font-family: "Iokharic Regular" !important;}
.rune-text {font-family: "Iokharic Regular";}


/* Dynamic Width Tweaks */
@media (max-width: 621px){
    #header {height: 11em; line-height: 4em;}
    #title {margin-bottom: -16px}
    #welcome {margin-bottom: -29px;}
}

@media (max-width: 465px){
    #header {height: 9em;}
    #welcome {display: none;}
}

@media (max-width: 342px){
    #hide-bot {display: none;}
}

/* Firefox needs it's own tweaks... */
@-moz-document url-prefix(){#title {margin-bottom: -6px;} }
@-moz-document url-prefix(){@media (max-width: 621px){#header {height: 5em;}}}
@-moz-document url-prefix(){@media (max-width: 621px){#welcome {display: none;}}}
@-moz-document url-prefix(){@media (max-width: 605px){#header {height: 9em;}}}

/* Credit to Ryoichi Tsunekawa
   https://fonts.adobe.com/designers/ryoichi-tsunekawa 
*/
@font-face {
    font-family: "Bebas Neue";
    src: url('fonts/BebasNeue-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Credit to Neale Davidson
   https://www.cufonfonts.com/font/iokharic 
*/
@font-face {
    font-family: 'Iokharic Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Iokharic Regular'), url('fonts/Iokharic.woff') format('woff');
}

@font-face {
    font-family: 'Iokharic Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Iokharic Italic'), url('fonts/Iokharic Italic.woff') format('woff');
}

@font-face {
    font-family: 'Iokharic Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Iokharic Bold'), url('fonts/Iokharic Bold.woff') format('woff');
}

@font-face {
    font-family: 'Iokharic Bold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Iokharic Bold Italic'), url('fonts/Iokharic Bold Italic.woff') format('woff');
}