*{
    box-sizing: border-box;
    font-family: sans-serif,Arial, Helvetica;
}

body {
    padding: 0;
    margin: 0;
    background: linear-gradient(to right , #af9ec9, #6abd8d);
    
}

#calculator-grid {

    display:grid;
    justify-content: center;
    align-content: center;
    min-height: 100vh;    
    grid-template-columns: repeat(4,90px);
    grid-template-rows: min-max(120px,auto) repeat(7,100px);
    grid-gap: 1px;
     
    
}
#calculator-grid > button{
    
    cursor: pointer;
    font-size: 25px;
    text-align: center;
    padding:10px 0px; 
    border-radius: 20px;
    background: linear-gradient(to right , #95d5f5, rgb(199, 195, 195));
}

#calculator-grid > button:hover{

    background: linear-gradient(to right , #af9ec9, #5d3868);
    color:white;
}
#result{

    grid-column: 1/-1;
    word-wrap: break-word;
    word-break: break-all;
    background-color: #69696d;    
    display: flex;
    margin-bottom:5px;
    align-items: flex-end;
    justify-content: space-around;
    flex-direction: column;
    padding: 10px;
    border-radius: 10px;    
    height: 120px;
   
}

#history{

    font-size: 20px;
    color:  #95d5f5;
    height:20px;
    text-align: right;

}

#output{

    font-size: 25px;
    color: rgb(241, 241, 248);
    height: 80px;


}
#dl{
    grid-column: 3/span 2;
}

#clear{

    grid-column: 1/ span 2;
}

#equal{
    grid-column: 1/ span 4;
}