body {
    background-image:url('background-moon.png'),
        url('background-top.png'),
        url('background-texture.png');
    background-repeat: no-repeat,
        no-repeat,
        repeat;
    background-position:top 10px center,
        top center,
        top left;
    background-size: 5vw,
        100% auto,
        auto;
}
main {
    background-image: url('background-bottom.png');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100% auto;
}

:root {
    --eid-timed-animation-duration: 8s;
    --eid-krucil-height: 8vw;
}

.eid-container {
    position:fixed;
    height:100%;
    width:100%;
    top:0;
    left:0;
    overflow:hidden;
    z-index:-1;
    animation: fadeIn 1s;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}


.eid-langit-malam {
    left:0;
    top:0;
    background: rgb(83,33,60);
    background: radial-gradient(circle, rgba(83,33,60,0.3912158613445378) 0%, rgba(61,26,64,0.7973783263305322) 48%, rgba(45,39,69,1) 89%);
    animation: fadeIn var(--eid-timed-animation-duration) reverse forwards;
}

.eid-langit-pagi {
    left:0;
    top:0;
    /* background: rgb(239,192,162);
    background: radial-gradient(circle, rgba(239,192,162,0.5256696428571428) 0%, rgba(192,165,225,0.8421962535014006) 48%, rgba(139,160,244,1) 89%); */
    background: rgb(98,150,214);
background: radial-gradient(circle, rgba(98,150,214,0.5956976540616247) 0%, rgba(120,93,154,0.736594012605042) 48%, rgba(29,43,94,1) 89%);
    animation: fadeIn var(--eid-timed-animation-duration) reverse forwards;
    animation-delay: var(--eid-timed-animation-duration);
}

.eid-langit-siang {
    left:0;
    top:0;
    background: rgb(201,231,254);
background: radial-gradient(circle, rgba(201,231,254,0.8057816876750701) 0%, rgba(87,167,236,0.9234287464985994) 48%, rgba(16,96,173,1) 89%);
    /* background: rgb(162,226,239);
    background: radial-gradient(circle, rgba(162,226,239,0.5256696428571428) 0%, rgba(165,207,225,0.8421962535014006) 48%, rgba(139,190,244,1) 89%); */
}

.eid-background {
    width:100%;
    height:100%;
    background-size:100%;
    position:absolute;
    background-repeat:no-repeat;
}


.eid-tanah {
    background-image:url('jalan.png');
    background-size:100%;
    background-position:bottom center;
    height:100%;
    width:100%;
    bottom: 0;
    left:0;
}

.eid-masjid {
    background-image:url('masjid.png');
    background-size:100%;
    background-position:bottom center;
    height:100%;
    width:100%;
    bottom: 3vw;
    left:0;
}

.eid-awan {
    background-image:url('awan2.png');
    background-size:auto 100%;
    background-position:top left;
    height:20vw;
    width:100%;
    bottom: 25vw;
    left:0;
    animation: awan 300s infinite;
}

@keyframes awan {
    0% {
        background-position: top left;
    }
    50% {
        background-position: top right;
    }
    100% {
        background-position: top left;
    }
}

.eid-awan-belakang {
    background-image:url('awan2.png');
    background-size:auto 100%;
    background-position:top left;
    height:10vw;
    width:100%;
    bottom: 33vw;
    left:0;
    opacity:.3;
    animation: awan 300s infinite;
}

.eid-bulan {
    background-image:url('bulan.png');
    background-size:auto 100%;
    background-position:center;
    height: 8vw;
    width:10vw;
    bottom: 38vw;
    left: 30vw;
    animation: bulanmatahari calc(var(--eid-timed-animation-duration) * 1.5) forwards;
    animation-delay: calc(var(--eid-timed-animation-duration) * .1);
}

.eid-matahari {
    background: rgb(255,252,127);
    background: linear-gradient(180deg, rgba(255,252,127,1) 0%, rgba(255,235,151,1) 70%, rgba(255,207,131,1) 100%);
    height:10vw;
    width:10vw;
    bottom:45vw;
    right:5vw;
    box-shadow:0px 0px 40vw 100vw rgba(252, 240, 158, 0.3);
    border-radius:9999px;
    animation: bulanmatahari calc(var(--eid-timed-animation-duration) * 1.5) forwards;
    animation-direction: reverse;
    animation-delay: calc((var(--eid-timed-animation-duration) * 2) - (var(--eid-timed-animation-duration) * .8));
    opacity:0;
}

.eid-matahari::after {
    content:"";
    position:absolute;
    background-image:url('matahari.png');
    background-size:100%;
    background-position:center;
    height:16vw;
    width:16vw;
    bottom:-3.4vw;
    right:-3vw;
}

@keyframes bulanmatahari{
    from {
        bottom:38vw;
        opacity:1;
    }
    to {
        bottom:45vw;
        opacity: 0;
    }
}

.eid-krucil {
    background-size:auto 100%;
    background-position:center bottom;
    height: var(--eid-krucil-height);
    width: 10vw;
    --eid-krucil-bottom: 2vw;
    animation: krucil var(--eid-timed-animation-duration), krucil-joget 1s infinite;
    bottom: -30vw;
}


/** KRUCIL MALAM **/

.eid-krucil-malam {
    animation-delay: var(--eid-timed-animation-delay);
}

