body > aside { position: fixed; top: calc(50% - 150px); height: 300px; background: black url(../img/aside-off.png) center right no-repeat; left: -20rem; width: 20rem; padding: 1rem; &:hover, &:focus { left: 0; background: $bg-main url(../img/aside-on.png) center left no-repeat; box-shadow: 1px 2px 2px 1px rgba(0, 0, 0, 0.4); width: auto; border-right: 2rem solid black; padding: 0; nav { display: block; background: $bg-main url(../img/aside-on.png) center left no-repeat; height: 100%; } ul li:hover { span { display: block; } &:first-child { transform: scale(1.4) rotate(4deg) translateX(-0.75vw); a { transform: rotate(-4deg); } } &:nth-child(2) { transform: scale(1.4) rotate(-6deg) translateX(-0.5vw); a { transform: rotate(6deg); } } &:last-child { transform: scale(1.4) rotate(5deg) translateX(-0.5vw); a { transform: rotate(-5deg); } } } } nav { position: relative; margin-left: 3rem; display: none; line-height: 30rem; h3 { display: inline-block; background: url(../img/logo-ps.svg) 3rem center / 10rem fixed no-repeat; width: 10rem; height: 100%; vertical-align: top; color: transparent; a { display: block; height: 100%; width: 100%; line-height: 30rem; color: transparent; &:hover { color: transparent; } } } ul { list-style: none; display: inline-block; height: 100%; li { display: block; padding: 0 2rem; font-size: 3rem; float: left; padding-left: 1rem; z-index: 400; overflow: hidden; width: 10rem; height: 100%; a { color: black; text-decoration: none; display: block; height: 100%; width: 100%; z-index: 404; &:hover { font-size: 200%; color: inherit; z-index: 404; } } span { display: none; z-index: 400; position: relative; font-size: 1.25rem; line-height: 1.6rem; text-align: center; margin: -3rem -2rem 0 -1rem; } /* &:first-child { background: $bg-gfx; } &:nth-child(2) { background: $bg-txt; } &:last-child { background: $bg-vda; } */ } } } }