:root{--main-menu-background-color:var(--opposite-font-color);--main-menu-font-color:var(--font-color);--main-menu-backdrop-color:transparent;--main-menu-width:100vw;--main-menu-height:100vh;--main-menu-transition-duration:var(--default-transition-duration)}body:has(#main-menu:popover-open){overflow:hidden;pointer-events:none}#main-menu-open-button,#main-menu-close-button{all:unset;display:flex;flex-wrap:wrap;flex-direction:column;justify-content:space-between;position:absolute;top:2rem;right:2rem;height:2.5rem;width:2.5rem;padding:1rem;cursor:pointer;overflow:hidden;z-index:99999 !important;transition:var(--main-menu-transition-duration);&:hover,&:focus-within { color:var(--accent-color); cursor:pointer; }}#main-menu{&[popover] { background-color: var(--main-menu-background-color); color: var(--main-menu-font-color); box-sizing: border-box; border: none; opacity: 0; width: var(--main-menu-width); max-width: var(--main-menu-width); height: var(--main-menu-height); max-height: var(--main-menu-height); overflow: auto; padding: 1rem; border-radius: .25rem; transition: opacity var(--main-menu-transition-duration) ease-out, transform var(--main-menu-transition-duration) ease-out, overlay var(--main-menu-transition-duration) ease-out allow-discrete, display var(--main-menu-transition-duration) ease-out allow-discrete; margin: auto; pointer-events: none; &:popover-open { opacity: 1; transform: scaleY(1); pointer-events: all; &:popover-open::backdrop { background-color: var(--main-menu-backdrop-color); backdrop-filter: blur(1px); } } &::backdrop { background-color: transparent; transition: display var(--main-menu-transition-duration) allow-discrete, overlay var(--main-menu-transition-duration) allow-discrete, background-color var(--main-menu-transition-duration); } @starting-style { &:popover-open { opacity: 0; transform: scaleY(0); } &:popover-open::backdrop { background-color: transparent; } } } display: flex;flex-direction:column;align-items:center;justify-content:space-around;&:popover-open { & { border-radius:0%; z-index:1000; transition:all var(--main-menu-transition-duration),z-index 0ms; visibility:visible; pointer-events:all; } } &ul { list-style-type:none; padding:0; margin:0; height:100%; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:space-evenly; font-size:3rem; &>a { display:flex; align-items:center; justify-content:space-between; max-height:4vh; & * { transition:var(--main-menu-transition-duration); } &>li { display:flex; align-items:center; justify-content:space-between; &>svg { height:2.5rem; margin-left:1rem; fill:var(--menu-font-color); overflow:visible; } } &:hover * { scale:1.05; color:var(--accent-color); fill:var(--accent-color); } } }}