body {
    background-image: url('background-top.png'), url('background-texture.png');
    background-size: 100%, auto;
    background-position: top left, top left;
    background-repeat: no-repeat, repeat;
    background-color: rgba(255, 225, 209, .3);
}

main {
    background-image: url('background-bottom.png');
    background-size: 100%;
    background-position: center bottom;
    background-repeat:no-repeat;
}


.loading-barong {
    background:url('loading-body.png');
    background-size:100%;
    background-repeat:no-repeat;
    background-position: top center;
    animation: lompat2 1s infinite;
    position:relative;
    opacity:1;
    height: 5rem !important;
    width: 7rem !important;
    margin-bottom:-20px;
    border-radius:0px;
}

.loading-barong::after {
    content:"";
    display:inline-block;
    background:url('loading.png');
    background-size: 100%;
    background-repeat:no-repeat;
    background-position: center;
    height:9.5rem;
    width:9.5rem;
    position:absolute;
    top:-2.3em;
    left:-16px;
    animation: lompat2 1s infinite .5s;
}

.loading-banten {
    background:url('loading2-payung.png');
    background-size:100%;
    background-repeat:no-repeat;
    background-position: top center;
    animation: lompat2 1s infinite;
    position:relative;
    opacity:1;
    height: 10rem !important;
    width: 7rem !important;
    margin-bottom:-10px;
    border-radius:0px;
}

.loading-banten::after {
    content:"";
    display:inline-block;
    background:url('loading2.png');
    background-size: 100%;
    background-repeat:no-repeat;
    background-position: center;
    height:6rem;
    width:6rem;
    position:absolute;
    top:1.8em;
    left:5px;
    animation: lompat2 1s infinite .5s;
}

@keyframes lompat2 {
    0% {
        transform:translateY(0px);
    }
    60% {
        transform:translateY(-6px);
    }
    100% {
        transform:translateY(0px);
    }
}

.nyepi-container {
    position:fixed;
    height:100%;
    width:100%;
    top:0;
    left:0;
    overflow:hidden;
    z-index:-1;
    background: rgb(0,54,182);
    background: radial-gradient(circle, rgba(0,54,182,0.4192270658263305) 12%, rgba(0,31,84,0.8814119397759104) 49%, rgba(0,16,22,1) 87%);
    animation: fadeIn 1s;
}


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

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

.nyepi-awan {
    height: 70%;
    background-size:cover;
    background-image:url('awan.png');
    background-position: top left;
    animation-name: awan;
    animation-duration: 400s;
    animation-iteration-count: infinite;
}


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



.nyepi-pura {
    background-image:url('pura.png');
    background-position:bottom center;
}
.nyepi-bintang {
    background-image:url('bintang.png');
    height: 50%;
    width: 50%;
    left: 22%;
    top: -15%;
    background-position:bottom center;
    animation-name: bintang;
    animation-duration: 5s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
}

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



.nyepi-rumput {
    background-image:url('rumput.png');
    width: 100%;
    height: 200px;
    background-repeat:repeat-x;
    bottom:-100px;
    animation-name: rumput;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

@keyframes rumput{
    0% {
        transform:rotate(-.1deg);
        left: -5px;
    }
    50% {
        transform:rotate(.1deg);
        left: 0px;
    }
    100% {
        transform:rotate(-.1deg);
        left: -5px;
    }
}

.nyepi-kunang-container {
    bottom:0;
    height:50%;
    width:100%;
}

.nyepi-kunang {
    /* background-image:url('kunang-kiri.png');
    background-size:100%;
    background-position:center; */
    position:absolute;
    height: 15px;
    width: 15px;
    background: rgb(255,255,255);
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(253,228,79,1) 87%);
    bottom:var(--kunang-bottom);
    left:var(--kunang-left);
    opacity: 0;
    animation-name: kunang, kunanggerakkiri;
    animation-duration: var(--kunang-duration), var(--kunang-move-duration);
    animation-delay: var(--kunang-delay), 0s;
    animation-iteration-count: infinite;
    border-radius:9999px;
    box-shadow: 0px 0px 30px 10px #F5C91B;
}

.nyepi-kunang-kanan {
    /* background-image:url('kunang-kanan.png'); */
    animation-name: kunang, kunanggerakkanan;
}

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

@keyframes kunanggerakkiri {
    0% {
        left:var(--kunang-left);
    }
    50% {
        left:calc(var(--kunang-left) - 30px);
    }
    100% {
        left:var(--kunang-left);
    }
}

@keyframes kunanggerakkanan {
    0% {
        left:var(--kunang-left);
    }
    50% {
        left:calc(var(--kunang-left) + 30px);
    }
    100% {
        left:var(--kunang-left);
    }
}