:root{--menu-height: 60px;--menu-padding: 2em;--menu-offset: 1em}.main-menu__wrapper{width:100%;height:fit-content;display:flex;align-items:center;justify-content:center}.main-menu{--width: calc(.6*var(--page-width));display:flex;justify-content:center;align-items:center;position:fixed;top:var(--menu-offset);width:var(--width);height:var(--menu-height);padding:0 var(--menu-padding);background-color:rgba(var(--backdrop-color),.3);--backdrop-filter: blur(var(--default-radius));backdrop-filter:var(--backdrop-filter);-webkit-backdrop-filter:var(--backdrop-filter);border-radius:var(--aggressive-radius);transition-property:width,left;transition-duration:var(--duration-fast),var(--duration-fast);z-index:999}.main-menu[data-open=false]{--width: 12em}.menu-list{display:flex;justify-content:center;align-items:start;list-style:none;margin:0}.main-menu__main-list{height:100%;flex-basis:calc(100% - 16em);flex:1;--gap: calc(.25 * var(--menu-padding));padding:var(--gap);gap:var(--gap)}@supports (not (aspect-ratio: 1 / 1)) or (not (gap: 0)){.main-menu__main-list{margin:0 0 0 calc(-1*var(--gap))}.main-menu__main-list>*{margin:0 0 0 var(--gap)}}.main-menu__main-list[data-open=false]{display:none}.item__link{width:100%;padding:0 calc(.5 * var(--menu-padding));flex:1;text-decoration:none;border-radius:var(--default-radius);transition-property:background-color;transition-duration:var(--duration-veryfast)}.item__link:hover,.item__link:focus{background-color:rgba(var(--backdrop-color),.2);transition-duration:0}.item{display:flex;align-items:center;justify-content:center;height:calc(var(--menu-height) - .5 * var(--menu-padding));color:var(--text-color--white)}.submenu{flex-direction:column;align-items:center;width:100%;border-radius:var(--default-radius)}.submenu:has(.sub-item){--bg-opacity: 0;background-color:rgba(var(--backdrop-color),var(--bg-opacity));transition-property:background-color;transition-duration:var(--duration-fast);backdrop-filter:var(--sub-backdrop-filter);-webkit-backdrop-filter:var(--sub-backdrop-filter)}.item__link:nth-child(n+2){opacity:0}.item__link:nth-child(n+2) .item{display:none}.submenu:hover,.submenu:focus,.submenu:has(.item__link:hover),.submenu:has(.item__link:focus){--sub-backdrop-filter: blur(var(--default-radius));--bg-opacity: .35}.submenu[data-hoverable=true]:has(.item__link:hover) .item__link:nth-child(n+2),.submenu[data-hoverable=true]:has(.item__link:focus) .item__link:nth-child(n+2),.item__link:focus{opacity:1;.item{display:flex}}#main-menu__icons{display:flex;height:100%;--icon-gap: calc(.4 * var(--menu-padding));gap:var(--icon-gap);padding:calc(.3 * var(--menu-padding)) calc(.25 * var(--menu-padding))}@supports (not (aspect-ratio: 1 / 1)) or (not (gap: 0)){#main-menu__icons{margin:0 0 0 calc(-1*var(--icon-gap))}#main-menu__icons>*{margin:0 0 0 var(--icon-gap)}}.main-menu__icon__wrapper{display:flex;justify-content:center;height:100%}#main-menu__icon{height:100%;max-height:var(--menu-height);transition-property:transform;transition-duration:var(--duration-medium);user-select:none}#main-menu__icon:hover,#main-menu__icon:focus{transform:rotate(360deg)}@media(max-width:960px){:root{--menu-height: 90px}.main-menu,.main-menu[data-open=false]{--width: calc(100% - var(--menu-offset)*2)}#main-menu__icons{height:calc(var(--menu-height) - var(--menu-padding));--gap: calc(.5 * var(--menu-padding))}@supports (not (aspect-ratio: 1 / 1)) or (not (gap: 0)){#main-menu__icons{margin:calc(-1*var(--icon-gap)) 0 0 0}#main-menu__icons>*{margin:var(--icon-gap) 0 0 0}}.main-menu{height:auto;padding:calc(.5*var(--menu-offset));border-radius:var(--high-radius);--gap: 0;flex-direction:column}.menu-list{flex-direction:column;width:100%}.main-menu__main-list{--gap: calc(.5 * var(--menu-padding))}@supports (not (aspect-ratio: 1 / 1)) or (not (gap: 0)){.main-menu__main-list{margin:calc(-1*var(--gap)) 0 0 0}.main-menu__main-list>*{margin:var(--gap) 0 0 0}}.main-menu__main-list[data-open=false]{display:none}.item{height:calc(var(--menu-height) - var(--menu-padding))}.item__link:nth-child(n+2){display:none}.item__link{opacity:1}.submenu{background-color:rgba(var(--backdrop-color),var(--bg-opacity));--bg-opacity: .35}@supports selector(:has(.sub-item)){.submenu,.submenu:has(.sub-item){background-color:rgba(var(--backdrop-color),var(--bg-opacity));--bg-opacity: .35}}.submenu[data-hoverable=true]:hover .item__link:nth-child(n+2){display:none}}
