*{
    box-sizing: border-box;
    margin:0;
    padding: 0;
}

body {
    font-family: "Bitcount Prop Single", sans-serif;
}

.container {
    display: flex;
    justify-content: center; /*Esto es para centar ell contenido*/
}

.calculadora {
    width: 400px; /*asi los elementos se colocan de forma vertical por el tamaño que tienen para colocarse*/
    height: 600px;
    background-color: rgb(44, 47, 50);
    display:grid; /*grid sirve para dividir una pagina en areas o regiones principales*/
    grid-template-columns: repeat(4,80px); /*4 columnas*/
    grid-template-rows: 130px repeat(6,80px);
    justify-content: center;
    border-radius: 20px;
    padding-top:25px;
    column-gap: 10px;
}


.display {
    height: 125px;
    background-color: #344055;
    opacity: .7;
    grid-column: 1/-1;
    border: 10px #333333 solid;
    text-align: end;
    padding: 15px 0;
}

.span2 {
    grid-column: span 2;
    width: 100%;
}

.valor-superior {
    color: white;
    font-size: 1.2rem;
    margin-bottom: 25px;
}

.valor-inferior {
    color:white;
    font-size: 2rem;
}

.btn {
  aspect-ratio: 1 / 1;
  height: 70px;
  border-radius: 50%;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: white;
}

.btn.btn-numero:hover {
    background-color:rgb(31, 28, 28)
}

.btn.btn-funcion:hover {
    background-color: rgb(4, 131, 35);
}

.btn.btn-operador:hover {
    background-color: rgb(10, 130, 216);
}

.btn.btn-igual:hover {
    background-color: rgb(7, 137, 217);
}

.btn.btn-cambiar:hover {
    background-color: rgb(184, 36, 36);
}

.btn-numero {
    background-color: rgb(36, 36, 36);
}

.btn-operador {
    background-color: rgb(4, 113, 186);
    font-size: 2rem;
}

.btn-funcion {
    background-color: rgb(1, 117, 34);
}

.btn-igual {
    background-color: dodgerblue;
    font-size: 2rem;
}

.btn-cambiar {
    background-color: brown;

}

/*Modo claro*/

/* Estilo alternativo para modo claro */
.modo-claro {
    background-color: #f0f0f0;
}

.modo-claro .calculadora {
    background-color: #d1b4d4;
}

.modo-claro .display {
    background-color: white;
    border: 10px #e3dfdf solid;
}

.modo-claro .valor-superior,
.modo-claro .valor-inferior {
    color: black;
}

.modo-claro .btn-operador {
    background-color: rgb(245, 100, 178);
    color: white
}

.modo-claro .btn-igual {
    background-color: rgb(207, 97, 156);
    color: white
}

.modo-claro .btn-numero {
    background-color: rgb(149, 90, 160);
    color: white
}

.modo-claro .btn-funcion {
    background-color: rgb(169, 112, 218);
    color: white;
}

.modo-claro .btn-cambiar {
    background-color: rgb(231, 101, 172);
    color: white;
}

.modo-claro .btn:hover {
    background-color: #cd40ba;
}