/* Import Google Font - Poppins */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); /* Reset semua elemen untuk menghilangkan margin dan padding bawaan browser */ *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; /* Menggunakan font Poppins untuk seluruh teks */ } /* Styling untuk elemen */ body{ display: flex; /* Menggunakan flexbox agar elemen dalam body bisa terpusat */ padding: 0 10px; /* Memberikan padding sisi kiri dan kanan */ align-items: center; justify-content: center; min-height: 100vh; background: #17A2B8; } /* Styling untuk teks yang diseleksi */ ::selection{ color: #fff; background: #17A2B8; } /* Styling untuk wrapper utama */ .wrapper{ width: 770px; /* Lebar maksimal dari wrapper */ padding: 35px; /* Memberikan padding pada wrapper */ background: #fff; border-radius: 10px; box-shadow: 0 10px 15px rgba(0,0,0,0.05); /* Memberikan efek bayangan */ } /* Input field untuk mengetik, namun disembunyikan */ .wrapper .input-field{ opacity: 0; /* mbuat input field tidak terlihat */ z-index: -999; position: absolute; } /* Styling untuk box yang berisi teks yang diketik */ .wrapper .content-box{ padding: 13px 20px 0; border-radius: 10px; border: 1px solid #bfbfbf; } /* Styling untuk area teks yang sedang diketik */ .content-box .typing-text{ overflow: hidden; max-height: 256px; } /* Menghilangkan scrollbar di Webkit browser */ .typing-text::-webkit-scrollbar{ width: 0; } /* Styling untuk paragraf dalam area mengetik */ .typing-text p{ font-size: 21px; text-align: justify; letter-spacing: 1px; word-break: break-all; } /* Styling untuk span dalam paragraf */ .typing-text p span{ position: relative; } /* Warna teks jika pengetikan benar */ .typing-text p span.correct{ color: #56964f; } /* Warna teks jika pengetikan salah */ .typing-text p span.incorrect{ color: #cb3439; outline: 1px solid #fff; background: #ffc0cb; border-radius: 4px; } /* Warna teks untuk karakter yang sedang diketik */ .typing-text p span.active{ color: #17A2B8; } /* Efek underline berkedip untuk karakter yang sedang diketik */ .typing-text p span.active::before{ position: absolute; content: ""; height: 2px; width: 100%; bottom: 0; left: 0; opacity: 0; border-radius: 5px; background: #17A2B8; animation: blink 1s ease-in-out infinite; } /* Animasi kedipan */ @keyframes blink{ 50%{ opacity: 1; } } /* Bagian konten hasil mengetik */ .content-box .content{ margin-top: 17px; display: flex; padding: 12px 0; flex-wrap: wrap; align-items: center; justify-content: space-between; border-top: 1px solid #bfbfbf; } /* styling untuk tombol */ .content button{ outline: none; border: none; width: 105px; color: #fff; padding: 8px 0; font-size: 16px; cursor: pointer; border-radius: 5px; background: #17A2B8; transition: transform 0.3s ease; } /* Efek tombol saat ditekan */ .content button:active{ transform: scale(0.97); } /* Bagian hasil mengetik */ .content .result-details{ display: flex; flex-wrap: wrap; align-items: center; width: calc(100% - 140px); justify-content: space-between; } /* Styling untuk setiap item dalam hasil mengetik */ .result-details li{ display: flex; height: 20px; list-style: none; position: relative; align-items: center; } /* Syting untuk media query agar responsif */ @media (max-width: 745px) { .wrapper{ padding: 20px; } .content-box .content{ padding: 20px 0; } } @media (max-width: 518px) { .wrapper .content-box{ padding: 10px 15px 0; } .content button{ margin-top: 10px; } }