.navbar{
    z-index: 2;
    pointer-events: auto;
    justify-content: flex-start;
    
    
    background-color: hsl(0, 0%, 40%);
    box-shadow:
        inset 0 0 0 var(--border-width) gainsboro,
        inset 0 0 0 calc(var(--border-width)*2) hsl(0, 0%, 66%);
    border-right: calc(var(--border-width)*1.5) solid hsl(0, 0%, 66%);

    margin-left: calc(var(--border-width)*1.5);
}
.navbar.row {
    min-width: 0;
    gap:calc(var(--border-width)*1.5);
    flex: 0 1 auto;
}
.navbar.column {
    height: 100%;
}

.navbar.column .spacer{
    width: 100%;
    
}


.navbar .wip{
    border: calc(var(--border-width)*2) solid black;
    outline: calc(var(--border-width) * 2) dashed yellow;
    outline-offset: calc(var(--border-width) * -2);
    box-sizing: border-box;
}
.navbar.row .wip{
    flex: auto;
}
.navbar .wip .header{
    min-width: 80px;

    background-repeat: no-repeat, no-repeat;
    
    font-family: 'Times New Roman', Times, serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    
    top: calc(var(--border-width)*1);
    z-index: 0;

    overflow: hidden; 

    color: yellow;
    background-color: black;
}
.navbar.row .wip .header{
    border-right: calc(var(--border-width)*2) dashed yellow;
    flex: 0 1 auto;
}
.navbar.column .wip .header{
    width:100%;
    aspect-ratio: 3/1;
    border-bottom: calc(var(--border-width)*2) dashed yellow;
}
.navbar .wip .header::after{
    content: "WIP"
}
.navbar .divider{
    width:100%;
    aspect-ratio: 6/1;

    background-repeat: no-repeat, no-repeat;
    border-bottom: calc(var(--border-width)*1.5) solid hsl(0, 0%, 66%);;
    
    font-family: 'Times New Roman', Times, serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    
    top: calc(var(--border-width)*1);
    z-index: 0;

    overflow: hidden;

    color: gainsboro;
    background-color: grey;
}
.navbar .element{
    min-width: 80px;

    font-family: 'Times New Roman', Times, serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    
    top: calc(var(--border-width)*1);
    z-index: 0;

    overflow: hidden;
}
.navbar.column .element{
    border-bottom: calc(var(--border-width)*1.5) solid hsl(0, 0%, 66%);
    width:100%;
    aspect-ratio: 3/1;
}
.navbar.row .element{
    border-right: calc(var(--border-width)*1.5) solid hsl(0, 0%, 66%);
    border-right: calc(var(--border-width)*1.5) solid gainsboro;

    aspect-ratio: 9/1;
    padding: 1%;

    flex: 1 1 auto;
}
.navbar .element:hover{
    cursor: pointer;
    z-index: 100;
	transform: translate(0px,calc(var(--border-width) * -1));
	box-shadow:  
        0 var(--border-width) black,
        0 calc(var(--border-width)*-1) hsl(0, 0%, 50%);
}


.navbar .element.back{
    color: white;
    background-color: red;
}
.navbar .element.back.active{
    color: grey;
    background-color: brown;
}
.navbar .element.back::after{
    content: "BACK"
}

.navbar .wip .element.menu{
    color: black;
    background-color: rgb(255, 255, 170);
}
.navbar .element.menu{
    color: black;
    background-color: white;
}
.navbar .element.menu.active{
    color: black;
    background-color: grey;
}