*,html,body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    display: flex;
    justify-content: center;
    background-image: radial-gradient(circle, white, greenyellow);
    flex-direction: column; 
    align-items: center;
    padding: 0 1rem;
    padding-bottom: 1rem;
    position: relative;
}

/* Welcome start */
.welcome { /*wah ternyata gini biar gada bolong bolong lagi, fullscreen coeg */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999999;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.57), rgb(0, 0, 0));
    flex-direction: column;
}

.welcome .container-wc {
    position: relative;
    flex-direction: column;
    align-items: center;
    background: rgb(0, 0, 0);
    padding: 1rem;
    border-radius: 1rem;
    top: -10%;
    transform: scale(0.1);
    opacity: 0;
    justify-content: center;
}

.welcome .container-wc .img-wc {
    width: 10rem;
    border-radius: 50%;
    background-color: rgb(0, 0, 0);
    position: absolute;
    top: -20%;
    left: -2rem;
}

.welcome .container-wc .text-wc {
    text-align: center;
    padding-left: 7rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

#start {
    position: absolute;
    cursor: pointer;
    top: 120%;
    left: 43%;
    text-align: center;
    border-radius: 1.3rem;
    font-weight: bold;
    background-color: rgba(26, 26, 26, 0.579);
    border: none;
    padding: 1rem;
    transform: scale(.1);
    color: white;
}
/* Welcome end */

/* gapp satrt */
.gapp::after {
    content: '';
    display: block;
    width: 25rem;
    left: 1rem;
    right: 1rem;
    height: .2rem;
    background-image: radial-gradient(circle, red, blue);
    z-index: 1;
    position: absolute;
    bottom: 37rem;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 2rem;
}

.limit {
    position: relative;
    z-index: 1;
}

.limit .circle {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-image: radial-gradient(circle, blue, red);
    position: absolute;
    left: -12.95rem;
    top: -.07rem;
    z-index: 9999999999999;
}

.limit .circle1 {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-image: radial-gradient(circle, blue, red);
    position: absolute;
    right: -12.95rem;
    top: -.07rem;
    z-index: 9999999999999;
}

/* gapp end */


/* Badge start */
.badge {
    background-color: white;    
    margin-top: 1.3rem;
    padding: .5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
    border: .2rem solid black;
    transition: .3s;
}

.badge:hover {
    box-shadow: .2rem .2rem .2rem black;
    transition: .3s;
}

.badge h1 {
    font-size: 1rem;
    color: white;
    text-shadow: 
            -.1rem -.1rem .1rem #000,  
            .1rem -.1rem .1rem #000,  
           -.1rem .1rem .1rem #000,  
           .1rem .1rem .1rem #000;
    margin-bottom: .5rem;
}

.badge .content-bd {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-shadow: 
    -.07rem -.07rem .07rem #000,  
    .07rem -.07rem .07rem #000,  
   -.07rem .07rem .07rem #000,  
   .07rem .07rem .07rem #000;
   gap: .3rem;
}

.badge .content-bd .w-bd {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .7rem;
}

.badge .content-bd .w-bd img {
    width: 1.5rem;
    border-radius: 50%;
    box-shadow: 0rem 0rem 0rem .15rem black;
}
/* Badge end*/

