/* ------------------------------ */
/* ------------------------------ */
/* HEADER */
#Header {
   position: fixed;
   display: flex;
   top: 0px;
   width: 100%;
   height: calc(96px * var(--scale));
   background-color: var(--background-secondary);
   border-top: calc(5px * var(--scale)) solid var(--primary-color);
   border-bottom: calc(1px * var(--scale)) solid var(--border-color);
   z-index: 80;
}

#Header .center {
   position: relative;
   display: flex;
   width: 100%;
   height: calc(90px * var(--scale));
   margin: auto;
}

#Header .logo {
   display: flex;
   flex-basis: calc(500px * var(--scale));
   justify-content: center;
   align-items: center;
   height: calc(90px * var(--scale));
   padding: calc(30px * var(--scale));
   border-right: calc(1px * var(--scale)) solid var(--border-color);
   color: var(--text-primary);
   font-size: calc(var(--font-large) * var(--scale));
   font-weight: var(--font-bold);
   line-height: 1;
}

#Header .nav {
   display: flex;
   gap: calc(15px * var(--scale));
   width: 100%;
   height: calc(90px * var(--scale));;
   padding: calc(15px * var(--scale));
}

#Header .link {
   position: relative;
   display: block;
   width: 100%;
   height: calc(60px * var(--scale));
   padding: calc(20px * var(--scale));
   background-color: var(--background-secondary);
   border-bottom: 5px solid var(--border-color);
   color: var(--text-primary);
   font-size: calc(var(--font-small) * var(--scale));
   font-weight: var(--font-bold);
   line-height: 1;
   text-align: left;
   text-transform: uppercase;
}

#Header .link::after {
   content: var(--entity-link);
   position: absolute;
   top: calc(18px * var(--scale));
   right: calc(27px * var(--scale));
}

#Header .link.x,
#Header .link:hover {
   cursor: pointer;
   background-color: var(--background-secondary);
   border-bottom: 5px solid var(--primary-color);
   color: var(--primary-color);
}

#Header .logo.x,
#Header .logo:hover {
   cursor: pointer;
   background-color: var(--background-secondary);
   color: var(--primary-color);
}

#HeaderNav {
   display: none;
}

/* ------------------------------ */
/* 1500PX */
@media only screen and (max-width: 1500px){

#HeaderNav {
   display: flex;
   justify-content: center;
   align-items: center;
   width: calc(90px * var(--scale));;
   height: calc(90px * var(--scale));;
   padding: calc(15px * var(--scale));
   border-right: calc(1px * var(--scale)) solid var(--border-color);
}

#Header .logo {
   flex-basis: calc(300px * var(--scale));
}

#Header .nav {
   position: fixed;
   display: flex;
   flex-direction: column;
   gap: calc(15px * var(--scale));
   top: 0px;
   left: calc(300px * -1);;
   width: 300px;
   height: 100vh;
   padding: calc(15px * var(--scale));
   background-color: var(--background-secondary);
   border-left: calc(5px * var(--scale)) solid var(--primary-color);
   border-right: calc(1px * var(--scale)) solid var(--border-color);
   transition: left 500ms;
   z-index: 100;
}

}