@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');/* Mengimpor font Open Sans */

* {
    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; /* Menengahkkan elemen secara vertikal */
    justify-content: center; /* Menengahkkan 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; /* Pusat elemen di dalamnya */
    border-radius: 5px; 
    background: #293447;
    box-shadow: 0 20px 40px rgba(52, 87, 220, 0.2);
    }

    .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;
text-align: center;
font-size: 1.3rem;
color: #B8C6DC;
width: calc(100% / 4);
cursor: pointer;
border-right: 1px solid #171B26;
}

@media screen and (max-width: 800px) {
    .wrapper {
        width: 90vmin;
        height: 115vmin;
    }

    .game-details {
        font-size: 1rem;
        padding: 15px 17px;
    }
    .controls {
        display: flex;
    }

    .controls i {
      padding: 15px 0;
      font-size: 1rem;
    }
    
}