/*--------------------------Declaracion de varibales---------------------*/
:root{
    --grisClaro: rgba(210,210,210,1);
    --grisOscuro: rgba(100,100,100,1);
    --azulClaro: rgba(140,140,255,1);
    --grisBlanco: rgba(90,180,170,1);
    --blanco: rgba(240,240,240,1);
    --azulOscuro: rgba(80,80,220,1);
    --negro: rgba(35,35,35,1);
}
/*-----------------------------------------------------------------------*/



/*------------------Estilos para el body de la aplicacion----------------*/
*{
    box-sizing: border-box;
    color: var(--negro);
}
.Cuerpo{
    font-family: 'Kanit', sans-serif;
    width: 100vw;
    height: 100vh;
    overflow:hidden;
    background-color: var(--grisClaro);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
/*-----------------------------------------------------------------------*/



/*-------Estilso para la calculadora en dispositivo grande---------------*/
.calculadora{
    background-color: var(--blanco);
    width: 378px;
    height: auto;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    align-content: space-around;
    padding: 20px;
    border: none;
    border-radius: 10px;
}
/*-----------------------------------------------------------------------*/



/*-------------------------Estilos para el display-----------------------*/
.display{
    width: 100%;
    height: 110px;
    background-color: var(--azulOscuro);
    border: none;
    border-radius: 5px;
    margin-bottom: 15px;
    display: flex;
    padding: 0 10px;
    flex-flow: column nowrap;
    align-items: flex-start;
    justify-content: center;
}
.display-div{
    padding: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40%;
}
.display-p{
    width: 100%;
    height: 100%;
    font-size: 25px;
    overflow-x: hidden;
    overflow-y: hidden;
}
/*-----------------------------------------------------------------------*/




/*------Estilos para el contenedor de los botones de la calculadora------*/
.botones-contenedor{
    width: 100%;
    height: auto;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
}
/* ----------------------------------------------------------------------*/



/*-----------------------Estilos para los botones------------------------*/
.columna{
    width: auto;
    height: auto;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    margin: 0px;
}
.contenedor-boton{
    width: 80px;
    height: 60px;
    padding: 0px;
    margin: 2px;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
}
.boton{
    width: 80px;
    height: 60px;
    border: none;
    border-radius: 5px;
    font-size: 25px;
    background-color: var(--grisBlanco);
    display: flex;
    justify-content: center;
    align-items: center;
}
.igual{
    width: 80px;
    height: 60px;
    background-color: var(--grisOscuro);
}
/*-----------------------------------------------------------------------*/