/*standard device styling (desktops larger than ipad)*/
#navmenu {
    position: sticky;
    top: 0;
    background-color: #212529;
    width: 100%;
    height: 10vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 20;
}
.appbar
{
    height: 10vh;
}
.navbarButtons
{
    display: flex;
    gap: 1.63vw;
    margin-right: 1.63vw;
}
.navbarHeader
{
    margin-left: 2vw;
    display: flex;
}
#logo
{
    height: 10vh;
}
.dropdown
{
    position: relative;
    display: inline-block;
}

.e-appbar.e-dark .e-appbar-separator {
    border-left: 2px solid #fff;
    height: 4.5vh;
}

.e-appbar .e-btn
{
    font-size: clamp(0.5rem, 0.75vw, 1rem);
}

.regular{
    font-size: clamp(0.75rem, 1.5vw, 2rem);
    font-weight: bold;
}

/*portrait screen overrides*/
@media (orientation: portrait) {
    #navmenu
    {
        position: sticky;
        top: 0;
        background-color: black;
        width: 100%;
        /*height: 8vh;*/
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 20;
    }
    .navbarButtons
    {
        display: flex;
        gap: 1.63vh;
        margin-right: 1.63vh;
    }
    .navbarHeader
    {
        margin-left: 2vh;
        display: flex;
    }
    #logo
    {
        height: 5vh;
    }
    .navbarButton
    {
        background-color: darkgray;
        color: red;
        padding: 1vh 1vw;
        font-size: 1vh;
        border: none;
    }
    .dropdown
    {
        position: relative;
        display: inline-block;
    }
    .dropdown-content
    {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background-color: grey;
        min-width: 14vw;
        box-shadow: 0 8px 16px rgba(0,0,0,0.2);
        z-index: 30;
        flex-direction: column;
    }
    .dropdown-link
    {
        display: block;
        color: red;
        padding: 1vh 1vw;
        text-decoration: none;
        white-space: nowrap;
        font-size: 1.2vh;
    }
    .dropdown-link:hover
    {
        background-color: #590000;
        transition: 0.2s;
    }
    .dropdown:hover .dropdown-content
    {
        display: block;
    }
}

/*ipad landscape screen overrides*/
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape)
{
    #navmenu
    {
        position: sticky;
        top: 0;
        background-color: black;
        width: 100%;
        /*height: 10vh;*/
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 20;
    }
    .navbarButtons
    {
        display: flex;
        gap: 1.63vw;
        margin-right: 1.63vw;
    }
    .navbarHeader
    {
        margin-left: 2vw;
        display: flex;
    }
    #logo
    {
        height: 7vh;
    }
    .navbarButton
    {
        background-color: darkgray;
        color: red;
        padding: 1vh 1vw;
        font-size: 1.35vw;
        border: none;
    }
    .dropdown
    {
        position: relative;
        display: inline-block;
    }
    .dropdown-content
    {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background-color: grey;
        min-width: 14vw;
        box-shadow: 0 8px 16px rgba(0,0,0,0.2);
        z-index: 30;
        flex-direction: column;
    }
    .dropdown-link
    {
        display: block;
        color: red;
        padding: 1vh 1vw;
        text-decoration: none;
        white-space: nowrap;
        font-size: 1.2vw;
    }
    .dropdown-link:hover
    {
        background-color: #590000;
        transition: 0.2s;
    }
    .dropdown:hover .dropdown-content
    {
        display: block;
    }
}

