.spread{
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

/* taken from manga css, still has the same width bug */
.page-wrap-l, .page-wrap-r{
    width: min(700px, 100%);
    display: inline-flex;
    flex-direction: column;
}

.page, .page-dummy, .page-noshadow{
    align-self: center; /* horizontal center because column */
    width: 100%;
}

.page, .page-dummy{
    box-shadow: 3px 3px 2px gray;
}

.page-dummy{
    aspect-ratio: 1000 / 1414;
}

.page{
    max-width: fit-content;
}

.page-dummy{
    height: 100%;
    background-color: white;
}

#calendar-main > article > section > p,
#calendar-main > article > section > h4{
    line-height: 1.5;
    margin-left: 20px;
    margin-right: 20px;
}

#calendar-main > article > section > p{
    padding-bottom: 0px !important;
    /* me when actual webdevs kill me for using !important */
}

#calendar-main > article > section > h4{
    list-style-position: inside;
    font-weight: bold;
}

/* #calendar-main > article > section > p{
    text-indent: 2em;
} */

#fanart{
    width: min(300px, 100%);
    display: inline-flex;
    flex-direction: column;

}