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

main{
    background-image: linear-gradient(to bottom, var(--darkgrey), var(--green));
    margin:8px 4px;
    padding:8px 0 8px 8px;
    border: solid 8px var(--lightgrey);
    border-radius: 16px;
    flex-grow:1;
    flex-shrink:1;
    min-width:300px;
    overflow-y: scroll;
    scrollbar-color: var(--lightgrey) rgba(0,0,0,0);
}

/* 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;
}

/* album covers */

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

/* 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;
}

/* 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;
}

@media only screen and (orientation: landscape) {
    main{
        display:flex;
        gap:8px;
        align-items:stretch;
    }
    section{
        flex-grow:1;
        flex-shrink:1;
        flex-basis:50%;
        margin-bottom: 0 !important;
    }
}