@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: #121212; 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 { text-align: center; font-size: 2em; color: white; margin: 0.75em auto; } #lr-overlay-content img { width: 50%; } #lr-overlay-content a { color: lightblue; } #lr-overlay-content div { margin: 0.75em; } #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: white; } #lr-overlay-content div:nth-child(2), #lr-overlay-content div:nth-child(3), #lr-overlay-buttons { visibility: hidden; opacity: 0; } #lr-overlay-skip { visibility: visible; opacity: 1; } #lr-overlay-content div:nth-child(2) { animation: lr-fadein 1s forwards; animation-delay: 1s; } #lr-overlay-content div:nth-child(3) { animation: lr-fadein 1s forwards; animation-delay: 3s; } #lr-overlay-buttons { animation: lr-fadein 1s forwards; animation-delay: 5s; } #lr-overlay-skip { animation: lr-fadeout 1s forwards; animation-delay: 5s; }