@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*{
    margin: 0;
    padding: 0;
}
body{
    background-image: url(images/numbers.jpg);
}
ul{
    list-style: none;
}
.main{
    padding: 10px;
    font-family: 'Poppins', sans-serif;
}
#input{
    width: 80%;
    padding: 15px;
    font-size: 23px;
    border-radius: 10px;
    font-family: 'Poppins', sans-serif;
    margin: 20px 25px 80px 22px ;
}
#input:hover{
    border-radius: 0;
}
.btn-container{
    border: 1px solid black;
    margin: 30px auto 0 auto;
    background-color: rgb(231, 227, 222);
    padding: 20px;
    width: 29%;
    justify-content: center;
    border-radius: 10px;
}
.grid-container{
    padding: 20px;
    display: grid;
    grid-template-rows: repeat(4,1fr);
    grid-template-columns: repeat(4,1fr);
    place-items: center;
    row-gap: 20px;
    column-gap: 20px;
}
.btn{
    padding: 10px;
    background-color: white;
    height: 50px;
    width: 50px;
    font-size: 18px;
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    border: 0px solid black;
}
.btn:hover{
    border-radius: 50px;
}
.pressed{
    border-radius: 50px;
    box-shadow: 0 3px 4px 0 black;
    opacity: 0.7;
}
#x{
    background-color: rgb(243, 183, 71);
    color: white;
}
#minus{
    background-color: rgb(112, 190, 214);
    color: white;
}
#plus{
    background-color: rgb(248, 125, 186);
    color: white;
}
#divide{
    background-color: rgb(185, 112, 161);
    color: white;
}
#equal{
    background-color: rgb(131, 192, 10);
    color: white;
}
#AC{
    background-color: rgb(238, 97, 97);
    color: white;
}
#CE{
    background-color: rgb(87, 147, 224);
    color: white;
}
#open-bracket, #closed-bracket{
    background-color: rgb(208, 54, 228);
    color: white;
}
.number-btn{
    border: 4px solid rgb(247, 239, 239);
}
/*.number-btn:hover{
    background-color: black;
    color: white;
    border: 0px solid black !important;
}*/

@media only screen and (max-width: 1023px){
    .btn-container{
        width: 39%;      
    }
}
@media only screen and (max-width: 850px){
    .btn-container{
        width: 45%;      
    }
}
@media only screen and (max-width: 700px){
    .btn-container{
        width: 55%;      
    }
}
@media only screen and (max-width: 570px){
    .btn-container{
        width: 65%;      
    }
}
@media only screen and (max-width: 480px){
    .btn-container{
        width: 75%;      
    }
}
@media only screen and (max-width: 400px){
    .btn-container{
        width: 85%;      
    }
}