/* ---------------------------------------------------
   Global Page Settings
   These rules apply to the entire webpage.
   They set the background, text color, spacing,
   and default font for all content.
---------------------------------------------------- */
body {
  font-family: Arial, sans-serif;   /* Sets a clean, readable font */
  background-color: #fdfdfd;        /* Light background for better contrast */
  color: #000000;                   /* Black text for readability */
  margin: 0;                        /* Removes default outer space around the page */
  padding: 0;                       /* Removes default inner space inside the page */
  line-height: 1.6;                 /* Adds comfortable spacing between lines */
}

/* ---------------------------------------------------
   Header
   The <header> section usually contains the main title
   and a short description. These rules control how the
   header looks across the whole page.
---------------------------------------------------- */
/* Header Area */
header {
  background-color: #eaeaea;     /* Light gray background */
  text-align: center;            /* Centers everything inside the header */
  padding: 20px 0;               /* Adds top and bottom space */
}

/* Header Title */
header h1 {
  font-size: 32px;               /* Large, clear title */
  margin: 0;                     /* Removes extra spacing around the heading */
  font-weight: bold;             /* Makes the title stand out */
}

/* Header Subtitle */
header p {
  margin: px 0 0 0;              /* Small separation between title and subtitle */
  font-size: 16px;               /* Smaller text for the subtitle */
  color: #333333;                /* Slightly darker gray for softer contrast */
}

/* ---------------------------------------------------
   Navigation Bar
   The <nav> area contains links to other pages.
   These styles control the bar’s background and spacing,
   and the appearance of each link inside it.
---------------------------------------------------- */
/* Navigation Bar */
nav {
  background-color: #000000;       /* Solid black background */
  text-align: center;              /* Centers all the links */
  padding: 10px 0;                 /* Adds vertical spacing inside the nav bar */
}

/* Navigation Links */
nav a {
  color: #ffffff;                  /* White text for strong contrast */
  text-decoration: none;           /* Removes underlines from links */
  margin: 0 10px;                  /* Horizontal spacing between links */
  font-size: 16px;                 /* Readable link size */
}

/* Hover Effect */
nav a:hover {
  text-decoration: underline;      /* Adds underline when user hovers */
}


/* ---------------------------------------------------
   Main Content Area
   The <main> tag contains the central content of the page.
   These rules keep the page centered and easy to read.
---------------------------------------------------- */
/* Main Content Area */
main {
  max-width: 900px;                 /* Limits the width for easier reading */
  margin: 30px auto;                /* Centers <main> horizontally on the page */
  padding: 0 20px;                  /* Adds space on the left and right */
}

/* Main Headings */
main h2 {
  font-size: 24px;                  /* Clear section heading */
  margin-top: 0;                    /* Removes extra top spacing */
  color: #000000;                   /* Black text for strong clarity */
}

/* Main Paragraphs */
main p {
  font-size: 16px;                  /* Comfortable reading size */
  color: #333333;                   /* Soft contrast for paragraphs */
  text-align: justify;              /* Aligns text evenly on both sides */
}


/* ---------------------------------------------------
   Content Sections
   Each <section> is like a content block.
   These rules give every section spacing, background,
   and separation from other sections.
---------------------------------------------------- */
/* Content Sections */
/* Box Model Practice Section */
section {
  background-color: #ffffff;        /* Sets the background color of the section.
                                       This is the visible area behind the text. */

  padding: 30px;                    /* Adds space INSIDE the section around the content.
                                       Increasing padding makes the box look more open
                                       and prevents text from touching the border. */

  border: 3px solid #000000;        /* Creates a clear, visible outline around the section.
                                       You can change the width, style, or color to customize it. */

  margin-bottom: 30px;              /* Adds space OUTSIDE the section below it.
                                       This separates this box from the next section on the page. */

  border-radius: 6px;               /* Rounds the corners of the box.
                                       Higher values create softer, more curved shapes. */

  box-shadow: 0 0 10px rgba(0,0,0,0.05); 
                                     /* Adds a soft shadow around the box.
                                        First value: horizontal shadow movement.
                                        Second value: vertical shadow movement.
                                        Third value: blur amount.
                                        Last value: shadow color with transparency. */
}


