Hello world!
فهرست مطالب

- مقدمه: دروازهای به دنیای کدنویسی و فراتر
- تاریخچه یک عبارت نمادین
- چرا “Hello world!” اولین گام است؟
- “Hello world!” در زبانهای برنامه نویسی مختلف
- فراتر از کد: “Hello world!” در کاربردهای نوین
- چالشها و مسائل رایج برای مبتدیان
- مزایای عمیق درک “Hello world!”
- عیبیابی سریع: وقتی “Hello world!” کار نمیکند
- پرسشهای متداول (FAQ)
- نتیجهگیری: نه یک پایان، که یک آغاز
خلاصه سریع: Hello world! دروازه ورود به دنیای فناوری

چیست؟
اولین برنامه سادهای که یک متن (معمولاً “Hello world!”) را نمایش میدهد. نمادی برای آغاز یادگیری کدنویسی.
چرا مهم است؟
تست محیط توسعه، آشنایی با سینتکس اولیه، افزایش اعتماد به نفس مبتدیان و نمادی از آغاز یک مسیر.
کاربردها؟
در وب، موبایل، IoT و هر حوزه جدیدی به عنوان اولین تست موفقیتآمیز و شروع کار استفاده میشود.
مقدمه: دروازهای به دنیای کدنویسی و فراتر

