@import url('https://fonts.googleapis.com/css2?family=Chango&family=Freckle+Face&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* font-family: "Roboto", sans-serif; */
/* font-family: "Freckle Face", serif; */
/* font-family: "Chango", serif; */

/* reset */

:root{
    --white: HSL(0, 0%, 100%);
    --off-white: HSL(50, 100%, 90%);
    --yellow: HSL(50, 100%, 50%);
    --yellow-shaded: HSL(50, 50%, 35%);
    --blue: HSL(210, 80%, 25%);
    --dark-gray: HSL(0, 0%, 10%);
    --light-gray: HSL(0, 0%, 75%);
    --black: HSL(0, 0%, 0%);
}

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

    font-family: 'Roboto';
    color:var(--black);
    text-wrap: pretty;
    font-size: 12px;
}

img{
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
a,
span{
    font:inherit;
    color:inherit;
    font-size:inherit;
}
.placeholder{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.placeholder img{
    margin:auto;
    width:36px;
    height:36px;
}
/* text */

h1{
    font-family: "Chango";
}

#tune-in-button,
nav button,
h2,h3{
    font-family: "Freckle Face";
}

h4,h5,h6{
    font-family:"Roboto";
}

#tune-in-button{
    font-size:xx-large;
}
h1{ font-size: x-large; }
h2{font-size: xx-large;}
nav button,
h3{font-size: x-large;}
h4{font-size: large;}
h5, h6{font-size: larger;}

#page-label{ text-transform: uppercase; }

/* layout */

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

body>div{
    position:relative;
    width:fit-content;
    height:100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* nav */
#kslg-logo,
nav button:hover{
    cursor: pointer;
}

menu:has(nav){
    position:absolute;
    left:0;
    height:720px;
    z-index:50;
}

#outlink-nav{
    position:absolute;
    bottom:0;
    left:250%;
    display: flex;
    height:5%;
    align-items: end;
}

nav button{
    display: block;
    position:relative;
    margin-bottom:10px;
    border-radius: 100%;
    text-align: center;
    align-content:center;
    background-color:var(--yellow);
    border:10px solid var(--black);
}
nav button:hover{
    background-color: var(--yellow-shaded);
    cursor:pointer;
}
#main-nav button{
    width:180px;
    height:60px;
}
#outlink-nav button{
    width:72px;
    height:72px;
}

#main-nav button:nth-child(1){ left:-15%; }
#main-nav button:nth-child(2){ left:-17.5%; }
#main-nav button:nth-child(3){ left:-12.5%; }
#main-nav button:nth-child(4){ left:0%; }
#main-nav button:nth-child(5){ left:20%; }
#main-nav button:nth-child(6){ left:52.5%; }

#outlink-nav button:nth-child(1){ bottom: 0; margin-right:5px; }
#outlink-nav button:nth-child(2){ bottom: 35%; margin-right:1px; }
#outlink-nav button:nth-child(3){ bottom: 100%; }

/* main */

main{
    position:relative;
    width:1080px;
    height:720px;
    border-radius:100%;
    background-color:var(--blue);
    border:20px solid var(--black);
    overflow:clip;
}
main>div{
    position:relative;
    height:150%;
    top:-25%;
    padding:17.5% 10px 21%;
    gap:10px;
    margin-left:30%;
    margin-right:20%;
    z-index:10;
    background-color: var(--yellow);
    border:10px solid var(--black);
    display:flex;
    flex-direction: column;
}
main>div>header,
main>div>footer{  margin-left:12.5%; }

#page-wrapper{
    background-color:white;
    border:10px solid black;
    overflow-y:scroll;
    overflow-x: hidden;
    flex-grow:1;
}

#main-cover{
    height:150%;
    position:absolute;
    top:-200%;
    padding:17.5% 10px;
    gap:10px;
    background-color: var(--black);
    border:10px solid var(--black);
    margin-left:30%;
    width:50%;
    z-index:15;
    transition: top 1s;
}
#main-cover.active{ top:-25% !important; }
.hidden{ display:none !important; }
/* aside */

