@font-face {
    font-family: Grisly Beast;
    src: url("Grisly\ Beast.ttf");
}

body {
    background:url('background.png');
}

.easter-container {
    position:fixed;
    height:100%;
    width:100%;
    top:0;
    left:0;
    overflow:hidden;
    z-index:-1;
    background: rgb(177,204,231);
    background: radial-gradient(circle, rgba(177,204,231,0.6629245448179272) 0%, rgba(77,170,221,0.8954175420168067) 68%, rgba(3,147,211,1) 89%);
    animation: fadeIn 1s;
}


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

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

.easter-bumi, .easter-telur-bumi {
    --rotation-from:0deg;
    --rotation-to:-360deg;
    --rotation-speed: 50s;
    background-image:url('bumi.png');
    background-size:100%;
    height:100vw;
    width:100vw;
    bottom: -83vw;
    left:-5vw;
    animation: muter var(--rotation-speed) linear infinite;
}

.easter-telur-bumi {
    background-image:url('telur-bumi.png');
    --rotation-speed: 35s;
}

.easter-bumi-kiri {
    height:70vw;
    width:70vw;
    bottom: -55vw;
    left: -20vw;
    --rotation-from:80deg;
    --rotation-to:440deg;
    --rotation-speed: 50s;
}

.easter-bumi-kanan, .easter-telur-bumi-kanan {
    height:85vw;
    width:85vw;
    bottom: -70vw;
    left: auto;
    right: -25vw;
    --rotation-from:130deg;
    --rotation-to:490deg;
    --rotation-speed: 55s;
}

.easter-telur-bumi-kanan {
    --rotation-speed: 40s;
}

@keyframes muter {
    from {
        transform:rotate(var(--rotation-from));
    }
    to {
        transform:rotate(var(--rotation-to));
    }
}

.easter-awan {
    width: 10000vw;
    height: 33vw;
    bottom: -8vw;
    background-image:url('awan.png');
    background-size: auto 100%;
    background-repeat:repeat-x;
    background-position-x: right;
    animation: awan 5000s;
}

.easter-awan-kecil {
    width: 10000vw;
    height: 5vw;
    bottom: 25vw;
    background-image:url('awan-kecil.png');
    background-size: auto 100%;
    background-repeat:repeat-x;
    background-position-x: right;
    animation: awan 3000s;
}

@keyframes awan {
    to {
        background-position-x: left;
    }
}


.easter-tanaman-kiri {
    --tanaman-bottom: -12vw;
    background-image:url('tanaman-kiri.png');
    background-size:100%;
    height:20vw;
    width: 13vw;
    bottom:var(--tanaman-bottom);
    left:2vw;
    animation: bunga 2s linear infinite;
}

.easter-tanaman-kanan {
    --tanaman-bottom: -10vw;
    background-image:url('tanaman-kanan.png');
    background-size:100%;
    height:18vw;
    width: 13vw;
    bottom:var(--tanaman-bottom);
    right:10vw;
    animation: bunga 2s linear infinite reverse;
}

@keyframes bunga {
    25% {
        transform:rotate(5deg);
        bottom:calc(var(--tanaman-bottom) - .5vh);
    }
    50% {
        transform:rotate(0deg);
        bottom:var(--tanaman-bottom);
    }
    75% {
        transform:rotate(-5deg);
        bottom:calc(var(--tanaman-bottom) - .5vh);
    }
    100% {
        transform:rotate(0deg);
        bottom:var(--tanaman-bottom);
    }
}

.easter-mobil {
    background-image:url('mobil.png');
    background-size:100%;
    height:25vw;
    width:25vw;
    bottom: 2vw;
    left:32vw;
    animation: mobil .5s infinite;
}

.easter-mobil::before {
    content:"";
    position:absolute;
    background-image:url('tangan.png');
    background-size:100%;
    background-repeat:no-repeat;
    height:1.7vw;
    width:4vw;
    left: 10.5vw;
    top: 7.2vw;
    --wave-degree: 45deg;
    --wave-y:-1vw;
    --wave-x:.01vw;
    animation:tangan 1s linear infinite;
}

@keyframes tangan {
    0% {
        transform:rotate(0deg);
    }
    50% {
        transform:rotate(var(--wave-degree)) translateY(var(--wave-y)) translateX(var(--wave-x));
    }
    100% {
        transform:rotate(0deg);
    }
}

.easter-mobil::after {
    content:"";
    position:absolute;
    background-image:url('telinga-kiri.png'), url('telinga-kanan.png');
    background-size:auto 100%;
    background-position:left, right;
    background-repeat:no-repeat;
    height:4vw;
    width:4vw;
    left: 13vw;
    top: -1.7vw;
    animation: telinga1 1s linear infinite;
}

@keyframes telinga1 {
    50% {
        width:4.25vw;
        transform:translateX(-.05vw);
    }
}

.easter-mobil-kanan {
    background-image:url('mobil2.png');
    background-repeat:no-repeat;
    background-size:100%;
    height:15vw;
    width:15vw;
    bottom: 5vw;
    right:10vw;
    animation: mobil .4s linear infinite;
}