.eid-krucil-malam-1 {
    background-image:url('krucil-malam-1.png');
    left: 30vw;
    height: calc(var(--eid-krucil-height) * 1.5);
    width: 20vw;
    --eid-timed-animation-delay:.2s;
}

.eid-krucil-malam-2 {
    background-image:url('krucil-malam-2.png');
    left: 48vw;
    width: 15vw;
    height: calc(var(--eid-krucil-height) * 1.5);
}

.eid-krucil-malam-3 {
    background-image:url('krucil-malam-3.png');
    left: 58vw;
    --eid-timed-animation-delay:.4s;
}

.eid-krucil-malam-4 {
    background-image:url('krucil-malam-4.png');
    left: 64vw;
    margin-bottom: .5vw;
    --eid-timed-animation-delay:.3s;
}

.eid-krucil-malam-5 {
    background-image:url('krucil-malam-5.png');
    left: 72vw;
    height: calc(var(--eid-krucil-height) * 1.1);
    --eid-timed-animation-delay:.1s;
}


/** KRUCIL PAGI **/

.eid-krucil-pagi {
    --eid-krucil-height: 10vw;
    --eid-krucil-bottom: 1vw;
    animation: krucil var(--eid-timed-animation-duration), krucil-jalan 1s infinite, krucil-jauh calc(var(--eid-timed-animation-duration) + 3s) forwards;
    animation-delay: calc(var(--eid-timed-animation-duration) + var(--eid-timed-animation-delay));
}

.eid-krucil-pagi-1 {
    background-image:url('krucil-pagi-2.png');
    left: 48vw;
    width: 20vw;
    --eid-timed-animation-delay:0s;
    height: calc(var(--eid-krucil-height) * 0.85);
}

.eid-krucil-pagi-2 {
    background-image:url('krucil-pagi-1.png');
    left: 37vw;
    width: 20vw;
    --eid-timed-animation-delay:.1s;
    height: calc(var(--eid-krucil-height) * 1.5);
}

.eid-krucil-pagi-3 {
    background-image:url('krucil-pagi-3.png');
    left: 58vw;
    --eid-timed-animation-delay:.2s;
    height: calc(var(--eid-krucil-height) * 1.3);
}

.eid-krucil-pagi-4 {
    background-image:url('krucil-pagi-4.png');
    left: 64vw;
    --eid-timed-animation-delay:.3s;
    height: calc(var(--eid-krucil-height) * 1.5);
}



/** KRUCIL SIANG **/

.eid-krucil-siang {
    animation: krucil-siang calc(var(--eid-timed-animation-duration) / 3) forwards;
    animation-delay: calc((2 * var(--eid-timed-animation-duration)) + var(--eid-timed-animation-delay));
    height: 30vw;
    width: 45vw;
    background-image:url('krucil-siang.png');
    left: 37vw;
    --eid-timed-animation-delay:0s;
    --eid-krucil-bottom: 40vw;
}

@keyframes krucil {
    20% {
        bottom: var(--eid-krucil-bottom);
    }

    80% {
        bottom: var(--eid-krucil-bottom);
    }
    100% {
        bottom: -40vw;
    }
}


@keyframes krucil-siang {
    to {
        bottom: 0;
    }
}

@keyframes krucil-joget {
    0% {
        transform: rotate(2deg);
    }
    50% {
        transform: rotate(-2deg);
    }
    100% {
        transform: rotate(2deg);
    }
}

@keyframes krucil-jalan {
    0% {
        margin-bottom:0;
    }
    50% {
        margin-bottom:.2vw;
    }
    100% {

        margin-bottom:0;
    }
}

@keyframes krucil-jauh {
    to {
        transform:scale(0.6);
    }
}

.loading-ketupat {
    opacity:1;
    position:relative;
    background:transparent;
    animation:none;
    height: 14rem !important;
    width: 6rem !important;
    margin-bottom:-4rem;
    margin-top: -5rem;
}

.loading-ketupat::before {
    content:"";
    display:inline-block;
    background:url('loading-2.png');
    background-size:100%;
    background-repeat:no-repeat;
    background-position: top center;
    animation: loading 2s infinite;
    height: 7rem !important;
    width: 5rem !important;
    position:absolute;
    bottom:1rem;
    left:0rem;
    --eid-loading-rotate-default: 20deg;
    --eid-loading-margin-left: 2.5rem;
    transform:rotate(var(--eid-loading-rotate-default));
}

.loading-ketupat::after {
    content:"";
    display:inline-block;
    background:url('loading-1.png');
    background-size: 100%;
    background-repeat:no-repeat;
    background-position: center;
    animation: loading 2s infinite;
    height:10rem;
    width:7rem;
    top:0;
    left:0;
    position:absolute;
    --eid-loading-rotate-default: -15deg;
    --eid-loading-margin-left: -2.5rem;
    transform:rotate(var(--eid-loading-rotate-default));
}

@keyframes loading {
    0% {
        transform:rotate(var(--eid-loading-rotate-default));
    }
    50% {
        transform:rotate(calc(0deg - var(--eid-loading-rotate-default)));
        margin-left: var(--eid-loading-margin-left);
    }
    100% {
        transform:rotate(var(--eid-loading-rotate-default));
    }
}