/* Section Headings */
section h2 {
  margin-top: 0;                    /* Removes unnecessary top spacing */
  font-size: 22px;                  /* Clear section title size */
  color: #000000;                   /* Strong contrast for headings */
}

/* Section Paragraphs */
section p {
  font-size: 16px;                  /* Comfortable reading size */
  color: #333333;                   /* Soft contrast for paragraphs */
  text-align: justify;              /* Even text alignment */
}



/* ---------------------------------------------------
   Buttons
---------------------------------------------------- */
button {
  background-color: #000000;       /* Button background color */
  color: #ffffff;                  /* White text for contrast */
  border: none;                    /* Removes default browser border */
  padding: 10px 20px;              /* Internal spacing for a comfortable clickable area */
  border-radius: 5px;              /* Slight rounding for a modern appearance */
  font-size: 16px;                 /* Clear, readable text size */
  cursor: pointer;                 /* Displays a pointer icon on hover to signal interactivity */
  margin-top: 10px;                /* Adds space above the button */
}

/* Hover Effect */
button:hover {
  background-color: #333333;       /* Slightly lighter shade for hover feedback */
}

/* ---------------------------------------------------
   Lists
---------------------------------------------------- */
ul, ol {
  padding-left: 20px;              /* Space on the left to show bullets or numbers clearly */
  margin-bottom: 20px;             /* Space underneath the list */
}

li {
  margin-bottom: 8px;              /* Space between list items */
  font-size: 16px;                 /* Consistent readable size */
  color: #333333;                  /* Slightly softer text for a clean look */
}



/* ---------------------------------------------------
   Images
---------------------------------------------------- */
img {
  width: 100%;                     /* Makes the image responsive and fit the section width */
  max-width: 600px;                /* Prevents the image from becoming too large */
  display: block;                  /* Removes small inline spacing below the image */
  margin: 0 auto 20px auto;        /* Centers the image and adds space below it */
  border-radius: 6px;              /* Soft rounded corners */
  box-shadow: 0 0 10px rgba(0,0,0,0.1);  /* Soft shadow for depth */
}

/* ---------------------------------------------------
   Tables
---------------------------------------------------- */

table {
  width: 100%;                     /* Makes the table stretch to the container width */
  border-collapse: collapse;       /* Removes double borders between cells */
  margin-bottom: 20px;             /* Adds space below the table */
}

th, td {
  border: 1px solid #cccccc;       /* Light border around each cell */
  padding: 10px;                   /* Space inside cells for readability */
  text-align: left;                /* Aligns text consistently to the left */
  font-size: 16px;                 /* Clear text size */
}

th {
  background-color: #f2f2f2;       /* Light background for table headers */
  font-weight: bold;               /* Emphasizes header cells */
}



/* ---------------------------------------------------
   Forms
---------------------------------------------------- */

/* Form Structure */
form {
  margin-bottom: 20px;               /* Space below the form */
}

/* Labels */
form label {
  display: block;                    /* Places each label on its own line */
  margin-bottom: 6px;                /* Small spacing under the label */
  font-weight: bold;                 /* Makes labels clear and readable */
}

/* Text Inputs and Textarea */
form input,
form textarea {
  width: 100%;                       /* Full width inputs */
  padding: 10px;                     /* Comfortable space inside fields */
  margin-bottom: 15px;               /* Space between each field */
  border: 1px solid #cccccc;         /* Light border around fields */
  border-radius: 4px;                /* Soft rounded corners */
  font-size: 16px;                   /* Clear text size */
  box-sizing: border-box;            /* Ensures padding does not overflow width */
}

/* Textarea height */
form textarea {
  height: 120px;                     /* Default height for writing messages */
  resize: vertical;                  /* Allows vertical resizing only */
}


/* ---------------------------------------------------
   Display Property Practice
---------------------------------------------------- */

/* Base style for all example boxes */
.box {
  background-color: lightgray;   /* Light background to make boxes visible */
  padding: 10px;                 /* Space inside the box */
  margin: 5px;                   /* Space between boxes */
  border: 1px solid #000000;     /* Thin border to show box edges */
}

/* ---------------------------------------------------
   Display Property Practice
---------------------------------------------------- */

