body {
    background-image: url('main-top.png'), url('main-side.png');
    background-size: 100%;
    background-position: top center, top 120px center;
    background-repeat:no-repeat;
}

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

#logo-hut-ri {
    height:30px;
    width:60px;
    margin-bottom:-10px;
    background-image: url('logo-hut-ri.png');
    background-size:100%;
    background-position:center;
    background-repeat:no-repeat;
}

#loading .spinner-grow {
    animation: var(--bs-spinner-animation-speed) linear infinite var(--bs-spinner-animation-name),
        loading calc(var(--bs-spinner-animation-speed)*2) linear infinite
        !important;
}

@keyframes loading {
    35% {
        background:red;
    }
    50% {
        background: red;
    }
    55% {
        background: white;
    }
}

body[dark="true"] #logo-hut-ri {
    filter: brightness(0) invert(1);
}

.merdeka-container {
    position:fixed;
    height:100%;
    width:100%;
    top:0;
    left:0;
    overflow:hidden;
    z-index:-1;
    animation: fadeOut 3s;
    background: rgb(202,236,242);
    background: radial-gradient(circle, rgba(202,236,242,0.486453956582633) 24%, rgba(150,221,231,0.7189469537815126) 40%, rgba(101,182,188,1) 79%);
}

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

.merdeka-container div {
    position:fixed;
    background-size:100%;
    background-repeat:no-repeat;
    background-position: bottom;
    height:100vh;
}

.merdeka-background {
    width:100vw;
    background-image: url('menu-background.png');
    bottom:0;
    right:0;
}


.merdeka-gapura {
    width: 27vw;
    background-image: url('gapura.png');
    right:40vw;
    bottom: 19vw;
    animation: gapura 4s infinite;
}

@keyframes gapura {
    0% {
        transform:translateX(0) rotate(0);
    }
    50% {
        transform:translateX(-1vw);
    }
    100% {
        transform:translateX(0) rotate(0);
    }
}

.merdeka-pinang {
    width: 10vw;
    background-image: url('pinang.png');
    right: 20vw;
    bottom: 23vw;
    animation: pinang 3s infinite;
}


@keyframes pinang {
    0% {
        transform:skew(-7deg) translateX(10px);
    }
    50% {
        transform:skew(7deg) translateX(-60px);
    }
    100% {
        transform:skew(-7deg) translateX(10px);
    }
}

.merdeka-bendera {
    width: 15vw;
    background-image: url('bendera.png');
    background-position:top right !important;
    right:0px;
    top:0px;
}

.merdeka-penonton {
    width: 50vw;
    background-image: url('penonton.png');
    right:17vw;
    bottom:18vw;
    animation: penonton 1s infinite;
}

@keyframes penonton {
    50% {
        transform: translateY(.5vw);
    }
}

.merdeka-penonton-anak {
    width: 6vw;
    background-image: url('penonton-anak.png');
    right: 8vw;
    bottom: 27vw;
    animation: penonton-anak .5s infinite;
}


@keyframes penonton-anak {
    50% {
        transform: translateY(1%);
    }
}

@keyframes penonton-depan {
    50% {
        transform:rotate3d(1,1,1,var(--degree)) skewX(var(--degree))  translateX(var(--distance));
    }
}

.merdeka-penonton-remaja {
    width: 7vw;
    background-image: url('penonton-remaja.png');
    right: 18vw;
    bottom: 21.5vw;
    --degree: 2deg;
    --distance: -5%;
    animation: penonton-depan 1s infinite;
}
.merdeka-penonton-ibu {
    width: 7.5vw;
    background-image: url('penonton-ibu.png');
    right: 32vw;
    bottom: 19vw;
    --degree: 5deg;
    --distance: -10%;
    animation: penonton-depan 1.8s infinite;
}
.merdeka-penonton-bapak {
    width: 14vw;
    background-image: url('penonton-bapak.png');
    right: 48vw;
    bottom: 14vw;
    --degree: 2deg;
    --distance: -5%;
    animation: penonton-depan 1.5s infinite;
}


.merdeka-peserta-bayangan {
    width: 12vw;
    background-image: url('peserta-bayangan.png');
    right: 5vw;
    bottom: 18vw;
    animation: peserta-bayangan 2s infinite;
}

@keyframes peserta-bayangan {
    20% {
        transform: translateX(-5%) translateY(-1%);
    }
    40% {
        transform: translateX(-8%) translateY(0%);
    }
    60% {
        transform: translateX(-8%) translateY(-1%);
    }
    80% {
        transform: translateX(0%) translateY(0%);
    }
}


:root {
    --penonton-depan-kanan-w: 22vw;
    --penonton-depan-kanan-r: -5vw;
    --penonton-depan-kanan-b: 0vw;

    --penonton-depan-kiri-w: 22vw;
    --penonton-depan-kiri-r: 70vw;
    --penonton-depan-kiri-b: -1vw;

    --peserta-1-w: 9vw;
    --peserta-1-r: 63vw;
    --peserta-1-b: 2vw;
    --peserta-1-duration: 1.5s;

    --peserta-2-w: 10vw;
    --peserta-2-r: 42vw;
    --peserta-2-b: 3vw;
    --peserta-2-duration: 1.7s;

    --peserta-3-w: 20vw;
    --peserta-3-r: 15vw;
    --peserta-3-b: 5vw;
    --peserta-3-duration: 1.5s;
}

