body {
  background-color: #252526;
  color: aliceblue;
  display: flex;
}

.activity {
  display: flex;
  flex-direction: column;
  background-color: #1e1e1e;
}

.side {
  background-color: #1e1e1e;
  width: 40%;
}

.edit {
  margin-left: 20%;
}

.status {
  margin-top: 97%;
}

button {
  background-color: #1177bb;
  color: aliceblue;
  border: none;
  padding: 10px 20px;
  text-align: center;
}

button:hover {
  background-color: #0e639c;
}

input {
  background-color: #595959;
  color: rgb(255, 255, 255);
}

/* CSSでアニメーションを定義 */
@keyframes glowing {
  0% {
    box-shadow: 0 0 20px #3a7cde;
  }
  50% {
    box-shadow: 0 0 50px aliceblue;
  }
  100% {
    box-shadow: 0 0 20px #3a7cde;
  }
}

/* ヒント用のクラス */
.highlight-hint {
  animation: glowing 1.5s infinite; /* 1.5秒かけて光るアニメーションを繰り返す */
}