Why isn't this (inside a ) changing color?

Question

I can't figure out why <label> won't change it's color even though it's stated in its style.

It works if I move the label outside of the <div> When it's in the div, it just matches the div's background color.

body {
  margin: 0px;
}

label {
  font-family: arial;
  font-size: 18pt;
  color: #000000; // this isn't working 
}

.window {
  background-color: #000000;
  width: 300px;
  height: 100px;
  border-radius: 10px;
  overflow: hidden;
  opacity: 0.5;
  padding: 5px;
}

.window-title {
  width: 100%;
  text-align: center;
  opacity: 1.0;
}

.window-area {
  object-fit: cover;
  background-color: #FFFFFF;
  opacity: 1.0;
}

<div class="window">
  <div class="window-title"><label>Title</label></div>
  <div class="window-area">Content</div>
</div>