<div class="stars"></div>
<style>
 :host(#book-shadow-host)::before {
     content: ' ';
     position: fixed;
     top: 0; left: 0;
     width: 100vw;
     height: 100vh;
     z-index: -2;
     background:
        radial-gradient(ellipse at 50% 100%, rgba(255, 26, 189, 0.09), transparent 50%),
        radial-gradient(ellipse at 100% 80%, rgba(41, 255, 26, 0.18), transparent 50%),
        radial-gradient(ellipse at 0% 0%, rgba(255, 236, 26, 0.07), transparent 50%),
        radial-gradient(ellipse at 100% 0%, rgba(21, 1, 5, 0.74), transparent 30%),
        radial-gradient(circle at 0% 100%, rgba(21, 1, 5, 0.74), transparent 50%),
        radial-gradient(ellipse at top left, #000010, #001a33 30%, #004466 60%, #001133 80%, #000000 100%);
 }
.stars {
    position: fixed;
    background:
        radial-gradient(2px 2px at 20% 30%, #a6ffed, transparent),
        radial-gradient(1.5px 1.5px at 70% 80%, #d8b5ff, transparent),
        radial-gradient(1.8px 1.8px at 40% 60%, white, transparent),
        radial-gradient(1.2px 1.2px at 90% 10%, #ffc8c8, transparent),
        radial-gradient(1px 5px at 10% 90%, #fff1b9, transparent),
        radial-gradient(4px 1px at 10% 90%, #fff1b9, transparent);
    background-repeat: repeat;
    background-size: 190px 200px;
    z-index: -1;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    transform-origin: center;
}
.stars::before,
.stars::after {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    z-index: -1;
}
.stars {
    animation: twinkle 16s infinite ease-in-out,
    rotateStars 600s linear infinite;
}
.stars::before {
    animation: twinkleA 16s infinite ease-in-out,
    rotateStars2 180s linear infinite;
    opacity: 0.2;
}
.stars::after {
    animation: twinkleB 16s infinite ease-in-out,
    rotateStars3 720s linear infinite;
    opacity: 0.6;
}
@keyframes twinkle {
    0%   { opacity: 0.9; }
    25%  { opacity: 0.3; }
    50% { opacity: 0.4; }
    75% { opacity: 0.6; }
    100% { opacity: 1; }
}
@keyframes twinkleA {
    0% { opacity: 0.2; }
    50% { opacity: 1; }
    100% { opacity: 0.3; }
}
@keyframes twinkleB {
    0%   { opacity: 0.5; }
    25%  { opacity: 0.2; }
    50% { opacity: 0.9; }
    75% { opacity: 1; }
    100% { opacity: 0.6; }
}
@keyframes rotateStars {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes rotateStars2 {
    from { transform: rotate(90deg); }
    to   { transform: rotate(450deg); }
}
@keyframes rotateStars3 {
    from { transform: rotate(-65deg); }
    to   { transform: rotate(295deg); }
}
/*
                       _
 _ __   ___  _ __   __| |
| '_ \ / _ \| '_ \ / _` |
| |_) | (_) | | | | (_| |
| .__/ \___/|_| |_|\__,_|
|_| code by p-ond.uk
*/
</style>