@font-face {
    font-family: "OptimusPrincepsSemiBold";
    src:
            url("/assets/font/OptimusPrincepsSemiBold.ttf") 
    
  }
:root {
    --layer-nav: 3;
    --layer-nav-menus: 4;
    --nav-height: 0px;
    --space-xs: .25rem;
    --space-sm: .5rem;
    --space-md: .75rem;
    --space-lg: 1rem;
    --space-xl: 1.5rem;
    --14324234: 0.4;
    
}



@media (max-width: 960px) {
.poe2-nav{
    display: none !important;
}
    .container1 {
        max-width: 1050px;
        width: 90%;
        margin: auto;
      }
      
      .navbar {
        width: 100%;
        box-shadow: 0 1px 4px rgb(146 161 176 / 15%);
      }
      
      .nav-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 62px;
      }
      
      .navbar .menu-items {
        display: flex;
      }
      
      .navbar .nav-container li {
        list-style: none;
      }
      
      .navbar .nav-container a {
        background: linear-gradient(180deg,#bcb641,#fff4b4 72.17%,#fff9d7);
        line-height: 1.2;
        background-size: 100% 28.8px;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent
      }
      
      .navbar .nav-container a:hover{
          font-weight: bolder;
      }
      
      .nav-container {
        display: block;
        position: relative;
        height: 60px;
        z-index: 10; 
      }
      
      .nav-container .checkbox {
        position: absolute;
        display: block;
        height: 32px;
        width: 32px;
        top: 20px;
        left: 20px;
        z-index: 5;
        opacity: 0;
        cursor: pointer;
      }
      
      .nav-container .hamburger-lines {
        display: block;
        height: 26px;
        width: 32px;
        position: absolute;
        top: 17px;
        left: 20px;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      
      .nav-container .hamburger-lines .line {
        display: block;
        height: 4px;
        width: 100%;
        border-radius: 10px;
        background: #dfd2a2;
        z-index: 100;
      }
      
      .nav-container .hamburger-lines .line1 {
        transform-origin: 0% 0%;
        transition: transform 0.4s ease-in-out;
      }
      
      .nav-container .hamburger-lines .line2 {
        transition: transform 0.2s ease-in-out;
      }
      
      .nav-container .hamburger-lines .line3 {
        transform-origin: 0% 100%;
        transition: transform 0.4s ease-in-out;
      }
      
      .navbar .menu-items {
        
        box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
        height: auto;
        width: 100%;
        transform: translate(-150%);
        display: flex;
        flex-direction: column;
        margin-left: 0;
        padding-left: 0;
        transition: transform 0.5s ease-in-out;
        text-align: center;
        min-height: calc(var(--14324234)* 240px);
        border-image-source: url(/assets/pics/dialog-bg-full.webp);
        border-image-slice: 250 130 300 fill;
        border-image-width: calc(var(--14324234)* 250px) calc(var(--14324234)* 130px) calc(var(--14324234)* 300px);
        border-image-outset: calc(var(--14324234)* 90px) calc(var(--14324234)* 56px) calc(var(--14324234)* 228px);
        margin: calc(var(--14324234)* 50px) calc(var(--14324234)* 44px) calc(var(--14324234)* 85px);
    }
      
      .navbar .menu-items li {
        margin-bottom: 1.2rem;
        font-size: 1.5rem;
        font-weight: 500;
      }
      
      .nav_logo {
        width: 50%;
        height: auto;
      }
      
      .nav-container input[type="checkbox"]:checked ~ .menu-items {
        transform: translateX(0);
      }
      
      .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
        transform: rotate(45deg);
      }
      
      .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
        transform: scaleY(0);
      }
      
      .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
        transform: rotate(-45deg);
      }
      
      .nav-container input[type="checkbox"]:checked ~ .logo{
        display: none;
      }
      
}

@media (min-width: 960px) {
    :root {
        --nav-height: 170px;
    }
    .navbar{
        display: none !important;
    }
}
@media (max-width: 1140px) {
    .poe2-nav {
        background-size: 130% 100%;
        margin: 20px 0 0;
        padding: 50px var(--space-md);
        width: auto;
    }
}
.poe2-nav {
    position: relative;
    /* display: none; */
    z-index: var(--layer-nav, auto);
    box-sizing: border-box;
    margin: 20px auto 0;
    padding: 50px min(150px, 8%);
    grid-template-columns: minmax(0, 1fr) 210px minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "none logo";
    width: 100%;
    max-width: 1600px;
    height: calc(var(--nav-height) - 20px);
    min-width: 800px;
    background-image: -webkit-image-set(url(/assets/pics/nav/bg-1x.webp) 1x, url(/assets/pics/nav/bg-2x.webp) 2x, url(/assets/pics/nav/bg-4x.webp) 4x);
    background-image: image-set(url(/assets/pics/nav/bg-1x.webp) 1x, url(/assets/pics/nav/bg-2x.webp) 2x, url(/assets/pics/nav/bg-4x.webp) 4x);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.poe2-nav__logo-container {
    grid-area: logo;
    position: relative;
    margin-top: -100px;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
}

a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    
}
.poe2-nav__logo {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    max-height: 270px;
    pointer-events: none;
}

img {
    overflow-clip-margin: content-box;
    overflow: clip;
}

@media (min-width: 960px) {
    .poe2-nav {
        display:grid
    }
}