aside{
    position:absolute;
    height:fit-content;
    right:0;
    padding:10px;
    background-color:var(--yellow);
    border:10px solid var(--black);
    display:flex;
    flex-direction: column;
    gap:10px;
}
#album-art-wrapper{
    width:160px;
    background-color: var(--black);
}
aside>div,
aside>ul{
    width:160px;
    border:10px solid var(--black);
}
aside>h5{
    text-align: center;
}
aside p{
    padding:10px;
    background-color:var(--white);
    text-align: center;
}
aside li{
    background-color: var(--white);
    align-content: center;
}
aside li:not(:last-child){
    border-bottom: 2px solid var(--black);
}
.vote-button{
    padding:2px 5px;
    margin-top:5px;
}
.vote-button:hover:not(:disabled){
    background-color: var(--yellow);
    cursor: pointer;
}
.vote-button:disabled{
    background-color:var(--light-gray);
}
.thumb{
    width:16px;
    height:16px;
}

/* volume slider */

#tune-in-button{
    width:140%;
    left:-20%;
    position:relative;
    border:10px solid black;
    border-radius:100%;
    padding:15px;
    background-color:var(--white);
}
#tune-in-button:hover{
    cursor: pointer;
    background-color:var(--off-white);
}

#nowplaying-controller-div{
    width:160px;
}
#volume-slider{
    padding:0 5px;
}
#volume-slider-track{
    height:5px;
    width:100%;
    background-color: var(--black);
    border-radius:5px;
    position:relative;
}
#volume-slider-handle{
    position:absolute;
    left:0;
    width:20px;
    height:20px;
    background-color:var(--white);
    border:5px black solid;
    border-radius:999px;
    top:50%;
    transform: translate(-50%, -50%);
}
#volume-slider-handle:hover{
    background-color:var(--off-white);
    cursor: pointer;
}
#volume-slider-label{
    margin-top:15px;
    display:flex;
    justify-content: space-between;
    user-select: none;
}
#volume-slider-label p{
    padding:0;
    background:none;
}

/* sluggie */

#sluggie-wrapper{
    position:absolute;
    z-index:5;
    right:61.5%;
    width:256px;
    height:518px;
}

#sluggie{
    width:100%;
    height:100%;
}
#sluggie-wrapper #sluggie-eye-l-wrapper{
    position:absolute;
    top:29.5%;
    left:23%;
    width:16px;
    height:24px;
}
#sluggie-wrapper #sluggie-eye-r-wrapper{
    position:absolute;
    top:32%;
    left:49%;
    width:16px;
    height:24px;
}
#sluggie-eye-l,
#sluggie-eye-r{
    width:8px;
    height:12px;
    background-color:var(--black);
    border-radius:100%;
    position:relative;
}
#sluggie-eye-l,
#sluggie-eye-r{
    transform:translate(-50%, -50%);
    top:50%;
    left:50%;
}

#notice{
    position:absolute;
    top:10%;
    right:40%;
    background-image: url(assets/images/notice.png);

    animation: bob 1s alternate infinite ease-in-out;
}
#notice:hover{
    cursor:pointer;
    background-image: url(assets/images/notice-hover.png);
}

@keyframes bob {
    to { transform: translatey(-10%);}
}

/* cat */

#cat-wrapper{
    width:300px;
    height:250px;
    position:absolute;
    left:0;
    bottom:0;
}
#cat-wrapper img{
    position:absolute;
    left:0;
    bottom:0;
}
#cat-main{
    z-index:500;
}
#cat-main:hover{
    cursor: pointer;
}
#cat-tail{
    transition:transform 0.5s ease;
    transform: translateY(100%);
}
#cat-tail.active{
    transform: translateY(0%);
}

/* footer */

body>footer{
    text-align: center;
    position:absolute;
    bottom:0;
    width:100vw;
    height:24px;
    background-color:var(--black);
}
body>footer>p{
    color:var(--white);
    height:100%;
}
body>footer button{
    height:100%;
    display:inline-block;
    background-color:var(--yellow);
    padding:0 10px;
}
body>footer button:hover{
    cursor: pointer;
    background-color:var(--yellow-shaded);
}
body>footer a{
    color:var(--yellow);
}
body>footer a:hover{
    color:var(--yellow-shaded);
    cursor:pointer;
}

.collapsible{
    overflow: hidden;
}
.collapsed{
    height:0;
}

/* galleries */

