body {
  font-family: Roboto;
  background-color: #f8f9fc;
}

.input-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.show-id {
  margin-left: 10px;
  width: 5%;
  height: 5%;
  background-color: lightblue;
  padding: 2px 5px;
  border-radius: 10px;
  cursor: pointer;
}

.input-element-style {
  width: 52%;
  height: auto;
  font-size: 2vw;
  padding: 0.6em;
  border: 2px solid #000;
  border-radius: 6px;
  outline: none;
}

.dot {
  -webkit-text-security: disc;
}

button {
  cursor: pointer;
  transition: transform 0.1s ease, background-color 0.2s ease;
}

button:active {
  transform: scale(0.97);
}

.button-container {
  display: inline-grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  background-color: #d6e8ff;
  padding: 10px;
  border-radius: 10px;
  margin-top: 2.5%;
}

.main-buttons .button-container #clear-button {
  background-color: white;
  border-style: double;
  border-color: red;
  color: red;
}

.button-container button {
  width: 100%;
  aspect-ratio: 1.5 / 1;
  font-size: clamp(16px, 2vw, 26px);
  background-color: #0044ff;
  border: none;
  border-radius: 6px;
  color: white;
}

.button-container button:hover {
  background-color: #0033cc;
}

.main-buttons {
  display: inline-flex;
  justify-content: space-between;
  width: 40%;
}

.action-button {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4%;
  margin-left: 5%;
}

.action-button button {
  background-color: white;
  border: 2px solid black;
  border-radius: 6px;
  aspect-ratio: 8 / 1;
  font-size: clamp(14px, 1.2vw, 22px);
  padding: 5px 10px;
}

.action-button button:hover {
  background-color: #f0f0f0;
}