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

}
:root{
    --clr-dominate : #F5F5F5;
    --clr-light-dominate : #48CFCB;
    --clr-accent : #229799;
    --clr-light-accent : #424242;

    --fs-400 : 1rem;
    --fs-500 : 1.25rem;
    --fs-600 : 2rem;
    --fs-700 : 3rem;
}

body{
    position: relative;
    height: 100vh;
    background-color: var(--clr-dominate);
    color : var(--clr-light-accent);
}

.container{
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
}

.calculator-card{
    height: 600px;
    width: 450px;
    background-color: var(--clr-light-dominate);
    border : 1px solid var(--clr-accent);
    padding : 12px;
    border-radius: 12px;
    font-size: var(--fs-700);
    display: flex;
    flex-direction: column;
    gap : 2rem;
}
.display{
    background-color: var(--clr-accent);
    text-align: end;
    padding : 5px 12px;
    border-radius: 12px;
    height: 100px;
}
#input-section{
    display : grid;
    grid-template-columns : repeat(4,minmax(4rem,12rem));
    gap : 0.5rem;
    flex :1 ;

}

.operator,.operand{
    font-size: var(--fs-500);
    cursor: pointer;
    border-radius: 12px;
}
.operator{
    font-weight: 600;
    color : var(--clr-accent);
}