.easter-mobil-kanan::before {
    content:"";
    position:absolute;
    background-image:url('tangan2.png');
    background-size:100%;
    background-repeat:no-repeat;
    height:.8vw;
    width:2vw;
    left: 5.4vw;
    top: 5.8vw;
    --wave-degree: -45deg;
    --wave-y:-.6vw;
    --wave-x:.1vw;
    animation:tangan 1s linear infinite;
}

.easter-mobil-kanan::after {
    content:"";
    position:absolute;
    background-image:url('telinga2-kanan.png'), url('telinga2-kiri.png');
    background-size:auto 70%;
    background-position:bottom right, top left;
    background-repeat:no-repeat;
    height:1.6vw;
    width:3vw;
    left: 5vw;
    top: 2vw;
    animation: telinga2 1s linear infinite;
}

@keyframes telinga2 {
    50% {
        transform:rotate(10deg) translateY(.2vw);
    }
}

@keyframes mobil {
    0% {
        margin-bottom:0px;
    }
    50% {
        margin-bottom:3px;
    }
    0% {
        margin-bottom:0px;
    }
}

.easter-roda {
    height:2vw;
    width:18vw;
    bottom: 10vw;
    background:rgba(0,0,0,0.2);
    border-radius:99990px;
    left: 37.5vw;
    bottom: 6vw;
    animation: mobil .47s linear infinite;
}

.easter-roda::after,
.easter-roda::before {
    content:"";
    position:absolute;
    background-image:url('roda.png');
    background-repeat:no-repeat;
    background-size:100%;
    height:5.5vw;
    width:5.5vw;
    bottom: 0vw;
    left: 1vw;
    --rotation-from:0deg;
    --rotation-to:360deg;
    animation: muter 2s linear infinite;
}

.easter-roda::before {
    left:auto;
    right: 1vw;
}

.easter-roda-kanan {
    left:auto;
    bottom:7.2vw;
    right:11.5vw;
    height:1vw;
    width:12vw;
    animation: mobil .38s linear infinite;
}

.easter-roda-kanan::after,
.easter-roda-kanan::before {
    height:3vw;
    width:3vw;
    left:-.1vw;
    --rotation-from:0deg;
    --rotation-to:-360deg;
    animation: muter 1.5s linear infinite;
}

.easter-roda-kanan::before {
    left:auto;
    right: 1vw;
}

.easter-glowing {
    background-image:url('glowing.png');
    background-size:100%;
    height:11vw;
    width:11vw;
    bottom: 17vw;
    left:31vw;
    animation: mobil .55s infinite,  glowing 2s infinite;
}

.easter-glowing-kanan {
    background-image:url('glowing2.png');
    background-size:100%;
    height:8vw;
    width:8vw;
    bottom: 13.6vw;
    right:8.5vw;
    animation: mobil .45s infinite,  glowing 2s .1s infinite;
}

@keyframes glowing {
    0% {
        opacity:1;
    }

    50% {
        opacity:0;
    }

    100% {
        opacity:1;
    }
}

body {
    position:relative;
}

:root {
    --egg-height:50px;
    --egg-width:40px;
    --egg-hidden-scale: .3;
    --egg-rotate:0deg;
    --egg-rotate-default:0deg;
    --egg-catch-scale: 2;
}

.easter-telur-rahasia {
    position:absolute;
    transition: all .5s;
    cursor:grab;
    display:inline-block;
    height:calc(var(--egg-height) + 8px);
    width:calc(var(--egg-width) + 8px);
    overflow:hidden;
    display:flex;
    animation-duration: 2s;
}


.easter-telur-rahasia:not(.easter-telur-rahasia-catch):hover {
    height:calc(var(--egg-height) + 8px);
    width:calc(var(--egg-width) + 8px);
    cursor:grab;
}

.easter-telur-rahasia-image {
    background-image: url('telur1.png');
    background-size: auto 100%;
    background-repeat:no-repeat;
    background-position:center;
    transform:rotate(calc(var(--egg-rotate-default) + var(--egg-rotate)));
    transition: all .5s;
    height:var(--egg-height);
    width:var(--egg-width);
}

.easter-telur-rahasia-image-2 {
    background-image: url('telur2.png');
}
.easter-telur-rahasia-image-3 {
    background-image: url('telur3.png');
}
.easter-telur-rahasia-image-4 {
    background-image: url('telur4.png');
}
.easter-telur-rahasia-image-5 {
    background-image: url('telur5.png');
}
.easter-telur-rahasia-image-6 {
    background-image: url('telur6.png');
}
.easter-telur-rahasia-image-7 {
    background-image: url('telur7.png');
}
.easter-telur-rahasia-image-8 {
    background-image: url('telur8.png');
}
.easter-telur-rahasia-image-8 {
    background-image: url('telur9.png');
}

