@import "https://fonts.googleapis.com/css?family=Fira+Sans"; 
@font-face{
    font-family: Penumbra;
    src: url("assets/fonts/Penumbra.otf") format("opentype");
}


:root{
    --white: HSL(0, 0%, 100%);
    --lightgrey: HSL(0, 0%, 85%);
    --grey: HSL(0, 0%, 50%);
    --darkgrey: HSL(0, 0%, 25%);

    --seafoam: HSL(143, 90%, 85%);
    --seafoam-shaded: HSL(143, 50%, 75%);

    --lightgreen: HSL(105, 100%, 90%);
    --lightgreen-shaded: HSL(105, 50%, 80%);
    --green: HSL(105, 35%, 65%);
    --green-shaded: HSL(105, 15%, 50%);

    --lightblue: HSL(205, 60%, 95%);
    --lightblue-shaded:HSL(205, 50%, 80%);
    --blue: HSL(205, 35%, 65%);
    --blue-shaded: HSL(207, 25%, 35%);
}

*{
    padding:0;
    margin:0;
    border:none;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;

    font-family: 'Fira Sans';
    color:var(--darkgrey);
    text-wrap: pretty;
    font-size: 12px;
}

img{
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

body{
    display:flex;
    width:100dvw;
    height:100dvh;
    justify-content: center;
    overflow:hidden;
    padding-bottom: 24px;
    background-color:var(--blue-shaded);
}

/* font setup */
section footer *,
section header,
body>footer button{
    font-family: 'Penumbra';
}
nav button,
h1,
h1 span,
h2,
h2 span,
.slogan{
    font-family: 'Penumbra';
    font-weight: 700;
}
h1 span,
h1{
    font-size:x-large;
}
.song-title,
h2 span,
h2{
    font-size: large;
}

h3,
h3 span,
body>footer *,
.song-artist,
nav button{
    font-size:larger;
}
section header *{
    font-size: small;
}

/* placeholders */

.placeholder{
    display:flex;
    flex-shrink:1;
    flex-grow:1;
    border-radius:4px;
    justify-content: center;
    align-items: center;
}
.placeholder.hidden{
    display:none !important;
}
.placeholder.blue{
    background-color:var(--blue);
}

/*  */

.show-li-feature-ul{
    text-align: center;
}

nav,main,aside{
    background-image: linear-gradient(to bottom, var(--darkgrey), var(--green));
    margin:8px 4px;
    padding:8px;
    border: solid 8px var(--lightgrey);
    border-radius: 16px;
}

aside,
nav{
    flex-grow:0;
    flex-shrink:0;
    width:240px;
    height:fit-content;
}

main{
    flex-grow:1;
    flex-shrink:1;
    max-width:728px;
    min-width:300px;
    overflow-y: scroll;
    scrollbar-color: var(--lightgrey) rgba(0,0,0,0);
    padding-right: 0;
    height:fit-content;
    max-height: calc(100% - 16px);
}

/* dialogs */

dialog{
    background: none;
    margin:auto;
    position:absolute;
}
dialog[open]{
    display:flex;
}
dialog::backdrop{
    background-color:rgb(0,0,0,0.5);
}

#lccfamily-dialog section{
    width:100%;
}
#lccfamily-dialog header{
    height:64px;
    margin-bottom:8px;
}
#lccfamily-dialog div{
    display:flex;
    gap:8px;
    width:fit-content;
    margin:auto;
}
#lccfamily-dialog div a{
    width:116px;
    display: block;
}

#lccfamily-dialog div a img{
    transition: transform 0.25s;
}

#lccfamily-dialog div a:hover img{
    transform:scale(1.1);
}

/* footer */

body>footer{
    text-align: center;
    position:absolute;
    bottom:0;
    width:100vw;
    background-color:var(--darkgrey);
}
body>footer>p{
    color:var(--white);
}
body>footer>button{
    display:inline-block;
}
.footer-nav-button{
    color:var(--seafoam);
}
.footer-nav-button:hover{
    color:var(--seafoam-shaded);
    cursor:pointer;
}
body>footer button:last-of-type{
    margin-right:8px;
}
span{
    font:inherit;
    color:inherit;
    font-size:inherit;
}
/* button rows */

section>.button-row{
    background-color:var(--green);
    padding:8px 4px;
    border-radius: 4px;
}

section>.button-row>button{
    border-radius: 999px;
}

.button-row{
    display:flex;
    gap:4px;
}

.button-row>*{
    flex-grow:1;
}

