*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
}
.continer{
    
    display: flex;
    justify-content: center;
    align-items: center;
    justify-items: bottom;
    margin-top: 
    margin-bottom: 30px;
    
    
}
.calculator{
    background-color: #ecf0f3 ;
    padding: 15px;
    border-radius: 30px;
    box-shadow: inset 5px 5px 12px #ffffff,
                       5px 5px 12px rgba(0,0,.16)             ;
                       display: grid;
                       grid-template-columns: repeat(4, 70px);
                       
}
input{
    display: grid;
    grid-column: span 4;
    background-color: #ecf0f3;
    box-shadow: inset -5px -5px 12px #ffffff,
                 inset 5px 5px 12px rgba(0,0,0,.16) ;                           ;
    border: none;
    height: 50px;
    border-radius: 50px;
    color: black;
    font-size: 50px;
    text-align: right;
    margin-bottom: 20px;
    margin-top: 20px;
}
button{
    height: 60px;
    width:60px;
    border-radius: 50%;
    border: none;
    box-shadow: inset -5px -5px 12px #ffffff,
                 inset 5px 5px 12px rgba(0,0,0,.16) ; 
                 margin: 8px;    
}
.add{
    border-radius: 50%;
    border: none;
    box-shadow: inset -5px -5px 12px #ffffff,
                 inset 5px 5px 12px rgba(0,0,0,.16) ; 
                 margin: 8px;  
                 display: grid;  
                 grid-row: span 2;
}
    
.add{
    height: 150px;
    border-radius: 40px;
    
}
h3{
    position: relative;
    margin-top: 60px;
}
h1{
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: yellow;
    color: red;
    
    margin-bottom: 0;
    margin-top: 0;
    
}
hr{
    margin-bottom: 20px;
    border-style: dashed;
    background-color: blue;
}
body{
    background-color: black;
}