@font-face { font-family: open-dyslexic; src: url('fonts/OpenDyslexic3-Regular.ttf'); } body { font-family: "Comic Sans MS", "open-dyslexic"; } blink { animation: blinker 0.6s linear infinite; transform: translateZ(0); } @keyframes blinker { 50% { opacity: 0; } } div.container { max-width: 800px; margin: 0 auto; text-align: center; } ul.fisher-price-links { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; margin: -10px; padding: 0px; } ul.fisher-price-links>li { margin: 10px; padding: 3px; background-color: #adadad; list-style: none; box-shadow: 4px 4px; margin-right: 10px; transition: all 0.1s ease-in-out; } ul.fisher-price-links>li:nth-of-type(4n+1) { background-color: #ea1a5b; } ul.fisher-price-links>li:nth-of-type(4n+2) { background-color: #f48120; } ul.fisher-price-links>li:nth-of-type(4n+3) { background-color: #73bd45; } ul.fisher-price-links>li:nth-of-type(4n) { background-color: #0862ad; } ul.fisher-price-links>li:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px; /*z-index: -1;*/ } ul.fisher-price-links>li>a { color: #fff; text-decoration: none; font-size: 18px; } .left-aligned { text-align: left; } .unicorns { animation: unicornMode 2s linear 0s infinite; transform: translateZ(0); } .nested li { display: block; position: relative; } .nested { margin-bottom: 0; counter-reset: number; } .parent .nested { counter-reset: letter; } .parent .nested li::before { content: counter(letter, lower-alpha) "."; counter-increment: letter; } .nested li::before { content: counter(number) "."; counter-increment: number; position: absolute; margin-right: 100%; right: 10px; } div.code-of-conduct>p, div.code-of-conduct>ul { text-align: left; } @keyframes unicornMode { from { color: #6666ff; } 10% { color: #0099ff; } 50% { color: #00ff00; } 75% { color: #ff3399; } 100% { color: #6666ff; } }