:root {
    --menu-main-background-color: #cdd0d4;
    --menu-main-inactive-tab-background-color: var(--main-accent-color);
    --menu-main-active-tab-background-color: white;
    --menu-main-active-tab-color: black;
    --menu-main-tab_border: solid 0.25em transparent;
    --menu-main-margin-bottom: 0;
}
:root.high-contrast {
    --menu-main-background-color: #black;
    --menu-main-inactive-tab-background-color: black;
    --menu-main-active-tab-background-color: var(--button-color);
    --menu-main-active-tab-color: black;
    --menu-main-tab_border: solid 1px var(--button-color);
    --menu-main-margin-bottom: -1px;
}
.menu-main {
    font-family: Montserrat;
    font-weight: 500;
    margin-bottom: var(--menu-main-margin-bottom);
}
.menu-main ul {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding-left: 0.75em;
    overflow: hidden;
    /* background-color: var(--menu-main-background-color); */
}
.menu-main li {
    vertical-align: middle;
    white-space: nowrap;
}
.menu-main li a {
    color: var(--button-color);
    display: block;
    text-align: center;
    padding: 0.25em 1em;
    text-decoration: none;
    margin-left: 0.25em;
    margin-top: 0.5em;
    border: var(--menu-main-tab_border);
    border-top-left-radius: 0.25em;
    border-top-right-radius: 0.25em;
    white-space: nowrap;
    box-shadow: 0px 20px 20px 20px var(--menu-main-inactive-tab-background-color);
    clip-path: polygon(0% 0%, 100% 0%, 100% 300%, 0% 300%);
    line-height: 2em;
}
.menu-main li a:focus .title{
    text-decoration: underline;
    outline: none;
}
.menu-main li a:hover:not(.router-link-active) {
    background-color: var(--button-background-hover);
    color: var(--button-color-hover);
    box-shadow: 0px 20px 20px 20px var(--button-background-hover);
}
.menu-main li a:not(.router-link-active) {
    background-color: var(--menu-main-inactive-tab-background-color);
    box-shadow: 0px 20px 20px 20px var(--menu-main-inactive-tab-background-color);
}
.menu-main a.router-link-active {
    color: var(--menu-main-active-tab-color);
    background-color: var(--menu-main-active-tab-background-color);
    box-shadow: 0px 20px 20px 20px var(--menu-main-active-tab-background-color);
}
.menu-main span.circle {
    background: var(--button-background-red);
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    color: white;
    display: inline-block;
    font-weight: bold;
    line-height: 2em;
    margin-left: 0.5em;
    text-align: center;
    width: 2em;
}