/*
subnavbar,
navbar {
    --nav-height-button: 61cqh;
    --nav-height-sub: calc(100cqh - var(--nav-height-button));
}
*/
subnavbar,
navbar {
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: row;
    container-type: size;
}

navbar a,
subnavbar a {
    float: left;
    text-align: center;
    text-decoration: none;
    width: 100%;
    /*Below centers the contents*/
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
}


navbar > a {
    color: var(--nav-color);
}
subnavbar > a {
    color: var(--subnav-color);
}
navbar > a.disabled {
    color: var(--nav-color-disabled);
}
subnavbar > a.disabled {
    color: var(--subnav-color-disabled);
}
navbar {
    background-color: var(--nav-bgcolor);
}
subnavbar {
    background-color: var(--subnav-bgcolor)
}
navbar > a.active {
    background-color: var(--nav-bgcolor-active);
}
subnavbar > a.active {
    background-color: var(--subnav-bgcolor-active);
}

navbar a {
    /*font-size: 27px;*/
    font-size: 50cqh;
}

navbar span {
    font-size: 15cqh;
    font-weight: bolder;
    font-family: sans-serif;
}


subnavbar a {
    /*font-size: 18px;*/
    font-size: 50cqh;
    font-family: Arial, Helvetica, sans-serif;
}

navbar a i,
subnavbar a i {
    pointer-events: none;
}