### Basic Grid Container Setup

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/container-query-solutions-with-css-grid-and-flexbox.md

Sets up a CSS Grid container with a defined gap between grid items. This is the foundational style for the grid solution.

```scss
.grid {
  display: grid;
  gap: 1rem;
}
```

--------------------------------

### Hero #3 Demo with Clamp

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/3-popular-website-heroes-created-with-css-grid-layout.md

This example showcases a hero section with a paragraph that shrinks proportionally to the viewport size using the `clamp()` CSS function.

```html
<div class="hero hero-3">
  <div class="hero-content">
    <h1>The Future of Web Design</h1>
    <p>Discover innovative techniques and best practices for building modern, responsive websites.</p>
    <a href="#" class="cta-button">Learn More</a>
  </div>
</div>
```

```css
.hero-3 p {
  font-size: clamp(1rem, 1rem + 1.5vw, 2rem);
  line-height: 1.6;
  margin-bottom: 2rem;
}
```

--------------------------------

### Example of Compounding `em` Units in Nested Lists

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/generating-font-size-css-rules-and-creating-a-fluid-type-scale.md

This example demonstrates how `font-size` set in `em` can compound from parent to child elements, leading to unexpected sizing in nested lists.

```html
<ul class="list-em">
  <li>Item 1</li>
  <li>Item 2
    <ul class="list-em">
      <li>Item 2.1</li>
      <li>Item 2.2
        <ul class="list-em">
          <li>Item 2.2.1</li>
          <li>Item 2.2.2</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>
```

--------------------------------

### Bootstrap Grid Example

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/container-query-solutions-with-css-grid-and-flexbox.md

Illustrates the basic usage of Bootstrap's grid system for creating equal-width columns. These columns adjust based on viewport width, not container width.

```html
<div class="container">
  <div class="row">
    <div class="col-sm">One of three columns</div>
    <div class="col-sm">One of three columns</div>
    <div class="col-sm">One of three columns</div>
  </div>
</div>
```

--------------------------------

### CSS Box Model Example

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/guide-to-advanced-css-selectors-part-one.md

Demonstrates how box-sizing: border-box affects element dimensions. The .box element will be exactly 200px wide, including its padding.

```css
.box {
  width: 200px;
  padding: 10px;
}
```

--------------------------------

### List Item Grid and Typography Setup

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/totally-custom-list-styles.md

Styles individual list items using CSS Grid, creating a two-column layout (one for the bullet, one for content) and applying base typography.

```css
li {
  display: grid;
  grid-template-columns: 0 1fr;
  gap: 1.75em;
  align-items: start;
  font-size: 1.5rem;
  line-height: 1.25;
}
```

--------------------------------

### Base List CSS Reset and Grid Setup

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/totally-custom-list-styles.md

Resets default list styles and configures `ul` and `ol` elements to use CSS Grid for layout with a defined gap between items.

```css
ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}
```

--------------------------------

### CSS Grid Setup for Hero Section

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/3-popular-website-heroes-created-with-css-grid-layout.md

This CSS sets up the header as a grid container and defines a single named grid area called 'hero'. This is the initial step in using CSS Grid for layout.

```scss
header {
  display: grid;
  grid-template-areas: "hero";
}
```

--------------------------------

### CSS Specificity Example

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/guide-to-advanced-css-selectors-part-one.md

Demonstrates how CSS specificity determines which style rule applies when multiple rules target the same element. The selector with the highest specificity wins.

```html
<div id="specific">
  <span class="item">Item</span>
</div>
```

```css
#specific .item {
  color: red;
}

span.item {
  color: green;
}

.item {
  color: blue;
}
```

--------------------------------

### CSS Grid for Fixed Columns Per Row

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/equal-height-elements-flexbox-vs-grid.md

Define a maximum number of columns per row using `grid-template-columns` with `repeat()`. This example sets up 3 columns of equal width.

```css
&.col-3 {
  gap: $col_gap;
  grid-template-columns: repeat(3, 1fr);
}
```

--------------------------------

### HTML List with Flexbox Auto Width Items

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/container-query-solutions-with-css-grid-and-flexbox.md

An example of an HTML list where specific items are designated with `flex--auto` to control their width behavior within a flex container.

```html
<ul class="list-unstyled" style="--flex-min: 8rem;">
  <li class="flex">
    <strong class="flex--auto">Ice Cream</strong> <span>Butter Pecan</span>
  </li>
  <li class="flex">
    <strong class="flex--auto">Musical Artist</strong>
    <span>Justin Timberlake</span>
  </li>
  <li class="flex">
    <strong class="flex--auto">Painter</strong> <span>Vincent Van Gogh</span>
  </li>
</ul>
```

--------------------------------

### Child Combinator Example: Direct Descendant

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/guide-to-advanced-css-selectors-part-one.md

Demonstrates how the child combinator selects only direct child elements. Use when you need to style immediate children and avoid deeper descendants.

```html
<article>
  <p>Hello world</p>
</article>
```

--------------------------------

### CSS for `background-size: cover` Image

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/css-only-full-width-responsive-images-2-ways.md

Apply this CSS to create a responsive image effect using `background-size: cover`. The `padding-bottom` property is used to maintain a specific aspect ratio (16:9 in this example).

