@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: #FBD170; 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 { max-width: 50%; padding-right: 0.5em; margin: 0.75em auto; } #lr-overlay-content>div { margin: 0.25em auto; } #lr-overlay-content>div { color: #C2322D; font-size: 1.3em; } #lr-overlay-content>div:nth-child(1) { font-size: 3em; font-weight: bold; } #lr-overlay-content>div a { color: royalblue; } #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: #BC0100; text-align: center; margin: 0 5px; } .lr-overlay-button span { color: #FDAF19; } #lr-overlay-content>div, #lr-overlay-buttons { visibility: hidden; opacity: 0; } #lr-overlay-skip { visibility: visible; opacity: 1; } #lr-overlay-content>div:nth-child(1) { animation: lr-fadein 1s forwards; animation-delay: 1s; } #lr-overlay-content>div:nth-child(2) { animation: lr-fadein 1s forwards; animation-delay: 3s; } #lr-overlay-content>div:nth-child(3) { animation: lr-fadein 1s forwards; animation-delay: 5s; } #lr-overlay-content>div:nth-child(4), #lr-overlay-buttons { animation: lr-fadein 1s forwards; animation-delay: 7s; } #lr-overlay-skip { animation: lr-fadeout 1s forwards; animation-delay: 7s; }