section:has(#compat-warning){
    display: none;
}

#compat-warning{
    font-family: Augie, 'Comic Sans MS', sans-serif;
    font-size: 16px;
    color: maroon;
    margin: 15px 20px;
}

.manga-radio + .collapse{
    display: none;
}

.manga-radio:checked + .collapse{
    display: block;
}

input{
    display: none;
}


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

/* this totally doesn't work if the two pages are of different widths, figure this out later */
.page-wrap-l, .page-wrap-r{
    width: min(700px, 100%);
    display: inline-flex;
    flex-direction: column;
}

.page, .page-dummy{
    align-self: center; /* horizontal center because column */
    width: 100%;
    box-shadow: 3px 3px 2px gray;
}

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

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

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

.arrow-wrapper, .dummy-arrow-wrapper{ /* dummy arrow is just for manga that ends on the left page bc I don't feel figuring this out */
    height: fit-content;
    width: fit-content;
    text-align: center;
    overflow: hidden;
    cursor: pointer;
    border: none;
    border-radius: 0px;
    padding: 10px;
    margin: 10px 0px;
    padding: 5px;
    transform: rotate(-0.35deg);
    font-family: Augie, 'Comic Sans MS', sans-serif;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.arrow-wrapper{
    background-color: #e9e46f;
    box-shadow: 3px 3px 2px gray;
}

.dummy-arrow-wrapper{ /* webdevs will kill me for this */
    color: transparent;
    background-color: transparent;
    box-shadow: 3px 3px 2px transparent;
}

.dummy-arrow-wrapper label{ /* and obv don't show the pointer cursor when hovering over the dummy */
    cursor: default;
}

.page-wrap-l .arrow-wrapper, .page-wrap-l .dummy-arrow-wrapper{
    align-self: left;
}

.page-wrap-r .arrow-wrapper, .page-wrap-r .dummy-arrow-wrapper{
    align-self: right;
    margin-left: auto;
}

.page-arrow{
    cursor: pointer;
    font-size: 25px;
    font-family: Augie, 'Comic Sans MS', sans-serif;
}

.page-wrap-l .arrow-wrapper .page-arrow::after, .page-wrap-l .dummy-arrow-wrapper .page-arrow::after{
    content: '<- Prev Page'
}

.page-wrap-r .arrow-wrapper .page-arrow::after, .page-wrap-r .dummy-arrow-wrapper .page-arrow::after{
    content: 'Next Page ->'
}