So, I have tried changing the background color of my website using the javascript. I wanted it to change at certain time. But it doesn't seem working. I have run every set of combinations but the bg color always stays default one described in CSS. 

The JS code seems to add new line of code instead of modifying the CSS. How do I know that which part of the code a computer will read first? Is the CSS prioritized first or the inline code/HTML ? TIA

```js
var now = new Date();
var hours = now.getHours();

//Keep in code - Written by Computerhope.com
//Place this script in your HTML heading section

document.write('It\'s now: ', hours, '<br><br>');
document.bgColor = "White";

//5am-7am morning
if (hours > 5 && hours < 7) {
  document.write('<body style="background-color: #FFF95D">');
}
//7am-12pm noon
else if (hours > 7 && hours < 12) {
  document.write('<body style="background-color: #B3E5FC">');
}
//12pm-4pm afternoon
else if (hours > 12 && hours < 16) {
  document.write('<body style="background-color: #7E57C2">');
}
//4pm-7pm evening
else if (hours > 16 && hours < 19) {
  document.write('<body style="background-color: #EF5444">');
}
//7pm-10pm Night
else if (hours > 19 && hours < 22) {
  document.write('<body style="background-color: #424242">');
}
//1opm-5am Nighting
else if (hours > 22 && hours < 7) {
  document.write('<body style="background-color: #000000">');
}
```

```css
  body {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  max-width: 100%;
  height: 100%;
  color: #455A64;
  font-family: var(--fontFamily);
  font-size: var(--fontSizeMd);
  line-height: var(--lineHeightMd);
```