/* Import Google font */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap'); /* Mengimpor font Open Sans dari Google Fonts */
*{
    margin: 0; /* Menghilangkan margin bawaan semua elemen */
    padding: 0; /* Menghilangkan padding bawaan semua elemen */
    box-sizing: border-box; /* Memastikan ukuran elemen termasuk padding dan border */
    font-family: 'Open sans', sans-serif; /* Mengatur font default untuk seluruh elemen */
}
body{
    display: flex; /* Menggunakan flexbox untuk mengatur tata letak */
    align-items: center; /* Menengahkan elemen secara vertikal */
    justify-content: center; /* Menengahkan elemen secara horizontal */
    min-height: 100vh; /* Memastikan tinggi minimal body adalah 100% tinggi viewport */
    background: #E3F2FD; /* Mengatur warna latar belakang halaman */
}
.wrapper{
    width: 65vmin; /* Lebar elemen menggunakan satuan viewport minimal */
    height: 70vmin; /* Tinggi elemen menggunakan satuan viewport minimal */
    display: flex; /* Menggunakan flexbox untuk tata letak */
    overflow: hidden; /* Menyembunyikan konten yang melampaui area */
    flex-direction: column; /* Menyusun elemen secara vertikal */
    justify-content: center; /* Pusatkan elemen di dalamnya */
    border-radius: 5px; /* Membuat sudut elemen sedikit melengkung */
    background: #293447; /* Warna latar belakang wrapper */
    box-shadow: 0 20px 40px rgba(52, 87, 220, 0.2); /* Menambahkan efek bayangan */
}
.game-details{
    color: #B8C6DC; /* Warna teks */
    font-weight: 500; /* Ketebalan teks */
    font-size: 1.2rem; /* Ukuran font */
    padding: 20px 27px; /* Padding dalam elemen */
    display: flex; /* Menggunakan flexbox */
    justify-content: space-between; /* Menyusun elemen secara merata */
}
.play-board{
    height: 100%; /* Menyesuaikan tinggi dengan parent */
    width: 100%; /* Menyesuaikan lebar dengan parent */
    display: grid; /* Menggunakan grid layout */
    background: #212837; /* Warna latar belakang papan permainan */
    grid-template: repeat(30, 1fr) / repeat(30, 1fr); /* Membuat grid 30x30 dengan ukuran yang sama */
}
.play-board .food{
    background: #FF003D; /* Warna elemen makanan dalam permainan */
}
.play-board .head{
    background: #60CBFF; /* Warna elemen kepala ular */
}
.controls{
    display: none; /* Sembunyikan kontrol secara default */
    justify-content: space-between; /* Menyusun elemen secara merata */
}
.controls i {
    padding: 25px 0; /* Padding atas dan bawah tombol */
    text-align: center; /* Pusatkan ikon */
    font-size: 1.3rem; /* Ukuran ikon */
    color: #B8C6DC; /* Warna ikon */
    width: calc(100% / 4); /* Lebar setiap tombol sama rata */
    cursor: pointer; /* Menjadikan ikon sebagai tombol interaktif */
    border-right: 1px solid #171B26; /* Menambahkan garis pemisah antar tombol */
}
@media screen and (max-width: 800px) {
    .wrapper{
        width: 90vmin; /* Sesuaikan ukuran wrapper pada layar kecil */
        height: 115vmin; /* Sesuaikan tinggi wrapper pada layar kecil */
    }
    .game-details{
        font-size: 1rem; /* Sesuaikan ukuran font pada layar kecil */
        padding: 15px 27px; /* Sesuaikan padding */
    }
    .controls{
        display: flex; /* Tampilkan kontrol pada layar kecil */
    }
    .controls i {
        padding: 15px 0; /* Sesuaikan padding tombol kontrol */
        font-size: 1rem; /* Sesuaikan ukuran font tombol */
    }
}