.gallery>li {
    border-top: dashed var(--black) 2px;
    margin-left:10px;
}
.gallery>li:last-child{
    border-bottom: dashed var(--black) 2px;
}
.gallery>li>div{
    display:flex;
    gap:10px;
    padding:10px;
}
.gallery>li>div *{
    text-align: left;
}
.gallery>li>div h1{
    line-height:3rem;
}
.gallery>li>div:hover{
    background-color:var(--off-white);
    cursor: pointer;
}
.djs-li>div{
    height:110px;
}

/* tables */

table{padding:10px;}
tr{ vertical-align: middle;}
tr:nth-child(odd){ background-color:var(--off-white); }
td.vote-button{ text-align: center; }
td.vote-button:hover{
    background-color:var(--yellow);
    cursor:pointer;
}

#playlist-table-body td:nth-child(1){ width:15% }
#playlist-table-body td:nth-child(2){ width:35% }
#playlist-table-body td:nth-child(3){ width:30% }
#playlist-table-body td:nth-child(4){ width:10% }
#playlist-table-body td:nth-child(5){ width:10% }

/* pages */

.page h1,
.page h2,
.page h3,
.page h4,
.page h5,
.page h6{
    text-align:center;
}
.page section{
    margin:10px;
    padding-bottom:10px;
}

.page section:not(:last-of-type)::after{
    content:"";
    width:67%;
    margin:auto;
    display:block;
    height:12px;
    border-bottom: 2px dashed var(--black);
}

.page section label{
    width:100%;
    display:flex;
    justify-content: center;
    padding-bottom:10px;
    place-items:baseline;
    gap:5px;
}

select{
    background-color:var(--off-white);
    border:1px solid var(--black);
}
select:hover{
    cursor: pointer;
}

/* articles */

article.collapsible:not(.collapsed){
    border-top:4px dotted var(--black);
    padding-top:5px;
}

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

article p{
    line-height: 1.5rem;
    text-align: justify;
    text-indent:2rem;
}
article p.C{
    text-align: center;
    text-indent:0;
}

/* dialog */

dialog::backdrop{
    background-color: rgba(0,0,0,50%);
}
dialog{
    margin: auto;
    padding:20px 20px 5px;
    background-color:var(--yellow);
    border:10px solid var(--black);
    border-radius:100%;
    text-align: center;
}
dialog button{
    padding: 10px 10px 5px ;
    border:5px solid var(--black);
    border-radius:100%;
    font-family: "Freckle Face";
    font-size: x-large;
}
dialog article{
    width:480px;
    background-color:var(--white);
    border:10px solid var(--black);
    margin:16px;
    padding:16px;

}
dialog button:hover{
    background-color:var(--off-white);
    cursor: pointer;
}
dialog header{
    width:320px;
    margin:auto;
}
dialog div{
    margin:10px;
}
dialog a img{
    transition:transform 0.25s;
}
dialog a:hover img{
    transform: scale(1.1);
}
dialog div a{
    width:160px;
    display: inline-block;
    position:relative;
    
}
dialog div a:nth-child(1){ bottom:45px; }
dialog div a:nth-child(2){ bottom:5px; }
dialog div a:nth-child(3){ bottom:0px; }
dialog div a:nth-child(4){ bottom:5px; }
dialog div a:nth-child(5){ bottom:45px; }

#notice-board-menu{
    display:flex;
    justify-content: center;
    align-items: center;
    gap:16px;
}

/* edge case */

.show-li{
    padding-top:10px;
}

.show-li div,
.feature-li div{
    flex-direction: column;
}

.mobile-only{
    display: none;
}

