.navbar { display: flex; flex-direction: column; width: var(--nav-size); height: calc(100vh - (3 * var(--unit-size))); position: fixed; background-color: rgba(0, 0, 0, 0.40); margin-top: calc(3 * var(--main-size)); } .navbar .left-nav { flex: 1; } .navbar .left-nav a { margin-left: var(--unit-size); } .navbar .footer { display: flex; flex-wrap: wrap; flex-direction: row; font-size: var(--medium-size); padding: var(--unit-size); margin-bottom: var(--unit-size); } .navbar .footer a { margin-right: var(--unit-size); } .navbar { left: -15em; top: 0; transition: 0.3s ease; left: 0; top: 0; transition: 0.3s ease; } .navbar a { display: block; color: #91B9D0; font-size: var(--medium-size); } .navbar .left-nav a { margin-bottom: var(--unit-size); } .navbar .left-nav a:last-child { margin-bottom: 0; } .navbar .left-nav a:nth-child(1) { margin-top: var(--unit-size); } .navbar a:hover { color: #F6F6F6; transition: all 0.8s ease; } .icon-menu label { display: none; cursor: pointer } #toggle { display: none; } #toggle:checked+.navbar { display: block; left: 0; top: 0; transition: 0.3s ease; } .profile { display: flex; flex-wrap: wrap; background-color: rgba(0, 0, 0, 0.20); padding: var(--unit-size); font-size: var(--small-size); margin-bottom: var(--unit-size); vertical-align: middle; } .icon-avatar { order: 1; height: calc(5 * var(--unit-size)); weight: auto; width: 25%; margin-right: var(--small-size); clip-path: circle(2.5em at center); } .info { order: 2; } .info #nick { order: 1; margin-bottom: var(--small-size); } .info .tags { order: 2; margin-bottom: var(--small-size); } .info .stats { order: 3; } .info .tags i { color: #91B9D0; } .info .tags i:last-child { margin-left: var(--small-size); } .stats span:last-child { margin-left: var(--small-size); }