.navigation-menu {
    position: fixed;
    left: -5vw;
    top: 10vh;
    width: 25vw;
    height: 60vh;
    font: 700 1.45vw "Shadows Into Light Two", cursive;
    letter-spacing: 2.5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: url("../asset/images/paper.webp");
    transform: rotate(-15deg);
    background-size: 100% 100%;
    background-position: center;
    z-index: 1000;
    line-height: 1.5vw;
}

/* Prevent click-through when the mobile menu is open */
body.menu-open #viewport {
    pointer-events: none;
}

body.menu-open .navigation-menu,
body.menu-open .navigation-menu * {
    pointer-events: auto;
}

.navigation-menu ul {
    padding-left: 1vw;
}

.navigation-menu li {
    list-style: none;
    margin: 1vw 0;
    cursor: pointer;
}

.menu-tab {
    display: none;
}

#menu-pen {
    margin-left: 0vw;
    margin-top: -10vh;
    max-width: 20vw;
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    /* IE8+ - must be on one line, unfortunately */
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865482, M12=0.7071067811865466, M21=-0.7071067811865466, M22=0.7071067811865482, SizingMethod='auto expand')";

    /* IE6 and 7 */
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865482,
            M12=0.7071067811865466,
            M21=-0.7071067811865466,
            M22=0.7071067811865482,
            SizingMethod='auto expand');
}

#pen-obj {
    width: 10vw;
    height: 10vh;
    left: 7vw;
    top: 55vh;
    position: absolute;
    z-index: 1001;
    -ms-transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    -moz-transform: rotate(-15deg);
    -o-transform: rotate(-15deg);
    transform: rotate(-15deg);
    /* IE6 and 7 */
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9659258262890684,
            M12=0.25881904510252024,
            M21=-0.25881904510252024,
            M22=0.9659258262890684,
            SizingMethod='auto expand');
}

.border-red {
    border-top: 0.25vh #C10D4D solid;
    width: 0vw;
}

.border-blue {
    border-top: 0.25vh #03F solid;
    width: 0vw;
}