@media only screen and (orientation: portrait) {
    .desktop-only,
    footer,
    aside,
    nav{
        display:none;
    }
    .mobile-only{
        display: block;
    }
    body{
        padding-bottom:100px;
    }
    body>div{
        width:100%;
    }
    footer.mobile-only{
        background-color: var(--yellow);
        width:100%;
        height:100px;
        overflow: hidden;
    }
    #mobile-nav-screen.active{
        right:0%;
        z-index:600;
    }
    #mobile-nowplaying-screen.active{
        left:0%;
        z-index:600;
    }
    #mobile-nav-screen,
    #mobile-nowplaying-screen{
        position: fixed;
        height:100dvh;
        width:100dvw;
        top:0;
        z-index:500;
        background-color:var(--dark-gray);
    }
    #mobile-nav-screen{
        right:100%;
        transition:right 0.5s, z-index 0.5s;
    }
    #mobile-nowplaying-screen{
        left:100%;
        transition:left 0.5s, z-index 0.5s;
    }
    #mobile-nav-button{
        position:absolute;
        height:75px;
        width:125px;
        bottom:0;
        left:100%;
        border-top-right-radius: 999px;
        background-color:var(--black);
    }
    #mobile-nowplaying-button{
        position:absolute;
        height:75px;
        width:125px;
        bottom:0;
        right:100%;
        border-top-left-radius: 999px;
        background-color:var(--black);

    }
    #mobile-footer-kslg-logo{
        width:80px;
        height:80px;
        margin:auto;
        position:relative;
        top:10px;
    }

    #mobile-nowplaying-screen,
    #mobile-nav-screen{
        display:flex;
        flex-direction: column;
        justify-content: stretch;
        align-content: stretch;
    }
    #mobile-nav-ul-wrapper{
        flex-grow:1;
        overflow-y: scroll;
        width:100%;
        padding: 0 50px;
    }
    #mobile-nav-screen ul{
        width:100%;
        min-height: 100%;
        background-color:var(--black);
        padding-bottom: 50px;
        display:flex;
        flex-direction: column;
        gap:2px;
    }
    #mobile-nav-screen ul button{
        text-align: center;
        text-transform: uppercase;
        font-size: larger;
        line-height:2rem;
        background-color:var(--white);
        padding-top:0.5rem;
    }
    #mobile-nav-screen ul button:active{
        background-color:var(--off-white);
    }

    #mobile-nowplaying-wrapper{
        background-color:var(--yellow);
        padding: 10px 25px;
        margin:50px;
        flex-grow:1;
        border:10px solid var(--black);
        text-align: center;
        max-height:calc(100% - 100px);
        width:calc(100% - 100px);
        display:flex;
        flex-direction: column;
    }
    #album-art-wrapper{
        width:100%;
        border:10px solid var(--black);
    }
    #album-art-wrapper img{
    }
    #current-song-wrapper{
        border:10px solid var(--black);
        border-top:none;
        padding:10px;
        background-color:var(--white);
        margin-bottom:10px;
    }

    #mobile-nowplaying-footer{
        position:absolute;
        bottom:0;
    }

    #recently-played-wrapper{
        flex-shrink: 1;
        overflow-y: scroll;
        background-color:var(--white);
        padding:5px;
        border:10px solid var(--black);
        margin-top:10px;
    }
    #recently-played-wrapper li{
        padding:5px;
    }
    #recently-played-wrapper li:not(:last-child){
        border-bottom:1px dashed var(--black);
    }

    #nowplaying-controller-div{
        width:100%;
    }

    #mobile-nowplaying-footer,
    #mobile-nav-footer{
        display: flex;
        height:75px;
        width:100%;
        justify-content: space-between;
        align-items: end;
    }
    #mobile-nowplaying-footer button,
    #mobile-nav-footer button{
        border-radius:999px;
        width:90px;
        height:90px;
        background-color:var(--yellow);
        border:10px solid var(--black);
        position:relative;
        overflow:hidden;
    }
    #mobile-nowplaying-footer button img,
    #mobile-nav-footer button img{
        width:100%;
        height:100%;
    }
    #mobile-nav-footer button:nth-child(1){ bottom:35px; }
    #mobile-nav-footer button:nth-child(2){ bottom:10px; }
    #mobile-nav-footer button:nth-child(3){ bottom:0px; }
    #mobile-nav-footer button:nth-child(4){ bottom:5px; }
    #mobile-nowplaying-footer button{ bottom:5px;}
    #mobile-nowplaying-footer button:active,
    #mobile-nav-footer button:active{
        background-color:var(--yellow-shaded);
    }
    dialog{
        border-radius:25px;
    }
    dialog header{
        width:100%;
    }
    dialog div{
        display:flex;
        width:100%;
        margin:10px 0;
        gap: 5px;
    }
    dialog div a{
        position: static;
    }
    dialog footer{
        display: block;
    }

    #mobile-page-wrapper{
        height:100%;
    }
    #page-wrapper{
        height:100%;
    }
}