How to change the font, size and color of texts inside a tabset?

I have a Quarto document that is converted to HTML. In this document, I use the .panel-tabset class to create tabbed panels containing graphs and text produced in R. I want to adjust the font, colour, and size of these texts to set them apart from the rest of the report. How can I achieve this? I am including the .qmd code and the .css code I am using for the tabsets.

Here is the .qmd code

---
title: "Untitled"
format:
  html:
    css:
     styles.css
---

```{r include=FALSE}
library(ggplot2)
library(palmerpenguins)
```

The following graphs will show....

::: panel-tabset
## Tab1

```{r echo=FALSE}
ggplot(mtcars, aes(hp, wt)) +
  geom_point()
```

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et elementum velit. Fusce lobortis pulvinar ex quis pharetra. Aenean dapibus turpis neque, sed feugiat lacus rutrum sit amet. Praesent quis fringilla nisl. Pellentesque ac ligula mollis, mattis elit ut, consectetur diam. Maecenas tristique bibendum diam quis blandit. Suspendisse elementum maximus.

## Tab2

```{r echo = FALSE}
ggplot(penguins, aes(bill_depth_mm, body_mass_g, color = sex)) +
  geom_point()
```

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et elementum velit. Fusce lobortis pulvinar ex quis pharetra. Aenean dapibus turpis neque, sed feugiat lacus rutrum sit amet. Praesent quis fringilla nisl. Pellentesque ac ligula mollis, mattis elit ut, consectetur diam. Maecenas tristique bibendum diam quis blandit. Suspendisse elementum maximus.

## Tab3

```{r echo = FALSE}
ggplot(penguins, aes(body_mass_g, color = sex)) +
  geom_histogram()
```

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et elementum velit. Fusce lobortis pulvinar ex quis pharetra. Aenean dapibus turpis neque, sed feugiat lacus rutrum sit amet. Praesent quis fringilla nisl. Pellentesque ac ligula mollis, mattis elit ut, consectetur diam. Maecenas tristique bibendum diam quis blandit. Suspendisse elementum maximus.
:::

## Title1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et elementum velit. Fusce lobortis pulvinar ex quis pharetra. Aenean dapibus turpis neque, sed feugiat lacus rutrum sit amet. Praesent quis fringilla nisl. Pellentesque ac ligula mollis, mattis elit ut, consectetur diam. Maecenas tristique bibendum diam quis blandit. Suspendisse elementum maximus.

The .css file I use has the following:

.panel-tabset .nav-item .nav-link {
  font-size: 14px;
  font-style: bold;
  background-color: #e0e0e0;   /* fondo gris claro */
  color: #333;                 /* texto oscuro */
  border-radius: 0.25rem;      /* esquinas redondeadas */
  margin-right: 0.25rem;       /* separación entre pestañas */
}


.panel-tabset .nav-item .nav-link.active {
  background-color: #007bff !important;  /* azul vivo */
  color: #fff !important;                /* texto blanco */
}


.panel-tabset .nav-item .nav-link:hover {
  background-color: #0056b3;  /* azul más oscuro al pasar el ratón */
  color: #fff;
}

As a selector, you can use .panel-tabset > .tab-content > .tab-pane > p, e.g.

.panel-tabset > .tab-content > .tab-pane > p {
    color: red;
    font-size: 11pt;
    font-family: Georgia, serif;
}

yields