.easter-telur-rahasia-left {
    left:0px;
    width:calc(var(--egg-width) * var(--egg-hidden-scale));
    --egg-rotate-default:30deg;
    justify-content:right;
    animation-name: telur-keluar-x;
    bottom: var(--egg-position);
}

.easter-telur-rahasia-right {
    right:0px;
    width:calc(var(--egg-width) * (var(--egg-hidden-scale) + 0.2));
    --egg-rotate-default:-30deg;
    justify-content:left;
    animation-name: telur-keluar-x;
    bottom: var(--egg-position);
}


.easter-telur-rahasia-bottom {
    bottom:0px;
    height:calc(var(--egg-height) * var(--egg-hidden-scale));
    animation-name: telur-keluar-y;
    left: var(--egg-position);
}

.easter-telur-rahasia-top {
    --egg-rotate-default:180deg;
    top:0px;
    height:calc(var(--egg-height) * var(--egg-hidden-scale));
    align-items:end;
    animation-name: telur-keluar-y;
    left: var(--egg-position);
}


@keyframes telur-keluar-y {
    from {
        height:0px;
    }
}

@keyframes telur-keluar-x {
    from {
        width:0px;
    }
}

.easter-telur-rahasia-catch {
    position:fixed;
    --egg-container-height: calc(var(--egg-height) * var(--egg-catch-scale));
    --egg-container-width: calc(var(--egg-width) * var(--egg-catch-scale));
    height:auto;
    width:auto;
    transition: all 0.1;
    z-index: 99998;
}

.easter-telur-rahasia-top.easter-telur-rahasia-catch {
    top: 50%;
    left: 50%;
    margin-top: calc(0px - (var(--egg-container-height) / 2));
    margin-left: calc(0px - (var(--egg-container-width) / 2));
}

.easter-telur-rahasia-bottom.easter-telur-rahasia-catch {
    bottom: 50%;
    left: 50%;
    margin-bottom: calc(0px - (var(--egg-container-height) / 2));
    margin-left: calc(0px - (var(--egg-container-width) / 2));
}

.easter-telur-rahasia-left.easter-telur-rahasia-catch {
    bottom: 50%;
    left: 50%;
    margin-bottom: calc(0px - (var(--egg-container-height) / 2));
    margin-left: calc(0px - (var(--egg-container-width) / 2));
}

.easter-telur-rahasia-right.easter-telur-rahasia-catch {
    bottom: 50%;
    right: 50%;
    margin-bottom: calc(0px - (var(--egg-container-height) / 2));
    margin-right: calc(0px - (var(--egg-container-width) / 2));
}

.easter-telur-rahasia-put {
    transform: translateY(1000%);
}

.easter-telur-rahasia-catch .easter-telur-rahasia-image {
    transform:rotate(0deg);
    height: calc(var(--egg-height) * var(--egg-catch-scale));
    width: calc(var(--egg-width) * var(--egg-catch-scale));
}

.easter-keranjang {
    position:fixed;
    left:50%;
    bottom:-500px;
    transform: translateX(-50%);
    background-image:url('keranjang.png');
    background-repeat: no-repeat;
    background-position:bottom center;
    background-size: 100% auto;
    height: 300px;
    width: 300px;
    margin-left:-40px;
    z-index: 99999;
    transition: all 1s;
}

.easter-keranjang-show {
    bottom:-10px;
}

.easter-judul {
    position:absolute;
    right:0;
    top:0;
    text-transform:uppercase;
    font-family: Grisly Beast;
    font-size:3vw;
    text-align:center;
    margin:1.5vw 2vw;
    color:white;
}

.easter-judul-bubble {
    top: auto;
    bottom: 20px;
    right:20px;
    width: 170px;
    margin:0;
    font-size:3em;
}

#loading .spinner-grow {
    background-size:100%;
    background-color:transparent;
    background-repeat:no-repeat;
    background-position: center;
    animation: tilting 5s infinite;
    position:relative;
    opacity:1;
    height:80px !important;
    width:50px !important;
    border-radius:0;
}

@keyframes tilting {
    0% {
        transform: rotate(-7deg) translateX(-5px);
        background-image:url('telur1.png');
    }
    11.1% {
        transform: rotate(7deg) translateX(5px);
        background-image:url('telur2.png');
    }
    25% {
        transform: rotate(-7deg) translateX(-5px);
        background-image:url('telur3.png');
    }
    37.5% {
        transform: rotate(7deg) translateX(5px);
        background-image:url('telur4.png');
    }
    50% {
        transform: rotate(-7deg) translateX(-5px);
        background-image:url('telur5.png');
    }
    62.5% {
        transform: rotate(7deg) translateX(5px);
        background-image:url('telur6.png');
    }
    75% {
        transform: rotate(-7deg) translateX(-5px);
        background-image:url('telur7.png');
    }
    87.5% {
        transform: rotate(7deg) translateX(5px);
        background-image:url('telur8.png');
    }
    100% {
        transform: rotate(-7deg) translateX(-5px);
        background-image:url('telur1.png');
    }
}