.goto-back {
    font-size: 20px;
    line-height: 30px;
    vertical-align: middle;
    text-align: center;
    width: 40px !important;
    height: 40px;
    padding: 5px;
    min-width: 40px;
    min-height: 40px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0 0 0 10px !important;
    z-index: 1000;
    cursor: pointer;
    background-color: var(--nav-background-color);
    color: var(--nav-text-color);
}

.goto-back:hover,
.goto-back:active {
    background-color: var(--nav-background-color-hover);
    color: var(--nav-text-color-hover);
}

nav {
    font-family: var(--nav-font-family);
    color: var(--nav-text-color);
}

#menu-horizontal-container {
    position: sticky;
    top: 0;
    width: 100%;
    height: var(--nav-height);
    margin: 0 auto;
    padding: var(--gap);

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    color: var(--nav-text-color);
    background-color: var(--nav-background-color);

    z-index: 999;
}

#menu-horizontal {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;

    color: black;
    text-decoration: none;
    height: 40px;
    width: 100%;
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 0;
}

#menu-horizontal li {
    width: fit-content;
    min-height: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
    text-transform: uppercase;
}

#menu-horizontal li a,
#menu-horizontal li a:link,
#menu-horizontal li a:visited,
#menu-horizontal li a:active {
    display: inline-flex;
    text-decoration: none;
    height: 40px;
    padding: 0 10px;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    color: var(--nav-text-color);
    background-color: var(--nav-background-color);
}

#menu-horizontal li a:hover {
    color: var(--nav-text-color-hover);
    background-color: var(--nav-background-color-hover);
}

#menu-horizontal .current-menu {
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-underline-offset: 5px !important;
    text-decoration-thickness: 4px !important;
    z-index: 10;
}

#menu-vertical-container {
    display: none;
    position: fixed;
    top: 80px;
    width: 100%;
    left: 0;
    height: calc(100vh - 80px);
    background-color: none;
    z-index: 998;
    overflow: hidden;
}

#menu-vertical {
    position: absolute;
    top: 0;
    right: -200px;
    height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: center;
    width: 100%;
    max-width: 200px;
    padding: 0;
    margin: 0;
    background-color: var(--nav-background-color);
    font-family: var(--font-family);
    transition: all 0.5s ease-in-out;
}

#menu-vertical.open {
    right: 0;
}

#menu-vertical li {
    width: 100%;
    min-height: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}

#menu-vertical li a,
#menu-vertical li a:link,
#menu-vertical li a:visited,
#menu-vertical li a:active {
    display: inline-flex;
    text-decoration: none;
    width: 100%;
    height: 60px;
    padding: 0 var(--gap);
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-end;
    align-items: center;
    color: var(--nav-text-color);
    background-color: var(--nav-background-color);
}

#menu-vertical li a:hover {
    color: var(--nav-text-color-hover);
    background-color: var(--nav-background-color-hover);
}

#menu-vertical .current-menu {
    font-weight: 700 !important;
    text-decoration: none !important;
    text-underline-offset: 6px !important;
    text-decoration-thickness: 4px !important;
}

#menu-button-container {
    display: none;
    width: 100%;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

#menu-button-container > div {
    width: 100%;
}

#menu-button {
    font-size: 20px;
    line-height: 30px;
    vertical-align: middle;
    text-align: center;
    width: 40px !important;
    height: 40px;
    padding: 5px;
    min-width: 40px;
    min-height: 40px;
    cursor: pointer;
    z-index: 999;
    user-select: none;
    background-color: var(--nav-background-color);
    color: var(--nav-text-color);
}

#menu-button:hover,
#menu-button:active {
    background-color: var(--nav-background-color-hover);
    color: var(--nav-text-color-hover);
}