:root{--sidebar-width:100%;--toggler-size:30px;--toggler-line-number:3;--toggler-line-size:calc(var(--toggler-size) / (var(--toggler-line-number) + var(--toggler-line-number) - 1));--toggler-offset-left:10px;--toggler-offset-top:10px;--toggler-color:Tomato;--toggler-color-hover:Wheat}.content,.sidebar{transition:all .25s ease-out}.sidebar{display:flex;position:absolute;top:0;align-items:center;justify-content:center;width:var(--sidebar-width);height:100vh;transform:translateX(calc(var(--sidebar-width) * -1));background:linear-gradient(to bottom right,Tomato,Wheat);opacity:.5}.content{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%}.menu{list-style-type:none}.menu__link{color:#fff;font-size:10vmin;font-weight:100;line-height:15vmin;text-decoration:none;transition:all .25s ease-out}.menu__link:active,.menu__link:focus,.menu__link:hover{color:Gold}.menu-toggler{display:block;z-index:1;position:fixed;top:var(--toggler-offset-top);left:var(--toggler-offset-left);width:var(--toggler-size);height:var(--toggler-size);border-radius:calc(var(--toggler-line-size)/ 2);cursor:pointer}.menu-toggler__line{position:absolute;right:0;left:0;height:var(--toggler-line-size);border-radius:calc(var(--toggler-line-size)/ 2);background:var(--toggler-color);transition:all .25s ease-out}.menu-toggler__line:nth-child(1){top:calc(var(--toggler-line-size) * 1 + (var(--toggler-line-size) * (1 - 2)))}.menu-toggler__line:nth-child(2){top:calc(var(--toggler-line-size) * 2 + (var(--toggler-line-size) * (2 - 2)))}.menu-toggler__line:nth-child(3){top:calc(var(--toggler-line-size) * 3 + (var(--toggler-line-size) * (3 - 2)))}.input-toggler{position:absolute;left:-100%}.input-toggler:focus~.menu-toggler{outline:1px dotted}.input-toggler:checked~.menu-toggler .menu-toggler__line:not(:first-child):not(:last-child){opacity:0}.input-toggler:checked~.menu-toggler .menu-toggler__line:first-child,.input-toggler:checked~.menu-toggler .menu-toggler__line:last-child{background-color:var(--toggler-color-hover)}.input-toggler:checked~.menu-toggler .menu-toggler__line:first-child{transform:translateY(calc(var(--toggler-line-size) * (var(--toggler-line-number) - 1))) rotate(45deg)}.input-toggler:checked~.menu-toggler .menu-toggler__line:last-child{transform:translateY(calc(-1 * var(--toggler-line-size) * (var(--toggler-line-number) - 1))) rotate(-45deg)}.input-toggler:checked~.sidebar{transform:translateX(0);opacity:.98}