عبارت “Hello world!” چیزی فراتر از یک رشتهی متنی ساده است؛ این عبارت، دروازهای است به دنیای وسیع و پیچیدهی برنامهنویسی. برای هر کسی که قصد ورود به عرصه کدنویسی را دارد، اجرای موفقیتآمیز “Hello world!” حکم یک آیین گذار را دارد. این تجربه نه تنها نشاندهنده نصب صحیح ابزارها و درک اولیه از سینتکس یک زبان است، بلکه اولین گام عملی در سفری پر از چالش و کشف خواهد بود.
تصور کنید برای اولین بار پشت فرمان یک خودرو مینشینید. اولین کاری که میکنید، حرکت کردن نیست، بلکه روشن کردن موتور و اطمینان از کارکرد صحیح آن است. “Hello world!” دقیقاً همین نقش را در برنامهنویسی ایفا میکند. این کلمت جادویی به شما میگوید: “بله، سیستم شما کار میکند؛ شما آمادهاید تا قدمهای بعدی را بردارید.” در این مقاله، عمیقتر به تاریخچه، اهمیت، کاربردها و حتی مسائل رایج مربوط به “Hello world!” خواهیم پرداخت تا دیدی جامع و کاربردی به این نماد اساسی ارائه دهیم.
تاریخچه یک عبارت نمادین
تاریخچهی دقیق “Hello world!” کمی مبهم است، اما ردپای آن به دههی ۷۰ میلادی و ظهور زبانهای برنامهنویسی مدرن برمیگردد. بسیاری از محققان، برایان کرنیگان (Brian Kernighan) را به عنوان خالق اصلی این مفهوم میشناسند. او در سال ۱۹۷۲، در کتاب “A Tutorial Introduction to the Language B” (که پیشزمینهای برای زبان C بود)، مثالی از نمایش “hello, world” را برای توضیح یک برنامه خارجی آورد.
اهمیت این عبارت، اما، با انتشار کتاب “The C Programming Language” (که به نام “K&R” نیز شناخته میشود) در سال ۱۹۷۸، به اوج خود رسید. کرنیگان و دنیس ریچی (Dennis Ritchie) در این کتاب، از برنامه زیر به عنوان اولین مثال برای معرفی زبان C استفاده کردند:
#include <stdio.h>
int main() {
printf("hello, worldn");
return 0;
}
این مثال ساده، به سرعت در میان جامعه برنامه نویسان به یک استاندارد تبدیل شد. دلیل محبوبیت آن هم مشخص بود: سادگی، قابلیت فهم بالا و اثبات سریع کارکرد محیط توسعه. از آن زمان به بعد، تقریباً هر کتاب، آموزش یا دوره برنامهنویسی جدید، با نمایش “Hello world!” آغاز میشود. این عبارت، فراتر از یک متن، به یک نماد فرهنگی در دنیای فناوری اطلاعات بدل شده است.
چرا “Hello world!” اولین گام است؟
انتخاب “Hello world!” به عنوان اولین برنامه، یک تصمیم کاملاً منطقی و هوشمندانه بوده است. این انتخاب بر پایهی سه ستون اصلی استوار است که هر یک، نقش حیاتی در فرآیند یادگیری و توسعه دارند:
سادگی و اثربخشی
برنامهی “Hello world!” تنها شامل چند خط کد است که وظیفهی مشخص و واحدی را انجام میدهد: نمایش یک رشتهی متنی. این سادگی به مبتدیان اجازه میدهد تا بدون درگیر شدن با مفاهیم پیچیده مانند متغیرها، حلقهها یا توابع، با ساختار کلی یک برنامه و نحوهی اجرای آن آشنا شوند. هدف اصلی، تولید یک خروجی قابل مشاهده است که به کاربر حس موفقیت و پیشرفت میدهد.
- کد حداقلی: کمترین میزان کد برای تولید یک خروجی.
- تمرکز بر سینتکس: آشنایی اولیه با قوانین نگارشی زبان.
- خروجی بصری: مشاهده مستقیم نتیجه کار.
تست محیط توسعه
قبل از شروع به برنامهنویسی جدی، باید از صحت نصب و پیکربندی محیط توسعه (IDE یا کامپایلر/مفسر) اطمینان حاصل کرد. “Hello world!” بهترین و سریعترین راه برای انجام این تست است. اگر برنامه به درستی کامپایل یا اجرا شود و خروجی مورد انتظار را نمایش دهد، به این معنی است که تمام ابزارهای لازم به درستی روی سیستم شما نصب شدهاند و آمادهی کار هستید.
- تایید نصب: اطمینان از نصب صحیح کامپایلر یا مفسر.
- پیکربندی مسیرها: چک کردن تنظیمات مربوط به Path variables.
- عملکرد IDE: بررسی کارکرد صحیح محیط توسعه یکپارچه.
شکستن دیوار ترس
برای بسیاری از تازهکاران، برنامهنویسی میتواند ترسناک و طاقتفرسا به نظر برسد. موفقیت در اجرای اولین برنامه، حتی اگر بسیار ساده باشد، اعتماد به نفس فوقالعادهای به آنها میبخشد. این موفقیت اولیه، سد روانی را میشکند و به آنها نشان میدهد که میتوانند کد بنویسند و نتیجهی کار خود را ببینند. این یک تقویت مثبت است که انگیزه لازم برای ادامه مسیر را فراهم میکند.
- اولین موفقیت: ایجاد حس موفقیت اولیه و مثبت.
- کاهش اضطراب: کم کردن ترس از پیچیدگیهای برنامهنویسی.
- تقویت انگیزه: ایجاد میل به ادامه یادگیری و کاوش بیشتر.
“Hello world!” در زبانهای برنامه نویسی مختلف
با وجود اینکه مفهوم “Hello world!” یکسان است، نحوه پیادهسازی آن در زبانهای مختلف برنامهنویسی تفاوتهایی دارد. این تفاوتها، نشاندهندهی سینتکس و فلسفهی هر زبان است. در اینجا، به چند مثال رایج اشاره میکنیم:
| زبان | کد “Hello world!” |
|---|---|
| پایتون (Python) |
|
| جاوا اسکریپت (JavaScript) |
|
| سی پلاس پلاس (C++) |
|
| جاوا (Java) |
|
| پی اچ پی (PHP) |
|
| روبی (Ruby) |
|
همانطور که میبینید، هر زبان از یک تابع یا دستور خاص برای چاپ خروجی استفاده میکند. پایتون با `print()` سادگی را نشان میدهد، جاوا اسکریپت با `console.log()` به محیط توسعه وب اشاره دارد و C++ و جاوا ساختار کد پیچیدهتری را از همان ابتدا معرفی میکنند که به شیگرایی و مدیریت حافظه در آنها برمیگردد.
فراتر از کد: “Hello world!” در کاربردهای نوین
“Hello world!” دیگر فقط مختص برنامهنویسی سنتی نیست. این عبارت به یک اصطلاح عمومی برای “اولین تست” یا “آغاز یک چیز جدید” در بسیاری از حوزههای تکنولوژی تبدیل شده است. این مفهوم در دنیای امروز، کاربردهای بسیار گستردهتری پیدا کرده است:
- توسعه وب (Web Development): وقتی یک توسعهدهنده وب برای اولین بار یک پروژه جدید راهاندازی میکند، معمولاً اولین کاری که انجام میدهد، ایجاد یک صفحه ساده با عنوان “Hello world!” است تا از صحت پیکربندی سرور، فریمورک و اتصال دیتابیس (در صورت وجود) اطمینان حاصل کند. مثلاً یک API جدید ممکن است در پاسخ به اولین درخواست، عبارت “Hello world!” را برگرداند.
- توسعه اپلیکیشن موبایل (Mobile App Development): در ساخت یک اپلیکیشن جدید برای اندروید یا iOS، اولین صفحه یا ویجتی که برنامهنویس ایجاد میکند، غالباً یک صفحه با همین عبارت است. این کار برای تست موفقیتآمیز کامپایل، نصب و اجرای اپلیکیشن روی شبیهساز یا دستگاه واقعی ضروری است.
- اینترنت اشیا (IoT): وقتی یک دستگاه IoT جدید (مانند یک حسگر یا میکروکنترلر) برنامهریزی میشود، اولین برنامهای که روی آن بارگذاری میشود، ممکن است فقط پیامی ساده مانند “Hello world!” را به یک پلتفرم ابری یا نمایشگر کوچک ارسال کند. این کار برای اطمینان از صحت اتصال، ارتباط و عملکرد پایه دستگاه حیاتی است.
- یادگیری ماشین (Machine Learning): در حوزه هوش مصنوعی و یادگیری ماشین، ممکن است اولین مدلی که آموزش داده میشود، یک خروجی بسیار ساده مانند “Hello world!” یا یک پیشبینی اولیه و قابل فهم تولید کند تا از صحت جریان دادهها و پیکربندی مدل اطمینان حاصل شود.
- استعارهای برای شروعها: فراتر از جنبههای فنی، “Hello world!” به یک استعاره برای هر شروع جدیدی در دنیای فناوری تبدیل شده است. اولین پست وبلاگ، اولین توییت، اولین پروژه متنباز – همه اینها میتوانند به نوعی “Hello world!” خود را داشته باشند.
چالشها و مسائل رایج برای مبتدیان
با وجود سادگی ظاهری، حتی “Hello world!” نیز میتواند برای مبتدیان چالشهایی ایجاد کند. این چالشها معمولاً مربوط به درک نادرست از نحوه کار سیستم یا خطاهای کوچک اما مهم هستند:
نصب و راهاندازی محیط توسعه
شاید بزرگترین مانع برای تازهکاران، نصب صحیح کامپایلرها، مفسرها و محیطهای توسعه یکپارچه (IDE) باشد. تنظیمات مربوط به متغیرهای محیطی (Path variables)، انتخاب نسخه صحیح زبان یا حتی نصب درایورهای مورد نیاز میتواند گیجکننده باشد. یک اشتباه کوچک در این مرحله میتواند منجر به خطاهایی شود که هیچ ربطی به کد شما ندارند.
- پیکربندی نادرست `PATH`.
- انتخاب اشتباه ابزار نصب (مثلاً IDE نامناسب).
- مشکلات سازگاری با سیستم عامل.
خطاهای املایی و نگارشی (Syntax Errors)
یک پرانتز جا افتاده، یک نقطه ویرگول از قلم افتاده، یا یک حرف کوچک به جای حرف بزرگ – همین اشتباهات به ظاهر ناچیز، میتوانند برنامهی شما را از کار بیندازند. بسیاری از زبانهای برنامهنویسی به کوچکترین جزئیات سینتکسی حساس هستند و یک خطای نگارشی میتواند منجر به عدم کامپایل یا اجرای برنامه شود.
- نقطه ویرگول یا پرانتزهای جاافتاده.
- حساسیت به حروف کوچک و بزرگ (Case-sensitivity).
- نام صحیح توابع (مثلاً `Print` به جای `print`).
عدم نمایش خروجی
گاهی اوقات برنامه به درستی اجرا میشود، اما کاربر خروجی “Hello world!” را نمیبیند. این مشکل معمولاً به دلیل بسته شدن سریع پنجره کنسول پس از اتمام اجرای برنامه رخ میدهد. در برخی محیطها، نیاز است که دستور اضافهای برای نگه داشتن پنجره یا مشاهده خروجی در یک محیط توسعه خاص وارد شود.
- بسته شدن ناگهانی پنجره کنسول.
- عدم استفاده از دستور صحیح برای نمایش خروجی.
- مشکلات مربوط به بافر خروجی.
مزایای عمیق درک “Hello world!”
شاید در نگاه اول، “Hello world!” فقط یک برنامه ساده باشد، اما درک عمیق آن میتواند مزایای بلندمدتی برای یک برنامه نویس تازهکار داشته باشد:
- آشنایی با مبانی: اجرای “Hello world!” شما را با مفاهیم پایهای مانند نحوهی نوشتن کد، کامپایل/اجرا و دریافت خروجی آشنا میکند. این مفاهیم، آجرهای سازنده برای یادگیری هر زبان برنامهنویسی دیگری هستند.
- توسعه مهارتهای عیبیابی (Debugging): وقتی “Hello world!” کار نمیکند، مجبور میشوید مشکل را پیدا و رفع کنید. این فرآیند، اولین قدمها را در توسعه مهارتهای عیبیابی شما، که یکی از حیاتیترین تواناییها برای هر برنامه نویس است، برمیدارد.
- درک چرخه توسعه نرمافزار: از نوشتن کد (Source Code) تا تبدیل آن به یک برنامه قابل اجرا (Executable) و در نهایت مشاهده خروجی، شما یک چرخه کامل و کوچک از توسعه نرمافزار را تجربه میکنید. این درک پایه، بعدها در پروژههای بزرگتر بسیار مفید خواهد بود.
- ساخت زیربنای فکری برنامهنویسی: “Hello world!” به شما کمک میکند تا ذهنیت حل مسئله و تفکر منطقی را که لازمهی برنامهنویسی است، در خود پرورش دهید. این یعنی یاد میگیرید چگونه یک هدف کوچک را به مراحل قابل اجرا تقسیم کنید و نتیجه آن را تحلیل کنید.
عیبیابی سریع: وقتی “Hello world!” کار نمیکند
نگران نباشید اگر اولین برنامهی “Hello world!” شما کار نکرد. این اتفاق برای همه میافتد. برای عیبیابی سریع، مراحل زیر را دنبال کنید:
- سینتکس را موشکافانه بررسی کنید: کوچکترین غلط املایی یا نگارشی میتواند مشکلساز باشد. کلمه به کلمه کد خود را با نمونه صحیح مقایسه کنید. به پرانتزها، نقل قولها، نقطه ویرگولها و حساسیت به حروف بزرگ و کوچک (Capitalization) دقت کنید.
- نصب محیط را تایید کنید: مطمئن شوید که کامپایلر یا مفسر زبان مورد نظر به درستی نصب شده است. برای ویندوز، بررسی کنید که `Path variables` به درستی تنظیم شده باشند تا سیستم عامل بتواند دستورات زبان برنامهنویسی را پیدا کند.
- پیامهای خطا را بخوانید: کامپایلرها و مفسرها اغلب پیامهای خطای مفیدی ارائه میدهند که محل و نوع مشکل را نشان میدهند. حتی اگر در ابتدا گیجکننده باشند، سعی کنید خطوط و کلمات کلیدی موجود در پیام خطا را جستجو کنید.
- از منابع آنلاین استفاده کنید: فرومهای برنامهنویسی مانند Stack Overflow یا گروههای برنامهنویسی در شبکههای اجتماعی، منابع عالی برای یافتن راهحل مشکلات رایج هستند. اغلب، کسی قبلاً با مشکل مشابه شما روبرو شده و راهحل آن را به اشتراک گذاشته است.
- محیط توسعه یا کامپیوتر را مجدداً راهاندازی کنید: گاهی اوقات یک راهاندازی مجدد ساده میتواند مشکلات مربوط به کش یا تنظیمات موقت را حل کند.
- نمونه کد خود را با یک نمونه کارا مقایسه کنید: اگر همچنان مشکل دارید، کد خود را با یک مثال “Hello world!” که میدانید کار میکند، پهلو به پهلو مقایسه کنید تا تفاوتها را بیابید.
پرسشهای متداول (FAQ)
▾ “Hello world!” دقیقا چیست؟
“Hello world!” یک برنامه بسیار ساده است که فقط رشتهی متنی “Hello world!” را روی صفحه نمایش یا کنسول چاپ میکند. این برنامه معمولاً به عنوان اولین گام در یادگیری یک زبان برنامهنویسی جدید برای تست محیط توسعه و آشنایی با سینتکس پایه آن زبان استفاده میشود.
▾ چرا همیشه از این عبارت استفاده میشود؟
این عبارت از دههی ۷۰ میلادی و با انتشار کتاب “The C Programming Language” توسط کرنیگان و ریچی به یک سنت تبدیل شد. سادگی، قابلیت تشخیص سریع خطا در محیطهای توسعه و ایجاد حس موفقیت برای مبتدیان، دلایل اصلی پایداری و محبوبیت آن است. این یک عبارت استاندارد و شناخته شده در جامعه جهانی برنامهنویسان است.
▾ آیا میتوانم از عبارت دیگری استفاده کنم؟
بله، شما کاملاً آزادید که از هر عبارت متنی دیگری استفاده کنید! “Hello world!” تنها یک قرارداد و سنت است. میتوانید “سلام دنیا!”، “اولین برنامه من!” یا هر عبارت دیگری را که دوست دارید، چاپ کنید. هدف اصلی این است که بتوانید یک خروجی متنی را با موفقیت نمایش دهید.
▾ چقدر طول میکشد تا “Hello world!” را یاد بگیرم؟
نوشتن و اجرای “Hello world!” به خودی خود ممکن است فقط چند دقیقه طول بکشد. اما، نصب محیط توسعه و فهمیدن مفاهیم اولیه ممکن است از چند ساعت تا چند روز، بسته به تجربه قبلی و سرعت یادگیری شما، زمان ببرد. مهم این است که مراحل را با دقت دنبال کنید و ناامید نشوید.
▾ گام بعدی پس از “Hello world!” چیست؟
بعد از “Hello world!”، زمان آن است که به سراغ مفاهیم پایهای برنامهنویسی مانند متغیرها، انواع داده، عملگرها، عبارات شرطی (if/else)، حلقهها (loops) و توابع (functions) بروید. همچنین، ساختن پروژههای کوچک و ساده برای تمرین آموختههایتان بسیار مهم است.
نتیجهگیری: نه یک پایان، که یک آغاز
“Hello world!” به هیچ وجه نقطهی پایان یک مسیر نیست؛ بلکه، نقطهی شروعی قدرتمند و نمادین است. این عبارت، نه تنها اولین پل ارتباطی شما با دنیای کدنویسی است، بلکه به شما اطمینان میدهد که ابزارهایتان آمادهاند و اولین قدم را با موفقیت برداشتهاید. این برنامه کوچک، بار روانی ورود به یک حوزه جدید را کاهش میدهد و به شما انگیزه میدهد تا با کنجکاوی و اعتماد به نفس بیشتری، به سراغ چالشهای بزرگتر و پروژههای پیچیدهتر بروید.
پس، اگر تازه وارد دنیای برنامهنویسی شدهاید، با افتخار “Hello world!” خود را اجرا کنید. این فقط یک متن ساده نیست؛ این صدای اولین موفقیت شما در راه تبدیل شدن به یک توسعه دهنده ماهر است. از این آغاز، الهام بگیرید و به سوی کشف قابلیتهای بیکران دنیای فناوری حرکت کنید.
/* Basic Reset for consistent display */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* General Body Styles */
body {
font-family: ‘IRANSans’, Arial, sans-serif; /* Fallback to Arial, sans-serif if IRANSans is not available */
direction: rtl; /* Right-to-left for Persian */
text-align: right;
background-color: #f4f7f6;
margin: 0;
padding: 0;
color: #333;
}
/* Font Styles – Adjust as needed for specific fonts */
@font-face {
font-family: ‘IRANSans’;
src: url(‘IRANSansWeb(FaNum).eot’);
src: url(‘IRANSansWeb(FaNum).eot?#iefix’) format(’embedded-opentype’),
url(‘IRANSansWeb(FaNum).woff2’) format(‘woff2’),
url(‘IRANSansWeb(FaNum).woff’) format(‘woff’),
url(‘IRANSansWeb(FaNum).ttf’) format(‘truetype’);
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: ‘IRANSans’;
src: url(‘IRANSansWeb(FaNum)_Bold.eot’);
src: url(‘IRANSansWeb(FaNum)_Bold.eot?#iefix’) format(’embedded-opentype’),
url(‘IRANSansWeb(FaNum)_Bold.woff2’) format(‘woff2’),
url(‘IRANSansWeb(FaNum)_Bold.woff’) format(‘woff’),
url(‘IRANSansWeb(FaNum)_Bold.ttf’) format(‘truetype’);
font-weight: bold;
font-style: normal;
font-display: swap;
}
/* Headings for SEO and Readability */
h1, h2, h3 {
margin-top: 1.5em;
margin-bottom: 0.8em;
font-family: ‘IRANSans’, Arial, sans-serif;
}
h1 {
font-size: 2.8em;
font-weight: 700;
color: #1a1a1a;
text-align: center;
line-height: 1.3;
padding-top: 20px;
}
h2 {
font-size: 2.2em;
font-weight: 700;
color: #1a1a1a;
border-bottom: 2px solid #ddd;
padding-bottom: 10px;
margin-top: 2em;
margin-bottom: 1em;
}
h3 {
font-size: 1.8em;
font-weight: 600;
color: #333;
margin-top: 1.5em;
margin-bottom: 0.8em;
}
p {
margin-bottom: 1em;
line-height: 1.8;
font-size: 1.1em;
}
ul, ol {
margin-bottom: 1em;
line-height: 1.8;
font-size: 1.1em;
padding-right: 25px; /* Adjust for RTL list bullets */
}
ul li, ol li {
margin-bottom: 0.5em;
}
a {
color: #007bff;
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: #0056b3;
text-decoration: underline;
}
/* Code Blocks */
pre {
background-color: #272822;
color: #f8f8f2;
padding: 1em;
border-radius: 8px;
overflow-x: auto;
font-family: ‘Fira Code’, ‘Cascadia Code’, monospace;
font-size: 0.9em;
line-height: 1.5;
margin-bottom: 1em;
direction: ltr; /* Ensure code snippets are LTR */
text-align: left;
}
code {
font-family: ‘Fira Code’, ‘Cascadia Code’, monospace;
background-color: #e0e0e0;
padding: 0.2em 0.4em;
border-radius: 3px;
font-size: 0.9em;
direction: ltr;
color: #c7254e;
}
/* Table Styles */
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 2em;
direction: rtl; /* Table content specific RTL */
}
th, td {
padding: 12px 15px;
border: 1px solid #ddd;
text-align: right;
}
th {
background-color: #f2f2f2;
font-weight: bold;
color: #333;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:hover {
background-color: #f1f1f1;
}
/* Responsive Design */
@media (max-width: 768px) {
h1 {
font-size: 2.2em;
}
h2 {
font-size: 1.8em;
}
h3 {
font-size: 1.5em;
}
p, ul, ol, table, .info-box, .summary-box {
font-size: 1em;
}
.infographic-item {
flex: 1 1 100% !important; /* Stack items on small screens */
margin-bottom: 15px;
}
.main-container {
padding: 15px;
}
}
@media (max-width: 480px) {
h1 {
font-size: 1.8em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.3em;
}
.infographic-item {
padding: 15px;
}
pre, code {
font-size: 0.8em;
}
}
/* Details/Summary for FAQ */
details {
background-color: #ffffff;
border: 1px solid #ddd;
border-radius: 8px;
margin-bottom: 15px;
overflow: hidden;
}
summary {
padding: 15px 20px;
background-color: #f8f8f8;
cursor: pointer;
outline: none;
position: relative;
font-size: 1.2em;
font-weight: 600;
color: #333;
transition: background-color 0.3s ease;
}
summary:hover {
background-color: #f0f0f0;
}
summary::-webkit-details-marker {
display: none;
}
summary::before {
content: ‘◀’; /* Unicode arrow pointing left (closed state) */
position: absolute;
left: 20px; /* Adjust for RTL */
top: 50%;
transform: translateY(-50%) rotate(0deg);
transition: transform 0.2s ease-in-out;
color: #007bff;
font-size: 0.8em;
}
details[open] summary::before {
transform: translateY(-50%) rotate(-90deg); /* Arrow pointing down (open state) */
}
details p {
padding: 15px 20px;
margin-top: 0;
margin-bottom: 0;
border-top: 1px solid #eee;
line-height: 1.7;
font-size: 1em;
}
/* Ensure specific styling for headings within article content overriding general H1, H2, H3 */
.main-container h1 { font-size: 2.8em; font-weight: 700; color: #1a1a1a; text-align: center; margin-bottom: 40px; line-height: 1.3; }
.main-container h2 { font-size: 2.2em; font-weight: 700; color: #1a1a1a; margin-bottom: 20px; }
.main-container h3 { font-size: 1.8em; font-weight: 600; color: #333; margin-top: 1.5em; margin-bottom: 10px; }
