@import url('https://fonts.bunny.net/css2?family=Winky+Rough:ital,wght@0,300..900;1,300..900&display=swap');

@font-face {
    font-family: 'Starstruck';
    src: url("/_fonts/Starstruck.ttf");
}

@font-face {
    font-family: 'MidnightMemories';
    src: url("/_fonts/KGMidnightMemories.ttf");
}


:root {
    --border-color: white;
    --body-background: url("/_images/space_tile.png");

    --title-border-color: navy;
    --home-link-font-color: navy;
    --home-link-font: 'Starstruck';

    --nav-background-color: #D4F9FF;
    --nav-font-color: #39135C;
    --nav-font: 'MidnightMemories';
    --nav-fieldset-toggle-border: 1px dotted rgba(0, 0, 0, 0.36);
    --nav-fieldset-border: 1px dashed rgba(0, 0, 0, 0.36);
    --nav-fieldset-font-color: navy;

    --content-background-color: rgba(0, 0, 0, 0.36);
    --content-font-color: white;
    --content-font: 'Winky Rough';
    --content-font-link-color: var(--nav-background-color);
    --date-font-color: #FFE1FF;

    --link-hover-color: magenta;

    --fullscreen-width: 72%;
    --mobile-width: 97%;
}
html, body {
    margin: 0;
    height: 100%;
}

body {
    background: var(--body-background);
    background-size: fit;
    display: flex;
    flex-wrap: wrap;
    align-content: stretch;
}


a:hover {
    text-shadow: var(--link-hover-color) 0px 0px 4px; 
}

#sidebar {
    /*border: 1px solid cyan;*/
    display: flex;
    flex-direction: column;
    order: 1;
    flex-grow: 1;
    height: auto;

    header {
        background-image: url("/_images/clouds.jpg");
        background-size: cover;
        height: 8rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;

        display: flex;
        justify-content: center;
        align-items: center;

        border-bottom: 4px dotted var(--title-border-color);

        #home-link {
            color: var(--home-link-font-color);
            text-decoration: none;
            font-size: 32pt;
            font-family: var(--home-link-font);
        }
    }

    nav {
        height: 100%;
        padding: 1rem;
        background: var(--nav-background-color);
        display: flex;
        gap: 1rem;
        align-items: center;
        flex-direction: column;
        font-family: var(--nav-font);
        font-size: 16pt;
        font-weight: bold;
        text-align: center;

        #nav-links {
            display: flex;
            row-gap: 0.5rem;
            column-gap: 2rem;
            /*: 2rem;*/
            justify-content: center;
            flex-wrap: wrap;
            max-width: 400px;

            a {
                text-decoration: none;
                color: var(--nav-font-color);
            }
        }

        #nav-fieldset-toggle {
            display: none;
            border: var(--nav-fieldset-toggle-border);
            border-radius: 8px;
            background: none;
            width: 80%;
            max-width: 400px;
        }

        #nav-fieldsets {
            display: flex;
            flex-direction: column;
            width: 80%;
            gap: 1rem;
            max-width: 600px;
            fieldset {
                text-align: center;
                font-size: 13pt;
                color: var(--nav-fieldset-font-color);
                /*width: 100%;*/
                border-radius: 4px;
                border: var(--nav-fieldset-border);
            }

            #currently-playing legend {
                margin-left: auto;
                margin-right: 1rem;
            }
        }
    }
}

main {
    /*border: 1px solid yellow;*/
    order: 2;
    flex-grow: 4;
    overflow: scroll;
    background: var(--content-background-color);
    font-size: 14pt;
    min-width: 400px;
    height: 100%;
    width: auto;


    img {
            max-width: 100%;
            display: block;
            margin-left: auto;
            margin-right: auto;
            margin-top: 1rem;
            margin-bottom: 1rem;
        }

    #main-content {
        padding: 2.5rem;
        color: var(--content-font-color);
        font-family: var(--content-font);
        max-width: 40rem;
        margin-left: auto;
        margin-right: auto;

        h1, h2 {
            text-align: center;
        }

        a {
            color: var(--content-font-link-color);
        }

        fieldset {
            min-width: 300px;
            /*border: none;*/
            border-radius: 4px;
            border: 2px solid rgba(100, 100, 100, 0.2);
            padding: 0;
            margin: 0;
            /*background: white;*/
            padding: 1rem;

            /*legend {
                padding-left: 0.5rem;
                padding-right: 0.5rem;
                padding-top: 0.2rem;
                padding-bottom: 0.2rem;
                border-radius: 2px;
                background: pink;
            }*/
        }

        .date {
            color: var(--date-font-color);
        }

        #front-page-fieldsets {
            /*border: 1px dashed white;*/
            display: flex;
            gap: 1rem;
            flex-direction: column;
            flex-wrap: wrap;
            /*justify-content: space-between;*/

            fieldset {
                /*min-width: 400px;*/
                border: 2px solid white;
                border-radius: 4px;
            }
        }
    }
}

.shelf {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    justify-content: center;
    align-items: baseline ;
    max-height: 300px;
    overflow: scroll;

    .shelf-link {
        width: 100px;
        max-height: 200px;
        font-size: 13pt;
        text-align: center;
        margin-bottom: 1rem;
    }
}

/* Mobile Overrides */
@media (max-width: 1000px) {
    main {
        width: 100%;
        min-width: auto;
        height: auto;
        overflow: auto;

        #main-content {
            padding-left: 1rem;
            padding-right: 1rem;
        }
    }

    #sidebar header {
        height: 100%;
    }

    #sidebar nav #nav-fieldset-toggle {
        display: inline-block;
    }
    
    #sidebar nav #nav-fieldsets {
        display: none;
    }
}