/* 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 */
}