```css
.card__img {
  background-size: cover;
  background-position: center;
  // 16:9 ratio
  padding-bottom: 62.5%;
}
```

--------------------------------

### Full CSS-Only Accessible Dropdown Navigation Menu

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/css-only-accessible-dropdown-navigation-menu.md

A complete example of a CSS-only accessible dropdown navigation menu, including styling for links, focus states, and sticky positioning.

```html
<div class="dropdown">
  <button class="dropdown__title">Menu</button>
  <ul class="dropdown__menu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</div>
```

--------------------------------

### General Sibling Combinator Example: Selecting Following Images

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/guide-to-advanced-css-selectors-part-one.md

Selects all image elements that appear after a paragraph element, provided they share the same parent. Useful for styling related content that follows a specific element.

```html
<article>
  <p>Paragraph</p>
  <h2>Headline 2</h2>
  <img src="img.png" alt="Image" />
  <h3>Headline 3</h3>
  <img src="img.png" alt="Image" />
</article>
```

--------------------------------

### Display Popular Posts on 404 Page

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/404.html

Iterates through a collection of popular posts and displays their titles, URLs, and descriptions. This is useful for guiding users to relevant content when they land on a 404 page.

```html
{% for post in collections.popularPosts %}*   [{{ post.data.title }}]({{ post.url }})
    
    {{ post.data.description | safe }}
    
{% endfor %}
```

--------------------------------

### Initial Navigation Container Styles

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/css-only-accessible-dropdown-navigation-menu.md

Sets up the basic grid layout and removes default list styles for the navigation container and its lists.

```scss
nav {
  background-color: #eee;
  padding: 0 1rem;
  display: grid;
  place-items: center;

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;

    li {
      padding: 0;
    }
  }
}
```

--------------------------------

### Initialize Hero Wrapper as Grid Container

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/3-popular-website-heroes-created-with-css-grid-layout.md

Sets the hero wrapper to span the full viewport width and establishes it as a grid container.

```scss
.hero__wrapper {
  width: 100vw;
  display: grid;
}
```

--------------------------------

### Child Combinator Example: Not Selected

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/guide-to-advanced-css-selectors-part-one.md

Illustrates a scenario where the child combinator does not select elements due to intermediate nesting. This highlights the specificity of direct parent-child relationships.

```html
<article>
  <blockquote>
    <p>Hello world</p>
  </blockquote>
</article>
```

--------------------------------

### Apply Size Styles to Buttons

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/css-button-styling-guide.md

Sets padding, minimum width, and minimum height for buttons. Ensures consistent sizing and touch target accessibility.

```scss
a.button,
button.button {
  // ... existing styles
  padding: 0.25em 0.75em;
  min-width: 10ch;
  min-height: 44px;
}
```

--------------------------------

### Basic CSS Triangle with Borders

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/pure-css-shapes-3-ways.md

Illustrates how to create four triangles using different border colors on a zero-width, zero-height element. Useful for understanding the fundamental border-triangle mechanism.

```css
.triangle {
  border: 10px solid blue;
  border-right-color: red;
  border-bottom-color: black;
  border-left-color: green;
}
```

--------------------------------

### HTML Structure for Two-Column Hero

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/3-popular-website-heroes-created-with-css-grid-layout.md

This HTML sets up the content and form sections within a wrapper for the hero component.

```html
<header>
  <div class="hero__wrapper">
    <div class="hero__content">
      <h1>Product</h1>
      <p>You really need this product, so hurry and buy it today!</p>
    </div>
    <div class="hero__form">
      <h2>Subscribe to Our Updates</h2>
      <form action="/">
        <label for="email">Enter your email:</label>
        <input id="email" name="email" type="email" />
        <button class="button" type="submit">Subscribe</button>
      </form>
    </div>
  </div>
</header>
```

--------------------------------

### General Sibling Combinator Example: Image Not Selected

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/guide-to-advanced-css-selectors-part-one.md

Shows a case where the general sibling combinator does not select an image because it precedes the target paragraph element. This emphasizes the 'following' nature of the selector.

```html
<article>
  <img src="img.png" alt="Image" />
  <p>Paragraph</p>
</article>
```

--------------------------------

### Flexbox Grid Wrapper Styles

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/solutions-to-replace-the-12-column-grid.md

Sets up padding for a flexbox grid container. This is a foundational style for the grid wrapper.

```scss
$gridGap: 2rem;

.flex-grid-wrap {
  padding: $gridGap;
}
```

--------------------------------

### Basic Content HTML Structure

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/pure-css-smooth-scroll-back-to-top.md

Sets up the semantic HTML for a page, including a header with an ID for the top anchor, main content area, and a 'back to top' link.

```html
<header id="top">Title</header>
<main>
  <article>
    <!-- long form content here -->
  </article>
  <!-- Back to Top link -->
  <div class="back-to-top-wrapper">
    <a href="#top" class="back-to-top-link" aria-label="Scroll to Top">🔝</a>
  </div>
</main>
```

--------------------------------

### HTML Structure for Lists

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/totally-custom-list-styles.md

Sets up unordered and ordered lists with the `role="list"` attribute to maintain semantics when default list styles are removed.

