@import '/css/main.css';
/* @import '/css/polehawk-app/main-menu/main-menu-item.css'; */
/* @import '/css/polehawk-app/main-menu/main-menu.css'; */
/* @import '/js/polehawk-app/main-menu/main-menu.css'; */


/*
    Define the basic layout of the APP page here.
    See additional CSS files for specific components
 */


#app {
    position: fixed;
    inset: 0;
    font-size:18px;
    color:var(--color_white);
}



#globe{
    position: absolute;
    background: var(--color_grey_1);
    inset: 0;
    display:grid;
    place-items:center;
}
/* Temporary */
#globe img{
    object-position: center;
    object-fit: cover;
    width: 100%;
    height: 100%;
}


/* Main UI */
#main_ui{
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-areas:
        "header header"
        ". controls"
        "tools tools"
        "menu menu";
    grid-template-rows: 60px auto 120px 60px;
    grid-template-columns: auto 60px;
    gap: 10px;
}
@media screen and (width > 600px) {
    #main_ui{
        grid-template-areas:
            "header header"
            "menu controls"
            "tools tools";
        grid-template-rows: 60px auto 60px;
        grid-template-columns: auto 60px;
    }
}



/* Header */
#main_ui > header{
    grid-area: header;
    display: grid;
    align-items: center;
    gap: 40px;
    padding: 10px;
    grid-template-columns: 45px auto 45px;
}
@media screen and (width > 600px) {
    #main_ui > header{
        grid-template-columns: 130px auto 130px;
    }
}
#main_ui header picture{
}
#main_ui #map_search input{
    width:100%;
}
#main_ui .account{
    display: flex;
    gap: 10px;
    align-items: center;
}
#main_ui .account #username{
    display:none;
}
@media screen and (width > 600px) {
    #main_ui .account #username{
        display:revert;
    }
}
#main_ui .account button{
    display: block;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 999px;
}



/* Main Menu */
main-menu{
    grid-area:menu;
}


#map_tools{
    grid-area:tools;
}
#map_controls{
    grid-area:controls;
}