*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body{
    background-color: rgb(240, 240, 240);
    overflow: hidden;
    display: flex;
    justify-content:center;
    align-items:center;
    height: 100vh;
    width:100vw; 
}
#container{
    width: 300px;
    height: 500px;
    background-color: rgb(0, 32, 41);
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items:center;
    border-radius: 10px;
    box-shadow: 5px 7px 5px rgba(34, 34, 34, 0.85);
}
#content_wrap{
    width:100%;
    padding: 16px;
    
}
#storage{
    color: #ccc;
    font-variant: small-caps;
    font-weight:800;
    font-size:1.2em;
}
.key{
    font-size: 20px;
    padding: 0.5em;
    border-radius:2px;
    width:23.5%;
    margin: 0px auto 5px auto;
    background-color: #ccc;
    color: #222;
    border:none;
    outline: none;
    transition: all 300ms ease;
}
.key:hover{
    background-color: rgba(88, 84, 84, 0.6);
    transform:scale(0.97);

}
#input_el, #equal_btn{
    width:100%;
    padding:0.3em;
    font-size: 30px;
    border-radius: 4px;
}
#content_wrap::before{
    content:"ovy's calaculator";
    position: relative;
    top:-45px;
    left:45px;
    color:rgba(212, 201, 102, 0.836);
    width:150px;
    height:50px;
    font-weight: 800;
    font-variant: small-caps;
    font-size:1.5em;
    text-align: center;
}
#input_el{
    text-align: right;
    margin-bottom: 20px;
    box-shadow: -3px -3px 3px  rgba(51, 50, 50, 0.932) inset;
    outline: none;
    border: none;
    background-color: #000;
    color: #ccc;
}
.operator{
    background-color: rgba(212, 132, 41, 0.932) !important;
    transition: all 300ms ease;
}
.operator:hover{
    background-color: rgba(177, 107, 27, 0.836) !important;
}
#clear_btn{
    background-color: rgba(187, 33, 28, 0.932);
    transition: all 300ms ease;
}
#clear_btn:hover{
    background-color: rgba(160, 24, 19, 0.932);
}