.wrapper { @apply bg-green-400 text-white; :global(.dark) & { @apply bg-gray-800 text-gray-400; } } .sidebar { @apply overflow-hidden flex flex-col fixed top-0; @apply text-center shadow-2xl; height: 100vh; padding-top: 10vh; } .avatar { @apply w-16 h-16; @apply md:w-36 md:h-36 rounded-full; @apply mx-auto md:my-8 flex-none; :global(.dark) & { @apply filter brightness-75; } } .name { @apply md:text-3xl md:tracking-wide font-mono; @apply md:my-8 my-4 flex-none select-all; } .nav { @apply my-auto text-left self-center; } .navItem { @apply leading-8 md:text-lg cursor-pointer my-2; @apply tracking-widest; small { @apply text-xs md:inline hidden; } &:hover { text-shadow: 0 0px 5px #abbf00; } } .bio { @apply text-sm text-opacity-70 text-white; @apply my-4; :global(.dark) & { @apply text-gray-500; } }