@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1+Code:wght@100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barriecito&display=swap');
@import url(https://stupied.neocities.org/meta/comment-widget.css);

:root{
    --display-font:"Barriecito";
    --body-font:"M PLus 1 Code";

    --brown:#444037;
    --dark-brown:#1b1a18;
    --red:#b5473d;
    --orange:#b16448;
    --light-blue:#6e8a97;
    --blue:#3e4b6a;
    --yellow:#d6a95c;
    --dark-green:#3a443d;
    --wheat:#e7dbd8;

    --accent-color:var(--red);
    --background-image:url(./img/bg.png);
}

body{
    padding:0;margin:0;
    font-family:var(--body-font);
    background-color:var(--dark-brown);
    min-width: 280px;
}

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:"✮ ";}

.outline{
    --color:white;
    --width:2px;
    filter:drop-shadow(var(--width)0 0 var(--color))drop-shadow(calc(-1*var(--width))0 0 var(--color))drop-shadow(0 var(--width)0 var(--color))drop-shadow(0 calc(-1*var(--width)) 0 var(--color))
}

.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(--yellow);
    color: var(--dark-brown);
}

.justified-gallery {
    --space: 5px;
    --min-height: 200px;
}

.justified-gallery {
display: flex;
flex-wrap: wrap;
grid-gap: var(--space);
list-style: none;
}

.justified-gallery > *{
width:100%;
flex-grow: calc(var(--width) * (100000 / var(--height)));
flex-basis: calc(var(--min-height) * (var(--width) / var(--height)));
aspect-ratio: var(--width) / var(--height);
border:3px solid var(--brown);
position: relative;
overflow: hidden;
margin: 0 !important;
padding: 0 !important;
transition: 0.1s;
}

.justified-gallery > a:hover {
border:3px solid var(--red);
}

.justified-gallery > *:has(img[src="#"]){ opacity: 0; }

.justified-gallery > * > img {
position: absolute;
width: 100%;
height: 100%;
}

.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;}
}

@keyframes jump {
    50% {transform:translateY(-65%);}
    100% {transform:translateY(-50%);}
}

@keyframes rotate {
    0% { transform: translateY(-50%) rotate(0); }
    100% { transform: translateY(-50%) rotate(360deg); }
}

/** MAIN STUFF **/

#main {
    min-height: 100vh;
    background:var(--background-image);
    background-size: cover;
    background-attachment: fixed;
    z-index:-1;

    &:before{
        content: "";
        display: block;
        --bg:var(--dark-brown);
        height:100vh;
        width:100%;
        background: linear-gradient(87deg, var(--bg) 50%, #0000 50%);
        position: fixed;
        z-index: 2;
        pointer-events: none;
    }

    #container{
        display: flex;
        max-width:1800px;
        margin: auto;
        position: relative;
    
        & > *{width: 50%;}
    }
    
    main{
        z-index: 3;
        color: white;
        left:-1rem;
        min-height: 100vh;
    }
    
    main > div{
        max-width:500px;
        margin:auto 1rem auto auto;
    }
    
    .main-content{padding:2rem 1rem;}
    
    aside{
        z-index: 1;
        padding: 1rem;
        position: relative;
        user-select: none;
    }
    
    aside #aside-main{
        z-index:1;
        top:50%;
        transform: translateY(-50%);
        position: sticky;
        margin-left: 1rem;
    }
    
    aside nav{
        color:white;
        text-shadow: 0 0 5px black;
        font-weight:bolder;
    }
    
    aside nav a{
        display: inline-block;
        margin:0 5px;
    }
    
    aside nav a:hover{
        text-shadow:0 0 20px white;
    }
    
    aside span.title{
        font-size: 15vw;
        font-weight: bolder;
        font-family: "Barriecito";
        display: block;
        color: var(--wheat);
    }
    
    
    .title.outline{
        --color:var(--dark-brown)!important;
        --width:5px!important;
    }

    .title:hover{
        color: var(--dark-brown);
        --color:var(--wheat)!important;
    }
    
    aside img{
        width: 32vw;
        display: block;
        position: fixed;
        top:50%;
        left: 40%;
        animation: rotate 100s steps(800) infinite;
        -webkit-user-drag: none;
    }
    
    aside > img.outline{
        --color:var(--dark-brown)!important;
        --width:5px!important;
    }
    
    @media only screen and (max-width: 800px) {
        #container{
            flex-wrap: wrap;
            flex-direction: column-reverse;
        }
        #container > *{width: auto;}
    
        &::before{all:revert;width:0;}
        &{
            background-image: none;
            background-color: var(--dark-brown);
        }
        main > div{margin: auto;}
        aside{
            margin-left:0;
            padding-bottom:2rem;
            background-image: var(--background-image);
            overflow: hidden;
        }
        aside #aside-main{
            top:unset;
            transform:none;
        }
        aside img{
            position: absolute;
            width:50vw;
            min-width:200px;
            left:unset;
            right:-20vw;
        }
    }
}

.character{
    h1{text-decoration: underline dotted var(--brown);}
    h1,h2{color:var(--yellow);}
    hr.clear{margin-bottom: 1rem;}
}

#doll{height:20rem;display: inline-block;-webkit-user-drag:none;}

#tag{
    margin-bottom:1rem;
    span:nth-of-type(1){color:var(--red);font-family:"Barriecito";font-weight: bolder;}
    span:nth-of-type(2){color:var(--brown);}
}


#relationships{
    display: flex;
    flex-wrap: wrap;
    gap:0.7rem;
    > a{
        display:block; flex:40%;
        border:3px solid var(--brown);
        min-width:170px;
    }
    > a > div:nth-child(1){position: relative;}
    
    > a:hover{
        border:3px solid var(--wheat);
        h3{background-color:var(--wheat);color: var(--dark-brown);}
        img{--color:var(--wheat);animation:jump 0.5s;animation-iteration-count:infinite; }
    }

    h3{background-color: var(--brown);padding:1rem;}

    img{
        height:4.5rem;
        position: absolute;
        top:50%;right:0;
        transform: translateY(-50%);
        --color:var(--brown);
        --width:2px;
        filter:drop-shadow(var(--width)0 0 var(--color))drop-shadow(calc(-1*var(--width))0 0 var(--color))drop-shadow(0 var(--width)0 var(--color))drop-shadow(0 calc(-1*var(--width)) 0 var(--color))
    }

    > a > div:nth-child(2){padding:1rem;}
}

#personality{
    margin-top:2rem;
    margin-bottom:2rem;
    display: flex;
    gap:2rem;

    > div{margin-top: 1rem;}
    div:nth-child(1) h3{color: var(--light-blue);}
    div:nth-child(2) h3{color: var(--red);}
    ul{padding-left: 1rem;}
}

#gallery { margin-bottom: 2rem ;}

@media only screen and (max-width: 550px) {
    #personality {flex-wrap: wrap;}
}

/** COMIC STUFF **/

.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{

    #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:" » ";color:var(--brown);}
        }

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

            #top-list{
                background-color: var(--dark-brown);
                color:white;
                border-radius:2px;
                padding:0.3rem;
                max-width:3.6rem;
            }
        }

        #extra{text-align:right;}
    }

    main { 
        background-image: url(./img/bg.png);
        background-size:cover;
        background-attachment: fixed;
        background-color: var(--red);
        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; }
    }

    .main-content:not(:last-child){ margin-bottom: 1rem; }

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

        > 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%;
        }
    }
}