@media (max-width: 1140px) {
    .poe2-nav {
        background-size:130% 100%;
        margin: 20px 0 0;
        padding: 50px var(--space-md);
        width: auto
    }
}

.poe2-nav__logo-container {
    grid-area: logo;
    position: relative;
    margin-top: -100px;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%
}

.poe2-nav__logo {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    max-height: 270px;
    pointer-events: none
}
@media (max-width: 960px) {
    .poe2-nav__logo-container {
       display: none; 
    }
}


.poe2-nav__breadcrumbs {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    grid-column: span 3;
    height: 58px;
    margin-top: 11px;
    padding: 11px 80px 24px;
    background-image: -webkit-image-set(url(/protected/image/poe2/layout/navbar/breadcrumbs-1x.webp?v=1732068621016&key=KkvgCwttoTFOqJLB5z5ksw) 1x,url(/protected/image/poe2/layout/navbar/breadcrumbs-2x.webp?v=1732068621016&key=1kzrfeWfKbIv0nCKiM6RWw) 2x,url(/protected/image/poe2/layout/navbar/breadcrumbs-4x.webp?v=1732068621016&key=s-hlfRq9jhHrp6RdvsZxWw) 4x);
    background-image: image-set(url(/protected/image/poe2/layout/navbar/breadcrumbs-1x.webp?v=1732068621016&key=KkvgCwttoTFOqJLB5z5ksw) 1x,url(/protected/image/poe2/layout/navbar/breadcrumbs-2x.webp?v=1732068621016&key=1kzrfeWfKbIv0nCKiM6RWw) 2x,url(/protected/image/poe2/layout/navbar/breadcrumbs-4x.webp?v=1732068621016&key=s-hlfRq9jhHrp6RdvsZxWw) 4x);
    background-position: center -8px;
    background-repeat: no-repeat;
    background-size: 100% 100%
}

.poe2-nav__breadcrumbs:empty {
    display: none
}

.poe2-nav__nav-section {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 50px
}

.poe2-nav__nav-item {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    padding: 0 var(--space-md);
    font-family: var(--font-family-optimus-semibold),serif;
    text-decoration: none;
    background: linear-gradient(180deg,#815f2d,#ac9563 72.17%);
    line-height: 1.2;
    background-size: 100% 1.8rem;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.poe2-nav__nav-item:hover,.poe2-nav__nav-item--active {
    background: linear-gradient(180deg,#bcb641,#fff4b4 72.17%,#fff9d7);
    line-height: 1.2;
    background-size: 100% 1.8rem;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    text-shadow: 0 0 4px #B9AD85
}

.poe2-nav__nav-item:hover:after,.poe2-nav__nav-item--active:after {
    content: "";
    background-image: url(/assets/pics/nav/menu-underline.svg);
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    display: block;
    width: 100%;
    bottom: -.33em;
    left: 50%;
    transform: translate(-50%);
    height: 10px
}
#trade{
  color: red;
  font-size: 2rem;
  font-weight: 600;
  
  
}

.poe2-nav__menu {
    display: flex;
    flex-direction: column;
    padding: var(--space-lg) var(--space-md);
    align-items: stretch;
    text-align: center;
    min-width: 300px;
    z-index: var(--layer-nav, auto)
}

.poe2-nav__menu-link {
    position: relative;
    font-size: 24px;
    border-bottom: 1px solid transparent;
    margin-bottom: -1px;
    font-family: var(--font-family-optimus-semibold),serif;
    text-decoration: none;
    background: linear-gradient(180deg,#67655c,#9e9b8b 118.61%);
    line-height: 1.2;
    background-size: 100% 28.8px;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: var(--space-md) var(--space-lg) var(--space-sm)
}

.poe2-nav__menu-link>* {
    max-height: 24px
}

.poe2-nav__menu-link:hover,.poe2-nav__menu-link--hovered,.poe2-nav__menu-link:active,.poe2-nav__menu-link--active {
    background: linear-gradient(180deg,#bcb641,#fff4b4 72.17%,#fff9d7);
    line-height: 1.2;
    background-size: 100% 28.8px;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.poe2-nav__menu-link:active,.poe2-nav__menu-link--active {
    text-shadow: 0 0 4px #B9AD85;
    -o-border-image: radial-gradient(101.03% 3422499.88% at -.48% 149.94%,rgba(188,182,65,0) 0%,#BCB641 25%,#FFFFFF 50%,#BCB641 75%,rgba(188,182,65,0) 100%) 1;
    border-image: radial-gradient(101.03% 3422499.88% at -.48% 149.94%,#bcb64100,#bcb641,#fff,#bcb641,#bcb64100) 1;
    border-bottom-width: 1px;
    border-bottom-style: solid
}

.poe2-nav__menu-link:active:after,.poe2-nav__menu-link--active:after {
    content: "";
    display: block;
    pointer-events: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 5px;
    background: radial-gradient(37.26% 10% at 50% 100%,#bbaf834d,#bbaf8300),radial-gradient(50% 87.5% at 50% 100%,#ffe6ac5c,#81743c00),linear-gradient(0deg,#b9ad850d,#b9ad850d)
}

.poe2-nav__nav-item:hover,.poe2-nav__nav-item--active {
  background: linear-gradient(180deg,#bcb641,#fff4b4 72.17%,#fff9d7);
  line-height: 1.2;
  background-size: 100% 1.8rem;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  text-shadow: 0 0 4px #B9AD85
}