```html
<ul role="list">
  <li>Unordered list item</li>
  <li>Cake ice cream sweet sesame snaps dragée cupcake wafer cookie</li>
  <li>Unordered list item</li>
</ul>

<ol role="list">
  <li>Ordered list item</li>
  <li>Cake ice cream sweet sesame snaps dragée cupcake wafer cookie</li>
  <li>Ordered list item</li>
</ol>
```

--------------------------------

### Define Content Width and Spacing

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/3-popular-website-heroes-created-with-css-grid-layout.md

Sets the margin, maximum width, and minimum width for the hero content to ensure proper spacing and readability.

```scss
.hero__content {
  margin-left: 5%;
  max-width: 35%;
  min-width: 30ch;
}
```

--------------------------------

### Vendor-Prefixed :is() for Browser Compatibility

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/guide-to-advanced-css-selectors-part-two.md

Include the -webkit-any() prefix for broader browser support of :is() functionality. This should be a separate rule.

```css
:-webkit-any(header, main, footer) ;
```

--------------------------------

### Basic CSS Grid Layout

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/solutions-to-replace-the-12-column-grid.md

Establishes a 12-column CSS Grid with a defined gap. This provides a foundational structure for grid-based layouts.

```scss
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2rem;
}
```

--------------------------------

### Apply Alternating Background Colors with nth-child

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/guide-to-advanced-css-selectors-part-two.md

Use the functional notation of :nth-child to create repeating background color patterns. Define the total number of colors and use `3n + k` to select elements starting from the k-th position.

```css
li:nth-child(3n + 1) {
  background-color: rebeccapurple;
}
```

```css
li:nth-child(3n + 2) {
  background-color: darkcyan;
}
```

```css
li:nth-child(3n + 3) {
  background-color: lightskyblue;
}
```

--------------------------------

### Basic Element Styling for CSS Shapes

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/pure-css-shapes-3-ways.md

Sets up the dimensions and background repeat for an element used in CSS shape creation. Includes an optional outline for visualizing the bounding box.

```css
.triangle {
  width: 8em;
  height: 10em;
  background-repeat: no-repeat;
  /* Optional - helping us see the bounding box */
  outline: 1px solid red;
}
```

--------------------------------

### Define Base Type Size and Ratio

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/generating-font-size-css-rules-and-creating-a-fluid-type-scale.md

Set the base font size and select a ratio for scaling. The ratio can be chosen from a map or defined directly.

```scss
// Recommended starting point
$type-base-size: 1rem;

// Select by key of map, or use a custom value
$type-size-ratio: type-ratio("perfectFourth");
```

--------------------------------

### Add Transition to Dropdown Menu

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/css-only-accessible-dropdown-navigation-menu.md

Applies a transition effect to the dropdown menu for smooth animations on both opening and closing.

```scss
.dropdown__menu {
  // ... existing styles
  transition: 280ms all ease-out;
}
```

--------------------------------

### Adjust Image Width and Add Transition for Responsiveness

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/3-popular-website-heroes-created-with-css-grid-layout.md

Updates the default image width for smaller screens and adds a transition for smoother resizing. A media query adjusts the width for larger screens.

```scss
img {
  // ...existing styles
  width: 80%; // < update
  transition: 180ms width ease-in;

  @media (min-width: 60rem) {
    width: 60%;
  }
}
```

--------------------------------

### Wrapper for 'Back to Top' Link Positioning

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/pure-css-smooth-scroll-back-to-top.md

Styles a wrapper element to control the scroll track and positioning of the 'back to top' link. Use `$scrollLength` to define when the link should appear.

```scss
/* How far of a scroll travel within <main> prior to the
   link appearing */
$scrollLength: 100vh;

.back-to-top-wrapper {
  // uncomment to visualize "track"
  // outline: 1px solid red;
  position: absolute;
  top: $scrollLength;
  right: 0.25rem;
  // Optional, extends the final link into the
  // footer at the bottom of the page
  // Set to `0` to stop at the end of `main`
  bottom: -5em;
  // Required for best support in browsers not supporting `sticky`
  width: 3em;
  // Disable interaction with this element
  pointer-events: none;
}
```

--------------------------------

### Create Intrinsically Responsive Grid Columns

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/3-css-grid-techniques-to-make-you-a-grid-convert.md

Generates equal-width, responsive columns that automatically adjust to the container size. Columns drop to a new row when the container width is less than the defined breakpoint. This method is useful for layouts needing equal-width columns and can act as a container query solution.

```scss
:root {
  --grid-col-breakpoint: 15rem;
}

.grid-columns {
  grid-template-columns: repeat(
    auto-fit,
    minmax(var(--grid-col-breakpoint), 1fr)
  );
}
```

--------------------------------

### Final 'Back to Top' Link Positioning and Interaction Styles

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/pure-css-smooth-scroll-back-to-top.md

Applies final positioning styles for the 'back to top' link, including a `sticky` fallback and re-enabling pointer events. `top: calc(100vh - 5rem)` ensures it appears at the desired viewport height.

```css
.back-to-top-link {
  // `fixed` is fallback when `sticky` not supported
  position: fixed;
  // preferred positioning, requires prefixing for most support, and not supported on Safari
  // @link https://caniuse.com/#search=position%3A%20sticky
  position: sticky;
  // reinstate clicks
  pointer-events: all;
  // achieves desired positioning within the viewport
  // relative to the top of the viewport once `sticky` takes over, or always if `fixed` fallback is used
  top: calc(100vh - 5rem);

  // ... styles written earlier
}
```