/*ipad portrait screen overrides*/
@media (min-height: 1024px) and (max-height: 1366px) and (orientation: portrait)
{
    #navmenu
    {
        position: sticky;
        top: 0;
        background-color: black;
        width: 100%;
        /*height: 10vh;*/
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 20;
    }
    .navbarButtons
    {
        display: flex;
        gap: 1.63vw;
        margin-right: 1.63vw;
    }
    .navbarHeader
    {
        margin-left: 2vw;
        display: flex;
    }
    #logo
    {
        height: 7vh;
    }
    .navbarButton
    {
        background-color: darkgray;
        color: red;
        padding: 1vh 1vw;
        font-size: 1.35vw;
        border: none;
    }
    .dropdown
    {
        position: relative;
        display: inline-block;
    }
    .dropdown-content
    {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background-color: grey;
        min-width: 14vw;
        box-shadow: 0 8px 16px rgba(0,0,0,0.2);
        z-index: 30;
        flex-direction: column;
    }
    .dropdown-link
    {
        display: block;
        color: red;
        padding: 1vh 1vw;
        text-decoration: none;
        white-space: nowrap;
        font-size: 1.2vw;
    }
    .dropdown-link:hover
    {
        background-color: #590000;
        transition: 0.2s;
    }
    .dropdown:hover .dropdown-content
    {
        display: block;
    }
}

/*smaller than ipad landscape screen overrides*/
@media (max-width: 1023px) and (orientation: landscape)
{
    #navmenu
    {
        position: sticky;
        top: 0;
        background-color: black;
        width: 100vw;
        /*height: 10vh;*/
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 20;
    }
    .navbarButtons
    {
        display: flex;
        gap: 1.63vw;
        margin-right: 1.63vw;
    }
    .navbarHeader
    {
        margin-left: 2vw;
        display: flex;
    }
    #logo
    {
        height: 7vh;
    }
    .navbarButton
    {
        background-color: darkgray;
        color: red;
        padding: 1vh 1vw;
        font-size: 1.35vw;
        border: none;
    }
    .dropdown
    {
        position: relative;
        display: inline-block;
    }
    .dropdown-content
    {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background-color: grey;
        min-width: 14vw;
        box-shadow: 0 8px 16px rgba(0,0,0,0.2);
        z-index: 30;
        flex-direction: column;
    }
    .dropdown-link
    {
        display: block;
        color: red;
        padding: 1vh 1vw;
        text-decoration: none;
        white-space: nowrap;
        font-size: 1.2vw;
    }
    .dropdown-link:hover
    {
        background-color: #590000;
        transition: 0.2s;
    }
    .dropdown:hover .dropdown-content
    {
        display: block;
    }
}

/*smaller than ipad portrait screen overrides*/
@media (max-height: 1023px) and (orientation: portrait)
{
    #navmenu
    {
        position: sticky;
        top: 0;
        background-color: black;
        width: 100%;
        /*height: 7vh;*/
        display: flex;
        align-items: center;
        justify-content: start;
        z-index: 20;
    }
    .navbarButtons
    {
        display: flex;
        gap: 0.8vh;
        margin-right: 0.6vh;
        margin-left: 5vw;
    }
    .navbarHeader
    {
        margin-left: 0.1vw;
        display: flex;
    }
    #logo
    {
        height: 3vh;
    }
    .navbarButton
    {
        background-color: darkgray;
        color: red;
        padding: 1.2vh 1.2vw;
        font-size: 0.9vh;
        border: none;
    }
    .dropdown
    {
        position: relative;
        display: inline-block;
    }
    .dropdown-content
    {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background-color: grey;
        min-width: 14vw;
        box-shadow: 0 8px 16px rgba(0,0,0,0.2);
        z-index: 30;
        flex-direction: column;
    }
    .dropdown-link
    {
        display: block;
        color: red;
        padding: 1vh 1vw;
        text-decoration: none;
        white-space: nowrap;
        font-size: 1vh;
        align-self: center;
    }
    .dropdown-link:hover
    {
        background-color: #590000;
        transition: 0.2s;
    }
    .dropdown:hover .dropdown-content
    {
        display: block;
    }
}

/*safari browser overrides in portrait orientation*/
@media (orientation: portrait)
{
    @supports (-webkit-touch-callout: none)
    {
        /*unused*/
    }
}

/*safari browser overrides in landscape orientation*/
@media (orientation: landscape)
{
    @supports (-webkit-touch-callout: none)
    {
        /*unused*/
    }
}