@font-face {
    src: url(/fonts/GFF-Latin-CdMedium.ttf);                                
    font-family: fffont;
}

/* Body styles */
body {
  font-family: 'GFF-Latin-CdMedium.ttf', serif;
  background-color: #f0f0f0; /* لون الخلفية رمادي فاتح */
  color: #333; /* لون النص أبيض غامق قليلا */
  display: flex; /* تطبيق خصائص flex على الجسم */
  justify-content: center; /* توسيط المحتوى أفقيًا */
  align-items: center; /* توسيط المحتوى عموديًا */
  height: 100vh; /* جعل الارتفاع ممتدًا للشاشة بالكامل */
}

/* Root styles */
#root {
  display: flex; /* تطبيق خصائص flex على العنصر الجذر */
  flex-direction: column; /* ترتيب العناصر بشكل عمودي */
  align-items: center; /* توسيط العناصر عموديًا */
  width: 80%; /* تحديد عرض العنصر الجذر */
  max-width: 400px; /* تحديد أقصى عرض مسموح به */
  margin: auto; /* توسيط العنصر */
  padding: 20px; /* إضافة هامش داخلي لتحسين التباعد */
  background-color: #fff; /* لون خلفية النموذج */
  border-radius: 10px; /* حدود مستديرة */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* ظل */
}

/* Form styles */
input[type="search"],
select {
  width: 100%;
  padding: 10px;
  margin: 5px 0;
  border-radius: 5px;
  border: none;
  background-color: #e0e0e0; /* رمادي فاتح لخلفية الحقل */
  color: #333; /* لون النص داخل الحقل */
  outline: none;
}

/* Button styles */
button {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border-radius: 5px;
  border: none;
  background-color: #333; /* لون الخلفية للزر */
  color: #fff; /* لون النص للزر */
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #555; /* لون الخلفية عندما يتم التحويل */
}