html { height: 100%; scroll-behavior: smooth; } body { height: 100%; background: linear-gradient(to bottom right, #cc0099 1%, #9999ff 100%); background-repeat: no-repeat; background-attachment: fixed; font-family: "Lucida Console", "Courier New", monospace; } #nav { background-color: #303030; width: 95%; height: 40%; display: flex; padding: 1%; flex-wrap: nowrap; align-items: center; justify-content: flex-end; } #nav img { margin-right: auto; margin-left: 2%; margin-top: 2%; margin-bottom: 2%; image-rendering: pixelated; image-rendering: crisp-edges; } .nav-link { font-size: 23px; color: rgba(255, 255, 255, 0.8); text-decoration: none; margin-right: 3%; transition: transform .2s; } .nav-link:hover { transform: scale(1.1); color: rgba(255, 255, 255, 1); } input[type=checkbox] { display: none; } .burger { display: none; font-size: 23px; color: rgba(255, 255, 255, 0.8); margin-right: 6%; user-select: none; } @media (max-width: 768px) { #nav { flex-wrap: wrap; } .burger { display: block; flex-basis: 37%; } .nav-link { display: none; } input[type=checkbox]:checked~.nav-link { display: block; flex-basis: 50%; align-items: center; margin-right: 1px; } input[type=checkbox]:checked~.burger { flex-basis: 37%; } }