--------------------------------

### CSS Triangle Pointing Up

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/pure-css-shapes-3-ways.md

Demonstrates how to create a triangle pointing upwards by adjusting border widths and colors. This method allows for directional control of the triangle's orientation.

```css
.triangle {
  border-style: solid;
  border-color: transparent;
  /* top | right | bottom | left */
  border-width: 0 7px 10px 7px;
  border-bottom-color: blue;
}
```

--------------------------------

### Position Hero Content Above Background Image

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/3-popular-website-heroes-created-with-css-grid-layout.md

Use z-index to ensure content layers correctly above a background image.

```scss
.hero__content {
  z-index: 1;
}
```

--------------------------------

### Enable Pseudo-element Rendering with CSS Grid

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/custom-select-styles-with-pure-css.md

Apply CSS Grid layout to the select container to ensure that pseudo-elements like ::after are rendered correctly by providing them with a display value similar to 'block'.

```scss
.select {
  // ...existing styles
  display: grid;
}
```

--------------------------------

### Initialize Level Size Variable

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/generating-font-size-css-rules-and-creating-a-fluid-type-scale.md

Initialize a variable to hold the font size for the current heading level. This variable will be updated within the loop.

```scss
$level-size: $type-base-size;
```

--------------------------------

### HTML for Multiple Select

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/custom-select-styles-with-pure-css.md

Demonstrates the HTML structure for a multiple select element, including the 'multiple' attribute and a specific class for styling adjustments.

```html
<label for="multi-select">Multiple Select</label>
<div class="select select--multiple">
  <select id="multi-select" multiple>
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
    <option value="Option 3">Option 3</option>
    <option value="Option 4">Option 4</option>
    <option value="Option 5">Option 5</option>
    <option value="Option length">
      Option that has too long of a value to fit
    </option>
  </select>
  <span class="focus"></span>
</div>
```

--------------------------------

### Style Hero Content for Mobile Viewport

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/3-popular-website-heroes-created-with-css-grid-layout.md

Updates margin, adds z-index for layering, sets a semi-transparent background, and applies border-radius and padding to the hero content for mobile optimization.

```scss
.hero__content {
  // ...existing styles
  margin: 1rem 0 1rem 5%; // < update
  z-index: 1;
  background-color: rgba(mix(#fff, $primary, 97%), 0.8);
  border-radius: 1rem;
  padding: 0.5rem 0.5rem 0.5rem 0;
}
```

--------------------------------

### Add Padding to Hero Wrapper

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/3-popular-website-heroes-created-with-css-grid-layout.md

Applies viewport-based padding to the hero wrapper for consistent spacing across different screen sizes.

```scss
.hero__wrapper {
  // ...existing styles
  padding: 10vmin 2rem;
}
```

--------------------------------

### Base Dropdown Menu Styles

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/css-only-accessible-dropdown-navigation-menu.md

Styles the dropdown menu with a background, border-radius, shadow, padding, and sets link styles within the menu.

```scss
.dropdown {
  position: relative;

  .dropdown__menu {
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 0.15em 0.25em rgba(black, 0.25);
    padding: 0.5em 0;
    min-width: 15ch;

    a {
      color: #444;
      display: block;
      padding: 0.5em;
    }
  }
}
```

--------------------------------

### Responsive Grid Columns and Gap

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/3-popular-website-heroes-created-with-css-grid-layout.md

Defines intrinsically responsive columns using `repeat(auto-fit, minmax(30ch, auto))` and sets a gap between grid items.

```scss
.hero__wrapper {
  // ...existing styles
  grid-template-columns: repeat(auto-fit, minmax(30ch, auto));
  gap: 2rem;
}
```

--------------------------------

### Apply Text Styles to Buttons

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/css-button-styling-guide.md

Sets text alignment and line height for buttons. Ensures text is centered and maintains appropriate spacing.

```scss
a.button,
button.button {
  // ... existing styles
  text-align: center;
  line-height: 1.1;
}
```

--------------------------------

### HTML Input with Inputmode and Autocomplete Attributes

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/custom-css-styles-for-form-inputs-and-textareas.md

Use `inputmode` to suggest an appropriate keyboard for the expected input and `autocomplete` to assist with form filling, especially for one-time codes.

```html
<input type="email" inputmode="email" autocomplete="username" spellcheck="false" />
<input type="password" autocomplete="current-password" />
<input type="text" inputmode="verbatim" autocomplete="one-time-code" />
```

--------------------------------

### Basic HTML for Input and Textarea

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/custom-css-styles-for-form-inputs-and-textareas.md

This HTML structure provides a label and an input field or textarea, both sharing a common 'input' class for simplified CSS targeting. Ensure the 'for' attribute on the label matches the 'id' of the input.

```html
<label for="text-input">Text Input</label>
<input class="input" id="text-input" type="text" />

<label for="textarea">Textarea</label>
<textarea class="input" id="textarea"></textarea>
```

--------------------------------

### Basic Element Styling for CSS Triangle

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/pure-css-shapes-3-ways.md

