*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}
html,body{
    height: 100vh;
    width: 100vw;
    
}
body{
    display: flex;
    align-items: center ;
    justify-content: center;
    background: linear-gradient(to right ,rgb(198, 145, 198) , rgb(128, 183, 204));
}
.calculator{
    height: 100%;
    place-content: center;
}

h1{ 
   display: block;
    color: aliceblue;
    margin-bottom: 60px;
    padding-left: 20px;
    
}

.container{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-gap: 3px;
    place-items: center;
    color: aliceblue;
    height: 300px;
    width: 100%;
    
}
.column-wide{
    grid-column: span 3;
}
#screen{
  height: 40px;  
  width: 150px;
  background-color: rgba(255, 255, 255, 0.637);
  border-radius: 30px;
  padding: 20%;
}
#one,#two,#three,#four,#five,#six,#seven,#eight,
#nine,#zero,#minus,#plus,#divide,#multi{
    height: 90%;
    width: 80%;
    border: 1px white solid;
    display: block;
    place-content: center;
    text-align: center;
    border-radius: 20px;
}
#C,#Equal,#delete{
   height: 90%;
    width: 80%;
    border: 1px white solid;
    display: block;
    background: rgb(193, 226, 238);
    place-content: center;
    text-align: center;
    border-radius: 20px;
}
#delete{
    height: 50%;
}
#one:hover,#two:hover,#three:hover,#four:hover,#five:hover,#six:hover,#seven:hover,#eight:hover,
#nine:hover,#zero:hover,#minus:hover,#plus:hover,#divide:hover,#multi:hover{
    height: 90%;
    width: 80%;
    border: 1px white solid;
    cursor: pointer;
    background: rgb(193, 226, 238);
    place-content: center;
    text-align: center;
    border-radius: 20px;
   
}