@font-face {
    font-family: Benmo;
    src: url("../fonts/benmo.ttf");
}
@font-face {
    font-family: Benmo;
    src: url("../fonts/benmo.ttf");
    font-style: italic;
}
@font-face {
    font-family: Benmo;
    src: url("../fonts/benmo.ttf");
    font-weight: bold;
}
@font-face {
    font-family: Benmo;
    src: url("../fonts/benmo.ttf");
    font-style: italic;
    font-weight: bold;
}
@font-face {
    font-family: Inconsolata;
    src: local("Inconsolata");
}
body {
    background-color: #242424;
    color: #c5deff;
    font-family: Benmo, "sans-serif", generic;
    margin: auto;
    max-width: 720px;
    font-size: 16px;
    background-image: url("../img/background.jpg");
    background-repeat: repeat-y;
    background-position: center;
    /* border-style: dashed;
    border-width: 1px; */
}
a {
    color: #2020E0;
}
h1.maintitle {
    font-family: Benmo;
    text-align: center;
    font-size: 48px;
    font-weight: bold;
    padding-top: 0.25em;
    /* border-style: dashed;
    border-width: 1px; */
}
h2.maintitle {
    font-family: Benmo;
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    padding-top: 0.25em;
    /* border-style: dashed;
    border-width: 1px; */
}
h3.maintitle {
    font-family: Benmo;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    padding-top: 0.25em;
    /* border-style: dashed;
    border-width: 1px; */
}
h4.maintitle {
    font-family: Benmo;
    text-align: left;
    font-size: 18px;
    font-weight: bold;
    padding-top: 0.25em;
    /* border-style: dashed;
    border-width: 1px; */
}

table {
    width: 40%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    /* border: 1px solid; */
}
td {
    width: 50%;
    /* border: 1px solid; */
    font-size: 20px;
}

a.maintitle:link {
    color: #101010;
    text-decoration: none;
}
a.maintitle:visited {
    color: #101010;
    text-decoration: none;
}
a.maintitle:hover {
    color: #101010;
    text-decoration: underline;
}
a.maintitle:active {
    color: #101010;
    text-decoration: none;
}
div.menuParent {
    font-family: Benmo;
    display: flex;
    justify-content: space-between;
    font-size: 24px;
}
div.menu {
    text-align: center;
    display: inline-block;
    flex: 1 1 auto;
    /* border-style: dashed;
    border-width: 1px; */
}
div.menu:hover {
    background-color: #a0eea0;
}
div.menuInactive {
    text-align: center;
    display: inline-block;
    flex: 1 1 auto;
}
div.fullWidth {
    width: 100%;
    display: inline-block;
}

div.pages {
    text-align: center;
    display: inline-block;
    flex: 1 1 auto;
    font-size: 18px;
}
a.pages {
    color: #2020E0;
}
a.pages:hover {
    background-color: #a0eea0;
}

a.menu:link {
    color: #101010;
    text-decoration: none;
}
a.menu:visited {
    color: #101010;
    text-decoration: none;
}
a.menu:hover {
    color: #101010;
    text-decoration: none;
}
a.menu:active {
    color: #101010;
    text-decoration: none;
}

a.menuInactive {
   pointer-events: none;
   cursor: default;
}
a.menuInactive:link {
    color: #808080;
    text-decoration: none;
}
a.menuInactive:visited {
    color: #808080;
    text-decoration: none;
}
a.menuInactive:hover {
    color: #808080;
    text-decoration: none;
}
a.menuInactive:active {
    color: #808080;
    text-decoration: none;
}

div.newsfeed {
}

#indexTitle {
    padding-top: 0.25em;
    margin-top: 0.25em;
    padding-bottom: 0.25em;
    margin-bottom: 0.25em;
}
div.newsArticle p {
    padding-top: 0px;
    margin-top: 0px;
}


/* p.newsfeed? */

.newsDate {
    font-weight: normal;
    font-style: italic;
}

.newsTitle {
    font-family: Benmo;
    font-size: 18px;
    /* font-weight: bold; */
}

a.more {
    font-weight: normal;
    font-style: italic;
    color: #2020E0;
}


/* displayNews */
/* don't know why I have to repeat this *n* times */
.newsDateParent {
    width: 100%;
    display: flex;
    justify-content: space-between;
    /* background-color: #d0d0d0; */
    /* margin-top: 1em; */
}
.newsBeforeAfterDate {
    display: inline-block;
    height: 10px;
    // top-margin: 6px;
    border-bottom-style: dashed;
    border-bottom-width: 1px;
    border-color: #909090;
    flex: 1 1 auto;
}
.newsDisplayDate {
    display: inline-block;
    font-weight: normal;
    font-style: italic;
    font-size: 18px;
    text-align: center;
    padding: 0 3px;
    flex: 0 0;
    min-width: 6em;
}

div.newshead {
    padding-top: 1.5em;
    padding-bottom: 0px;
    font-family: DreamOrphans;
    text-align: center;
    width: 100%;
    font-size: 36px;
    font-weight: normal;
}

div.newsArticle {
    padding-top: 0.5em;
    border-bottom-style: dashed;
    border-bottom-width: 2px;
    border-bottom-color: #808080;
}
div.newsArticle h1 {
    font-family: DreamOrphans;
    font-weight: normal;
}
div.newsArticle h2 {
    font-family: DreamOrphans;
    font-weight: normal;
}
div.newsArticle h3 {
    font-family: DreamOrphans;
    font-weight: normal;
}
div.newsArticle h4 {
    font-family: DreamOrphans;
    font-weight: normal;
}
div.newsArticle h5 {
    font-family: DreamOrphans;
    font-weight: normal;
}
div.newsArticle h6 {
    font-family: DreamOrphans;
    font-weight: normal;
}

/* https://css-tricks.com/snippets/css/make-pre-text-wrap/ */
pre {
    white-space: pre-wrap;       /* css-3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */

    padding: 5px;
    border: 1px dashed #505050;
    background-color: #f8f8f8;
}
code {
    font-family: Inconsolata, monospace;
    font-size: 14px;
    color: #105010;
}

/* INTRO TEXT*/
div.intro {
    display: flex;
    justify-content: space-between;
    margin-top: 1.5em;
}
.introText {
    font-size: 24px;
    padding: 6px;
    flex: 1 1 auto;
    vertical-align: middle;
    text-align: center;
}
div.introSpacer {
    display: block;
}
.introPhoto {
    flex: 1 1 auto;
    height: 247px;
}

div.mainfoot {
    padding-top: 1em;
    padding-bottom: 0.5em;
}

div.mainfoot p {
    width: 100%;
    text-align: center;
    font-size: 75%;
    color: #303030;
    font-style: italic;
    padding: 0px;
    margin: 0px;
}

div.contactText {
    border-top-style: dashed;
    border-top-width: 2px;
    border-color: #909090;
}
div.contactText h2 {
    text-align: center;
}

div.worksList h1 {
    font-family: DreamOrphans;
    font-weight: normal;
}
div.worksList h2 {
    font-family: DreamOrphans;
    font-weight: normal;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-color: #101010;
    padding-top: 1em;
}
div.worksList h3 {
    font-family: DreamOrphans;
    font-weight: normal;
    text-decoration: underline;
}