:root {
    --timeout: 800ms;
}

.workspace { 
    display: grid;
    grid-template-areas: "header header header" "nav nav nav" "menu main aside" "menu detail aside" "footer footer footer";
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 4rem auto 1fr auto;
}

@media (max-width: 415px) {

    .workspace {
        display: block;
        position: relative;
        background-color: rgb(68, 58, 87);
    }

    .workspace>* {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: white;
    }

}

.shift-enter {
    top: 15%;
    left: 5%;
    max-width: 90%;
    opacity: .5;
    z-index: 20;
    border-radius: 20px;
}

.shift-enter-active {
    top: 0px;
    left: 0px;
    max-width: 100%;
    opacity: 1;
    border-radius: 0;
    transition: all var(--timeout);
}

.shift-enter-done {
    z-index: 30;
}

.shift-exit {
    border: solid 1px black;
    top: 0px;
    left: 0px;
    max-width: 100%;
    opacity: 1;
    border-radius: 0;
}

.shift-exit-active {
    top: 5%;
    left: 10%;
    max-width: 80%;
    opacity: .6;
    border-radius: 10px;
    transition: all var(--timeout);
}