:root{
    --block: lch(90% 25 85);
    --box: lch(100% 0 90);
    --back: radial-gradient(white 50%, lch(95% 10 225) );
    --search-back: white;
    --thick-border: lch(80% 45 85);
    --thin-border: lch(40% 45 85);
    --pressed: lch(65% 40 75);
    --pressed-text: lch(100% 25 85);
    --text: black;
    --light-text: gray;
    --text-shadow: black;
    font-family: "Zen Maru Gothic", sans-serif;
    color: var(--text);
}

@media (prefers-color-scheme: dark) {
    :root{
        --block: lch(20% 0 75);
        --box: lch(40% 2.5 75);
        --back: radial-gradient(lch(20% 0 75), black );
        --search-back: lch(35% 0 75);
        --thick-border: lch(60% 10 75);
        --thin-border: lch(60% 10 75);
        --pressed: lch(5% 0 75);
        --pressed-text: lch(95% 5 75);
        --text: lch(95% 5 75);
        --box-text: white;
        --light-text: lch(65% 5 75);
        --light-box-text: lch(85% 5 75);
    }
}

h1, h2, h3, h4, h5, h6{
    font-family: "Shippori Mincho", serif;
    margin: 0;
}

body{
    display: flex; flex-direction: column;
    margin: 0;
    background: var(--back);
    background-attachment: fixed;
    height: 100vh;
}

a{
    color: var(--text);
}

span{
    color: var(--text);
}

/* HEADER */

header{
    background: var(--block);
    margin: 0;
    border-style: outset; border-top: 0; border-left: 0; border-right: 0; border-color: var(--thick-border);
}

.top-buttons{
    display: flex; flex: auto; justify-content: center;
    padding: .6rem;
    column-gap: .6rem;
    max-height: fit-content;
    max-width: 64rem;
    margin: auto;
}

.nav-button{
    display: flex; flex-direction: column; justify-content: center;
    background-color: var(--block);
    border-style: outset; border-color: var(--thick-border); border-radius: 1.2rem; border-width: 0.3rem;
    position: relative;
    flex: auto;
}

.nav-button a{
    text-decoration: none;
}

.nav-button li{
    list-style: none;
}

.nav-text{
    color: var(--text);
    text-align: center;
}

.nav-text::before{
    content: "-"
}

.nav-text::after{
    content: "-"
}

.nav-button img{
    display: block;
    margin: auto;

}

.nav-button.home{
    flex: none;
}

.nav-button.home::before{
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    border-style: outset; border-color: var(--thick-border); border-radius: 1.2rem; border-width: 0.3rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* HOME BUTTON */

.home-main{
    margin-top: clamp(0rem, calc(8vw - 8rem), 2.4rem); margin-bottom: auto;
    background: var(--block);
}

.home-title{
    padding: 4vh;
    text-align: center;
    border-style: outset; border-color: var(--thick-border);
    background: radial-gradient(lch(35% 90 50) 50%, lch(10% 90 50));
    position: relative;
}

.home-title h1{
    text-shadow: 1px 1px 2px var(--text-shadow);
    color: lch(90% 25 85);
}

.home-title h1::before{
    content: "-"
}

.home-title h1::after{
    content: "-"
}

.home-title h3{
    margin-top: 1.2rem;
    color: lch(90% 25 85);
}

.home-title p{
    position: absolute;
    right: .3rem;
    bottom: .3rem;
    font-size: small;
    margin: 0;
    color: lch(80% 50 50);
}

.home-body{
    
    padding-top: 1.2rem;
}

.home-body h2{
    text-align: center;
}

.home-body p{
    margin-left: 1.2rem; margin-right: 1.2rem; margin-top: .6rem;
    text-align: center;
}

.home-nav{
    display: flex; gap: 1.2rem;
    border-style: solid; border-width: 1px; border-color: var(--thin-border); border-left: 0; border-top: 0; border-right: 0;
    margin: 1.2rem; margin-bottom: 0;
    padding-bottom: 1.2rem;
}

.home-button{
    display: flex; flex-direction: column; list-style: none; justify-content: center; align-items: center;
    flex: auto;
    position: relative;
    border-style: outset; border-color: var(--thick-border); border-radius: 1.2rem;
    text-decoration: none;
    background-color: var(--block);
    padding-top: 1.2rem; padding-bottom: 1.2rem;
}


/* SEARCH BAR */

.search-bar{
    display: flex; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center;
    max-width: 64rem;
    width: 100%;
    height: 3.6rem;
    margin-left: auto; margin-right: auto;
    background-color: var(--block);
    border-style: solid; border-top: 0; border-left: 0; border-right: 0; border-color: var(--thin-border); border-width: 1px;
}

.search-items{
    position: relative;
    height: 2.4rem;
    width: 80%;
}

.search-items input{
    /* all:unset; */
    font: unset;
    color: unset;
    background-color: var(--search-back);
    width: 100%;
    height: 2.4rem;
    border-style: solid; border-color: var(--thin-border); border-width: 1px;
}

/* SEARCH RESULTS */

#search-results{
    display: flex; flex-direction: column;
    width: 100%;  
}

