.stickyWatch { height: 0; } .Header { font-family: 'Roboto Condensed', sans-serif; padding: 15px calc(15vw - 30px); width: 100%; background: transparent; top: 0; position: fixed; z-index: 1000; & .logo { fill-rule: evenodd; clip-rule: evenodd; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 1.5; & .fussel { stroke: white; fill: var(--color-black); stroke-width: 20px; } & .glasses { fill: none; stroke: white; stroke-width: 62px; } } & strong { font-size: 1.5rem; flex: 1.5; display: flex; align-items: center; gap: 1rem; } & nav { position: relative; font-weight: normal; font-size: 1.2rem; display: flex; justify-content: space-between; align-items: center; & .active { color: var(--color-orange); } } & > .wrapper { display: flex; align-items: center; justify-content: space-between; padding: 15px 22px; transition: 750ms; backdrop-filter: blur(10px); border-radius: 0; & > .burger { all: unset; display: none; position: relative; transition: var(--transition-time) ease-in-out; cursor: pointer; } } &.sticks > .wrapper { background: var(--color-black-transparent); border-radius: 20px; } & input[type="checkbox"] { display: none; } & ul { gap: var(--spacing-standard); transform: scale(1); & a { text-align: center; &:hover { transform: scale(1.15); color: var(--color-orange); } } } } @media screen and (width < 1180px) { .Header { & > .wrapper.wrapper > .burger { display: block; } & nav { display: none; } } }