.merdeka-penonton-depan-kiri {
    width: var(--penonton-depan-kiri-w);
    background-image: url('penonton-depan-kiri.png');
    right: var(--penonton-depan-kiri-r);
    bottom: var(--penonton-depan-kiri-b);
    animation: penonton-depan-kiri 2s infinite;
}

.merdeka-tangan-penonton-depan-kiri {
    width: calc(var(--penonton-depan-kiri-w) / 3.5);
    background-image: url('penonton-depan-kiri-tangan.png');
    right: calc(var(--penonton-depan-kiri-r) - 5vw);
    bottom: calc(var(--penonton-depan-kiri-b) - 1vw);
    animation: tangan-penonton-depan-kiri 2s infinite;
}

@keyframes penonton-depan-kiri {
    50% {
        transform: translateX(1vw) translateY(1vw);
    }
}

@keyframes tangan-penonton-depan-kiri {
    50% {
        transform: rotate(10deg) translate(100px, 10px);
    }
}

.merdeka-penonton-depan-kanan {
    width: var(--penonton-depan-kanan-w);
    background-image: url('penonton-depan-kanan.png');
    right: var(--penonton-depan-kanan-r);
    bottom: var(--penonton-depan-kanan-b);
    animation: penonton-depan-kanan 2.5s infinite;
}

.merdeka-tangan-penonton-depan-kanan {
    width: calc(var(--penonton-depan-kanan-w) / 2.2);
    background-image: url('penonton-depan-kanan-tangan.png');
    right: var(--penonton-depan-kanan-r);
    bottom: calc(var(--penonton-depan-kanan-b) + 4vw);
    animation: tangan-penonton-depan-kanan 2.5s infinite;
}


@keyframes penonton-depan-kanan {
    50% {
        transform: rotate(-3deg) translateX(-2%) translateY(3%);
    }
}

@keyframes tangan-penonton-depan-kanan {
    50% {
        transform: rotate(-5deg) translateX(-5%) translateY(5%);
    }
}

.merdeka-peserta-1-bawah {
    width: var(--peserta-1-w);
    background-image: url('peserta-1-bawah.png');
    right: var(--peserta-1-r);
    bottom: var(--peserta-1-b);
    animation:peserta-1-bawah var(--peserta-1-duration) infinite;
}

@keyframes peserta-1-bawah {
    50% {
        transform:rotate(-5deg);
    }
}

.merdeka-peserta-1-atas {
    width: calc(var(--peserta-1-w) + 11vw);
    background-image: url('peserta-1-atas.png');
    bottom: calc(var(--peserta-1-w) + 1vw);
    left: -4.5vw;
}

.merdeka-peserta-1-kepala {
    width: calc(var(--peserta-1-w) * 0.7);
    background-image: url('peserta-1-kepala.png');
    bottom: calc(var(--peserta-1-w) + 8.5vw);
    left: 2.6vw;
}


.merdeka-peserta-2-bawah {
    width: var(--peserta-2-w);
    background-image: url('peserta-2-bawah.png');
    right: var(--peserta-2-r);
    bottom: var(--peserta-2-b);
    animation:peserta-2-bawah var(--peserta-2-duration) infinite;
}

@keyframes peserta-2-bawah {
    20% {
        transform: translateX(-5%) translateY(-1%);
    }
    40% {
        transform: translateX(-10%) translateY(0%);
    }
    60% {
        transform: translateX(-10%) translateY(-1%);
    }
    80% {
        transform: translateX(0%) translateY(0%);
    }
}

.merdeka-peserta-2-atas {
    width: calc(var(--peserta-2-w) + 1vw);
    background-image: url('peserta-2-atas.png');
    left: 0;
    bottom: calc(var(--peserta-2-w) + 1vw);
    animation:peserta-2-atas var(--peserta-2-duration) infinite;
}

@keyframes peserta-2-atas {
    50% {
        transform:translateX(-3px) translateY(5px);
    }
}

.merdeka-peserta-3-badan::before {
    content:"";
    width: calc(var(--peserta-3-w) * .45);
    background-image: url('peserta-3-kiri.png');
    right: 0vw;
    bottom: 7.5vw;
    /* animation: peserta-3-tangan-kiri var(--peserta-3-duration) infinite; */
}

@keyframes peserta-3-tangan-kiri {
    50% {
        transform:rotate(10deg) translateX(20%) translateY(2%);
    }
}

.merdeka-peserta-3-badan {
    width: var(--peserta-3-w);
    background-image: url('peserta-3-badan.png');
    right: var(--peserta-3-r);
    bottom: var(--peserta-3-b);
    animation: peserta-3-bawah var(--peserta-3-duration) infinite;
}

@keyframes peserta-3-bawah {
    50% {
        transform:translateX(-10%) translateY(2%);
    }
}

.merdeka-peserta-3-kepala {
    width: calc(var(--peserta-3-w) * 0.27);
    background-image: url('peserta-3-kepala.png');
    right: 8.5vw;
    bottom: 5vw;
    animation: peserta-3-kepala var(--peserta-3-duration) infinite;
}

@keyframes peserta-3-kepala {
    50% {
        transform:translateX(-10%);
    }
}