/*1. bg.css*/
/* Reset CSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    height: 100%;
    font-family: Arial, sans-serif;
    background: #ff0000; 
    display: flex;
    justify-content: center;
    align-items: center;
    color: white; 
}

/* Gaya untuk kontainer utama */
#container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Gaya untuk lingkaran */
.circle {
    position: absolute;
    top: 25%; 
    left: 30%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    opacity: 0.8;
    animation: grow-shrink 3s infinite alternate;
}

.circle1 {
    background: #ff0000;
    width: 250px;
    height: 250px;
    z-index: 5;
}

.circle2 {
    background: #ef0000;
    width: 450px;
    height: 450px;
    z-index: 4;
}

.circle3 {
    background: #ff0000;
    width: 650px;
    height: 650px;
    z-index: 3;
}

.circle4 {
    background: #ef0000;
    width: 850px;
    height: 850px;
    z-index: 2;
}

.circle5 {
    background: #ff0000;
    width: 1090px;
    height: 1090px;
    z-index: 1;
}

.circle6 {
    background: #ef0000;
    width: 1610px;
    height: 1610px;
    z-index: 0;
}

/* Animasi lingkaran membesar */
@keyframes grow-shrink {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        transform: translate(-50%, -50%) scale(1.5);
    }
}

/* Gaya untuk gambar bergoyang */
.shake-img {
    position: absolute;
    top: 28%; 
    left: 50%;
    transform: translate(-50%, -50%);
    animation: shake 3s infinite;
    z-index: 5;
}

@keyframes shake {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    50% { transform: translate(-50%, -50%) rotate(5deg); }
    100% { transform: translate(-50%, -50%) rotate(0deg); }
}

/* Gaya untuk gambar petir */
.lightning-img {
    position: absolute;
    top: 50%; 
    left: 0%;
    transform: translateY(-50%);
    z-index: 6; 
    animation: shake-lightning 2s infinite; 
}

.lightning-img1 {
    position: absolute;
    top: 40%; 
    left: 90%;
    transform: translateY(-50%);
    z-index: 7;
    animation: shake-lightning 3s infinite; 
}

.lightning-img2 {
    position: absolute;
    top: 10%; 
    left: 5%;
    transform: translateY(-50%);
    z-index: 8; 
    animation: shake-lightning 3s infinite; 
}

@keyframes shake-lightning {
    0% { transform: translateY(-50%) translateX(0); }
    50% { transform: translateY(-50%) translateX(10px); }
    100% { transform: translateY(-50%) translateX(0); }
}

.teriak {
    position: absolute;
    top: 6%;
    left: 20%;
    transform: translateY(-50%);
    z-index: 9; 
}

.challenges {
    position: absolute;
    top: 55%; 
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10; 
}

.botol {
    position: absolute;
    top: 61%; 
    left: 90%;
    transform: translate(-50%, -50%);
    z-index: 13; 
}

.hadiah {
    position: absolute;
    width: 80%;
    height: auto;
    top: 86%; 
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 12;    
}

/* Gaya untuk tombol */ 
.toggle-button { 
    position: absolute; 
    top: 70%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    background: none; 
    border: none; 
    cursor: pointer; 
    z-index: 11; 
} 
    
.toggle-button img { 
    width: 100%; /* Atur ukuran sesuai kebutuhan */ 
    height: auto; 
    transition: transform 0.3s ease; /* Animasi transisi saat hover */ 
} 
.toggle-button:hover img { 
    transform: scale(1.5); /* Membesarkan gambar 10% saat hover */ }

.face {
    position: absolute;
    top: 10%; 
    left: 80%;
    transform: translateY(-50%);
    z-index: 30; 
    animation: shake-lightning 3s infinite; 
}

.baju {
    position: absolute;
    top: 75%; 
    left: 1%;
    transform: translateY(-50%);
    z-index: 30; 
    animation: shake-lightning 3s infinite; 
}