Changing the CSS of code ouput on an HTML page with Skulpt

I have the following program (using skulpt) which generates Python output in the browser on hitting "run". The output code is in the "pre" tags. I have tried various different things to apply the CSS to the executed output, but it isn't working.

This is my css

<style>
.running {
  border: 20px outset black ;
  background-color: black;    
  text-align: center;
  p: color:white;
  pre
{
    white-space: pre-wrap !important;
}   

}
</style>

This is the HTML part of the code.

<h3>Heading here</h3> 
<form> 
<textarea id="yourcode" cols="40" rows="10">
print("Hello World")
</textarea><br /> 
<button type="button" onclick="runit()">Run</button> 
<button type="button" onclick="clearit()">Clear</button> 
<button type="button" onclick="clearit()">--X--</button> 
<button type="button" onclick="clearit()">--Y--</button> 
<button type="button" onclick="clearit()">--Z--</button> 

</form> 
<br>
<br>
<br>
<div class="running">
    <pre id="output" ></pre> 
    <!-- If you want turtle graphics include a canvas -->
    <div id="mycanvas"> 
</div>

I assume it is this that is responsible for generating the output code:

<pre id="output" ></pre>

This is the JavaScript functionality (for reference) that produces the output code

<body> 
<center>
<script type="text/javascript"> 
// output functions are configurable.  This one just appends some text
// to a pre element.
function outf(text) { 
    var mypre = document.getElementById("output"); 
    mypre.innerHTML = mypre.innerHTML + text; 
} 
function builtinRead(x) {
    if (Sk.builtinFiles === undefined || Sk.builtinFiles["files"][x] === undefined)
            throw "File not found: '" + x + "'";
    return Sk.builtinFiles["files"][x];
}

// Here's everything you need to run a python program in skulpt
// grab the code from your textarea
// get a reference to your pre element for output
// configure the output function
// call Sk.importMainWithBody()
function runit() { 
   var prog = document.getElementById("yourcode").value; 
   var mypre = document.getElementById("output"); 
   mypre.innerHTML = ''; 
   Sk.pre = "output";
   Sk.configure({output:outf, read:builtinRead}); 
   (Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target = 'mycanvas';
   var myPromise = Sk.misceval.asyncToPromise(function() {
       return Sk.importMainWithBody("<stdin>", false, prog, true);
   });
   myPromise.then(function(mod) {
       console.log('success');
   },
       function(err) {
       console.log(err.toString());
   });
} 

function clearit(){
    document.getElementById('yourcode').value = 'Your awesome code here';
    document.getElementById('output').innerHTML = '';
}
</script>

Question: How do I format the code such that the background is black (this works) but the output code on pressing "run" is WHITE.

I don't know if it is due to missing out an ID - I notice the pre tags in the HTML have an id or incorrect use of the tags in the CSS.

Other things I have tried in the CSS: (doesn't work either)

<style>
.running {
  border: 20px outset black ;
  background-color: black;    
  text-align: center;
  p: color:white;
  pre {
  color:white;
  display: block;
  font-family: monospace;
  white-space: pre;
  margin: 1em 0;
}   
}
</style>

Solution

It seems p: color: white; is invalid css, since p is an element not a style property. Instead, this line should be just color: white;.

Example snippet below:

.running {
  border: 20px outset black;
  background-color: black;
  text-align: center;
  color:white;
  pre {
    white-space: pre-wrap !important;
  }
}

<h3>Heading here</h3>
<form>
  <textarea id="yourcode" cols="40" rows="10">
print("Hello World")
</textarea><br />
  <button type="button" onclick="runit()">Run</button>
  <button type="button" onclick="clearit()">Clear</button>
  <button type="button" onclick="clearit()">--X--</button>
  <button type="button" onclick="clearit()">--Y--</button>
  <button type="button" onclick="clearit()">--Z--</button>

</form>
<br>
<br>
<br>
<div class="running">
  <pre id="output">Test output should be white!</pre>
  <!-- If you want turtle graphics include a canvas -->
  <div id="mycanvas">
  </div>