/*=========================
    GAVDØM DESKTOP MENU
=========================*/

.gav-window{

    position:fixed;

    top:6rem;

    left:2.5rem;

    width:18rem;

    background:#ffffff;

    border:1px solid #000;

    display:flex;

    flex-direction:column;

    z-index:9999;

    opacity:0;

    visibility:hidden;

    transform:translateY(-8px) scale(.95);

    transition:
    opacity .20s ease,
        transform .20s ease,
        left .08s linear,
        top .08s linear;
    

    box-shadow:
    0 .6rem 1.5rem rgba(0,0,0,.15);

}

/*=========================*/

.gav-window.show{

    opacity:1;

    visibility:visible;

    transform:scale(1);

}

.gav-window.hide{

    opacity:0;

    transform:translateY(-8px) scale(.95);

    pointer-events:none;

}

/*=========================*/

.gav-header{

    width:100%;

    height:3rem;

    display:flex;

    justify-content:flex-end;

    align-items:center;

    padding:0 1rem;

    background:#fff;

    border-bottom:1px solid transparent;
    
    cursor:grab;

    user-select:none;
    transition:
    background .20s,
    border-color .20s;

}

/*=========================*/

.gav-header:hover{

    background:#f6f6f6;

    border-bottom:1px solid #000;

}

/*=========================*/

.gav-close{

    border:none;

    background:none;

    font-size:1rem;

    color:#000;

    cursor:pointer;

    transition:.20s;

}

.gav-close:hover{

    transform:scale(1.15);

}

/*=========================*/

.gav-nav{

    display:flex;

    flex-direction:column;

    gap:1.6rem;

    padding:2rem;

    background:#fff;

}

/*=========================*/

.gav-nav a{

    text-decoration:none;

    color:#000;

    font-family:'RobotoMono';

    font-size:.95em;

    text-transform:lowercase;

    font-variant:small-caps;

    letter-spacing:.18em;

    position:relative;

}

/*=========================*/

.gav-nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-.25rem;

    width:0;

    height:1px;

    background:#000;

    transition:.25s;

}

.gav-nav a:hover::after{

    width:100%;

}

/* =========================
   DRAGGING
========================= */

.gav-window.dragging{

    transform:scale(1.02);

    transition:
        transform .15s ease,
        box-shadow .15s ease;

    box-shadow:
    0 1rem 2.5rem rgba(0,0,0,.25);

}

.gav-window.dragging .gav-header{

    cursor:grabbing;

}

/*=========================
    WINDOW APPEAR
=========================*/

.gav-window.starting{

    opacity:0;

    transform:
        translateY(-12px)
        scale(.96);

}

.gav-window.show.starting{

    opacity:0;

}

.gav-window.show.ready{

    opacity:1;

    transform:
        translateY(0)
        scale(1);

    transition:
        opacity .28s ease,
        transform .28s ease;

}