*,*::after,*::before{
    margin:0; 
    padding:0; 
    box-sizing: border-box;
    font-family: 'Spartan', sans-serif;
}


body{
    margin:0; 

    display:flex; 
    justify-content: center;
    align-items: center;
    min-width: 100vw; 
    min-height: 100vh;
    background-color: hsl(0, 0%, 90%);
    overflow-y: auto;
    overflow-x: hidden;

}

.calculator-container{
    display:flex; 
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color:white; 
    background-color: hsl(222, 26%, 31%);
    width:max-content;
    height:80vh;
    padding:13px;
    border-radius: 15px;
}

.heading{
   padding:3px;
   display:flex; 
   align-items:center;
   height:10%;
   font-size: 2rem;
}
.display{
   background-color:  hsl(224, 36%, 15%);
    height:20%;
    width:100%;
    margin-bottom: 1rem;
    border-radius: 10px;
    display:flex; 
    flex-direction: column;
    align-items: flex-end;
    justify-content:space-around;
    padding:10px;
    min-height:20%;
}
.prev-op,.curr-op{
    width:100%;
    text-align: right;
    word-wrap: break-word;
    word-break:break-all;
}
.prev-op{
    font-size:1.2em;
}
.curr-op{
    font-size:2.2em;
}
.calculator{
    
    display:grid; 
    justify-content: center;
    align-content: center;
    grid-template-columns: repeat(4,80px);
    grid-template-rows: repeat(4,45px);
     gap:15px; 
     padding:15px;
     background-color: hsl(223, 31%, 20%);
     border-radius: 10px;
}


.calculator > button{
    position: relative;
    cursor: pointer;
  font-size: 2rem;
  border: 1px solid white;
  outline: none;
  background-color: hsl(30, 25%, 89%);
  border-radius: 5px;
  box-shadow: 0px 4px hsl(28deg 16% 65%);
 padding-top: 6px;
 overflow: hidden;
 padding-top:auto;
 padding-bottom:auto;
}

.calculator > button:hover{
  background-color: hsl(30, 25%, 95%);
     
}

.span-two{
    margin:10px;
    text-align: center;
    grid-column: span 2;
    font-size:3px; 
}

button.special1{
    background-color: hsl(225, 21%, 49%);
    border:none; 
    color:white; 
    font-size:1rem;
  box-shadow: 0px 4px hsl(224, 28%, 35%);

}
button.special1:hover{
    background-color: hsl(225, 21%, 39%);

}
button.special2{
    background-color: hsl(6, 63%, 50%);
    border:none; 
    color:white; 
    font-size:1rem;
  box-shadow: 0px 4px hsl(6, 70%, 34%);

}
button.special2:hover{
    background-color: hsl(6, 63%, 45%);


}



button span{
    position: absolute;
  background:rgb(170, 202, 228); 
  transform:translate(-50%,-50%);
  pointer-events: none;
  border-radius: 50%;
  animation:animate .5s ease-in-out infinite;
}

@keyframes animate{
    0%{
        width:0px; 
        height:0px;
        opacity:0.5; 

    }
    100%{
        width:200px; 
        height:200px;
        opacity:0; 
    }
}


@media only  screen and (max-width:500px){
    .calculator-container{
        height:95vh; 
        width:90vw; 
    }

    .calculator{
        grid-template-columns: repeat(4,4.2em);
        grid-template-rows: repeat(4,45px);
        gap:12px;
    }
}