/* Hidden element */
.d-none {
  display: none;               /* Not visible and takes no space */
}

/* Inline example */
.d-inline {
  display: inline;             /* Stays on the same line */
  color: blue;                 /* Makes it easy to identify */
}

.inline-label {
  color: red;                  /* Shows continuation on the same line */
}

/* Block example */
.d-block {
  display: block;              /* Starts on a new line and full width */
  background-color: #e0e0e0;   /* Light gray to show full-width behavior */
  padding: 10px;
}

/* Inline-block example */
.d-inline-block {
  display: inline-block;       /* Behaves like a block but stays inline */
  background-color: #d5f5e3;   /* Light green for visibility */
  padding: 8px;
  margin-right: 10px;
}

.inline-block-label {
  color: purple;               /* Shows text continues on same line */
}

/* ---------------------------------------------------
   Visibility Property Practice
---------------------------------------------------- */

.visible-text {
  visibility: visible;               /* Element is fully visible */
  background-color: #e8f4ff;         /* Light blue for clarity */
  padding: 8px;
}

.hidden-text {
  visibility: hidden;                /* Element becomes invisible but keeps space */
  background-color: #ffecec;         /* Background won't be seen when hidden */
  padding: 8px;
}

/* ---------------------------------------------------
   Position Property Practice
   These styles demonstrate static, relative, and
   absolute positioning using simple boxes.
---------------------------------------------------- */

/* Shared box styling for all examples */
.box {
  width: 220px;                     /* Fixed width so boxes are easy to compare */
  padding: 12px;                    /* Inner spacing around the text */
  margin-bottom: 15px;              /* Space below each box */
  background-color: #f7f7f7;        /* Soft neutral background for a clean look */
  border: 1px solid #cccccc;        /* Light border to define the box edges */
  border-radius: 6px;               /* Slightly rounded corners */
}

/* Static positioning (default behavior) */
.static-box {
  position: static;                 /* Uses the normal flow of the page */
  /* No top/left values are used here because static elements do not respond to them */
}

/* Relative positioning */
.relative-box {
  position: relative;               /* Keeps original space but allows shifting */
  top: 10px;                        /* Moves the box 10px down from its normal position */
  left: 10px;                       /* Moves the box 10px to the right */
  background-color: #e3f2fd;        /* Light blue to make this box stand out */
}

/* Container for the absolute positioning example */
.absolute-container {
  position: relative;               /* Creates a reference frame for the absolute box */
  height: 120px;                    /* Fixed height so the box has room to move inside */
  background-color: #fafafa;        /* Very light background for contrast */
  border: 1px dashed #cccccc;       /* Dashed border to show the container boundary */
  margin-bottom: 20px;              /* Space below the container */
  border-radius: 6px;               /* Rounded corners for a consistent style */
}

/* Absolute positioning */
.absolute-box {
  position: absolute;               /* Removed from normal flow and placed precisely */
  top: 20px;                        /* Distance from the top of the container */
  right: 20px;                      /* Distance from the right edge of the container */
  background-color: #fdebd0;        /* Soft peach color to highlight this box */
}

/* ---------------------------------------------------
   Transitions and Transforms Practice
---------------------------------------------------- */

/* Base style for the practice box */
.transform-box {
  background-color: #eaeaea;        /* Light gray background to make the box visible */
  width: 200px;                     /* Sets the width of the box */
  padding: 20px;                    /* Adds space inside the box around the text */
  text-align: center;               /* Centers the text horizontally */
  border-radius: 6px;               /* Soft rounded corners */
  margin-bottom: 20px;              /* Space below the box to separate it from other content */

  /* Transition explanation:
     The transition property makes any visual change animate smoothly.
     "all" means every changed property is animated.
     "0.4s" sets the duration to 0.4 seconds.
     "ease" defines a smooth acceleration and deceleration. */
  transition: all 0.4s ease;
}

/* Hover state that activates the animation */
.transform-box:hover {
  background-color: #cde8ff;        /* Changes the background color when hovering */
  
  /* Transform explanation:
     scale(1.1) enlarges the box by 10 percent.
     rotate(3deg) tilts the box by 3 degrees.
     Both effects happen together because of the transition rule above. */
  transform: scale(1.1) rotate(3deg);
}