Sets the initial dimensions and background color for an element that will be styled into a triangle.

```css
.triangle {
  width: 16px;
  height: 20px;
  background-color: blue;
}
```

--------------------------------

### HTML for `background-size: cover` Image

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/css-only-full-width-responsive-images-2-ways.md

Use this HTML structure when applying the `background-size: cover` technique. The image is set via the `style` attribute, and an `aria-label` replaces the `alt` attribute.

```html
<article class="card">
  <div
    class="card__img"
    aria-label="Preview of Whizzbang Widget"
    style="background-image: url(https://placeimg.com/320/240/tech)"
  ></div>
  <div class="card__content">
    <h3>Whizzbang Widget SuperDeluxe</h3>
    <p>
      Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream biscuit marzipan. Macaroon
      pie sesame snaps jelly-o.
    </p>
    <a href="#" class="button">Add to Cart</a>
  </div>
</article>
```

--------------------------------

### Apply Visual Styles to Buttons

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/css-button-styling-guide.md

Sets background color, text color, border radius, and box shadow for buttons. Adjust these visual properties to match your design.

```scss
$btnColor: #3e68ff;

a.button,
button.button {
  // ... existing styles
  background-color: $btnColor;
  color: #fff;
  border-radius: 8px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.18);
}
```

--------------------------------

### Basic CSS Outline Syntax

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/the-3-css-methods-for-adding-element-borders.md

Sets the style for an element's outline. The default width is 'medium' and color is inherited.

```css
outline: solid;
```

--------------------------------

### CSS Grid for Responsive Columns

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/solutions-to-replace-the-12-column-grid.md

Implements a responsive grid layout using CSS Grid. It automatically adjusts the number of columns based on available space and a minimum column width.

```scss
$minColWidth: 15rem;

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax($minColWidth, 1fr));
  gap: 2rem;

  & + .grid {
    margin-top: $gridGap;
  }
}
```

--------------------------------

### Generate Font Sizes with Sass Loop

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/generating-font-size-css-rules-and-creating-a-fluid-type-scale.md

Iterate through the defined heading levels, calculate the font size by multiplying the current level size by the ratio, and output the CSS rule.

```scss
@each $level in $type-levels {
  $level-size: $level-size * $type-size-ratio;

  // Output heading styles
  // Assign to element and create utility class
  h#{$level} {
    font-size: $level-size;
  }
}
```

--------------------------------

### Basic Circle with border-radius

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/expanded-use-of-box-shadow-and-border-radius.md

Use `border-radius: 50%` to make a square element appear as a circle.

```css
border-radius: 50%;
```

--------------------------------

### Responsive Grid Columns with auto-fit and minmax

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/container-query-solutions-with-css-grid-and-flexbox.md

Defines responsive columns for a grid container. It uses `repeat(auto-fit, minmax(20ch, 1fr))` to automatically adjust the number and width of columns based on the container's available space and a minimum column width of 20 characters.

```css
grid-template-columns: repeat(auto-fit, minmax(20ch, 1fr));
```

--------------------------------

### Reposition Pseudo-elements with place-self

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/3-popular-website-heroes-created-with-css-grid-layout.md

Use place-self to individually position pseudo-elements within the grid, overriding the parent's grid alignment.

```scss
&::before {
  // ...existing styles
  place-self: start;
}

&::after {
  // ...existing styles
  place-self: end;
}
```

--------------------------------

### Basic 'Back to Top' Link Styling

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/pure-css-smooth-scroll-back-to-top.md

Styles the 'back to top' link to appear as a round button. Useful for creating a visually distinct clickable element.

```css
.back-to-top-link {
  display: inline-block;
  text-decoration: none;
  font-size: 2rem;
  line-height: 3rem;
  text-align: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: #d6e3f0;
  /* emoji don't behave like regular fonts
     so this helped position it correctly */
  padding: 0.25rem;
}
```

--------------------------------

### HTML for `object-fit: cover` Image

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/css-only-full-width-responsive-images-2-ways.md

This HTML structure is used with the `object-fit: cover` technique. The image is a standard `img` tag with its `src` attribute, and an `alt` attribute is used for accessibility.

```html
<article class="card">
  <img
    class="card__img"
    alt="Preview of Whizzbang Widget"
    src="https://placeimg.com/320/240/tech"
  />
  <div class="card__content">
    <h3>Whizzbang Widget SuperDeluxe</h3>
    <p>
      Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream biscuit marzipan. Macaroon
      pie sesame snaps jelly-o.
    </p>
    <a href="#" class="button">Add to Cart</a>
  </div>
</article>
```

--------------------------------

### Grid Template Columns with Min-Content

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/container-query-solutions-with-css-grid-and-flexbox.md

Attempts to use `min-content` with `repeat(auto-fit, ...)` for variable width columns. This is prohibited by the CSS Grid specification.

```scss
grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr));
```

--------------------------------

### Create Custom Select Arrow with Clip-Path

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/custom-select-styles-with-pure-css.md

Use the ::after pseudo-element and clip-path to create a triangle shape for the select dropdown arrow. This method allows for dynamic coloring using CSS variables.

