@keyframes lr-fadein { from { visibility: hidden; opacity: 0; } to { visibility: visible; opacity: 1; } } @keyframes lr-fadeout { from { visibility: visible; opacity: 1; } to { visibility: hidden; opacity: 0; } } #lr-overlay-wrapper { position: fixed; background: black; width: 100vw; height: 100vh; z-index: 2147483647; left: 0; top: 0; display: flex; align-items: center; justify-content: center; flex-flow: column nowrap; } #lr-overlay-content { font-size: 1.1em; font-weight: lighter; max-width: 50%; color: white; padding-right: 0.5em; margin: 0.75em auto; overflow-x: hidden; overflow-y: scroll; } #lr-overlay-buttons { margin: 0.75em auto; display: flex; } #lr-overlay-skip { user-select: none; position: absolute; right: 5%; top: 5%; } .lr-overlay-button { border-radius: 5px; padding: 0.5em; background: dimgray; text-align: center; margin: 0 5px; } .lr-overlay-button span { color: lightgray; } #lr-overlay-content .poem, #lr-overlay-content cite, #lr-overlay-buttons { visibility: hidden; opacity: 0; } #lr-overlay-skip { visibility: visible; opacity: 1; } #lr-overlay-content .poem:nth-child(1) { animation: lr-fadein 1s forwards; animation-delay: 1s; } #lr-overlay-content .poem:nth-child(2) { animation: lr-fadein 1s forwards; animation-delay: 4s; } #lr-overlay-content .poem:nth-child(3) { animation: lr-fadein 1s forwards; animation-delay: 7s; } #lr-overlay-content .poem:nth-child(4) { animation: lr-fadein 1s forwards; animation-delay: 10s; } #lr-overlay-content .poem:nth-child(5) { animation: lr-fadein 1s forwards; animation-delay: 13s; } #lr-overlay-content .poem:nth-child(6) { animation: lr-fadein 1s forwards; animation-delay: 16s; } #lr-overlay-content .poem:nth-child(7) { animation: lr-fadein 1s forwards; animation-delay: 19s; } #lr-overlay-content cite, #lr-overlay-buttons { animation: lr-fadein 1s forwards; animation-delay: 22s; } #lr-overlay-skip { animation: lr-fadeout 1s forwards; animation-delay: 22s; }