html, body{
    width:100%;
    margin:0px;
    padding:0px;
    background-color:#ffffff;
    font-size:16px;
    color:#ffffff;
    font-family:"Open Sans", sans-serif;
    text-transform:uppercase;
    transition:background-color 0.5s ease;
    height:100%;
    min-height:240px;
    min-width:320px;
}
.noselect{
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
input, div, a, textarea{
    outline:none;
}
body{
    height:calc(100% - 20px);
}
a{
    text-decoration:none;
    color:#ffffff;
    border-bottom:2px solid #ffffff;
}
#container{
    width:calc(100% - 40px);
    min-height:calc(100% - 20px);
    margin:20px;
}
#header{
    width:100%;
    opacity:1;
    max-width:100%;
    padding:0px 0px;
    display:inline-block;
}
#topBorder, #bottomBorder{
    transition:width 0.5s ease;
    width:0%;
    height:2px;
    background-color:#ffffff;
}
#header>div:nth-child(2){
    position:relative;
    left:20px;
    opacity:0;
    padding-top:5px;
    transition:opacity 0.5s ease, left 0.5s ease;
}
#header>div:nth-child(4){
    position:relative;
    left:20px;
    opacity:0;
    padding-bottom:5px;
    transition:opacity 0.5s ease, left 0.5s ease;
}
#content{
    padding-bottom:72px;
}
#content.edit{
    padding-bottom:42px;
}
.prepost{
    font-style:italic;
    font-size:20px;
}
#title{
    font-size:72px;
    line-height:72px;
    letter-spacing:-3;
    hyphens:auto;
    -webkit-hyphens:auto;
    -ms-hyphens:auto;
    /*word-wrap: break-word;
    overflow-wrap: break-word;*/
    font-weight:700;
    margin:-10px 0px -5px 0px;
    width:100%;
    opacity:0;
    position:relative;
    left:20px;
    transition:opacity 0.5s ease, left 0.5s ease;
}
#intro, #non, #non2{
    background-color:#ffffff;
    font-size:36px;
    font-weight:700;
    line-height:36px;
    margin-top:20px;
    margin-bottom:-1px;
    display:inline-block;
    color:#ffffff;
    opacity:0;
    position:relative;
    top:20px;
    transition:opacity 0.5s ease, top 0.5s ease;
    padding:2px 4px 2px 5px;
}
.e1{
    position:relative;
    top:20px;
    opacity:0;
    transition:opacity 0.5s ease, top 0.5s ease;
}
#story>div{
    margin-bottom:10px;
}
#story>div:last-of-type{
    margin-bottom:0px;
}
#thelist{
    margin-top:17px;
    position:relative;
    top:20px;
    left:0px;
    opacity:0;
    margin-bottom:22px;
    transition:opacity 0.5s ease, top 0.5s ease;
}
.typed-cursor{
    display:none !important;
}
.cursor:after{
    content:'|';
}
.animateIt:after{
    animation:typedjsBlink 0.7s infinite;
    animation-iteration-count:infinite;
}
.stopIt:after{
    animation-iteration-count:0;
}
#newline{
    display:inline-block;
}
.blockquote{
    padding-left:10px;
    border-left:4px solid #ffffff;
}
.italic{
    font-style:italic;
    padding-right:3px;
}
.hidden{
    display:none !important;
}
#eColor{
    margin-bottom:0px !important;
}
#eColor div{
    width:24px;
    height:24px;
    display:inline-block;
    cursor:pointer;
    margin-right:10px;
    margin-bottom:10px;
    border:2px solid transparent;
    transition:border 0.5s ease;
}
#eColor div:hover{
    border:2px solid #ffffff;
}
.currentColor{
    border:2px solid #ffffff !important;
}
.controls{
    text-align:right;
}
.controls div{
    border:2px solid #ffffff;
    padding:5px 10px;
    display:inline-block;
    margin-right:10px;
    cursor:pointer;
}
.under span{
    color:#ffffff;
    border-bottom:2px solid #ffffff;
    cursor:pointer;
}
#editor>div{
    margin-bottom:10px;
    padding:5px;
    border:2px solid #ffffff;
}
#editor>div:last-of-type{
    margin-bottom:0px;
    text-align:left;
}
#editor>div:nth-of-type(1), #editor>div:nth-of-type(5), #editor>div:nth-of-type(7), #editor>div:nth-of-type(8){
    padding:0px;
    border:0px solid #ffffff;
}
#editor div[contenteditable]:focus{
    text-transform:none !important;
}
#eStory{
    color:#ffffff;
    font-size:16px;
    font-family:"Open Sans", sans-serif;
    background-color:transparent;
    border:2px solid #ffffff;
    padding:10px;
    width:100%;
    overflow:hidden;
    margin-bottom:10px;
}
#thelist.edit{
    padding-bottom:0px;
}
#footer{
    position:fixed;
    right:0;
    bottom:0;
    text-align:right;
    width:calc(100% - 40px);
    padding:20px;
    padding-top:0px;
    height:72px;
    background-color:#ffffff;
    transition:background-color 0.5s ease;
}
#footer.edit{
    height:22px;
}
#footer a{
    border:none;
}
.icon{
    width:40px;
    height:40px;
    display:inline-block;
    margin-right:10px;
    font-size:32px;
    margin-bottom:5px;
}
.icon:last-of-type{
    margin-right:0px;
}
#copyright{
    padding-top:5px;
}
#logout{
    position:absolute;
    bottom:0px;
    right:20px;
}
#logIn{
    font-size:14px;
    text-align:center;
    position:absolute;
    top:40px;
    left:50%;
    transform:translateX(-50%);
}
#logins{
    text-align:left;
    background-color:#ffffff;
    display:inline-block;
    -webkit-box-shadow:0 1px 3px rgba(0,0,0,.13);
    width:272px; 
    padding:20px;
    box-shadow: 0 1px 3px rgba(0,0,0,.13);
    text-transform:none;
}
#logins input{
    font-size:24px;
    margin-bottom:20px;
}

#logIn img{
    width:100px;
    margin-bottom:20px;
    display: inline-block;
}

#logIn a{
    border-bottom:none;
    text-transform:none;
}

#logins #submit{
    color:#808080;
}

@media only screen and (max-width: 418px) {
    #content{
        padding-bottom:94px
    }
    #footer{
        height:94px;
    }
}