@layer default, theme, custom;

@layer custom {
    nav#sitemainbar{
        background: var(--nav-background);
        border-left: var(--nav-border);
        border-right: var(--nav-border);
        border-bottom: var(--nav-border);
        box-shadow: var(--nav-box-shadow);
        display: inline-flex;
        font-size: var(--font-size);
        padding: 0% var(--nav-lateral-padding);
        border-radius: var(--nav-border-radius-bottom);
        opacity:var(--nav-opacity);
        >.companylogo {
            display:grid;
            grid-template-rows:auto auto;
            margin:auto 0;
            svg, img {max-height:150px;max-width:150px;}
        }
        > menu {
            display: flex;
            margin:1vw;
            padding-inline-start: 0px;
            &.resourcesmenu {
                flex-grow: 1;
            }
            &.managermenu {
                z-index:99;
            }


            li {
                position: relative;
                border-radius: 100%;
                padding: 0.5rem;
                align-self: center;
                min-width: var(--nav-fixed-width);
                list-style-type: none;
                list-style-position: outside;
                text-align: center;
                color: var(--nav-text-color);
                gap: 0.2rem;
                font-size: calc(var(--font-size) * 0.8);
            }
            > li:hover,
             .dropdown-content > li:hover,
              body > nav > menu > li > div:hover {
                background-color: var(--palette-color-2);
            }
            a {
                display: grid;
                color: inherit;
                &:hover{
                    text-decoration: none;
                }
            }
            .dropdown-content > li {
              min-width: var(--nav-fixed-width);
              padding: 0.5rem;
              width: 100%;
            }
        }
    }
    .dropdown-content {
        border-bottom: solid var(--palette-color-1) 3px;
        border-radius: 0 0 10px 10px;
        box-shadow: var(--global-element-box-shadow);
        display:none;
        visibility:hidden;
        position: absolute;
        background-color: var(--palette-color-4);
        transition: 1s;
        width: 100%;
        min-width:fit-content;
    }
    .dropdown:hover .dropdown-content {
        margin: 0px;
        display:block;
        visibility: visible;
        color: var(--palette-color-1);
    }
}





  @media (max-width: 360px) {
    .topbar {
        grid-template-columns: auto;
    }
    .topbar a div {
        display: grid;
        grid-template-rows: inherit;
        grid-template-columns: auto auto;
    }
    .animatedlogo {
        width: 0.75in;
        height: 0.50in;
    }

    .menulinks  {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: inherit;
        align-self: center;
    }
  }