/* Mengatur tampilan umum halaman */
body {
    overflow: hidden; /* Mencegah scroll pada halaman */
    background: #d7d7d7; /* Mengatur warna latar belakang halaman menjadi abu-abu terang */
}

/* Mengatur area utama permainan Tetris */
#tetris {
    width: 360px; /* Menentukan lebar elemen */
    border: 1px solid black; /* Menambahkan garis tepi berwarna hitam */
    padding: 20px; /* Memberikan ruang di dalam elemen */
}

/* Mengatur area kanvas tempat permainan Tetris berlangsung */
#canvas {
    width: 200px; /* Menentukan lebar area permainan */
    height: 440px; /* Menentukan tinggi area permainan */
    background-color: #000; /* Memberikan warna latar belakang hitam */
    position: relative; /* Mengatur posisi relatif agar elemen di dalamnya bisa diatur absolut */
    color: #fff; /* Warna teks menjadi putih */
}

/* Mengatur tampilan teks di dalam #canvas */
#canvas h1 {
    margin: 0; /* Menghilangkan margin default */
    padding: 0; /* Menghilangkan padding default */
    text-align: center; /* Pusatkan teks */
    font-size: 30px; /* Ukuran font 30px */
    padding-top: 200px; /* Memberikan ruang atas 200px agar teks berada di tengah */
}

/* Mengatur tampilan setiap bagian dari blok Tetris */
.piece {
    border: 1px solid white; /* Menambahkan garis tepi putih di setiap bagian */
    position: absolute; /* Memungkinkan setiap bagian bergerak bebas di dalam #canvas */
}

/* Mengatur tombol "Mulai" */
#start {
    animation: blink .7s steps(2, start) infinite; /* Memberikan efek berkedip dengan animasi */
    background: #E1FF5F; /* Warna latar belakang hijau terang */
    border-radius: 2px; /* Membuat sedikit lengkungan di sudut tombol */
    color: #202020; /* Warna teks hitam */
    cursor: pointer; /* Mengubah kursor menjadi bentuk tangan saat diarahkan ke tombol */
    font-size: 28px; /* Ukuran teks 28px */
}

/* Animasi berkedip untuk tombol "Mulai" */
@keyframes blink {
    to {
        outline: #E1FF5F solid 1px; /* Menambahkan garis luar berkedip */
    }
}

/* Mengatur teks dengan warna merah untuk peringatan */
.red {
    color: #f00000; /* Warna merah untuk teks */
}

/* Mengatur tampilan setiap kotak (blok) yang membentuk Tetris */
.square {
    position: absolute; /* Memungkinkan pergerakan bebas di dalam elemen induknya */
    width: 19px; /* Menentukan lebar setiap kotak */
    height: 19px; /* Menentukan tinggi setiap kotak */
    border: 1px solid white; /* Menambahkan garis tepi putih */
}

/* Menentukan warna untuk masing-masing tipe bentuk blok Tetris */
.type0 {
    background-color: #a000f0; /* Ungu */
}
.type1 {
    background-color: #00f0f0; /* Cyan */
}
.type2 {
    background-color: #f0a000; /* Oranye */
}
.type3 {
    background-color: #0000f0; /* Biru */
}
.type4 {
    background-color: #00f000; /* Hijau */
}
.type5 {
    background-color: #f00000; /* Merah */
}
.type6 {
    background-color: #f0f000; /* Kuning */
}

/* Mengatur tampilan area untuk menampilkan bentuk blok selanjutnya */
#next_shape {
    position: relative; /* Mengatur posisi relatif agar elemen di dalamnya dapat diatur absolut */
    background-color: #000; /* Latar belakang hitam */
    border: 1px solid white; /* Garis tepi putih */
    width: 110px; /* Lebar area tampilan blok selanjutnya */
    height: 110px; /* Tinggi area tampilan blok selanjutnya */
}

/* Mengatur tampilan area informasi permainan */
#info {
    background-color: #000; /* Warna latar belakang hitam */
    color: #fff; /* Warna teks putih */
    float: right; /* Memposisikan elemen ke kanan */
    width: 110px; /* Menentukan lebar */
    height: 420px; /* Menentukan tinggi */
    padding: 10px; /* Memberikan ruang di dalam elemen */
}