.menu {
    box-sizing: border-box;
    max-width: 600px;
    margin: auto;
    padding: 0 15px 45px;

    a {
        text-decoration: none!important;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 10px 15px;
        border: solid 2px var(--menu);
        border-radius: var(--border-radius);
        transition: background-color .2s ease-in-out;
        color: var(--font)
    }

    .link-main a {width: calc(100% - 110px)}
    .link-sub a {width: calc(100% - 55px)}
    .link-sub .link-sub a {width: 100%}

    a:hover {
        background: var(--menu);
        transition: background-color .2s ease-in-out
    }

    a:active {color: var(--accent)}

    .link-main {
        display: flex;
        align-items: center;
        padding: 7.5px 0;

        .btn {
            box-sizing: border-box;
            background: 0 0;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 15px;
        }
    }

    .link-div {
        display: flex;
        transform-origin: center top;
        animation-duration: .25s;

        .link-line-div {
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;

            .link-line {
                width: 15px;
                height: calc(100% - 35px);
                border-left: solid 2px var(--menu);
                border-bottom-left-radius: 15px;
                margin: 7.5px 15px 0;
                box-sizing: border-box;
            }
        }

        .link-sub {
            display: flex;
            flex-direction: column;
            width: calc(100% - 47px);

            .sub {
                display: flex;
                align-items: center;
                box-sizing: border-box;
                padding: 7.5px 0
            }
        }
    }
}