html{
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
body{
    background: rgb(41, 41, 41);
    padding: 0;
    margin: 0;
    min-width: 370px;
}
h1{
    text-align: center;
    color: white;
}
h3{
    color: white;
    text-align: center;
    position: relative;
    font-weight: normal;
}
#main-container{
    display: block;
    margin: auto auto 1rem auto;
    height: 700px;
    width: 350px;
    background: rgb(0, 0, 0);
    border-radius: 40px;
    border: 2px solid rgb(204, 204, 204)
}
#display{
    display: block;
    margin: auto;
    width: 95%;
    height: 84px;
    color: white;
    position: relative;
    top: 80px;
    line-height: 0;
    text-align: right;
    font-size: 3.3rem;
}
#buttons-container{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: auto;
    width: 95%;
    grid-gap: 10px;
    position: relative;
    top: 60px;
}
#btn-0{
    text-align: left;
    padding-left: 28px;
    grid-column-start: span 2;
    width: 158px;
    border-radius: 100px;
}
.btn{
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin: auto;
    font-size: 32px;
    text-align: center;
    line-height: 70px;
    color: white;
    border-style: none;
}
.num{
    background: rgb(53, 54, 53);
    transition: .15s;
}
.num:active{
    background: rgb(153, 144, 144);
    transition: .15s;
}
.options{
    background: rgb(207, 203, 203);
    transition: .15s;
}
.options:active{
    background: rgb(240, 234, 234);
    transition: .15s;
}
.operator{
    background: rgb(255, 141, 33);
    font-size: 44px;
}
.operator:focus{
    color: rgb(241, 127, 20);
    background: white;
    transition: .2s;
}
#equals{
    transition: .15s;
    background: rgb(241, 127, 20);
    font-size: 44px;
}
#equals:active{
    background: rgb(255, 215, 178) !important;
    transition: .15s !important;
}
#equals:focus{background: rgb(241, 127, 20); color: white;}
.options{
    background: rgb(207, 203, 203);
    color: black;
}
img{
    display: block;
    margin: auto;
    height: 70px;
    position: relative;
    top: 80px;
}
@media (max-width: 450px) {
    body{background: black;}
    html{background: black;}
    #main-container{border: none; height: 650px;}
    h1{display: block; margin: auto;}
    #display{top: 50px}
    #buttons-container{top: 30px}
    img{top: 50px}
}