@keyframes lr-fadein-flyup { from { visibility: hidden; opacity: 0; transform: translate(0px, 1em); } to { visibility: visible; opacity: 1; transform: translate(0px, 0px); } } @keyframes lr-fadeout-flydown { from { visibility: visible; opacity: 1; transform: translate(0px, 0px); } to { visibility: hidden; opacity: 0; transform: translate(0px, 1em); } } #lr-overlay-wrapper { position: fixed; background: #deede0; 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%; color: #228b22; margin: 0.75em auto; text-align: center; font-size: 2em; } #lr-overlay-content>div { margin-bottom: 1em; } #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-color: #b7e6b9; text-align: center; margin: 0 5px; } .lr-overlay-button span { color: #228b22; } #lr-overlay-moegirl, #lr-overlay-celebration, #lr-overlay-celebration-en, #lr-overlay-buttons { visibility: hidden; opacity: 0; } #lr-overlay-skip { visibility: visible; opacity: 1; } #lr-overlay-moegirl { animation: lr-fadein-flyup 1s forwards; animation-delay: 1s; } #lr-overlay-celebration { animation: lr-fadein-flyup 1s forwards; animation-delay: 3s; } #lr-overlay-celebration-en { animation: lr-fadein-flyup 1s forwards; animation-delay: 5s; } #lr-overlay-buttons { animation: lr-fadein-flyup 1s forwards; animation-delay: 7s; } #lr-overlay-skip { animation: lr-fadeout-flydown 1s forwards; animation-delay: 7s; }