.menu {

$root: &;
background-image: linear-gradient(142deg, $dark 0%, $p_darkest 45%, $dark 90%);
position: fixed;
left: 0;
top: 0;

display: flex;
flex-direction: column;
height: 100%;
overflow-y: auto;
float: left;
width: $menu-size;
box-sizing: border-box;
border-right: 2px solid $dark;

@include mobile {
    flex-direction: row;
    width: 100%;
    height: $menu-size;
}

&-top {
    box-sizing: border-box;
    height: 100%;
    flex-grow: 1;
}

&-top {
    padding-left: 3px;
    padding-right: 3px;
    @include mobile {
        padding: 3px 10px 3px 10px;
    }
}
ul {
    @include mobile {
        display: flex;
        flex-direction: row;
        margin: 0;
    }
    padding-left: 0px;
    li {
        display: flex;
        height: 50px;
        justify-content:center;
        position: relative;

        a {
            align-items:center;
            color: $p_text;
            cursor: pointer;
            display: flex;
            font-weight: 400;
            justify-content: center;
            letter-spacing: 1px;
            line-height: 28px;
            &:hover {
                font-weight: 900;
                color: $p_lighter;

            }
            &.selected {
                color: $primary;

                &::before{
                    content: "";
                    display: block;
                    width: 2px;
                    height: 100%;
                    background-color: $primary;
                    position: absolute;
                    left: -2px;
                    top: 0px;
                    box-shadow: $primary 4px 0px 22px;
                    @include mobile {
                        height: 2px;
                        width: 100%;
                        top: -2px;
                        left: 0;
                    }
                }
            }
            @include mobile {
                height: calc(#{$menu-size} - 10px);
                width: $menu-size;
                font-size: 30px;
            }

            i {
                margin-right: 5px;
            }
        }
    }
}

h1 {
    font-size: 2em;
    padding: 0.5em;
}

h2 {
    color: darken($color: $s_text, $amount: 25);
    font-weight: 400;
    font-size: 1.1em;
    line-height: 1.3;
}

&-contact {
    display:flex;
    justify-content:center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    @include mobile{
        font-size: 16px;
        max-height: $menu-size;
        margin-bottom: 0;
        display: inline-grid;
        grid-template-rows: 50% 50%;
        a:nth-child(odd) {
            grid-row-start: 1;
        }
        a:nth-child(even) {
            grid-row-start: 2;
        }
        a:nth-child(odd):last-child {
            margin-top: 13px;
        }
    }
    a {
        color: $p_text;
        cursor:pointer;
        text-align:left;
        text-size-adjust:100%;
        user-select:none;
        margin-left: 4px;
        margin-right: 4px;
        &:hover {
            font-weight: 900;
            color: $p_lighter;
        }
    }
}

}

.is-minimal-menu {

.menu {
    width: $minimal-menu-size;
    @include mobile {
        height: $minimal-menu-size;
        width: 100%;
    }
    ul {
        li {
            a {
                i {
                    margin: 0;
                }
                @include mobile {
                    height: calc(#{$minimal-menu-size} - 10px);
                    width: $minimal-menu-size;
                }
            }
        }
    }
}

}