How do I change the corners of the code output to match the background?

When I render the revealjs document, the code output div/ section has the corners which are not the same background color as the output (see attached image with red arrows). Can this be fixed to match the output background?

Revealjs code:

---
title: "Numpy in python"
format: 
  revealjs:
    theme: theme.scss
jupyter: python3
highlight-style: "dracula"
execute: 
  echo: true
---

## Creating 1D arrays from lists

```{python}
import numpy as np
data = [1, 2, 3, 4]
array_1d = np.array(data)
print(array_1d)
```

theme.scss file contents:

/*-- scss:defaults --*/

@font-face {
    font-family: 'FiraCode';
    src: url('../../../../../fonts/FiraCode-Medium.woff2') format('woff2'),
         url('../../../../../fonts/FiraCode-Medium.woff') format('woff');
}

$font-family-monospace: 'FiraCode';

/*-- scss:rules --*/

.reveal pre code {
  background-color: #F2F0EF;
  color: #000;
  border-radius: 10px;
  font-family: "FiraCode";
  font-weight: "Regular";
}

.reveal div.sourceCode {
  border: none;
  border-radius: 10px;
  margin-bottom: 10px !important;
}

.reveal div.sourceCode pre code {
  padding: 25px;
}

These did the job. Thanks to Mickaël Canouil for his solution below and Jan for his solution above.

.reveal pre {
    background-color: transparent;
}