/* buttons base */
section>label:has(input),
section>label:has(select){
    margin:auto;
}
button{
    height:24px;
    padding:0 8px;
    background-color:var(--lightgreen);
}
button:not(:disabled):hover{
    cursor:pointer;
    background-color:var(--lightgreen-shaded);
}
button:not(:disabled):active{
    cursor:pointer;
    filter:brightness(0.9);
}
button:disabled{
    background-color: var(--lightgreen-shaded);
}
/* vote buttons */

.vote-button{
    padding:0 16px;
    display: flex;
    align-items: center;
}

.vote-button>img{
    height:16px;
    margin-right:4px;
}

/* ul buttons */
.split-ul{
    display:flex;
    gap:8px;
}
.split-ul ul{
    flex-grow:1;
    flex-shrink:1;
    flex-basis:50%;
}
ul{
    gap:1px;
    display:flex;
    flex-direction: column;
}
ul:has(button){
    width:100%;
}

ul>.divider{
    display:block;
    height:8px;
}

/* album covers */

aside .album-cover{
    width:100%;
    border-radius: 4px;
}

.album-cover{
    aspect-ratio: 1 / 1;
    background-color: var(--darkgrey);
}

/* tune in button */

#tunein-button{
    width:100%;
    border-radius: 4px;
}
#tunein-button.hidden{
    display: none;
}
#tunein-button:hover{
    filter:brightness(0.75);
    cursor: pointer;
}

/* tables */

table{
    background-color: var(--blue);
    border-spacing:0;
    table-layout: fixed;
    border-radius:4px;
    overflow: hidden;
}
tr{
    height:20px;
}
thead td{
    color:white;
}
table .vote-button{
    display:table-cell;
    padding:2px 8px;
}
table .vote-button:not(.disabled):hover{
    cursor:pointer;
    background-color:var(--white);
}
table .vote-button.disable span{
    color:var(--grey);
}
tbody tr{
    background-color:var(--lightblue);
}
tbody tr:nth-child(even){
    background-color:var(--lightblue-shaded);
}
td{
    padding:2px 8px;
    vertical-align: bottom;
}
td>button:hover{
    background-color:var(--grey);
}
td>button:hover::after{
    content:"+";
}

/* sections */

section{
    display:flex;
    flex-direction: column;
    gap:8px;
    background-color:var(--lightgrey);
    padding:8px;
    border-radius:8px;
    filter:drop-shadow(0 4px 2px rgba(0,0,0,0.35));
}

section:not(:last-child){
    margin-bottom:8px;
}
section h1,
section h2,
section h3,
section h2 span,
section header,
section menu,
section footer{
    text-align:center;
}

.section-row{
    display:flex;
    gap:8px;
    justify-content:stretch;
    align-items: start;
}
.section-row>section{
    flex-grow: 1;
    flex-shrink: 1;
}

section>menu{
    width:100%;
    justify-content: space-between;
    align-items: center;
}
section>menu button{
    border-radius: 999px;
}

/* nav ul */
nav ul{
    padding:8px 0;
    background-color:var(--green);
    border-radius:4px;
}

/* song info */

.song-info{
    padding:8px 0;
    background-color:var(--blue);
    border-radius:4px;
    text-align: center;
}
#nowplaying-section .song-info>*{
    background-color:var(--lightblue);
    padding:0 8px;
}

#recentlyplayed-section li{
    background-color:var(--lightblue);
    padding:0 8px;
}
#recentlyplayed-section li:hover{
    background-color:var(--lightblue-shaded);
    cursor: pointer;
}

/* volume slider */
#nowplaying-controller-div{
    height:32px;
    padding-top:8px;
    transition:height 0.5s ease, padding-top 0.5s ease;
    overflow:hidden;
}
#nowplaying-controller-div.hidden{
    height:0;
    padding-top:0;
}

#nowplaying-volume-div{
    padding: 0 8px;
}
#nowplaying-volume-track{
    height:4px;
    background-color:var(--darkgrey);
    border-radius: 999px;
    width:100%;
    position:relative;
}
#nowplaying-volume-slider{
    width:16px;
    height:16px;
    position:absolute;
    background-color:var(--lightgreen);
    border-radius: 999px;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    border: 2px solid var(--darkgrey);
}
#nowplaying-volume-slider:hover{
    background-color:var(--lightgreen-shaded);
    cursor:pointer;
}
#nowplaying-volume-label{
    padding-top:8px;
    display: flex;
    justify-content: space-between;
}