```scss
.select::after {
  content: "";
  width: 0.8em;
  height: 0.5em;
  background-color: var(--select-arrow);
  clip-path: polygon(100% 0%, 0 0%, 50% 100%);
}
```

--------------------------------

### Basic Flexbox Grid Item Behavior

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/solutions-to-replace-the-12-column-grid.md

Defines the core flexbox properties for grid items to achieve equal-width behavior. Items grow, shrink, and initially take up 100% of the available space.

```scss
.flex-grid {
  display: flex;

  & > * {
    flex: 0 1 100%;

    &:not(:first-child) {
      margin-left: $gridGap;
    }
  }
}
```

--------------------------------

### Link and Dropdown Title Styles

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/css-only-accessible-dropdown-navigation-menu.md

Applies general link styles and specific padding for top-level links and dropdown titles, while also clearing native button styles.

```scss
// Clear native browser button styles
.dropdown__title {
  background-color: transparent;
  border: none;
  font-family: inherit;
}

nav {
  > ul {
    > li {
      // All links contained in the li
      a,
      .dropdown__title {
        text-decoration: none;
        text-align: center;
        display: inline-block;
        color: blue;
        font-size: 1.125rem;
      }

      // Only direct links contained in the li
      > a,
      .dropdown__title {
        padding: 1rem 0.5rem;
      }
    }
  }
}
```

--------------------------------

### Flexbox Albatross Base Styles

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/container-query-solutions-with-css-grid-and-flexbox.md

Initializes a flex container with wrapping enabled. This is crucial for the breakpoint effect to occur.

```scss
.flexbox {
  display: flex;
  flex-wrap: wrap;
}
```

--------------------------------

### CSS: Multi-column Layout with Grid

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/totally-custom-list-styles.md

Configures ordered and unordered lists to display in a multi-column layout using CSS Grid, with adjustable column width and spacing.

```css
ol,
ul {
  display: grid;
  /* adjust the `min` value to your context */
  grid-template-columns: repeat(auto-fill, minmax(22ch, 1fr));
  gap: 1rem;
}
```

--------------------------------

### Generate Fluid Font Size with clamp()

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/generating-font-size-css-rules-and-creating-a-fluid-type-scale.md

Applies the CSS clamp() function to set a fluid font size. It uses the calculated minimum size, the scaler with viewport units, and the original level size as the maximum. This provides a fallback for browsers not supporting clamp().

```scss
font-size: clamp(
        #{$fluid-min}rem,
        #{$fluid-scaler} + 1rem,
        #{$level-size}
      );
```

--------------------------------

### Control Image Sizing with object-fit

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/3-popular-website-heroes-created-with-css-grid-layout.md

Use object-fit: cover to make the image span the full width and height of its container.

```scss
img {
  object-fit: cover;
  height: min(60vh, 600px);
  width: 100%;
}
```

--------------------------------

### Apply Color Screen to Background Image

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/3-popular-website-heroes-created-with-css-grid-layout.md

Add a semi-transparent background color to the header to create a color screen effect over the image.

```scss
$primary: #3c87b3;

header {
  // ...existing styles
  background-color: rgba($primary, 0.7);
}
```

--------------------------------

### Flex Item Sizing with Shorthand Property

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/container-query-solutions-with-css-grid-and-flexbox.md

Utilize the `flex` shorthand property with a computed variable for `flex-basis`. This allows items to grow and shrink, wrapping to new rows when the available space is insufficient for the defined `flex-basis`.

```css
flex-grow: 1;
flex-shrink: 1;
flex-basis: 20ch;
```

--------------------------------

### Base HTML for Hero Section

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/3-popular-website-heroes-created-with-css-grid-layout.md

This is the foundational HTML structure for a website hero section. It includes a header containing content like a title, paragraph, and a call-to-action button, along with an image.

```html
<header>
  <div class="hero__content">
    <h1>Product</h1>
    <p>You really need this product, so hurry and buy it today!</p>
    <a href="#" class="button">Buy Now</a>
  </div>
  <img src="http://placecorgi.com/600" alt="" />
</header>
```

--------------------------------

### Scope Layout Styles with :is()

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/guide-to-advanced-css-selectors-part-two.md

Apply layout styles more succinctly to major page sections using the :is() pseudo-class.

```css
:is(header, main, footer) ;
```

--------------------------------

### Custom Ordered List Marker with ::marker and Counter

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/totally-custom-list-styles.md

Style ordered lists with custom markers using `counter()` and `::marker`, allowing for custom fonts and colors defined via CSS variables.

```css
ol {
  --marker-color: purple;
}

li::marker {
  content: counter(list-item);
  font-family: "Indie Flower";
  font-size: 1.5em;
  color: var(--marker-color);
}
```

--------------------------------

### SCSS for Icon Dimensions

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/icon-button-css-styling-guide.md

Apply dimensions to the icon within the button using the 'em' unit for scalability relative to the button's font size.

```scss
.button__icon {
  width: 0.9em;
  height: 0.9em;
}
```

--------------------------------

### Apply Focus State Styles

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/custom-css-styles-for-form-inputs-and-textareas.md

Defines styles for the focused state of inputs and textareas, including changing the border color and adding a box-shadow for highlighting. Ensure sufficient contrast between focused and unfocused states.

