@font-face {
    font-family: helveticaneue;
    src: url(fonts/helveticaneue.ttf);
}

@font-face {
    font-family: komikax;
    src: url(fonts/KOMIKAX.ttf);
}

@font-face {
    font-family: trashCinema;
    src: url(fonts/TrashCinemaBB.otf);
}

html {
    margin:0;
    padding:0;
    height:100%;
    width:100%;
}

body {
    font-family: helveticaneue;
    background-color: #000000;
    color: #efefef;
    margin:0;
    padding: 0;
    display: flex;
    flex-direction: column;
    height:100%;
    width:100%;

}

h1 {
    font-family: trashCinema;
    font-size: 3em;
    padding: 0px;
    margin:0px;
    letter-spacing: 3px;
}

h2 {
    font-family: trashCinema;
    font-size: 2.5em;
    padding: 0px;
    margin:0px;
    letter-spacing: 3px;
}

h3 {
    font-family: trashCinema;
    font-size: 1.8em;
    padding: 0px;
    margin:0px;
    letter-spacing: 4px;
}

a {text-decoration:none; color:inherit;}

div {
    padding: 0px;
    margin: 0px;
}
#headerbar {
    margin: 0px 0px 10px 0px;
    padding: 0px 20px;
    /* background-color: red; */
}

#middle {
    /* display: flex; */
    /* flex-direction: row; */
    display: block;
    padding:20px;
    /* background-color: blueviolet; */
}

#sidebar {
    /* background-color: cadetblue; */
    width:20%;
    float:left;
}
#sidebar a {
    font-family: trashCinema;
    font-size: 1.8em;
    letter-spacing: 2px;
    color: inherit;
    margin:10px 0px;
    -webkit-transition: color 0.5s; /* Safari */
    transition: color 0.3s;
    display: block; /* to respond to margin */
}
#sidebar a:hover {color:#ff8080;}

#mainContent {
    /* background-color: goldenrod; */
    width:75%;
    float:right;
    display: flex;
    flex-direction: column;
    /* width: 100%; */
    flex-wrap: wrap;
    justify-content: space-evenly;
    padding: 0px 20px;
}
#mainContent div {
    margin: 10px 0px;
    max-width:100%;
}

div.comiclink {
    text-align:center;
    margin: 20px;
    width:25%;
}
img.comicthumbnail {
    width:240px;
    height:240px;
}

img.illustrationthumbnail {
    width:100%;
    height:auto;
    cursor: pointer;

}

#pageviewer {
    text-align: center;
}

img.comicpage {
    width:65%;
    margin-top: 20px;
}

#pagedirectory {
    text-align: center;
    font-size: 25px;
}
#pagedirectory div.pagenumber {
    margin:15px;
    font-style:italic;
    cursor:pointer;
    display:inline-block;
}

#pagedirectory div.chosenpagenumber {
    /* margin:15px;
    font-style:italic;
    cursor:pointer;
    display:inline-block; */
    font-weight:bold;
    color:#ff5555;
}


#prefooter {
    flex-grow: 1;
    height:0;
    max-height:100%;
}

#footer {
    /* background-color:orange; */
    text-align: center;
    align-self: flex-end;
    border-top: 1px #555555 solid;
    width: 60%;
    margin: 10px auto 0px auto;
    padding:10px 0px;
}

.mobile {display:none;}
@media screen and (max-width:979px) {
    .mobile {display: flex;}
    .desktop {display: none;}
}