@import url(https://fonts.googleapis.com/css?family=Poiret+One|Lobster|Anton|Shadows+Into+Light|Open+Sans|Roboto|Orbitron|Oswald|Raleway|Montserrat|Roboto+Slab|Indie+Flower|Fjalla+One|Bree+Serif|Pacifico|Abril+Fatface);
body {
    background: #e8ebf3;
    font: 400 16px 'Poppins', sans-serif;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.poiret{font-family:Poiret One;}
.lobster{font-family:lobster;}
.anton{font-family:Anton;}
.Shadows{font-family:'Shadows Into Light';}
.open{font-family:open sans;}
.roboto{font-family:roboto;}
.slabo{font-family:"Orbitron";}
.oswald{font-family:Oswald;}
.raleway{font-family:raleway;}
.Montserrat{font-family:Montserrat;}
.roboto2{font-family:roboto slab;}
.indie{font-family:indie flower;}
.fjalla{font-family:fjalla one;}
.bree{font-family:bree serif;}
.pacifico{font-family:pacifico;}
.abril{font-family:'Abril Fatface';font-size:16px;}

.text-number {
    font-size:80px;
    margin-bottom:0;
    overflow:auto;
    margin-top:0;
    height:140px;
}

.text-animate {
    font-size:42px;
    margin-bottom:0;
    overflow:auto;
}

.button-one {
    background: #2599f1;
    color: white;
    font-weight: 600;
    box-shadow: 3px 5px 2px #8dccfc;
}

.button-one:hover{
    color: #1b95f3;
    background: #8dccfc;
    border: solid 1px #319ded;
}

.button-two, .button-four {
    background: #1ea89e;
    color: white;
    font-weight: 600;
    box-shadow: 3px 5px 2px #a5d0cd;
}

.button-two:hover{
    color: #1ea89e;
    background: #a5d0cd;
    border: solid 1px #1ea89e;
}

.button-three {
    background: #da4f42;
    color: white;
    font-weight: 600;
    box-shadow: 3px 5px 2px #eaaea9;
}

.button-three:hover{
    color: #da4f42;
    background: #eaaea9;
    border: solid 1px #da4f42;
}

.button-four:hover{
    color: white;
    background: #a5d0cd;
}

.button-five {
    background: #b9b9b9;
    color: white;
    font-weight: 500;
    border-radius: 50px;
}

.button-five:hover{
    color: #b9b9b9;
    background: #ffffff;
}

.button-disable {
    background: #b9b9b9;
    color: white;
    font-weight: 500;
    border: 2px solid #a3a3a3 !important;
    border-radius: 50px;
}

.button-disable:hover{
    color: #b9b9b9;
    background: #ffffff;
    border: none !important;
}

.button-one:active, .button-one:focus, .button-two:active, .button-two:focus, .button-three:active, .button-three:focus, .button-four:active, .button-four:focus , .button-five:active, .button-five:focus, .button-disable:active, .button-disable:focus {
    outline: none !important;
    border: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

@media (max-width: 600px) { /* Mengatur untuk tampilan mobile */
    .button-container {
        display: flex; /* Menggunakan flexbox */
        flex-direction: column; /* Menyusun tombol secara vertikal */
        align-items: center; /* Pusatkan tombol jika diinginkan */
    }

    .btn {
        margin: 5px 0; /* Tambahkan margin atas dan bawah agar tombol tidak terlalu rapat */
        width: 100%;
    }
}

.timer {
    font-size: 9vw;
    font-weight: bold;
    color: #212529;
    text-shadow: 2px 2px 0px rgb(184 190 208);
}

/* Media queries untuk memastikan font terlihat ideal di perangkat kecil */
@media (max-width: 600px) {
    .timer {
        font-size: 17vw; /* Font akan lebih besar di layar kecil */
    }
}