```css
.input:focus {
  border-color: hsl(var(--input-focus-h), var(--input-focus-s), var(--input-focus-l));
}
```

```css
.input:focus {
  /* ...existing styles */
  box-shadow: 0 0 0 3px hsla(var(--input-focus-h), var(--input-focus-s), calc(var(--input-focus-l) +
          40%), 0.8);
}
```

```css
.input:focus {
  outline: 3px solid transparent;
}
```

--------------------------------

### Control Image Sizing and Positioning

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/3-popular-website-heroes-created-with-css-grid-layout.md

Uses object-fit and object-position to control how the image scales and where its content is aligned within its container. Sets a minimum height based on viewport units or a fixed pixel value.

```scss
img {
  object-fit: cover;
  object-position: 5vw -5vmin;
  height: min(65vh, 600px);
  width: 60%;
}
```

--------------------------------

### Apply Inline-Flex Display and Alignment

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/css-button-styling-guide.md

Sets the display to `inline-flex` for both link and button elements with the `button` class, enabling flexbox alignment properties for centering content vertically and horizontally.

```scss
a.button,
button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
```

--------------------------------

### CSS for `object-fit: cover` Image

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/css-only-full-width-responsive-images-2-ways.md

Use this CSS to implement responsive images with `object-fit: cover`. The `height` property constrains the image, and `object-fit: cover` ensures it fills the space while maintaining its aspect ratio.

```css
.card__img {
  object-fit: cover;
  height: 30vh;
}
```

--------------------------------

### Responsive Flexbox Grid with Wrapping and Margin Adjustments

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/solutions-to-replace-the-12-column-grid.md

Adapts the flexbox grid for small viewports by enabling wrapping and changing the margin from left to right. Includes styles for larger viewports to maintain vertical spacing between grid groups.

```scss
.flex-grid {
  // ...existing styles
  @media (max-width: ($minColWidth * 3)) {
    flex-wrap: wrap;

    & > * {
      margin: 2rem 0 0 !important;
    }
  }

  @media (min-width: ($minColWidth * 3)) {
    & + .flex-grid {
      margin-top: $gridGap;
    }
  }
}
```

--------------------------------

### Calculate Optimal Line Height

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/generating-font-size-css-rules-and-creating-a-fluid-type-scale.md

Use a calculated line-height that scales with fluid typography. The `ex` unit and buffer pixels help achieve appropriate spacing.

```scss
line-height: calc(2px + 2ex + 2px);
```

--------------------------------

### Styling the First Line of a Paragraph

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/guide-to-advanced-css-selectors-part-two.md

Applies bold font weight, increased font size, and a specific color to the first line of the first paragraph element within an article. This styling is responsive to viewport changes.

```css
article p:first-of-type:first-line {
  font-weight: bold;
  font-size: 1.1em;
  color: darkcyan;
}
```

--------------------------------

### Basic Custom Select Box Styles

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/custom-select-styles-with-pure-css.md

Apply core styles to the select wrapper div to control its size, border, padding, font, and background. These styles define the visual appearance of the custom select element.

```scss
.select {
  width: 100%;
  min-width: 15ch;
  max-width: 30ch;
  border: 1px solid var(--select-border);
  border-radius: 0.25em;
  padding: 0.25em 0.5em;
  font-size: 1.25rem;
  cursor: pointer;
  line-height: 1.1;
  background-color: #fff;
  background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
}
```

--------------------------------

### CSS Box-Shadow for Image Color Screen

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/expanded-use-of-box-shadow-and-border-radius.md

Use an inset box-shadow with a large viewport unit spread to create a translucent color overlay on images, improving text contrast and visual consistency. This technique avoids extra pseudo-elements.

```css
box-shadow: inset 0 0 0 100vmax rgba(102, 76, 202, 0.65);
```

--------------------------------

### Select Typography Elements with :is()

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/guide-to-advanced-css-selectors-part-two.md

Use the :is() pseudo-class to compactly select a group of typography elements like headings.

```css
:is(h1, h2, h3, h4) ;
```

--------------------------------

### Button Focus State with Box Shadow

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/css-button-styling-guide.md

Replaces the default browser outline with a custom box-shadow for focus states, ensuring accessibility without layout shifts. This is useful for keyboard navigation.

```scss
a.button,
button.button {
  // ... existing styles

  // ...&:hover

  &:focus {
    outline-style: solid;
    outline-color: transparent;
    box-shadow: 0 0 0 4px scale-color($btnColor, $lightness: -40%);
  }
}
```

--------------------------------

### Box-Sizing Reset

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/css-button-styling-guide.md

A universal `box-sizing` reset to ensure that padding and borders do not increase the element's total width or height beyond the specified dimensions.

```scss
* {
  box-sizing: border-box;
}
```

--------------------------------

### Hide Dropdown Menu by Default

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/css-only-accessible-dropdown-navigation-menu.md

Sets the initial state of the dropdown menu to be hidden with transitions. Uses `transform` for a 3D rotation effect and `opacity` for a fade, combined with `visibility: hidden` for screen reader accessibility.

```scss
.dropdown__menu {
  // ... existing styles
  transform: rotateX(-90deg) translateX(-50%);
  transform-origin: top center;
  opacity: 0.3;
}
```

--------------------------------

