/* تنسيق النص الترحيبي الخاص بكلية هندسة شبرا */
.Welcome-to-Shoubra-faculty-of-engineering {
    color: red;        /* جعل لون النص أحمر */
    font-size: 45px;   /* تحديد حجم الخط وجعله 45 بيكسل*/
}

/* الحاوية الرئيسية: وظيفتها توسيط المحتوى في منتصف الشاشة */
.inputs-container {
    display: flex;
    flex-direction: column;    /* ترتيب العناصر رأسياً (تحت بعضها) */
    justify-content: center;   /* توسيط رأسي */
    align-items: center;       /* توسيط أفقي */
    height: 70vh;              /* بياخد %70 من طول الشاشة من فوق (كانه بياخد 70 بيكسل من فوق لكن دى بالنسبة المئوية) و بعدين يبدأ يحط المدخلات */
    gap: 50px;                 /* ترك مسافة50 بيكسل بين العنوان و الفورم */
}

/* تنسيق نموذج البيانات (الفورم) */
form {
    display: flex;             /* جعل خانات الادخال تستقبل امر الفليكس دايركشن الى تحتها */
    flex-direction: column;    /* جعل خانات الإدخال رأسياً تحت بعضها فى شكل عمود */
    gap: 10px;                 /* مسافة 10 بيكسل بين كل خانة وأخرى */
}

input[type="text"], 
input[type="password"] {
    /* بيخلى اليوزرنيم والباسورد يقبلوا امر الفليكس دايركشن الى تحت */
    display: flex;

    /* بيخلي العناصر اللي جوه (لو فيه) تترتب فوق بعضها كعمود */
    flex-direction: column;

    /* بيحدد عرض الخانة بالظبط (325 بكسل) عشان متبقاش واخدة الشاشة كلها */
    width: 325px; 

    /* أهم سطر: بيدي مساحة جوه خانة الباسورد و اليوزرنيم 16 بيكسل فوق وتحت و 15 بيكسل يمين وشمال عشان الكلام ميبقاش لزق في الحواف */
    padding: 16px 15px;     

    /* بيكبر حجم الخط اللي المستخدم بيكتبه جوه الخانة */
    font-size: 26px;   

    /* بيبعد الخانة عن اللي تحتها مسافة 20px عشان ميبقوش لزق في بعض */
    margin-bottom: 20px;

    
}

input[type="submit"] {
    /* بيخلي عرض الزرار نص عرض الفورم بالظبط (50%) */
    width: 50%;

    /* دي حركة ذكية عشان توسطن الزرار: بيبعده عن الشمال بنسبة %25  عشان يبقى تحت خانةالباسورد فى النص  بالظبط*/
    margin-left: 25%;
}