/* typed text start */
/* Animasi garis berkedip */
@keyframes blink {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

/* Gaya untuk elemen teks yang diketik */
.typed-text-container {
    position: relative;
}

/* Gaya untuk garis berkedip */
.blinking-cursor {
    position: absolute;
    bottom: -3px;
    right: -2px; /* Sesuaikan posisi agar berada di sebelah kanan huruf terakhir */
    height: 1rem;
    width: 2px;
    background-color: orange;
    animation: blink 1s step-end infinite;
}

/* Gaya untuk teks yang diketik */
.typed-text {
    display: inline-block;
    vertical-align: top;
}
/* typed text end */

.music {
    position: fixed;
    z-index: 200;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin: 1rem;
    right: 0rem;
    top: 85%;
}

.music img:hover {
    transform: scale(1.1);
    transition: .3s;
}

.music img {
    transition: .3s;
    width: 5rem;
    padding: 1.5rem;
    border-radius: 50%;
    background-color: black;
    border: .3rem solid white;
}

.rotating {
    animation: rotate 4s linear infinite;
}



@keyframes rotate {
    from {
        transform: rotate(0deg); /* Memulai rotasi dari 0 derajat */
    }
    to {
        transform: rotate(360deg); /* Mengakhiri rotasi di 360 derajat */
    }
}

.title {
    text-align: center;
    font-size: 1.5rem;
    padding-bottom: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.title img {
    width: 30rem;
    padding: 2rem 0;
    padding-bottom: 1rem;
}

.title h1 {
    font-weight: 400;
    font-size: 1rem;
    border: .2rem solid white;
    background-color: antiquewhite;
    padding: .2rem;
    border-radius: 1rem;
    
}

.title h1 span {
    color: orange;
    font-weight: 700;
}

.container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.game {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
    gap: 1rem;
    border: .2rem solid white;
    border-radius: 1.2rem;
    transition: all .3s;
    color: #ffa500;
    text-decoration: none;
    -webkit-border-radius: 1.2rem;
    -moz-border-radius: 1.2rem;
    -ms-border-radius: 1.2rem;
    -o-border-radius: 1.2rem;
    position: relative;
}

.game:hover {   
    box-shadow: .2rem .2rem .2rem white;
    transition: .3s;
    transform: scale(1.05);
    border: .201rem solid yellow;
}

.game img {
    border-radius: 1rem;
    width: 23rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
}

.game-c {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}

.game .latest,
.game .latest1 {
    position: absolute;
    transform: rotate(-38deg);
    -webkit-transform: rotate(-38deg);
    -moz-transform: rotate(-38deg);
    -ms-transform: rotate(-38deg);
    -o-transform: rotate(-38deg);
    top: 12%;
    left: -5%;
    width: 6.1rem;
}

.game .latest1 {
    width: 6.1rem;
    left: -5%;
    transform: rotate(-38deg);
    top: 12%;
}

.latest h1,
.latest1 h1 {
    border-radius: 10rem 10rem 0 0;
    background-color: black;
    border: .1rem solid orange;
    text-align: center;
    font-size: 0.5rem;
    -webkit-border-radius: 10rem 10rem 0 0;
    -moz-border-radius: 10rem 10rem 0 0;
    -ms-border-radius: 10rem 10rem 0 0;
    -o-border-radius: 10rem 10rem 0 0;
}

.latest1 h1 {
    background-color: orange;
    color: black;
    border: .1rem solid black;
    font-weight: bold;
}

small a {
    background-color: orange;
    text-decoration: none;
    border: .1rem solid black;
    padding: .1rem;
    border-radius: .5rem;
    color: black;
    font-size: .5rem;
    transition: all .3s;
}

small a:hover {
    box-shadow: .1rem .1rem .1rem white;
    transition: all .3s;
}

a {
    text-decoration: none;
}


.back {
    margin-top: 1.3rem;
    background-color: bisque;
    border: .2rem solid white;
    box-shadow: .2rem .2rem .2rem black;
    color: black;
    padding: .3rem;
    border-radius: .6rem;
    transition: all .3s;
}

.back:hover {
    transform: scale(1.03);
    transition: all .3s;
    box-shadow: .25rem .25rem .25rem white;
}

.back span {
    color: orange;
    text-shadow: 1px 1px 1px black;
}

footer {
    margin-top: 1rem;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-shadow: 
    -.1rem -.1rem .1rem #000,  
    .1rem -.1rem .1rem #000,  
   -.1rem .1rem .1rem #000,  
   .1rem .1rem .1rem #000;
}

footer .social a {
    color: black;
    text-decoration: none;
}

@keyframes bounce {
    0% { transform: scale(1); } /* Ukuran semula */
    50% { transform: scale(0.9); -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); } /* Ukuran lebih besar */
    100% { transform: scale(1); } /* Kembali ke ukuran semula */
}

.game-c:active, .music:active {
    animation: bounce 0.9s ease;
    -webkit-animation: bounce 0.1s ease;
}

/* Modal start */
/* GFORM */
.gform {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 222;
    top: 50%;
    left: 50%;
    background-color: rgba(0, 0, 0, 0.786);
    transform: translate(-50%, -50%);
    display: none;
    z-index: 222;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.wrap-gf {
    position: relative;
    left: 50%;
    opacity: 0;
    transition: 1s;
    transform: scale(.1);
}

.wrap-gf.active {
    transform: scale(1);
    position: relative;
    left: 50%;
    opacity: 1;
    transition: 1s;
}

iframe,
.gform img {
    width: 25rem;
    height: 35rem;
    position: absolute;
    z-index: 222;
    left: 50%;
    top: 55%;
    transform: translate(-50%, -50%);
    display: flex;
    z-index: 222;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    background-color: #31a0f5;
    border-radius: 2rem;
    border: .2rem solid black;
}


.gform .wrap-gf iframe {
    height: 25rem;
    top: 24.5rem;
    width: 30rem;
    position: absolute;
    transform: translate(-50%, -50%);
    
}

.gform .wrap-gf img {
    margin-top: 2rem;
    z-index: 233;
    width: 30rem;
    height: 12rem;
    border-radius: 2rem 2rem 0 0;
    border-bottom: none;
    position: absolute;
    left: -50%; /* Ubah nilai left menjadi negatif */
    top: 6rem;
    transform: translate(-50%, -50%);
}

.exit {
    display: flex;
    position: absolute;
    top: 2.7rem;
    left: 11.5rem;
    cursor: pointer;
    z-index: 2000;
    background-color: aliceblue;
    border-radius: 50%;
    padding: .5rem;
    border: .2rem solid black;
    transition: .3s;
}

.exit:hover {
    transition: .3s;
    box-shadow: 0 0 .1rem .1rem rgb(255, 0, 0);
}
/* Modal end */

.more {
    transition: .3s;
    border: .35rem solid white;
}

.more:hover {
    box-shadow: .3rem .3rem .3rem white;
    transition: .3s;
    border: .35rem solid yellow;
} 










/* ipad */
@media (max-width: 768px) {
    .game img {
        width: 22rem;
    }
}

@media (max-width: 550px) {
    /* Welcome start */
    .welcome { /*wah ternyata gini biar gada bolong bolong lagi, fullscreen coeg */
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 99999999;
        font-size: .6rem;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .welcome .container-wc {
        position: relative;
        flex-direction: column;
        align-items: center;
        background: rgb(0, 0, 0);
        padding: 1rem;
        border-radius: 1rem;
        top: -10%;
        transform: scale(0.1);
        opacity: 0;
    }

    .welcome .container-wc .img-wc {
        width: 8rem;
        border-radius: 50%;
        background-color: rgb(0, 0, 0);
        position: absolute;
        top: -25%;
        left: -1rem;
    }

    .welcome .container-wc .text-wc {
        text-align: center;
        padding-left: 6rem;
        padding-top: .4rem;
        padding-bottom: .4rem;
    }

    #start {
        position: absolute;
        cursor: pointer;
        top: 130%;
        left: 43%;
        text-align: center;
        border-radius: 1.3rem;
        font-weight: bold;
        background-color: rgba(26, 26, 26, 0.579);
        border: none;
        padding: 1rem;
        font-size: .7rem;
    }

    .gapp::after {
        width: 20rem;
        bottom: 38rem;
    }

    .limit {
        position: relative;
        z-index: 1;
    }
    
    .limit .circle {
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        background-image: radial-gradient(circle, blue, red);
        position: absolute;
        left: -10.8rem;
        top: -1.05rem;
        z-index: 9999999999999;
    }
    
    .limit .circle1 {
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        background-image: radial-gradient(circle, blue, red);
        position: absolute;
        right: -10.8rem;
        top: -1.05rem;
        z-index: 9999999999999;
    }
}


/* Mobile */
@media (max-width: 450px) {
    .title img {
        width: 20rem;
    }
    .game img {
        width: 21rem;
    }
    small a {
        background-color: orange;
        text-decoration: none;
        border: .1rem solid black;
        padding: .1rem;
        border-radius: .5rem;
        color: white;
        font-size: .4rem;
        -webkit-border-radius: .5rem;
        -moz-border-radius: .5rem;
        -ms-border-radius: .5rem;
        -o-border-radius: .5rem;
    }

    .gform .wrap-gf iframe {
        height: 27rem;
        top: 24rem;
        width: 22rem;
        position: absolute;
        transform: translate(-50%, -50%);
        
    }
    
    .gform .wrap-gf img {
        margin-top: 2rem;
        top: 20%;
        z-index: 233;
        width: 22rem;
        height: 8.8rem;
        border-radius: 2rem 2rem 0 0;
        border-bottom: none;
        position: absolute;
        left: -50%; /* Ubah nilai left menjadi negatif */
        top: 6rem;
        transform: translate(-50%, -50%);
    }

    .exit {
        position: absolute;
        top: 4.3rem;
        left: 7.8rem;
        cursor: pointer;
        width: 2.5rem;
        height: 2.5rem;
        align-items: center;
        justify-content: center;
        z-index: 2000;
        background-color: aliceblue;
        border-radius: 50%;
        padding: .5rem;
        border: .2rem solid black;
    }
}

@media (max-width: 400px) {
    .gapp::after {
        width: 20rem;
        bottom: 39.05rem;
    }
}

/* Kecil bat cog */
@media (max-width: 361px) {
    .title img {
        width: 18rem;
    }
    .game img {
        width: 18rem;
    }

    .gform .wrap-gf iframe {
        height: 18rem;
        top: 18rem;
        width: 19rem;
        position: absolute;
        transform: translate(-50%, -50%);
        
    }
    
    .gform .wrap-gf img {
        margin-top: 1rem;
        top: 20%;
        z-index: 233;
        width: 19rem;
        height: 7.6rem;
        border-radius: 2rem 2rem 0 0;
        border-bottom: none;
        position: absolute;
        left: -50%; /* Ubah nilai left menjadi negatif */
        top: 6rem;
        transform: translate(-50%, -50%);
    }

    .exit {
        position: absolute;
        top: 4rem;
        left: 6.6rem;
        width: 2rem;
        height: 2rem;
        cursor: pointer;
        z-index: 2000;
        background-color: aliceblue;
        border-radius: 50%;
        padding: .5rem;
        border: .2rem solid black;
    }

     /* Welcome start */
     .welcome { /*wah ternyata gini biar gada bolong bolong lagi, fullscreen coeg */
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 99999999;
        font-size: .6rem;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .welcome .container-wc {
        position: relative;
        flex-direction: column;
        align-items: center;
        background: rgb(0, 0, 0);
        padding: 1rem;
        border-radius: 1rem;
        top: -10%;
        transform: scale(0.1);
        opacity: 0;
    }

    .welcome .container-wc .img-wc {
        width: 7rem;
        border-radius: 50%;
        background-color: rgb(0, 0, 0);
        position: absolute;
        top: -25%;
        left: -1rem;
    }

    .welcome .container-wc .text-wc {
        text-align: center;
        padding-left: 5rem;
        padding-top: .2rem;
        padding-bottom: .2rem;
    }

    #start {
        position: absolute;
        cursor: pointer;
        top: 130%;
        left: 43%;
        text-align: center;
        border-radius: 1.3rem;
        font-weight: bold;
        background-color: rgba(26, 26, 26, 0.579);
        border: none;
        padding: 1rem;
        font-size: .7rem;
    }
}

@media (max-width: 330px) {
    .welcome .container-wc .img-wc {
        width: 6rem;
        border-radius: 50%;
        background-color: rgb(0, 0, 0);
        position: absolute;
        top: -15%;
        left: -1rem;
    }

    .welcome .container-wc .text-wc {
        text-align: center;
        padding-left: 4rem;
        padding-top: .2rem;
        padding-bottom: .2rem;
    }
}