/* ---------------------------------------------------
   Animation Practice
---------------------------------------------------- */

/* Base style for the animated box */
.animate-box {
  background-color: #eaeaea;       /* Light background */
  width: 200px;                    /* Box width */
  padding: 20px;                   /* Inner spacing */
  margin-bottom: 20px;             /* Space below the box */
  text-align: center;              /* Centers text */
  border-radius: 6px;              /* Soft edges */

  /* Apply the animation */
  animation: pulse 2s ease-in-out infinite;
  /* pulse = animation name (defined below)
     2s = duration
     ease-in-out = smooth start/end
     infinite = repeats forever */
}

/* Keyframes: define the animation steps */
@keyframes pulse {
  0% {
    transform: scale(1);
    background-color: #eaeaea;
  }
  50% {
    transform: scale(1.1);
    background-color: #d6efff;
  }
  100% {
    transform: scale(1);
    background-color: #eaeaea;
  }
}

/* ---------------------------------------------------
   Flexbox Practice
---------------------------------------------------- */

/* Flex container: controls the layout of the items */
.flex-container {
  display: flex;          /* Activates Flexbox layout */
  gap: 20px;              /* Space between the items */
  justify-content: center;/* Centers the items horizontally */
  margin-bottom: 20px;    /* Space below the group of boxes */
}

/* Flex items: the boxes inside the container */
.flex-item {
  background-color: #eaeaea;  /* Light background for visibility */
  padding: 20px;              /* Inner spacing */
  border-radius: 6px;         /* Rounded corners */
  flex: 1;                    /* All items grow evenly */
  text-align: center;         /* Centers the text inside each box */
}

/* ---------------------------------------------------
   Flexbox Alignment Options
---------------------------------------------------- */

/* Flex container demonstrating alignment */
.flex-align-container {
  display: flex;                 /* Activates Flexbox */
  height: 150px;                 /* Gives vertical space to show alignment */
  gap: 20px;                     /* Space between items */
  justify-content: space-around; /* Horizontal alignment */
  align-items: center;           /* Vertical alignment */
  background-color: #f5f5f5;     /* Light background to show container area */
  margin-bottom: 20px;           /* Space below the section */
  padding: 10px;                 /* Inner spacing */
}

/* Flex items */
.align-item {
  background-color: #eaeaea;     /* Box color */
  padding: 20px;                 /* Inner spacing */
  border-radius: 6px;            /* Rounded corners */
  text-align: center;            /* Center text */
  flex: 0 0 100px;               /* Fixed width for all boxes */
}

/* ---------------------------------------------------
   CSS Grid Practice
---------------------------------------------------- */
/* Grid container */
.grid-container {
  display: grid;                     /* Activates CSS Grid */
  grid-template-columns: repeat(2, 1fr); 
  /* Creates 2 equal-width columns */
  
  gap: 20px;                         /* Space between grid items */
  margin-bottom: 20px;               /* Space below the grid */
  padding: 10px;                     /* Inner spacing */
  background-color: #f5f5f5;         /* Light background for visibility */
}

/* Grid items */
.grid-item {
  background-color: #eaeaea;         /* Light background */
  padding: 20px;                     /* Space inside the box */
  text-align: center;                /* Centers the number */
  border-radius: 6px;                /* Rounded edges */
  font-size: 20px;                   /* Larger text */
  font-weight: bold;                 /* Makes the number stand out */
}

/* ---------------------------------------------------
   Footer
   The <footer> usually contains copyright info or
   small text at the bottom of the page. These rules
   style the footer to match the header.
---------------------------------------------------- */
/* Footer */
footer {
  background-color: #eaeaea;       /* Light gray background similar to the header */
  text-align: center;              /* Centers all footer content */
  padding: 10px 0;                 /* Adds spacing inside the footer */
  margin-top: 40px;                /* Creates space between the footer and main content */
  color: #000000;                  /* Ensures footer text is readable */
  border-top: 1px solid #dcdcdc;   /* Thin line to visually separate footer from content */
}

footer p {
  margin: 0;                       /* Removes default paragraph spacing */
  font-size: 14px;                 /* Smaller text appropriate for footer content */
}