/*BODY
{
	margin: 0;
	background-image: url(../siteart/WhiteColumn.png);
	(*background-image: url(../siteart/GhostTown_Title.png);*)
	background: linear-gradient(#2D328C, #B195E3) fixed;
	background-attachment: fixed;
	background-position: center top;
	background-repeat: repeat-y;
	background-size: 100%;
}*/
html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: url(../siteart/WhiteColumn.png) repeat-y fixed center center, linear-gradient(#2D328C, #B195E3) fixed;
    background-size: 75% 100%;
    font-family: "Chelsea Market", serif;
}

.chelsea-market-regular {
    font-family: "Chelsea Market", serif;
    font-weight: 400;
    font-style: normal;
}

iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    padding-bottom: 32px;
    padding-top: 32px;
}

#PageContainer {
    width: 69%;
    /*background-color: #FFFFFF;*/
    /*background-image:linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 255) 5%, rgba(255, 255, 255, 255) 95%, rgba(255, 255, 255, 0) 100%);*/
    margin: auto;
    display: flex;
    text-align: center;
    padding: 0 70px;
    /*background-image: url(../siteart/WhiteColumn.png);*/
    background-size: cover;
    background-repeat: repeat-y;
}

#BookImage {
    /*background-color: #62A3B1;*/
    /*width: 50%;*/
    /*width: 423px;*/
    float: left;
    text-align: center;
    margin: 0 auto auto;
    padding-top: 25px;
}

#TitleImage {
    /*float: left;*/
    /*margin-bottom: 37px;*/
    padding-top: 25px;
    /*mix-blend-mode:lighten;*/
    background-color: ;
}

#IntroTextContainer {
    float: right;
    /*background-color: #E7B2EE;*/
    width: 1250px;
    display: inline-block;
    text-align: left;
    margin: 0 40px auto auto;
    font-size: x-large;
    font-family: "Chelsea Market", serif;
}

#IntroText {
    /*background-color: #B13838;*/
    float: right;
    display: inline-block;
    text-align: left;
    /*font-size: 20px;*/
    font-size: 1.35vmax;
    padding-top: 15px;
}

#Highlight {
    color: #0201E7;
    font-weight: bold;
}

#IntroImages {
    /*margin: auto;*/
    text-align: center;
}

#ButtonContainer {
    text-align: center;
    /*background-color: #B3B3EF;*/
    margin: auto;
}

#Button {
    /*background-color: #0201E7;*/
    display: inline-block;
    /*padding: 10px 30px;*/
    color: #FFFFFF;
    margin-bottom: 10px;
    font-size: 2.2vw;
}

#Button a:link, a:visited {
    /*background-color: #0201E7;*/
    color: #FFFFFF;
    padding: 10px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    background-image: url(../siteart/Button01.gif);
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
}

#Button a:hover {
    background-color: #E53CFF;
    background-image: url(../siteart/Button01.gif);
    background-position: center;
    background-size: 100%;
    filter: hue-rotate(45deg);
}

#SampleContainer {
    margin: auto;
    float: left;
}

.SampleImage {
    margin: auto;
}

#HeaderContainer {
    background-color: grey;
}

#ChapterTitle {
    font-family: Tahoma;
    color: #DCD8D4;
}

#NavBar_Top {
    font-family: "Trebuchet MS";
    display: block;
    text-align: center;
    color: #BBB;
    background-color: #444;
    letter-spacing: 0.2em;
    font-weight: bold;
    margin-top: -1px;
    padding-bottom: 4px;
}

#NavBar_Top a {
    text-decoration: none;
    color: #FFF;
    font-weight: bold;
    border-bottom: 2px dotted #FFFFFF;
}

#NavBarEntry {
}

#NavBarEntry a:visited {
    color: #DDD;
}

#NavBarEntry a:hover {
    color: #FFF;
    border-bottom: 2px solid #FFFFFF;
}

#NavBar_Bottom {
    font-family: "Trebuchet MS";
    display: block;
    text-align: center;
    color: #BBB;
    background-color: #444;
    letter-spacing: 0.2em;
    font-weight: bold;
}

#NavBar_Bottom a {
    text-decoration: none;
    color: #FFF;
    font-weight: bold;
    border-bottom: 2px dotted #FFFFFF;
}

#ComicImage {
    width: 706px;
    margin-left: auto;
    margin-right: auto;
    /*border: 2px dashed #2D328C;*/
    /*margin-top: 9px;*/
    position: relative;
    margin-bottom: 25px;
    /*height: 812px;*/
    background-color: #FFFFFF;
}

