/* 메인화면 */
#main-container {
  width: 90%;
  height: 82%;
  background-color: #aee2ff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border-width: 0 1px;
  border-color: black;
  border-style: solid;
}

/* 랜덤생성단어박스 */
.random-str {
  position: absolute;
  padding: 0 4px;
  text-align: center;
  background-color: transparent;
  font-size: 1.5rem;
}

button {
  background-color: #6da2d9;
  box-shadow: 0 0 0 1px #6698cb inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset,
    0 8px 0 0 rgba(110, 164, 219, 0.7), 0 8px 0 1px rgba(0, 0, 0, 0.4),
    0 8px 8px 1px rgba(0, 0, 0, 0.5);
  border-radius: 6px;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}
button:active {
  box-shadow: 0 0 0 1px #6191c2 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset,
    0 0 0 1px rgba(0, 0, 0, 0.4);
}

/* 시작 카운터 스타일 */
.start-counter {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: 10%;
  font-size: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 1s;
}
.start-counter.act {
  font-size: 8rem;
}

/* 다시하기 버튼 */
#renew-button {
  position: absolute;
  top: 70%;
  left: 40%;
  font-size: 2rem;
  width: 20%;
  height: 10%;
}