body {
  background-color:#a7e2ef;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container {
  padding: 20px;
  background-color: #E3F2FD;
  border-radius: 10px;
}
.status-view {
  display: flex;
  justify-content: space-around;
  gap: 20px;
}
.box {
  height: 200px;
  min-width: 200px;
  background-color: #1B365D;
  border: none;
  margin: 10px;
  border-radius: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color:white;
}

.typing-container {
  display: flex;
  flex-direction: column;
    justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.typing-des {
  height: 200px;
  width: 800px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  background-color:#005A9C;
  border-radius: 10px;
  color:white;
}

#description{
  font-size: 25px;
  margin: 10px;
}
.typing-div {
  width: 100%;
}

.typing-div textarea {
  width: 100%;
  height: 200px;
}

.typing-area{
  font-size: 30px;;
  border-radius: 10px;
  background-color:#60C1E5;
}

#button {
  background-color:#0fb4d9;
  border: none;
  color: white;
  padding: 10px 20px;
  width: 200px;
  border-radius: 5px;
  cursor: pointer;
  width: 100%;
  color:black;

}

.bottom-area {
  display: flex;
  justify-content: space-between;
}

.bottom-area h1 {
  color: rgb(246, 207, 157);
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}

.bottom-area p {
  color: rgb(13, 1, 1);
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  font-size: 22px;
}

#time{
  font-size: 30px;
  
}