@import url('https://fonts.googleapis.com/css2?family=Manrope&display=swap');

:root {
    --grey: #f9f9f9;
    --green: #82db4d;
    --gold: #fbd400;
}

body {
    font-family: 'Manrope', sans-serif;
    background:var(--grey) !important;
    display:flex;
    flex-direction:column;
}

    h1 {
        text-align:center;
    }


    #list {
        display:flex;
        flex-direction:row;
        justify-content: space-around;
        flex-wrap: wrap;
        margin-top:1em;
        width:100%;
    }

        #list div[loading="indicator"]{
            width:100%;
            height:100%;
        }




    @media (max-width: 600px) {
        #list {
            flex-direction:column;
            margin:1em;
        }

        div.jelly {
            /*width:100%;   */
        }
    }


    div.header{
        background:var(--gold);
        box-shadow: 0px 0px 10px #b7b7b7;
        display:flex;
    }

        div.header div.title {
            line-height: 100px;
            margin-left: 1em;
            font-size: 3em;
        }

    div.page{
        flex:1;
        display:flex;
    }

    @media (max-width: 600px) {
        div.page{
            flex-direction: column;
        }
    }


        div.page div.menu {
            flex:1;
            margin:1em 0.3em;
        }

            div.page div.menu div.options:not(:last-child) {
                 margin-bottom:1em;
            }

        div.page div.content {
            flex:5;
            display: flex;
        }

            div.page div.content > div {
                width:100%;
            }






    /*@media (min-width: 600px) {*/
    /*    div.jelly {*/
    /*        width:30vw;*/
    /*    }*/
    /*}*/

    div.gmotd-container {
        display:flex;
        justify-content: space-around;
        margin-right: 1em;
    }

        div.gmotd {
            text-align:center;
            padding:0.5em;

        }

            div.gmotd-label{
                font-size:0.8em;
                /*padding:1em;*/
            }

            div.gmotd-name{
                font-size:2em;
                font-weight:bold;
            }

            div.gmotd-date{
                /*padding-top:1em;*/
                font-size:0.8em;
            }


    div.jelly {

        width:350px;
        min-height: 150px;

        background:white;
        margin-bottom:1em;
        box-shadow: 0px 0px 10px #b7b7b7;

        border-top: 3px solid #82db4d;
        /*border-top-left-radius: 15px;*/
        /*border-top-right-radius: 15px;*/


        display:flex;

        cursor:pointer;

        transition: all 500ms;
        -webkit-transition: all 500ms;
    }

    div.jelly:hover {
        background:#ebebeb;
        box-shadow: 0px 0px 4px #b7b7b7;
    }

        div.jelly > div {
            flex:1;
            text-align: center;
        }

            div.jelly [jelly="info"] {
                display:flex;
                flex-direction: column;
                padding: 1em;
            }

                div.jelly hr {
                    width: 100%;
                    border: 0;
                    border-top: 1px solid #dbdbdb;
                }


                div.jelly div.sep {
                    margin-bottom:0.5em;
                }

                div.jelly [jelly]:not(:last-child):not([jelly="name"]):not([jelly="nickname"]){
                    margin-bottom:0.5em;
                }

                div.jelly [jelly="name"]{
                    font-weight:bold;
                    font-size:1.5em;
                }

                div.jelly [jelly="nickname"]{
                    font-size:0.9em;
                    font-style:italic;
                }

                div.jelly [jelly="dob"]{

                }

                div.jelly [jelly="categories"]{
                    font-size:0.7em;
                }

            div.jelly [jelly="photo"] {
                background:#f9f9f9;
                background-size: cover !important;
                background-position: center !important;
            }

    [page="PROFILE"] {
        padding:1em;
        flex-direction: column;
    }

    [page="PROFILE"] div.jelly {
        width:100%;
        min-height: min(40vw , 380px);
        background:white !important;
        box-shadow: 0px 0px 10px #b7b7b7 !important;
        cursor:default;
    }


    div.options {
        display:flex;
        justify-content:space-around;
        flex-direction:column;
        box-shadow: 0px 0px 10px #b7b7b7;
        background:white;
        border-radius:0.7em;
        overflow: hidden;
    }





        div.options div.action {
            background:white;
            /*border-radius:100px;*/

            font-size: 1em;
            text-align: center;
            line-height: 2em;
            cursor:pointer;
        }

        div.options div.action:not(:last-child) {
             border-bottom: 1px solid #e5e5e5;
        }

        div.options div.action:hover {
            background:#f5f5f5;
            /* box-shadow: 0px 0px 5px #b7b7b7; */
        }

            div.options div.action {
                display:flex;
                padding:0 3em;
            }

                div.options div.action div.seg:nth-child(1){
                    flex:1;
                }

                div.options div.action div.seg:nth-child(2){
                    flex:5;
                }


    .primary {
        flex:1;
    }




    .library {
        display:flex;
        justify-content: space-around;
        flex-direction: row;
        flex-wrap: wrap;
        margin-top:1em;
    }

        .library div.library-item {
            width:200px;
            height:200px;
            background:white;
            box-shadow: 0px 0px 10px #b7b7b7;
            margin-bottom:1em;

            background-size: cover !important;
            background-repeat: no-repeat !important;
            background-position: center !important;

            position:relative;
        }


            .library div.library-item .photo-options {
                display:none;
                position:relative;
                top:100%;
                background:white;
                box-shadow: 0px 0px 10px #b7b7b7;
                text-align: center;
                border-bottom-left-radius: 15px;
                border-bottom-right-radius: 15px;
                z-index:100000;
            }

            .library div.library-item:hover .photo-options {
                display:flex;
                flex-direction: column;
            }

                .library div.library-item .photo-options .photo-option {
                    width:100%;
                    cursor: pointer;
                    padding: 0.3em 0;
                }

                .library div.library-item .photo-options .photo-option:not(:last-child) {
                    border-bottom: 1px solid #e5e5e5;
                }

                .library div.library-item .photo-options .photo-option:hover {
                    background:#ebebeb;
                }


    div[loading="indicator"] {
        display:flex;
        height:100%;
        width:100%;
        flex-direction: column;
        justify-content: space-around;
        text-align: center;
    }

        div[loading="indicator"] img {
            width: 50px;
            margin-left: auto;
            margin-right: auto;
        }

        [photo="upload-status"] img {
            width:50px;
        }