body {
    background-color: black;
}

.container {
    display: flex;

    background-color: black;
    justify-content: center;
    flex-direction: column;
}

a:link {
    text-decoration: none;
}

#title-holder {
    background-color: black;
    max-height: 7.5em;
    margin: 0.1%;
}

.title {
    font-family: "Protest Guerrilla";
    font-weight: 50;
    font-size: 5.5em;
    color: white;
    text-align: center;
}

#author-holder {
    background-color: black;
    max-height: 3em;
    margin-top: -2%;
    margin-bottom: -2%;
}

.author {
    font-family: "Teko";
    font-weight: 50;
    font-size: 3em;
    color: white;
    text-align: center;
}

.links {
    display: flex;
    justify-content: space-around;
    min-height: 3em;
    margin-top: 1%;
}

.info-text {
    color: white;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.5em;
}

.title:hover {
    color: rgb(220, 80, 80);
}

.info-text:hover {
    color: rgb(220, 80, 80);
}

.navigation {
    display: flex;
    justify-content: space-around;
    margin-left: 25%;
    margin-right: 25%
}

#nav-top {
    margin-top: 1.5%;
    margin-bottom: 1%;
}

#nav-bottom {
    margin-bottom: 1.5%;
    margin-top: 1%;
}

.nav-icon {
    max-width: 2em;
}

.page-number {
    color: white;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-weight: bolder;
    font-size: 1.3em;
}

.page-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 5%;
    width: 90%;
    height:90%;
    background-color: black;
}

.page {
    max-width: 70%;
    max-height: 70%;
}

#ko-fi-link {
    background-color: black;
    max-width: 4em;
    max-height: 4em;
}

#ko-fi {
    max-width: 4em;
}

#tumblr-link {
    background-color: white;
    max-width: 4em;
    max-height: 4em;
}

#tumblr {
    max-width: 4em;
}

#bluesky-link {
    background-color: white;
    max-width: 4em;
    max-height: 4em;
}

#bluesky {
    max-width: 4em;
}

#youtube-link {
    background-color: white;
    max-width: 4em;
    max-height: 4em;
}

#youtube {
    max-width: 4em;
}

#about {
    display: flex;
    justify-content: space-around;
}

#about-text {
    display: flex;
    flex-direction: column;
}

#summary {
    display: flex;
    justify-content: center;
    margin-left: 10%;
    max-width: 80%;
}

#cw {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    margin-left: 10%;
}

#warnings {
    color: white;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.summary-text {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: white;
    font-style: italic;
    font-weight: 100;
}

.cw-text {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color:rgb(220, 80, 80);
}

#cover {
    max-width: 70%;
}

.archive {
    display: flex;

    flex-direction: column;
    padding: 2%;
}

.page-holder {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.block-text {
    color: #E75454;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 2.2em;
    font-weight: bold;
    text-align: center;
}

.archive-page {
    max-width: 9em;
    padding: 2%;
}

.archive-text {
    color: white;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    text-align: center;
}

#danger-gang {
    display: flex;
    flex-direction: column;
}

.block {
    display: flex;
    padding-top: 2%;
    justify-content: center;
}

.character {
    display: flex;
    justify-content: center;
}

.character-image {
    max-width: 14em;
    max-height: 14em;
    min-width: 2em;
    min-height: 2em;
}

.character-text {
    display: flex;
    flex-direction: column;
    max-width: 70%;
    align-items: center;
}

.character-name {
    color: white;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.character-info {
    color: white;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    max-width: 60%;
}

footer {
    margin-top: 3%;
    font-size: 1em;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: white;
    text-align: center;
}

@media (max-width: 140px) {
    .page-holder {
        justify-content: center;
    }

    #cover {
        align-items: center;
    }
}

@media (max-width: 800px) {
    #comic-info {
        flex-direction: column;
        align-items: center;
    }

    .page-holder {
        justify-content: center;
    }

    #about {
        flex-direction: column;
    }

    #cover {
        margin-left: 10%;
        margin-right: 10%;
        align-items: center;
    }
}

@media (max-width: 1200px) {
    .page-holder {
        justify-content: center;
    }
}

@media (max-width: 1600px) {
    .page-holder {
        justify-content: center;
    }
}