/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"); /* Mengimpor font dari Google Fonts */

* {
  margin: 0; /* Menghilangkan margin default pada semua elemen */
  padding: 0; /* Menghilangkan padding default pada semua elemen */
  box-sizing: border-box; /* Menastikan padding dan border tidak menambah ukuran elemen */
  font-family: "Poppins", sans-serif; /* Menggunakan font Poppins sebagai default */
}

body {
  padding: 0 10px; /* Memberikan padding horizontal 10px pada body */
  display: flex; /* Menegakkan flexbox untuk mengatur layout */
  align-items: center; /* Pusatkan elemen secara vertikal */
  justify-content: center; /* Pusatkan elemen secara horizontal */
  min-height: 100vh; /* Tinggi minimal 100% viewport height */
  background: #8AC6FF; /* Warna latar belakang utama */
}

.wrapper {
  width: 450px; /* Lebar maksimum wrapper */
  padding: 25px; /* Padding dalam wrapper */
  background: #fff; /* Warna latar belakang putih */
  border-radius: 7px; /* Membuat sudut membulat */
  box-shadow: 0 15px 30px rgba(0,0,0,0.06); /* Efek bayangan */
}

.wrapper .gradient-box {
  height: 220px; /* Tinggi kotak gradasi */
  width: 100%; /* Lebar penuh */
  border-radius: 7px; /* Sudut membulat */
  background: linear-gradient(to left top, #5665E9, #A271F8); /* Warna gradasi */
}

.wrapper .row {
  display: flex; /* Menegakkan flexbox */
  margin: 20px 0; /* Jarak antara elemen */
  justify-content: space-between; /* Memberikan ruang antara elemen dalam satu baris */
}

.options p {
  font-size: 1.1rem; /* Ukuran font paragraf */
  margin-bottom: 8px; /* Jarak bawah */
}

.row :where(.column, button) {
  width: calc(100% / 2 - 12px); /* Membagi dua lebar elemen dalam satu baris */
}

.options .select-box {
  border-radius: 5px; /* Sudut membulat */
  padding: 10px 15px; /* Padding dalam elemen */
  border: 1px solid #aaa; /* Border abu-abu */
}

.select-box select {
  width: 100%; /* Lebar penuh */
  border: none; /* Menghapus border default */
  outline: none; /* Menghapus outline */
  font-size: 1.12rem; /* Ukuran font */
  background: none; /* Latar belakang transparan */
}

.options .palette {
  margin-left: 60px; /* Memberikan jarak kiri */
}

.palette input {
  height: 41px; /* Tinggi input warna */
  width: calc(100% / 2 - 20px); /* Lebar input warna */
}

.palette input:last-child {
  margin-left: 6px; /* Memberikan jarak antara dua input warna */
}

.wrapper textarea {
  width: 100%; /* Lebar penuh */
  color: #333; /* Warna teks */
  font-size: 1.05rem; /* Ukuran font */
  resize: none; /* Nonaktifkan resize */
  padding: 10px 15px; /* Padding dalam textarea */
  border-radius: 5px; /* Sudut membulat */
  border: 1px solid #ccc; /* Border abu-abu */
}

.buttons button {
  padding: 15px 0; /* Padding vertikal */
  border: none; /* Menghapus border */
  outline: none; /* Menghapus outline */
  color: #fff; /* Warna teks putih */
  margin: 0 0 -15px; /* Mengatur posisi tombol */
  font-size: 1.09rem; /* Ukuran font */
  border-radius: 5px; /* Sudut membulat */
  cursor: pointer; /* Mengubah kursor menjadi pointer */
  transition: 0.3s ease; /* Efek transisi */
}

.buttons .refresh {
  background: #6C757D; /* Warna tombol segarkan */
}

.buttons .refresh:hover {
  background: #5f666d; /* Warna saat hover */
}

.buttons .copy {
  background: #8A6CFF; /* Warna tombol salin */
}

.buttons .copy:hover {
  background: #704dff; /* Warna saat hover */
}

@media screen and (max-width: 432px) {
  .wrapper {
    padding: 25px 20px; /* Padding lebih kecil untuk layar kecil */
  }
  .row :where(.column, button) {
    width: calc(100% / 2 - 8px); /* Menyesuaikan ukuran elemen */
  }
  .options .select-box {
    padding: 8px 15px; /* Padding lebih kecil untuk layar kecil */
  }
  .options .palette {
    margin-left: 40px; /* Mengurangi jarak kiri */
  }
  .options .colors {
    display: flex; /* Menegakkan flexbox */
    justify-content: space-between; /* Membagi ruang antara warna */
  }
  .palette input {
    width: calc(100% / 2 - 5px); /* Menyesuaikan ukuran input warna */
  }
  .palette input:last-child {
    margin-left: 0; /* Menghapus margin tambahan */
  }
}