### Deconstructed Pancake Technique for Flexbox Breakpoints

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/container-query-solutions-with-css-grid-and-flexbox.md

Implement the 'Deconstructed Pancake' technique for uniform flex item breakpoints using `flex-basis`. This method allows items to wrap independently based on their individual minimum width.

```scss
:root {
  --pancake-min: 20ch;
}

.flex-pancake {
  display: flex;
  flex-wrap: wrap;
  margin: 1rem -0.5rem;

  > * {
    flex: 1 1 var(--pancake-min);
    margin: 0.5rem;
  }
}
```

--------------------------------

### Style Text Selection with ::selection

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/guide-to-advanced-css-selectors-part-two.md

Use the ::selection pseudo-element to define custom background and text colors when a user selects text on the page. This ensures readability and consistent styling across different themes.

```css
::selection {
  background: yellow;
  color: black;
}
```

--------------------------------

### HTML for Button Link and Real Button

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/css-button-styling-guide.md

The HTML structure for a button link and a standard button element. The `javascript:;` href is used for testing link states without navigation, and the `type="button"` is specified for non-form submit buttons.

```html
<a href="javascript:;">Button Link</a>
<button type="button">Real Button</button>
```

--------------------------------

### Center Grid Items

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/3-popular-website-heroes-created-with-css-grid-layout.md

Apply place-items: center to align all direct children of the grid container to the center.

```scss
header {
  // ...existing styles
  place-items: center;
}
```

--------------------------------

### Flexbox for Fixed Columns Per Row

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/equal-height-elements-flexbox-vs-grid.md

To achieve a fixed number of columns with Flexbox, use `flex-wrap: wrap` and calculate the width of each column to fit the desired number per row, accounting for margins.

```css
$col_gap: 1rem;

.flexbox.col-3 {
  flex-wrap: wrap;

  .column {
    margin: $col_gap/2;
    max-width: calc((100% / 3) - #{$col_gap});
  }
}
```

--------------------------------

### Define Header Dimensions

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/3-popular-website-heroes-created-with-css-grid-layout.md

Set fixed height and max-height for the header element to control its size.

```scss
header {
  // ...existing styles
  height: 60vh;
  max-height: 600px;
}
```

--------------------------------

### CSS Variables for Input Theming

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/custom-css-styles-for-form-inputs-and-textareas.md

Define CSS variables for input border color and focus state HSL values. This allows for easy theming and ensures accessibility by setting a base border color and defining focus colors.

```css
:root {
  --input-border: #8b8a8b;
  --input-focus-h: 245;
  --input-focus-s: 100%;
  --input-focus-l: 42%;
}
```

--------------------------------

### Position Image Behind Header

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/3-popular-website-heroes-created-with-css-grid-layout.md

Set a negative z-index on the image to place it behind its parent container.

```scss
img {
  // ...existing styles
  z-index: -1;
}
```

--------------------------------

### Button Transition for Smooth Hover Effects

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/css-button-styling-guide.md

Adds a transition property to ensure smooth animations for hover effects. This should be applied outside the :hover rule to affect both entering and leaving the hover state.

```scss
a.button,
button.button {
  // ... existing styles

  transition: 220ms all ease-in-out;

  // ...&:hover
}
```

--------------------------------

### SCSS for Icon Spacing

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/icon-button-css-styling-guide.md

Add horizontal spacing between the icon and the button text using the 'em' unit for consistent visual separation.

```scss
.button__icon {
  margin-right: 0.5em;
}
```

--------------------------------

### CSS for Emoji Bullets using ::before Pseudo-element

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/totally-custom-list-styles.md

Uses the `::before` pseudo-element and the `attr()` function to display the emoji specified in the `data-icon` attribute as a custom bullet.

```css
ul li::before {
  content: attr(data-icon);
  /* Make slightly larger than the li font-size
  but smaller than the li gap */
  font-size: 1.25em;
}
```

--------------------------------

### Main Content Area Styling

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/pure-css-smooth-scroll-back-to-top.md

Styles the main content area to accommodate the 'back to top' link and ensure proper positioning context. `position: relative` is crucial for the absolute positioning of the link wrapper.

```scss
main {
  // leave room for the "scroll track"
  padding: 0 3rem;
  // required to make sure the `absolute` positioning of
  // the anchor wrapper is indeed `relative` to this element vs. the body
  position: relative;
  max-width: 50rem;
  margin: 2rem auto;

  // Optional, clears margin if last element is a block item
  *:last-child {
    margin-bottom: 0;
  }
}
```

--------------------------------

### General Sibling Combinator for Styling Elements After an Image

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/guide-to-advanced-css-selectors-part-one.md

Applies styles to any element that immediately follows an image within the same parent. Useful for creating consistent spacing and typography in card-like layouts.

```css
img ~ *
{
  font-size: 0.9rem;
  color: #797979;
  margin: 1rem 1rem 0;
}
```

--------------------------------

### File Input Font Size and Padding Adjustment

Source: https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/posts/custom-css-styles-for-form-inputs-and-textareas.md

Adjusts the font size and padding for file type inputs to ensure visual consistency with other form elements. This is necessary because the default file input button can appear large.

```css
input[type="file"] {
  font-size: 0.9em;
  padding-top: 0.35rem;
}
```