nav-bar{display:block;width:100%;position:sticky;top:0;z-index:12;.bar { display: flex; position: sticky; align-items: center; top: 0; height: 45px; gap: 10px; padding: 0px 10px; &:not([data-name="terms"]) { justify-content: space-between; background: var(--BG_ACTIVE_BLUE); color: var(--COLOR_NEUTRAL_LIGHT); a { color: var(--COLOR_NEUTRAL_LIGHT) } } &[data-name="terms"] { background: var(--BG_REQUIRED); border: 2px solid var(--COLOR_ACCENT_REQUIRED); } div:not(.tooltip) { display: flex; flex-direction: row; align-items: center; gap: 10px; } i { font-weight: bold; } p { font-weight: bold; } a:has( i) { display: flex; gap: 5px; align-items: baseline; text-decoration: none; span { text-decoration: underline; } &:hover span { text-decoration: none; } } } [data-name="toTop"] { text-decoration: none; } &[data-state="down"] {} &[data-state="up"] {} a { cursor: pointer; text-decoration: underline; } &:has(#terms_of_use:not(:checked))+* { opacity: 0.5; pointer-events: none; }}.headerframe:has(+nav-bar[data-state=down]){visibility:hidden;opacity:0;max-height:0;transition:visibility .3s,opacity .3s linear,max-height .3s ease-out}.headerframe:has(+nav-bar[data-state=up]){max-height:100%;animation:menu_show .3s ease-in 0s 1}@keyframes menu_show{0%{height:0;opacity:0}100%{height:120px;opacity:100%}}@media screen and (max-width:750px){nav-bar a:has( i){text-align:center;align-items:center}nav-bar p{text-align:center}}div[data-name=toTop]{position:fixed;right:20px;bottom:1px;cursor:pointer;font-size:2.3rem;background-color:#36699d;display:flex;justify-content:center;align-items:center;width:50px;height:50px;z-index:100000}div[data-name=toTop] i{color:#fff}