/* BLACKOUT 2AM FONT */
@font-face {
    font-family: "Blackout Two";
    src: url('https://titancomic.net/test/fonts/blackout_2am.ttf');
    font-weight: normal;
    font-style: normal;
}

    /* Infini Regular */
@font-face {
    font-family: "Infini";
    src: url('fonts/infini/infini-regular.eot');
    src: url('fonts/infini/infini-regular.eot') format('embedded-opentype'),
        url('fonts/infini/infini-regular.woff') format('woff'),     
        url('fonts/infini/infini-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
    /* Infini Bold */
@font-face {
  font-family: "Infini";
  src: url('fonts/infini/infini-bold.eot');
  src: url('fonts/infini/infini-bold.eot') format('embedded-opentype'),
       url('fonts/infini/infini-bold.woff') format('woff'),
       url('fonts/infini/infini-bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
    /* Noto Sans */
@font-face {
    font-family: "Noto Sans";
    src: url('fonts/noto/NotoSans.ttf');
    src: url('fonts/noto/NotoSans.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    }
    /* Noto Serif */
@font-face {
    font-family: "Noto Serif";
    src: url('fonts/noto/NotoSerif.ttf');
    src: url('fonts/noto/NotoSerif.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    }
@font-face {
    font-family: "Noto Serif";
    src: url('fonts/noto/NotoSerif-Italic.ttf');
    src: url('fonts/noto/NotoSerif-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    }
    /* Noto Display */
@font-face {
    font-family: "Noto Serif Display";
    src: url('fonts/noto/NotoSerifDisplay.ttf');
    src: url('fonts/noto/NotoSerifDisplay.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    }
@font-face {
    font-family: "Noto Serif Display";
    src: url('fonts/noto/NotoSerifDisplay-Italic.ttf');
    src: url('fonts/noto/NotoSerifDisplay-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    }
* {
    box-sizing: border-box;
    margin: 0;
}
html {
    max-width: 100%;
    background: #F6DDD4;
    padding:20px 20px 20px 20px;
    }
body {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    font-size:0.9em;
    font-weight: 200;
    line-height:1.5em;
    font-family: Noto Sans, Tahoma, Helvetica, "sans serif";
    color: #274A73;
}

.content {
    color:#4b6d90;
}

p a:link, li a:link {
    text-decoration: underline;
    color: #274A73;
    margin-bottom: 0;
}
p a:hover, li a:hover {
    text-decoration: none;
    color: #274A73;
}
a:link {
    text-decoration: none;
    color:inherit;
}
a:hover, a:visited, a:active {
    color:inherit;
}
.divider    { 
    max-width:300px;
    height: 1px; 
    margin: 2em auto 2em auto; 
    background-color:#274A73;
    }
h1 {
    color: #D8896E;
    font-family: Noto Sans, Helvetica, sans serif; 
    font-weight: bold;
    font-size: 2em; 
    max-width: 460px;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 1em;
}
h1 a:hover {
    color: #274A73;
}
h2 { 
    color: #274A73;
    font-family: Blackout Two, Infini, Helvetica, sans serif; 
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.5em; 
    line-height: 1.5em;
    width:100%;
    }
h2 a:hover {
    background:#e6997f;
    }
h3 {
    color: #fff;
    font-family: Infini, Helvetica, sans serif; 
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.2em; 
    line-height: 2em;
    width:100%;
    }
#max100 {
    max-width: 100%;
    object-fit: contain;
}
#title {
    max-width:460px; 
    margin: 0 auto; 
    font-family: Infini, sans-serif; 
    font-size:1.1em;
    }
#nav > a {
    color:#274A73; 
    background:#e6997f;
    text-decoration:none;
    border-bottom:none;
    font-weight:lighter;
    padding:5px;
    margin-bottom:-1.5em;
    }
#nav > a:hover {
    color:#274A73; 
    background:transparent;
    text-decoration:underline;
    border-bottom:none;
    }
#sky    { 
    width:100%; 
    height:1px; 
    background-color:#274A73;
            }
#ceiling {
    display: block;
    width:100%;
    height:1px;
    background-color:#274A73;
    margin-bottom:2em;
    }
#content {
    max-width:460px;
    margin: 0 auto;
    }
#content-verse {
    max-width:460px;
    background-color: #b3d9ff;
    padding:3em;
    margin: 0 auto;
}
#verse {
    font-family: Noto Serif, serif; 
    font-weight:100;
    font-size:1.3em;
    padding-top:1em;
    }
.italic {
    font-family: Noto Serif Italic, serif;
    font-style:italic;
    font-weight:900;
}
.thumb {
    max-width:10em;
    height: auto;
    display: inline-block;
    padding:0.4em;
}
.date {
    color: #e6997f;
    font-size: 0.8em;
    letter-spacing: 0.2em;
    margin:-0.5em 0 1em 0;
    }
.words {
    margin-bottom:2em;
}
.words a {    
    width:100%;
    color:#274A73;
    font-family: Noto Serif Italic, serif;
    font-style:italic;
    font-weight: 400;
    text-transform:lowercase;
    font-size:2em;
    text-decoration: underline 1px solid;
    }
.words a:hover {
    text-decoration: none;
}
.callout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 2em;
    color: #274A73;
    font-family: Infini, Helvetica, sans serif; 
    font-size: 1.1em; 
    line-height: 1.1em;
    letter-spacing: 0.1em;
    width:100%;
    border: 1px solid #274A73;
    box-shadow: 4px 4px #274A73;
    margin: 1em 0 3em 0;
    padding:0.8em;
    }
.callout:link {
    text-decoration: none;
}
.callout:hover, .callout:active {
    color:#274A73;
    text-decoration:none;
    border:1px solid #e6997f;
    background-color: transparent;
    box-shadow: 4px 4px #e6997f;
    }
p   { 
    color: #274A73; 
    font-family: Noto Sans, Tahoma, Helvetica, sans-serif;
    font-weight:lighter;
    font-size:1em;
    margin-bottom:1.5em;
    }
#gallery { 
    display: flex; 
    flex-wrap: wrap; 
    align-content: flex-start; 
    justify-content: space-between;
    }
#art {
    max-width: 700px; 
    margin: 0 auto; 
    display:block;
}