body {
    background-image: url('img/main-top.png'), url('img/main-clouds.png');
    background-size: 100%, 100%;
    background-position: top center, center;
    background-repeat:no-repeat, repeat-y;
    background-color: rgba(253, 242, 226, .5);
}
main {
    background-image: url('img/main-bottom.png');
    background-size: 100%;
    background-position: center bottom;
    background-repeat:no-repeat;
}

.loading-lotus {
    background:url('img/loading-base.png');
    background-size:100%;
    background-repeat:no-repeat;
    background-position: center;
    animation: loading-move 2s linear infinite;
    position:relative;
    opacity:1;
    height: 8rem !important;
    width: 8rem !important;
    transform:scale(1.2);
}

.loading-lotus::before {
    content:"";
    background:url('img/loading-fire.png');
    background-size:100%;
    background-repeat:no-repeat;
    background-position: center;
    position:absolute;
    height:2rem;
    width:1rem;
    left:42%;
    top:3%;
    animation: loading-fire 2s infinite linear;
}


.loading-lotus::after {
    content:"";
    background:url('img/loading-glow.png');
    background-size:100%;
    background-repeat:no-repeat;
    background-position: center;
    position:absolute;
    height:3rem;
    width:4rem;
    left:20%;
    top:0;
    animation: star 6s infinite, loading-move 2s linear infinite;
    animation-delay: 0s, 1s;
}

@keyframes loading-move {
    0% {
        top:0;
    }
    50% {
        top:-.1em;
    }
    100% {
        top:0;
    }
}

@keyframes loading-fire {
    0% {
        transform:rotate(10deg);
        left: 44%;
    }
    50% {
        transform:rotate(-5deg);
        left: 40%;
    }
    100% {
        transform:rotate(10deg);
        left: 44%;
    }
}

.vesak-container {
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background: rgb(23,28,40);
    background: radial-gradient(circle, rgba(23,28,40,0.5004595588235294) 20%, rgba(23,28,40,1) 75%);
    z-index:-1;
    overflow:hidden;
    opacity:0;
    animation: fadeOut 1s forwards;
}

@keyframes fadeOut {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

.vesak-background {
    width:100vw;
    height:150vh;
    background-size:100%;
    position:absolute;
    background-repeat:no-repeat;
}

.vesak-menu-mid {
    background-image:url('img/menu-mid.png');
    background-size: 110% 30vw;
    background-position: bottom center;
    animation: slideUp 2s forwards, fillColor 4.5s forwards, cloud 100s infinite linear;
    animation-delay: 1s, 2s;
    filter: brightness(.4);
    bottom: -100vh;
}

.vesak-menu-front {
    background-image:url('img/menu-front.png');
    background-position: bottom;
    animation: slideUp 2s forwards, fillColor 5s forwards;
    animation-delay: .5s, 1.5s;
    filter: brightness(.3);
    bottom: -100vh;
}

.vesak-menu-back {
    background-image:url('img/menu-back.png');
    background-position: bottom;
    animation: fadeOut 3s forwards, slideUp 4s forwards;
    animation-delay: 1.5s;
    bottom: -100vh;
    opacity:0;
}

@keyframes slideUp {
    from {
        bottom: -100vh;
    }
    to {
        bottom: 0;
    }
}

@keyframes cloud {
    0% {
        background-position: bottom left;
    }
    50% {
        background-position: bottom right;
    }
    100% {
        background-position: bottom left;
    }
}

@keyframes fillColor {
    to {
        filter: brightness(1.2);
    }
}

.vesak-lantern {
    position:absolute;
    width: 10vw;
    height: 10vw;
    background-image:url('img/lantern.png');
    background-size:100%;
    background-position:center;
    background-repeat:no-repeat;
    animation: lantern-up 6s forwards, lantern-light 3s infinite, lantern-move 5s infinite;
    top: 120vh;
}

@keyframes lantern-up {
    from {
        top: 120vh;
    }
    to {
        top: var(--lantern-top);
    }
}

@keyframes lantern-light {
    0% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(.8);
    }
    100% {
        filter: brightness(1);
    }
}

@keyframes lantern-move {
    0% {
        margin-top:0;
    }
    50% {
        margin-top:1vw;
    }
    100% {
        margin-top:0;
    }
}

.vesak-star {
    height:5px;
    width:5px;
    position:absolute;
    background:rgba(200,181,164,.7);
    border-radius:100000px;
    box-shadow:0px 0px 20px 5px #c8b5a4;
    animation: star 7s infinite;
    opacity:0;
}

@keyframes star {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}