header {
    display: flex;
    justify-content: center; /* จัด logo ให้ตรงกลาง */
    align-items: center; /* จัด logo ให้ตรงกลางแนวตั้ง */
    padding: 10px; 
    background-color: #f0f0f0; /* สีพื้นหลัง header */
  }

    .logo {
      max-width: 200px; /* กำหนดความกว้างสูงสุดของ logo */
      height: auto; 
    }

body {
  font-family: sans-serif;
  margin: 16px;
  text-align: center;
  background-color: #f4f4f4; /* เพิ่มสีพื้นหลัง */
}

h2 {
  color: #333;
}

textarea {
  width: 100%;
  max-width: 500px;
  height: calc(30vh - 22px); /* ปรับขนาด textarea ให้เป็น 30% ของความสูง viewport */
  padding: 10px;
  margin: 10px 0;
  box-sizing: border-box;
  border: 1px solid #ccc;
  resize: vertical;
}

#headText {
  height: 3em; /* ความสูง 2 บรรทัด */
}

.image-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
 .profile-image {
   max-width: 200px; 
   height: auto;
 } 

.image-choice {
  display: inline-block;
  margin: 10px;
  width: 45%;
  box-sizing: border-box;
}

.image-choice img {
  width: 100%; /* กำหนดความกว้างของรูปภาพ */
  object-fit: cover; /* ให้รูปภาพคงสัดส่วนเดิม */
}

#customURLContainer {
  margin-top: 10px;
}

#customURLContainer input[type="url"] {
  width: 100%;
  max-width: 500px;
  height: 3em; 
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #ccc;
}

button {
  display: block;
  width: 100%;
  max-width: 300px;
  padding: 12px 0;
  margin: 16px auto;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

/* Media query สำหรับ mobile */
@media (max-width: 768px) {
  .image-choice {
    width: 90%;
    margin: 5px;