body {
  margin: 2em;
  background-color: gold;
}


.tv-main-container {
  margin: 0 auto;
  width: 45em;
  height: auto;
  border-radius: 10px;
  box-shadow: 10px 10px 15px -10px;
  border: 1px solid gray;
}

.tv-box {
  padding: 2em;
  background-color: darkgray;
  border-radius: 10px 10px 0 0;
}

.tv-display {
  width: 100%;
  height: 25em;
  background: #000;
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  transition: 0.3s;
  border: 1px solid gray;
}

/* .tv-display.is-off {
}

.tv-display.is-on {
} */

.btn {
  background-color: darkgray;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0 0 10px 10px;
  gap: 4em;
}

.number-btn {
  background-color: darkgray;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5em;
  &
  .button {
    width: 2em;
    height: 2em;
  }
}

.power-btn {
  display: flex;
  justify-content: right;
  align-items: center;
  padding: 1.5em 3em 3em;
  background-color: darkgray;
  gap: 3em;
}

.power-button {
  background-color: gray;
  width: 5em;
  height: 5em;
  border-style: none;
  border-radius: 50%;
  border: 1px solid dimgray;
}

.power-button:hover {
  scale: 1.1;
  transition: 0.3s;
  border: 1px solid dimgray;
}


/* 2026-07-16 add */
body {
  margin: 4em;
}

.tv-header-container {
  margin-top: 4em;
}