@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;
}