#search-results h2{
    visibility: collapse;
}

#search-results ul{
    background-color: var(--search-back);
    padding-left: 0;
    margin-top: 0;
    list-style: none;
    z-index: 1;
    border-style: solid; border-color: var(--thin-border); border-width: 1px; border-top: 0; border-bottom: 0;
}

#search-results li{
    display: flex; align-items: center;
    min-height: 2.4rem;
    border-style: solid; border-width: 1px; border-color: var(--thin-border); border-left: 0; border-top: 0; border-right: 0;
}

#search-results a{
    text-decoration: none;
}

.search-icon{
    min-width: 2.6rem;
}

.search-icon img{
    margin-left: auto;
    height: 1.8rem;
    display: block;
}

.search-icon.album img{
    display: block;
    height: 1.2rem;
    margin-left: auto;
}

.search-type{
    font-size: small;
    color: var(--light-box-text);
    margin-left: .3rem;
    min-width: 2.6rem;
}

/* MAIN PAGE */

main{
    background-color: var(--block);
    max-width: 64rem;
    width: 100%;
    margin-left: auto; margin-right: auto;
}

main ul{
    display: flex; flex-direction: column;
    margin: 0;
    padding-left: 0;
}

/* FOOTER */

footer{
    background: linear-gradient(90deg, lch(10% 90 50), lch(35% 90 50) 25%, lch(35% 90 50) 75%, lch(10% 90 50));
    width: 100%;
    padding: 0;
    margin-top: auto;
}

.footer-content{
    display: flex; justify-content: center; flex-wrap: wrap; align-items: center;
    max-width: 64rem;
    margin-left: auto; margin-right: auto; margin-bottom: .3rem; margin-top: .3rem;
}

.footer-content span{
    font-size: calc(.7rem + .3vw);
    margin-left: 1.2rem; margin-right: 1.2rem;
    text-align: center;
    color: lch(90% 25 85);
}

.footer-content a{
    color: lch(90% 25 85);
}

.copyright{
    display: flex;
    flex-wrap: wrap;
    column-gap: .3em;
    justify-content: center;
    margin-left: 1.2rem; margin-right: 1.2rem;
}

.copyright span{
    margin: 0;
    text-align: center;
}
/* INDEX LISTS */

.album-list{
    display: flex; flex-direction: column;
}

.category-list{
    display: flex; flex-wrap: wrap; align-content: flex-start; flex-basis: 51%;
    justify-content: center;
}

.album-icon{
    display: inline-block;
    align-self: center;
}

/* INDEX BLOCKS */

.sort-box{
    margin-top: 1.2rem; margin-left: 1.2rem; margin-right: 1.2rem;
}

.sort-box.album:not(:first-child){
    margin-top: 2.4rem;
}

.sort-box:last-child{
    margin-bottom: 1.2rem;
}

.sort-box.category{
    width: 29.6rem;
    background: var(--block);
}

.sort-header{
    border-style: solid; border-top: 0; border-left: 0; border-right: 0; border-width: 1px; border-color: var(--thin-border);
}

.sort-header.album{
    display: flex; align-items: center;
    font-size: calc(.7rem + .4vw);
    background: var(--block);
    position: sticky;
    top: 0;
    gap: .6rem;
}

.date{
    margin-top: .6rem; margin-left: 2.4rem;
    font-size: small;
}

/* INDEX ENTRIES */

.entry-box{
    display: flex; align-items: center;
    list-style: none;
    min-height: 1.8rem;
    background-color: var(--box);
    border-radius: 1.2rem;
    margin-top: .6rem;
    text-decoration: none;
}

