<!doctype html> <html class="no-js" lang="en"> <head> <title>noms!</title> <style> @font-face { font-family: "Annie Use Your Telescope"; src: url("AnnieUseYourTelescope-Regular.ttf") format("truetype"); font-display: swap; } @keyframes right { from { left: 0; } to { left: 5pt; } } @keyframes left { from { right: 0; } to { right: 5pt; } } body { text-align: center; margin-top: 40vh; background-color: lightcoral; font-family: "Annie Use Your Telescope"; font-size: 40pt; color: white; } .webring { font-size: 30pt; a { position: relative; text-decoration: none; color: darkred; &:hover { color: red; animation-duration: 0.3s; animation-iteration-count: infinite; animation-direction: alternate; &.right { animation-name: right; } &.left { animation-name: left; } } } } </style> </head> <body> <img src="./BlobCat_Nom.png" alt="Blobcat biting another blobcat's neck"> <p>You like biting cuties, don't you? :3</p> <p class="webring"><a class="left" href="https://webring.noms.ing/previous?from=noms.ing"><<<</a> webring <a class="right" href="https://webring.noms.ing/next?from=noms.ing">>>></a></p> </body> </html>