@layer main-nav {

    :root {
      --c-main-nav-bg-color: #fff;
      --c-nav-text: var(--c-text);
      --c-nav-hover-text: var(--c-main-accent);
    }

    #main-nav {
        display: grid;
        grid-template-columns: 1fr 3fr;
        width: 100%;
        gap: 20px;
        align-items: center;
        box-sizing: border-box;
        background-color: var(--c-main-nav-bg-color);
        filter: drop-shadow(0px -5px 10px #aaaaaa);
    }

    /* #main-nav .column {
        /* flex: 1;           /* Forces both columns to grow equally and split 50/50
        min-width: 0;      /* Prevents long text or images from breaking the layout
    } */

          #main-nav .logo{
              width:90px;
              padding-left:10px;
          }

          #main-nav .nav_home{
            display:none;
          }

    #main-nav ul {
      display: flex;
      justify-content: flex-end;
      width: 100%;
      gap: 10px;
      box-sizing: border-box;
    }

          #main-nav ul li {
            min-width: 0;
            border-top: 1.5px solid var(--c-main-nav-bg-color);
          }

            /* #main-nav li.nav_contact{
                 text-indent: -9999px;
                 overflow: hidden;
                 white-space: nowrap;
                 width: 20px;
                 height: 20px;
                 display: inline-block;
                 background-image: url('../../img/icons/envelope.png');
                 background-repeat: no-repeat;
                 background-position: center;
                 background-size: contain;
                 padding:20px;
                 padding-left: 0;
                 margin-right:20px;
              } */
          #main-nav li.nav_contact:hover{
            opacity:1;
          }
          #main-nav li.nav_contact{
            opacity:0.7;
          }

          #main-nav ul li:hover,
          #main-nav ul li.current_page {
            border-top-color: var(--c-border);
            color: var(--c-main-accent);
          }

                  #main-nav ul li a{
                    display: block;
                    padding: 10px 20px;
                    text-align: center;
                    text-transform: uppercase;
                    color: var(--c-nav-text);
                    font-family: var(--font);
                    font-size:.8rem;
                    font-weight: 500;
                    letter-spacing:3px;
                    text-decoration: none;
                  }

                        #main-nav ul li a:hover,
                        #main-nav ul li.current_page a{
                          color: var(--c-main-accent);
                        }

}