#my-menu {
    --margin-left: 0;
    --margin-right: 0;
    --margin-top: 12px;
    --margin-bottom: 12px;

    --padding-left: 16px;
    --padding-right: 16px;
    --padding-top: 16px;
    --padding-bottom: 16px;

    --background-color: #ccc;

    --border-color: #888;
    --border-style: solid;
    --border-width: 2px;
    --border-radius-top-left: 20px;
    --border-radius-top-right: 20px;
    --border-radius-bottom-right: 20px;
    --border-radius-bottom-left: 20px;

    --text-color: #000;
    --text-family: sans-serif;
    --text-size: 16px;
    --text-weight: 400;
    --text-style: normal;
    --text-line-height: 1.6;

    --indent: 8px;

    --width: 500px;

    background-color: var(--background-color);
    margin: var(--margin-top) var(--margin-right) var(--margin-bottom) var(--margin-left);
    padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--border-radius-top-left) var(--border-radius-top-right) var(--border-radius-bottom-right) var(--border-radius-bottom-left);
    color: var(--text-color);
    width: var(--width);
}

#my-menu a {
    color: var(--text-color);
    font: var(--text-style) var(--text-weight) var(--text-size)/var(--text-line-height) var(--text-family);
    text-decoration: none;
}

#my-menu li {
    list-style-type: none;
    font: var(--text-style) var(--text-weight) var(--text-size)/var(--text-line-height) var(--text-family);
}

#my-menu ul{
    list-style-type: none;
}

#my-menu li>ul {
    margin-left: var(--indent);
    padding: 0;
}

ul.level1 {
    list-style-type: none;
    counter-reset: section1;
    font-weight: 400;
}

li.level1::before {
    content: var(--section1);
    list-style-type: none;
    counter-increment: section1;
}

ul.level2 {
    list-style-type: none;
    counter-reset: section2;
}

li.level2::before {
    content: var(--section2);
    list-style-type: none;
    counter-increment: section2;
}

ul.level3 {
    list-style-type: none;
    counter-reset: section3;
}

li.level3::before {
    content: var(--section3);
    list-style-type: none;
    counter-increment: section3;
}

ul.level4 {
    list-style-type: none;
    counter-reset: section4;
}

li.level4::before {
    content: var(--section4);
    list-style-type: none;
    counter-increment: section4;
}