:root { --base: #1e1e2e; --mantle: #181825; --text: #cdd6f4; --link: #94e2d5; --surface: #313244; --pink: #f5c2e7; } body { font-family: Hack, monospace; background-color: var(--mantle); color: var(--text); padding: 5em; margin: 0; } img { padding: 1em; } .navbar { /* Positioning */ top: 0; margin-top: 0; right: 0; position: fixed; /* Size */ height: 100vh; width: 4.5em; padding: 0; /* Markers */ list-style-type: none; background-color: var(--surface); display: flex; flex-direction: column; align-items: center; } .navbar > li { width: 3em; height: 3em; margin: 0.5em; display: flex; align-items: center; justify-content: center; background-color: var(--mantle); text-align: center; border-radius: 100%; outline: var(--pink) 0.2rem solid; transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); } .navbar > li:hover { border-radius: 30%; background-color: var(--link); outline: var(--pink) 0 solid; } .navbar > li:hover > a { color: var(--base); } .navbar > li > a > i { font-size: 1.5em; } .navbar > li > a > .popup { position: absolute; right: 6em; scale: 0; background-color: var(--base); color: var(--link); padding: .5em; white-space: nowrap; font-weight: bold; border-radius: 0.75rem; outline: var(--pink) 0.2rem solid; transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); } .navbar > li:hover > a > .popup { scale: 100%; } a { color: var(--link); text-decoration: underline var(--mantle) auto; transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); } a:hover { text-decoration: underline var(--link) auto; } .buttons { display: flex; width: 40em; flex-wrap: wrap; } .buttons > img { padding: 0.15em; width: 88px; height: 31px; } .buttons > a > img { padding: 0.15em; width: 88px; height: 31px; }