على الرغم من كون العرض 100% الا انها لم تخرج عن النطاق وهنا السبب

cursor: pointer;

بالنسبة لخواص التلاعب بالنصوص (fonts)
فأهمها:
1- font-size
2- font-weight
3-font-family

للخط أنواع وعائلات كثيرررة جدا ولكنها بشكل اساسي تندرج ضمن عائلتين:
1- serif
2- sans-serif
الاول هو الخط ذو الحواف الحادة كما في التصميم الناقص
والثاني هو ذو حواد عادية ومريحة للعين كما في التصميم الجاهز

سابقاً في كل العناصر ليشمل النوع sans-serif
انت الان صرت تعرف ان العناصر في الويب تمثل اب وابن فبدلا من وضع نوع الخط على كل عنصر على حده قم بوضعها في الأب (الذي هو الـ body)

بالنسبة لـ font-size
تحدد حجم الخط للنص داخل العنصر.
بوحدات قياس مثل الـ px
او بكلمات محددة

اما الـ font-family سنتحدث عنها بالتفصيل في التصميم القادم بإذن الله
يكفي الان ان تعرفي النوعي الرئيسيين serif and sans-serif

أما عن الـ font-weight
تحدد سمك الخط (سماكته أو درجة وضوحه/ثقله).
تاخذ القيم من 100 الى 900

يمكنك كتابة القيمة العددية 100 او الاسم التقريبي thin

لكن يفضل اعتماد القيم العددية لضمان النتيجة

عند قيامك بالادخال قد تلاحظ أن هناك حدًا أسود (أو أزرق في بعض المتصفحات) يظهر حول الحقل.

هذا الحد هو ليس "border" عادي، بل هو:

🔵 outline: إطار خارجي يُضاف تلقائيًا عندما يحصل العنصر على التركيز (focus) — أي عندما تنقر عليه أو تبدأ في الكتابة

لإزالته outline: none;

في الصورة الاصلية تلاحظ ان خلفية الفورم ضبابية
هذا ما تفعله الخاصية
backdrop-filter: blur(10px):.

هذا ما وصلنا اليه للان
سيكون افضل لو اضفت padding من اعلى واسفل
وصغرنا حجم خط الفقرة الذي اسفل زر الارسال

ايضا صغرت العرض من 350 الى 300
وجعلت الحواف من جميع الجهات 20

وهذه النتيجة

اخر فقرة
اريد عندما ااشر على الزر او على الرابط يتغير لونه