body > footer { position: relative; left: 0; right: 0; font-size: smaller; margin: 5rem auto 2rem auto; width: 80vw; max-width: 60rem; font-size: 1.15rem; h4 { margin: 0; font-size: 1.6rem; a { text-decoration:none; } } a { white-space: nowrap; } &:hover > p { > span:first-child { display: inline-block; color: transparent; line-height: 0; } > span:first-child:before { content: 'Copyleft'; display: block; color: black; padding-right: 0.4rem; } > span + span { display: inline-block; transform: rotate(180deg); padding-bottom: -0.07rem; } > span:first-child + span { display: inline-block; transform: rotate(180deg) translateY(0.1rem); } } } footer > nav { ul { display: inline-block; margin: 0; padding: 0; list-style: none; } li { display: inline-block; margin: 0 0.75rem; width: 4rem; height: 3rem; border: 1px solid; border-bottom: 3px solid; border-color: transparent; border-top-right-radius: 0.5rem; text-align: center; a { position: relative; display: block; width: 100%; height: 100%; line-height: 3rem; margin: 0; padding: 0; background: rgba(0,0,0,0.25); border-top-right-radius: 0.5rem; } &:hover { border-color: rgba(220, 201, 133, 1); a { font-weight: bold; background: rgba(0,0,0,0.5); } } } }