Applying Custom CSS

▶️ Step 1.

In your browser, right-click on the element you'd like to customize and click Inspect.

▶️ Step 2.

In the opened panel, you can refine your selection and inspect the applied CSS rules.

▶️ Step 3.

Make your customizations right here in the browser and preview the result live.

▶️ Step 4.

Open the 📄 HTML/css/main.css file and find the selector you've customized in the previous step. Mirror your customization here and save.

.icon-box__wrapper-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(1 * (120 * 1px));
  height: calc(1 * (120 * 1px));
  border-radius: 50%;
  /* border: 1px solid var(--color-borders); */
  border: 5px dotted yellow;
  transition: border-color 0.3s ease;
}