@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"); /* Mengimpor font Poppins dari Google Fonts */

/* Selector universal untuk semua elemen */
*{ 
    margin: 0; /* Menghapus margin default */
    padding: 0; /* Menghapus padding default */
    box-sizing: border-box; /* Mengatur box model termasuk padding dan border */
    font-family: "Poppins", sans-serif; /* Menggunakan font Poppins sebagai default */
}

body{ /* Styling untuk elemen body */
    display: flex; /* Mengatur layout flexbox */
    padding: 0 10px; /* Memberikan padding horizontal */
    align-items: center; /* Menyelaraskan konten secara vertikal */
    justify-content: center; /* Menyelaraskan konten secara horizontal */
    min-height: 100vh; /* Mengatur tinggi minimum layar penuh */
    background: #5372F0; /* Warna latar belakang biru */
}

.container{ /* Elemen kontainer utama */
    width: 440px; /* Lebar kontainer */
    border-radius: 7px; /* Membuat sudut tumpul */
    background: #fff; /* Warna latar putih */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); /* Efek bayangan halus */
}

.container h2{ /* Styling untuk judul */
    font-size: 25px; /* Ukuran font */
    font-weight: 500; /* Ketebalan font */
    padding: 16px 25px; /* Ruang dalam judul */
    border-bottom: 1px solid #ccc; /* Garis bawah pemisah */
}

.container .content{ /* Konten utama dalam kontainer */
    margin: 25px 20px 35px; /* Memberi jarak di sekeliling konten */
}

.content .word{ /* Tempat menampilkan kata acak */
    user-select: none; /* Mencegah teks diseleksi */
    font-size: 33px; /* Ukuran huruf besar */
    font-weight: 500; /* Ketebalan huruf */
    text-align: center; /* Teks di tengah */
    letter-spacing: 24px; /* Jarak antar huruf */
    margin-right: -24px; /* Koreksi jarak karena letter spacing */
    word-break: break-all; /* Memecah kata jika terlalu panjang */
    text-transform: uppercase; /* Mengubah huruf menjadi kapital */
}

.content .details{ /* Bagian petunjuk dan waktu */
    margin: 25px 0 20px; /* Jarak atas dan bawah */
}

.details p{ /* Styling paragraf di detail */
    font-size: 18px; /* Ukuran teks */
    margin-bottom: 10px; /* Jarak bawah */
}

.details p b{ /* Styling bold di dalam paragraf */
    font-weight: 500; /* Ketebalan sedang */
}

.content input{ /* Elemen input jawaban */
    width: 100%; /* Lebar penuh */
    height: 60px; /* Tinggi input */
    outline: none; /* Menghilangkan outline default */
    padding: 0 16px; /* Ruang di dalam input */
    font-size: 18px; /* Ukuran teks */
    border-radius: 5px; /* Sudut tumpul */
    border: 1px solid #bfbfbf; /* Warna border abu */
}

.content input:focus{ /* Ketika input aktif */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08); /* Bayangan halus */
}

.content input::placeholder{ /* Placeholder input */
    color: #aaa; /* Warna placeholder */
}

.content input:focus::placeholder{ /* Placeholder saat fokus */
    color: #bfbfbf; /* Warna placeholder lebih gelap */
}

.content .buttons{ /* Pembungkus tombol */
    display: flex; /* Mengatur tombol berdampingan */
    margin-top: 20px; /* Jarak atas */
    justify-content: space-between; /* Memberi jarak antar tombol */
}

.buttons button{ /* Styling semua tombol */
    border: none; /* Menghapus border default */
    outline: none; /* Menghapus outline */
    color: #fff; /* Warna teks putih */
    cursor: pointer; /* Menampilkan pointer saat hover */
    padding: 15px 0; /* Tinggi tombol */
    font-size: 17px; /* Ukuran teks */
    border-radius: 5px; /* Sudut tumpul */
    width: calc(100% / 2 - 8px); /* Ukuran setengah dikurangi jarak */
    transition: all 0.3s ease; /* Transisi halus */
}

.buttons button:active{ /* Saat tombol ditekan */
    transform: scale(0.97); /* Efek mengecil sedikit */
}

.buttons .refresh-word{ /* Tombol refresh */
    background: #6C757D; /* Warna abu gelap */
}

.buttons .refresh-word:hover{ /* Hover tombol refresh */
    background: #5f666d; /* Warna sedikit lebih gelap */
}

.buttons .check-word{ /* Tombol cek jawaban */
    background: #5372F0; /* Warna biru */
}

.buttons .check-word:hover{ /* Hover tombol cek */
    background: #2c52ed; /* Biru lebih tua */
}

@media screen and (max-width: 470px) { /* Responsif untuk layar kecil */
    .container h2{ /* Judul */
        font-size: 22px; /* Ukuran lebih kecil */
        padding: 13 20px; /* Padding disesuaikan */
    }
    .content .word{ /* Kata acak di layar kecil */
        font-size: 30px; /* Ukuran lebih kecil */
        letter-spacing: 20px; /* Jarak antar huruf lebih kecil */
        margin-right: -20px; /* Koreksi jarak */
    }
    .container .content{ /* Konten utama */
        margin: 20px 20px 30px; /* Margin disesuaikan */
    }
    .details p{ /* Paragraf detail */
        font-size: 16px; /* Ukuran lebih kecil */
        margin-bottom: 8px; /* Jarak bawah kecil */
    }
    .content input{ /* Input jawaban */
        height: 55px; /* Tinggi lebih pendek */
        font-size: 17px; /* Ukuran teks */
    }
    .buttons button{ /* Tombol */
        padding: 14px 0; /* Tinggi tombol lebih kecil */
        font-size: 16px; /* Ukuran teks */
        width: calc(100% / 2 - 7px); /* Ukuran tombol disesuaikan */
    }
}