> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.poool.fr/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Customize the countdown in CSS

## Customizing the countdown with CSS

The countdown can be fully customized using CSS.
The goal is to let you easily adjust its appearance (size, colors, spacing, borders, etc.) while keeping a stable base structure.

## Base CSS structure

Here is a guided CSS structure you can use as a starting point.
Each section corresponds to a specific part of the component.

### 1. Global container

The main container wraps the entire countdown.
```
.p3-countdown {
  /* Global background */
  /* background: */

  /* Global inner spacing */
  /* padding: */

  /* Spacing between blocks (Hours / Minutes / Seconds) */
  /* gap: */
}
```

### 2. Blocks (hours / minutes / seconds)

Each countdown unit is contained in a block.
```
.p3-countdown .unit {
  /* Block background */
  /* background: */

  /* Inner spacing */
  /* padding: */
}
```

### 3. Numbers (00, 12, etc.)

This section controls the display of the digits.

```
.p3-countdown .unit h3 {
  /* Font size for numbers */
  /* font-size: */

  /* Number color */
  /* color: */

  /* Line spacing */
  /* line-height: */
}
```

### 4. Labels (hours / minutes / seconds)

The labels under the numbers can also be styled.

```
.p3-countdown .unit .secondary {
  /* Font size for labels */
  /* font-size: */

  /* Text color */
  /* color: */
}
```

## Example of applied adjustments

Here is an example of CSS adjustments used to improve the overall design of the countdown, including an automatic “:” separator between blocks to improve readability.

```
.p3-countdown {
  gap: 30px;
}

.p3-countdown .unit {
  position: relative;
}

.p3-countdown h3.junipero {
  line-height: 33px;
}

.p3-countdown .unit:not(:last-child)::after {
  content: ":";
  position: absolute;
  right: -18px;
  top: 45%;
  transform: translateY(-50%);
  font-size: 24px;
}
```

## Best practices

For a clean and consistent design:
* keep contrast simple for better readability
* avoid overloading blocks with too many visual effects
* test responsiveness on mobile devices