Duck hunt
Home
*, *::after, *::before { box-sizing: border-box; } body { color: #00000; margin-top:150px; background: #2f0000; background: linear-gradient(115deg, #56d8e4 10%, #9f01ea 90%); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html, body { min-height: 100vh; } .top { display: flex; justify-content: top; align-items: top; } .container { background: #003f00; padding: 1rem; margin: 3rem auto; border-radius: 0.2rem; box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.3); counter-reset: pagination; text-align: center; } .container:after { clear: both; content: ""; display: table; } .container ul { width: 100%; } .xlarge { width: 65rem; } ul, li { list-style: none; display: inline;u padding-left: 0px; } li { counter-increment: pagination; } li:hover a { color: #fdfdfd; background-color: #1d1f20; border: solid 1px #1d1f20; } li.active a { color: #fdfdfd; background-color: #1d1f20; border: solid 1px #1d1f20; } li:first-child { float: left; } li:first-child a:after { content: "Previous"; } li:nth-child(2) { counter-reset: pagination; } li:last-child { float: right; } li:last-child a:after { content: "Next"; } li a { border: solid 1px #d7d7d7; border-radius: 0.2rem; color: #7d7d7d; text-decoration: none; text-transform: uppercase; display: inline-block; text-align: center; padding: 0.5rem 0.9rem; } li a:after { content: " " counter(pagination) " "; } /* that's all */