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

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

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

/*Mengatuer tampilan teks di dalam #canvas*/
#canvas h1 {
    margin: 0; /*Menghilangkan margi 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 setia[ bagian dari blok tetris*/
.piece {
    border: 1px solid white; /*Menambhakan garis tepi putih di setiap bagian*/
    position: absolute; /*Memungkinkan setiap bagian bergerak bebas di dalam #canvas*/
}

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

/*Animasi berkedip untuk tombol "Mulai"*/
@keyframes blink {
    to {
        outline: #E1FF5F solid 1px; /*Menambahkan garis lurus 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 didalam 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; /*Mengtur posisi relatif agara elment didalmnya dapat siatur absolur */
    background-color: #000; /*Latar belakang hitam*/
    border: 1px solid white; /*Lebar tampilan blok selanjutnya*/
    width: 110px; /*lebar area tampilan blok selanjutnya*/
    height: 110px; /*Tinggi area rampilan blok selanjutnya*/
}

/*Mengatur tampilan area informasi permainanna*/
#info {
    background-color: #000; /*Latar belakang hitam*/
    color: #fff; /*warna teks putih*/
    float: right; /*Mmeposisikan elemen ke kanann*/
    width: 110px; /*Mennetukan lebar*/
    height: 420px; /*Mennetukan tinggi*/
    padding: 10px; /*Memberikan ruang di dalma elemen*/
}