body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #00001a;
}

.menu-hamburguesa {
  position: absolute;
  top: 20px;
  left: 20px;
}

.menu-icon {
  cursor: pointer;
  font-size: 24px;
  color: #fff;
}

#menu-toggle {
  display: none;
}

.menu {
  display: none;
  position: absolute;
  top: 60px;
  left: 20px;
  background-color: #282c34;
  border-radius: 5px;
  overflow: hidden;
}

#menu-toggle:checked + .menu-icon + .menu {
  display: block;
}

.menu a {
  display: block;
  padding: 10px;
  text-align: center;
  color: #fff;
  font-size: 24px;
  text-decoration: none;
}

.menu a:hover {
  background-color: #444;
}

.calculator {
  border: 11px solid #999;
  border-radius: 35px;
  overflow: hidden;
  width: 90%; /* Ajuste del ancho del contenedor principal */
  max-width: 350px; /* Ancho máximo de la calculadora */
  background-color: #282c34; /* Color de fondo de la calculadora */
  color: #fff; /* Color del texto */
}

.display {
  width: 100%;
  padding: 15px;
  font-size: 2em;
  text-align: left; /* Alineación del texto a la izquierda */
  border: none;
  outline: none;
  background-color: #00001a; /* Color de fondo de la pantalla */
  color: #fff; /* Color del texto en la pantalla */
}

.keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
}

button {
  padding: 20px;
  font-size: 1.6em;
  border: none;
  cursor: pointer;
  background-color: #161b33; /* Color de fondo de los botones */
  color: #fff; /* Color del texto de los botones */
}

.operator {
  background-color: #161b66; /* Color de fondo de los operadores */
}

.operator:hover,
.calculate:hover,
.clear:hover {
  background-color: #7b1fa2; /* Color de fondo al pasar el ratón sobre los operadores */
}

.calculate {
  background-color: #00001b; /* Color de fondo del botón de igual */
}

.calculate:hover {
  background-color: #00001a; /* Color de fondo al pasar el ratón sobre el botón de igual */
}

.clear {
  background-color: #f44336; /* Color de fondo del botón de limpiar */
}

.clear:hover {
  background-color: #00001a; /* Color de fondo al pasar el ratón sobre el botón de limpiar */
}