#KeyboardControls {
    text-align: center;
    margin-top: 5px;
}

#AddThis {
    margin-top: -18px;
    text-align: right;
    height: 16px;
}

#RightSide {
    width: 160px;
    font-weight: bold;
    text-align: center;
    margin-left: 912px;
    position: absolute;
    margin-top: 15px;
    line-height: 1.6;
}

#SocialBox {
    background-color: #B4B4B4;
    width: 125px;
    padding-top: 8px;
    font-weight: bold;
    text-align: center;
    padding-bottom: 9px;
    line-height: 1.6;
    margin: auto;
}

#AdBox {
    margin-top: 10px;
}

#ComicTitle {
    margin-left: 6px;
    /*margin-bottom: -60px;*/
    /*margin-top: 35px;*/
    /*position: absolute;*/
    padding: 0px 125px 0;
}

#ChaptersContainer {
    position: absolute;
    margin-left: 26px;
    margin-top: 107px;
    font-weight: bold;
    width: 123px;
    font-family: "Trebuchet MS";
    letter-spacing: 0.2em;
    color: #FFFFFF;
    text-align: center;
    padding-bottom: 5px;
    padding-top: 5px;
}

#MarketingContainer {
    position: absolute;
    margin-left: 26px;
    margin-top: 275px;
}

#ChaptersEntry {
    background-color: #444444;
    padding-bottom: 8px;
    padding-top: 8px;
}

#ChaptersEntry a {
    text-decoration: none;
    color: #FFF;
    border-bottom: 2px dotted #FFFFFF;
}

#ChaptersEntry a:hover {
    border-bottom: 2px dotted #A5A59F;
    color: #A5A59F;
}

#TextContainer {
    background-color: #FFFFFF;
    padding-bottom: 8px;
    padding-top: 8px;
    min-height: 480px;
}

#AuthorComment {
    background-color: #FFFFFF;
    padding-top: 20px;
    border: 2px dashed #D3D3D3;
    margin-left: 35px;
    margin-right: 35px;
    padding-left: 10px;
    padding-right: 10px;
    font-family: "Trebuchet MS";
    font-weight: normal;
    margin-bottom: 15px;
}

#AuthorComment a {
    font-weight: bold;
    color: #444444;
}

#AuthorComment a:hover {
    color: #7E7E7E;
}

#AuthorCommentTitle {
    font-family: ;
    margin-top: -10px;
    margin-bottom: 10px;
    padding: 10px;
    color: #666666;
    padding: 0 5px;
    font-size: 1.2em;
    line-height: 1.4em;
    font-variant: small-caps;
    letter-spacing: 0.3em;
    background-color: #D3D3D3;
}

#PublishedOn {
    font-style: italic;
    color: #BBBBBB;
    text-align: right;
}

#disqus_thread {
    background-color: #FFFFFF;
    padding-bottom: 20px;
    padding-top: 20px;
    border: 2px dashed #D3D3D3;
    margin-left: 35px;
    margin-right: 35px;
    padding-left: 10px;
    padding-right: 10px;
    font-family: "Trebuchet MS";
    font-weight: normal;
    margin-bottom: 20px;
}

#Copywrite {
    text-align: center;
    color: #A0A0A0;
    font-size: small;
}

.wiggle {
    font-weight: bold;
    position: relative;
}

.wiggle::before, .wiggle::after {
    content: 'Ghost Town';
    position: absolute;
    top: 0;
    left: 0;
    //color: magenta;
    color: transparent;
    text-shadow: 0 0 1.25px #FF76FF;
    mix-blend-mode:darken;
    animation: WiggleMagenta 2s infinite;
    animation-timing-function: linear;
}

.wiggle::after {
    //color: cyan;
    color: transparent;
    text-shadow: 0 0 1.25px #51FFFF;
    mix-blend-mode:darken;
    animation: WiggleCyan 2s infinite;
    animation-timing-function: linear;
}

@keyframes WiggleMagenta {
    0%, 100% {
        transform: translate(0px, -2px);
    }
    
    25% {
        transform: translate(-2px, 0px);
    }
    
    50% {
        transform: translate(0px, 2px);
        // skew(3deg);
    }
    
    75% {
        transform: translate(2px, 0px);
        // skew(3deg);
    }
}

@keyframes WiggleCyan {
    0%, 100% {
        transform: translate(0px, 2px);
    }
    
    25% {
        transform: translate(2px, 0px);
    }
    
    50% {
        transform: translate(0px, -2px);
        // skew(3deg);
    }
    
    75% {
        transform: translate(-2px, 0px);
        // skew(3deg);
    }
}