/* pages */

.page.hidden{
    display:none;
}

/* articles */

article *{
    white-space: pre-line;
}

article{
    padding:8px;
    border-radius: 4px;
    background-color:var(--lightblue);
    max-width: 728px;
    overflow-y:scroll;
    text-align: center;
}
article p span,
article p{ font-size:medium }

article a{
    display:inline-block;
    padding:8px 16px;
    margin-top:4px;
    background-color: var(--lightgreen);
    border: 4px solid var(--green);
    border-radius: 999px;
}
article a:hover{ background-color:var(--lightgreen-shaded); }


article *.C{ text-align: center; }
article *.L{ text-align: left; }
article *.R{ text-align: right; }
article img.C{ margin: auto; display:block; }
article img.L{ float:left; }
article img.R{ float:right; }
article *.justified{ text-align: justify; }
article *.justified.C{ text-align-last: center; }
article *.justified.L{ text-align-last: left; }
article *.justified.R{ text-align-last: right; }
article *.width-1{
    width:100%;
    max-width: 100%;
    max-height: initial;
}
article *.width-2{
    width:50%;
    max-width: 50%;
    max-height: initial;
}
article *.width-3{
    width:33%;
    max-width: 33%;
    max-height: initial;
}
article *.width-4{
    width:25%;
    max-width: 25%;
    max-height: initial;
}
article *.width-5{
    width:20%;
    max-width: 20%;
    max-height: initial;
}
article *.width-6{
    width:16%;
    max-width: 16%;
    max-height: initial;
}

.flex{
    display:flex;
}

/* gallery */
.gallery{
    background-color:var(--blue);
    padding:16px;
    border-radius:8px;
    gap:8px;
}
.gallery.loose>li{
    height:fit-content;
}
.gallery>li{
    padding:8px;
    border-radius:4px;
    background-color:var(--lightblue);
    display:flex;
    height:128px;
    gap:8px;
}

.gallery>li:hover{
    background-color:var(--lightblue-shaded);
    cursor:pointer;
}
.gallery>li>div{
    display:flex;
    flex-direction: column;
    text-align: left;
    flex-grow:1;
}

#mobile-menu{
    display:none;
    width:100%;
    height:100%;
    position:absolute;
    top:calc(100% - 48px);
    flex-direction: column;
    background-color:var(--darkgrey);
    transition: top 0.5s ease-out;
    padding:0 8px 8px;
}
#mobile-menu.open{
    top:0;
}
#mobile-menu img{
}
#mobile-menu header{
    height:48px;
    display:flex;
    justify-content: space-between;
}
#mobile-menu header button{
    height:32px;
    width:32px;
    margin: 8px;
    border-radius:4px;
}
#mobile-menu section{
    flex-grow:1;
    overflow-y: scroll;
}
#mobile-menu ul{
    background-color:var(--green);
    padding:8px 0;
    border-radius:4px;
}
#mobile-menu p{
    text-align: center;
}
#mobile-menu ul button{
    height: 40px;
    font-size:large;
}

@media only screen and (orientation: portrait) {
    footer,
    aside,
    nav{
        display:none;
    }
    body{
        padding-bottom:48px;
    }
    main{
        padding-right:8px;
    }
    .flex,
    .section-row{
        flex-direction: column;
    }
    #mobile-menu{
        display:flex;
    }
    .page>section{
        overflow-x: clip;
    }
    dialog{
        height:100%;
    }
    dialog section{
        width:100%;   
    }
    dialog section div{
        flex-grow:1;
        flex-shrink:1;
        gap:8px;
        min-height: 0;
    }
    dialog section>img{
        height:initial;
    }
    dialog article{
        flex-grow:1;
        flex-shrink:1;
    }
    article img{
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 4px 0 !important;
    }
    article p:not(.C){
        text-indent: 4rem;
        text-align: justify;
    }
    td.vote-button{
        width:30px;
        text-align: center;
    }
    thead{
        display: none;
    }
    td{
        align-content:center;
    }
    table{
        width:100%;
    }
    #nowplaying-section{
        display:block;
    }
    #nowplaying-section h2{
        display:none;
    }

    #nowplaying-img,
    #tunein-button{
        width: 50%;
        float:left;
    }

    #nowplaying-info,
    #nowplaying-placeholder,
    #nowplaying-controller-div,
    #nowplaying-section .button-row{
        width:45%;
        float:right;
        margin-bottom:5px;
    }
}