.entry-box.song{
    margin-bottom: .6rem;
}

.entry-box.song.empty{
    margin-top: 0; margin-bottom: 0; margin-right: 2.4rem;
    background: none;
}

.entry-box li{
    display: flex; flex: auto; flex-wrap: nowrap; align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 1.8rem;
}

.entry-box.motif li{
    justify-content: center;
    flex-grow: 0;
}

.entry-box.song li{
    justify-content: left;
}

.entry-box.motif::before{
    content: "";
    max-width: 3.6rem;
    flex-grow: 1;
    visibility: hidden;
    margin-right: auto;
}

.motif-name{
    text-align: center;
    color: var(--box-text);

}

.track-number{
    min-width: 2.4rem;
    margin-left: .6rem;
    color: var(--box-text);
}

.track-name{
    color: var(--box-text);
}

.track-name-jp{
    margin-left: 2.4rem;
    color: var(--light-box-text);
}

.empty{
    color: var(--light-text);
}

.clip-count{
    color: var(--box-text);
    display: inline;
    text-align: left;
    min-width: 2.4rem;
    margin-left: .24rem;
}

.count-icon{
    width: 1.2rem; height: 1.2rem;
    margin-left: auto;
    display: block;
}

/* SONG INDEX ALBUM DROPDOWNS */

.sort-list.album{
    display: none;
}

.sort-header.album > *{
    cursor: pointer;
    pointer-events: none;
}

.sort-header.album::after{
    content: "▼";
    margin-left: auto;
    color: var(--thin-border);
}

.sort-header.album.open::after{
    content: "▲";
}

.sort-header.album.open ~ .sort-list.album{
    display:initial
}



/* ENTRY PAGE TITLES */

.title-box{
    margin: 1.2rem; margin-bottom: 1.2rem;
    background: var(--box);
}

.eng-title{
    display: flex; align-items: center;
    color: var(--box-text);
}

.title-box img{
    margin-left: .6rem;
}

.title-box h1{
    margin-left: .6rem;
    min-width: 0;
    font-size: calc(1.2rem + .6vw);
}

.title-jp{
    color: var(--light-box-text);
    margin-right: 1.2rem; padding-bottom: .6rem;
    text-align: right;
}

.title-album{
    display: flex; align-items: center;
    margin-left: auto;
}

.title-album img{
    margin: 0;
    display: block;
    margin-right: .6rem;
}

/* ENTRY PAGE DETAILS */

.track-info{
    display: flex; flex-wrap: wrap; justify-content: space-around;
    row-gap: 1.2rem;
}

.track-info li{
    list-style: none;
}

.songpage-detail{
    display: flex; flex-direction: column;
    min-width: 18rem;
    margin-left: 1.2rem; margin-right: 1.2rem;
}

.songpage-detail ul{
    gap: .6rem;
}

.songpage-detail h2{
    text-align: center;
    margin-bottom: 1.2rem;
}

.songpage-detail li{
    display: flex; align-items: baseline; gap: .6rem;
    flex-wrap: wrap;
}

.songpage-credit{
    font-size: small;
    min-width: 4.2rem;
    text-align: right;
}

.songpage-img{
    display: inline-block;
    height: 1.2rem;
    align-self: flex-end;
}

.song-location{
    display: flex; flex-direction: column;
    width: 100%;
    justify-content: center;
}
.song-location h2{
    text-align: center;
    margin-bottom: 1.2rem;
}

.entrypage-connections{
    display: flex; flex-direction: column;
    width: 100%;
    justify-content: center;
}
.entrypage-connections h2{
    text-align: center;
    margin-bottom: 1.2rem;
}

.entrypage-clip{
    display: flex; flex-wrap: wrap-reverse;
    margin-bottom: 1.2rem;
    column-gap: 2.4rem; row-gap: .6rem;
    justify-content: center;
    align-items: center;
}

.connection-icon{
    display: inline-block;
    width: 1.2rem; height: 1.2rem;
}

.clip-pointer{
    display: flex; justify-content: center; align-items: center;
    width: 18rem;
    gap: .3rem;
    text-align: center;
}

.clip-album-icon{
    height: 1.2rem;
}

.clip-pointer a{
    flex-shrink: 1;
}