.header{--margin-header:var(--padding-global);height:max-content;margin-top:var(--margin-header);margin-left:var(--margin-header);margin-right:var(--margin-header);position:absolute;inset:0}.logo{--size-logo:3rem;--t-front:rotateY(0deg);--t-back:rotateY(180deg);width:3rem;width:var(--size-logo);aspect-ratio:1;cursor:pointer;perspective:400px;position:relative}.logo:where(:active){--t-front:rotateY(360deg);--t-back:rotateY(540deg)}@media (any-hover:hover){.logo:where(:hover){--t-front:rotateY(360deg);--t-back:rotateY(540deg)}}.logoBack,.logoFront{backface-visibility:hidden;transition:transform 1.5s ease-out .3s;position:absolute;inset:0}.logoBack svg,.logoFront svg{width:100%;height:100%}.logoFront{transform:var(--t-front)}.logoFront svg{fill:currentColor}.logoBack{transform:var(--t-back)}.logoBack svg{fill:var(--color-accent)}.backgroundGrid{--size-line:1px;--padding:0px;pointer-events:none;-webkit-user-select:none;user-select:none;isolation:isolate;opacity:.15;place-items:center;width:100%;height:100svh;display:grid;position:fixed;inset:0;overflow:clip}.horizontalLines,.verticalLines{width:calc(100% - var(--padding)*2 + var(--size-line)*4);height:calc(100svh - var(--padding)*2 + var(--size-line)*4);margin:calc(var(--padding)*-1 + var(--size-line)*2*-1);grid-area:1/1;justify-content:space-between;display:flex}.horizontalLines span,.verticalLines span{background:var(--color-dark);display:block}.verticalLines span{width:var(--size-line);height:100%}.horizontalLines{flex-direction:column}.horizontalLines span{width:100%;height:var(--size-line)}