body {
  background-color: #282c34;
  color: #abb2bf;
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Memastikan body memenuhi tinggi layar */
  font-family: 'Arial', sans-serif;
  position: relative;
  padding: 15px; /* Padding untuk seluruh konten */
  box-sizing: border-box; /* Memastikan padding termasuk dalam dimensi elemen */
}

@media (min-width: 768px) {
  body {
    padding: 30px; /* Padding lebih besar untuk layar besar */
  }
}

/* Menghapus padding di footer agar menyentuh tepi */
footer {
  background-color: #3a3f4b;
  color: #fff;
  text-align: center;
  padding: 1rem;
  margin-top: auto; /* Membuat footer selalu di bagian bawah */
  width: calc(100vw); /* Lebar penuh dengan penyesuaian */
  margin-left: -15px; /* Meniadakan padding kiri pada footer */
  margin-right: -15px; /* Meniadakan padding kanan pada footer */
  margin-bottom: -15px; /* Meniadakan padding bawah */
  box-sizing: border-box;
}

@media (min-width: 768px) {
  footer {
    margin-left: -30px; /* Meniadakan padding kiri untuk layar besar */
    margin-right: -30px; /* Meniadakan padding kanan untuk layar besar */
    margin-bottom: -30px; /* Meniadakan padding bawah untuk layar besar */
  }
}



body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(46, 164, 79, 0.03) 10%, transparent 30%),
              radial-gradient(circle, rgba(46, 164, 79, 0.06) 10%, transparent 30%);
  background-size: 150px 150px, 200px 200px; /* Ukuran bulatan bervariasi */
  z-index: 0; /* Di bawah semua konten */
  pointer-events: none; /* Agar tidak mengganggu interaksi dengan konten */
}

.container {
  margin-top: 50px;
  flex: 1; /* Membuat kontainer mengisi ruang yang tersedia */
  padding-bottom: 20px; /* Ruang di bawah kontainer */
  position: relative; /* Mengatur posisi kontainer agar teks berada di atas latar belakang */
  z-index: 1; /* Membawa konten di atas efek latar belakang */
}

h1, p {
  color: #ffffff;
}

.form-control, .form-label {
  background-color: #3a3f4b;
  border: 1px solid #565c68;
  color: #ffffff;
  border-radius: 5px; /* Menambahkan sudut membulat */
}

.form-control:focus {
  background-color: #3a3f4b;
  border-color: #66cc66;
  box-shadow: 0 0 5px rgba(102, 204, 102, 0.5); /* Efek bayangan saat fokus */
}

.btn-primary {
  background-color: #2ea44f; /* Hijau ala GitHub */
  border-color: #2ea44f;
  border-radius: 5px; /* Sudut membulat pada tombol */
  transition: background-color 0.3s ease; /* Animasi transisi */
}

.btn-primary:hover {
  background-color: #2c974b; /* Warna lebih gelap saat hover */
  border-color: #2c974b;
}

.alert-success {
  background-color: #2a313c; /* Latar belakang untuk hasil */
  border-color: #66cc66;
  color: #66cc66;
  border-radius: 5px; /* Sudut membulat pada alert */
}

.alert-danger {
  background-color: #3a3f4b;
  color: #ff6b6b;
  border-radius: 5px; /* Sudut membulat pada alert */
}

/* Styling untuk title */
.title {
  color: white; /* Warna putih untuk CV/Resume */
  font-size: 2.5rem; /* Ukuran font lebih kecil */
  font-weight: bold; /* Bold untuk penekanan */
  text-transform: uppercase; /* Mengubah teks menjadi huruf besar */
  letter-spacing: 2px; /* Menambahkan spasi antar huruf */
}

/* Styling untuk kata yang di-highlight */
.highlight {
  color: #FFC107; /* Warna kuning untuk 'Roaster' */
}

/* Styling untuk subtitle */
.subtitle {
  color: white; /* Warna putih untuk subtitle */
  font-size: 1rem; /* Ukuran font yang lebih kecil */
  font-weight: 500; /* Medium weight */
  margin-top: 10px; /* Jarak antara judul dan subjudul */
}

.custom-label {
  font-size: 0.8rem; /* Ukuran font lebih kecil */
  color: #abb2bf; /* Warna abu-abu untuk label */
  display: block; /* Memastikan label mengambil ruang penuh */
  margin-bottom: 5px; /* Jarak antara label dan input */
  transition: color 0.3s ease; /* Animasi transisi warna */
}

.custom-label:hover {
  color: #ffffff; /* Mengubah warna saat hover untuk efek interaksi */
}

#result {
  margin-top: 50px; /* Jarak atas untuk memberikan ruang */
  text-align: center; /* Memastikan teks di dalamnya terpusat */
}

/* Pastikan konten tidak meluas lebih dari yang diperlukan */
.alert {
  margin: 0 auto; /* Mengatur margin otomatis agar konten berada di tengah */
  width: 100%; /* Memastikan alert mengambil lebar penuh */
}

.file-upload {
  border: 2px dashed #66cc66; /* Garis putus-putus */
  border-radius: 5px; /* Sudut membulat */
  padding: 20px; /* Ruang dalam */
  text-align: center; /* Teks di tengah */
  cursor: pointer; /* Pointer saat hover */
  position: relative; /* Untuk menempatkan elemen lain di dalam */
}

.file-upload-text {
  color: #abb2bf; /* Warna teks */
  font-size: 1rem; /* Ukuran font */
}

/* Menyembunyikan input file */
input[type="file"] {
  position: absolute; /* Memposisikan input file */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0; /* Menyembunyikan input file */
  cursor: pointer; /* Pointer saat hover */
}

.file-upload:hover {
  background-color: rgba(46, 164, 79, 0.1); /* Efek hover */
}

.highlight-green {
  color: #2ea44f; /* Warna hijau untuk FlyMorphStudio */
  font-weight: bold; /* Membuat teks menjadi bold */
}

.highlight-red {
  color: #ff0000; /* Warna merah kemerahan */
  font-weight: bold; /* Optional: untuk menebalkan teks */
}