@import url('https://fonts.googleapis.com/css2?family=Grandstander:ital,wght@0,100..900;1,100..900&display=swap');
@import url(https://stupied.neocities.org/meta/css/comment-widget.css);

:root{
    --display-font:grandstander;
    --body-font:Arial, Helvetica, sans-serif;
    --accent-color:#3cb6b9;
}

body{
    padding:0;margin:0;
    font-family:var(--body-font);
}

h1,h2,h3,h4,h5,h6{
    margin:0;
    font-family:var(--display-font)
}

ol,ul{margin-top:0;}
a{text-decoration:none;color:inherit;}
p{margin-top:0;}

p > a {
    text-decoration:underline;
}

hr.clear{
    margin:0;border:0;
    clear:both;
}

p:last-child,ol:last-child,ul:last-child{margin-bottom:0;}

ul{list-style-type:"★ ";}
ul li:nth-child(2n){list-style-type:"✮ ";}

.float-right{float:right;margin-left:1rem;margin-bottom:1rem;display:block;}
.float-left{float:left;margin-right:1rem;margin-bottom:1rem;display:block;}

@media only screen and (max-width: 450px) {
.float-right,.float-left{float:none;margin:1rem auto;}
}

.default{
    --dark-brown: #312422;
    --brown: #3d2d28;
    background: conic-gradient(var(--brown) 90deg, var(--dark-brown) 90deg 180deg, var(--brown) 180deg 270deg, var(--dark-brown) 270deg);
    background-repeat: repeat;
    background-size: 100px 100px;
}

::selection{
    background-color: var(--accent-color);
    color:white;
}

.main#container{
    max-width:700px;
    margin: 3rem auto;
}

.comicListItem{
    display:flex;
    padding:1rem;
    position: relative;
    
    &:hover{background-color:rgb(239, 239, 239);}

    span{
        position:relative;
        display: block;
        top:50%;left:0;
        transform: translateY(-50%);
    }

    img[src="#"]{display:none;}
    img{
        max-width:3rem;
        aspect-ratio:1/1;
        margin-right:1rem;
        object-fit:cover;
    }
}
.comicListTitle{
    flex:1;
    margin-right:10px;
}

.comicListIndex{
    position:relative;
    min-width:30px;
}

#comicViewer{
    background-color:black;

    #container{
        max-width:1800px;
        min-height:100vh;
        margin:auto;
    }

    #top header{grid-area:header;}
    #top #nextprev{grid-area:nextprev;}
    #top #extra{grid-area:extra;}

    #top{
        color: white;
        max-width:800px;
        margin:auto;
        padding:1rem;
        user-select:none;
        display:grid;
        grid-template-areas:
        "header nextprev extra";
        grid-template-columns:repeat(3,1fr);

        header{
            white-space:nowrap; 
            text-overflow: ellipsis;
            overflow: hidden;
        }

        header a{
            color: var(--accent-color);
            font-family: var(--display-font);
            font-weight:600;
            &::after{content:" / ";}
        }

        #nextprev{
            text-align: center;
            a{
                background-color:white;
                border-radius:2px;
                color: black;
                padding:3px;
            }
            a[href*="#"]{display: none;}

            #top-list{
                background-color: black;
                color:white;
                border-radius:2px;
                padding:0.3rem;
                max-width:3.6rem;
            }
        }

        #extra{text-align:right;}
    }

    main { 
        background-color:lightgray;
        padding:0.5rem 0.2rem;
    }

    .main-content {
        background-color: white;
        max-width:700px;margin:auto;
        border: 3px solid black;
        > div {padding:1rem;}
        > img { width:100%;display:block; }
    }

    #next {
        margin-bottom: 1rem;
        border:2px solid black;

        > div{
            margin:auto;
            background-color: white;
            padding:1rem;
        }

        a > div{
            margin:auto;
            border-radius:5px;
            display:flex;
            user-select:none;
            min-height:100px;
        }

        .comicListThumbnail:has(img[src="#"]){display: none;}
        img{
            position: relative;
            display: block;
            width:100px;
            aspect-ratio: 1/1;
            object-fit:cover;
            top:50%;
            transform: translateY(-50%);
        }

        #next-title{flex:1;position:relative;}
        #next-title-content{
            position: relative;
            top:50%;
            padding:1rem 0.5rem;
            transform: translateY(-50%);
        }
    }

    #bottom{
        display: flex; gap:0.5rem;
        flex-direction: row-reverse;
        
        background-color:white;
        margin:1rem auto;
        max-width:800px;padding:1rem;

        > div { flex:2; }
        aside {flex: 1;}
    }

    #info-content{margin-bottom: 2rem;}
    #info-content > h3:first-of-type{
        background-color: var(--accent-color);
        padding:0.3rem;
        margin-bottom:0.2rem;
        display: inline-block;
    }

    footer{
        color: white;
        text-align: center;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    footer a:hover {color:var(--accent-color);}

    footer a:not(:last-child):after {
        content: "|";
        margin: auto 1rem ;
        color: white;
    }

    @media only screen and (max-width: 650px) {
        #bottom{display: block;}

        #top{
            grid-template-areas:
            "header extra"
            "nextprev nextprev";
            grid-template-columns:90% 10%;
        }
    }
}