*{
    margin:0%;
    padding:0%;
    box-sizing: border-box;
}

html,body{
    height:100%;
    width:100%;
}
#main{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#main img{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
}
#calculator{
    border: 1px solid black;
    border-radius: 10px;
    width: 350px;
    height: 500px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0  50px 35px black,
                0 0  80px 50px grey;

    animation: rot;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-delay: 1s;
}
#calculator img{
    width: 350px;
    height: 500px;
}
@keyframes rot {
    0%{rotate: 0deg; }
    10%{rotate: 36deg;}
    20%{rotate: 72deg;}
    30%{rotate: 105deg;}
    40%{rotate: 144deg;}
    50%{rotate: 180deg;}
    60%{rotate: 216deg;}
    70%{rotate: 252deg;}
    80%{rotate: 288deg;}
    90%{rotate: 324deg;}
    100%{rotate: 360deg}
}

#dis{
    width: 90%;
    height: 10%;
    display: flex;
    align-self: center;
    margin-top: 10px;
    border: 2px solid black;
    font-size: x-large;
}
#dis:focus{
    outline: none;
}
.btn_container{
    background-color: transparent;
    margin: 25px;
    height: 400px;
    display: flex;
    align-self: center;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-evenly;

}
.btn{
    width: 75px;
    height: 55px;
    font-size: x-large;
    margin: 5px solid whitesmoke;
    border-radius: 15px;
    transition-duration: 0.75s;
}
.btn:hover{
    box-shadow: 0 0  50px 25px black,
                0 0  80px 35px grey;
}
.btn:active{
    background-color: rgb(99, 99, 99);
}