@media (max-width: 768px) {
  .menu {
    display: none;
  }
}

/*Aqui empezamos con el cuerpo de la pagina web*/
body{
	display: flex; /* Aqui usamos display para hacer flexible el body y poder usar justify-content y align-content, todo lo que tiene que ver con la distribucion de los elementos en el body  */
	justify-content: center;  /* Centra hijos horizontalmente */
	align-content: center;  /* Centra hijos verticalmente */
    background-color: #D2691E; /*color de fonddo*/
	height: 100vh; /*altura de la pantalla*/
}

.calculadora{
	background: #DEB887; /* Color de fondo de la calculadora (tipo marrón claro / burlywood) */
	padding: 50px; /* Espacio interno alrededor de todos los elementos dentro de la calculadora */
	border-radius: 10px; /* Bordes redondeados de 10px para un diseño más suave y moderno */
}

#display{
	width:100%;  /* Ancho completo del contenedor padre */
	height:15%; /* Altura: 15% del contenedor padre (por ejemplo, del body) */
	font-size: 2rem;  /* Tamaño del texto grande (2 veces la fuente raíz) */
	text-align: right; /* Alinea el texto a la derecha, como en una calculadora real */
	margin-bottom: 10%;  /* Espacio debajo del display, separándolo de los botones */
	border:none;   /* Quita el borde predeterminado del input o div */
    border-radius: 5px; /* Bordes redondeados de 5px */
	padding-right: 10px;  /* Espacio interno a la derecha para que el texto no toque el borde */
}

.buttons{
	display: grid;  /* Activas el sistema de cuadrícula para este contenedor */
	grid-template-columns: repeat(4, 60px); /* Crea 4 columnas de 60px cada una */
	gap:10px; /* Espacio de 10px entre filas y columnas */
}

button{
	height: 60px;  /* Altura del botón: 60 píxeles */
	font-size: 1.5rem; /* Tamaño del texto del botón (1.5 veces el tamaño de la fuente raíz) */
	border:none; /* Quita el borde predeterminado del botón */ 
	border-radius: 5px; /* Bordes redondeados de 5px */
	cursor:pointer; /* Cambia el cursor al pasar sobre el botón, indicando que es clicable */
	background-color:#555; /* Color de fondo del botón (gris oscuro) */
	color:white;  /* Color del texto del botón */
	transition: background-color 0.2s; /* Suaviza el cambio de color de fondo en 0.2 segundos (para hover o efectos) */
}

button:hover{
	background-color: #777; /* Cambia el color de fondo a gris más claro cuando el mouse está sobre el botón */
}

button.equal{
	background-color: #ff9500; /* Cambia el color de fondo del botón “=” a un naranja brillante */
	grid-row: span 2; /* Cambia el color de fondo del botón “=” a un naranja brillante */
}