@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%;
    }
}

.calculator {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    width: 300px;
}
.display {
    width: 100%;
    height: 50px;
    font-size: 1.5em;
    margin-bottom: 20px;
    text-align: right;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}
.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
button {
    padding: 15px;
    font-size: 1.2em;
    border: none;
    border-radius: 5px;
    /* background-color: #4caf50; */
    cursor: pointer;
}
/* button:hover {
    background-color: #45a049;
} */

#resultPreview {
    margin-top: 20px;
    text-align: center;
}

#convertBtn i {
    vertical-align: middle;
}