body {
    background-position: right bottom, left top;
    background-repeat: repeat;
    color: rgba(255, 255, 255, 1);
}
.bgtrans {
    background-color: rgba(0, 0, 0, 0.8)
}
.ppp {
    border:solid 20px black;
}
.calculator-body {
    border: 10px solid;
    border-color: rgba(255, 255, 255, 0.3);
    width: 70%;
    margin-left: 15%;
    margin-right: 10%;
    padding: 5px;
}
.bttn {
    background-color: rgba(255, 255, 255, 0.3);
    width: 100%;
    height: 80px;
    font-size: 50px;
    color: #fff;
}
.bttn2bgchng {
    background-color: rgba(255, 255, 255, 0.3);
    font-size: 30px;
    color: #fff;
}
.bttn-group {
    /*border: 1px solid rgba(15, 15, 15, 1); aound button group */
    margin: 0%; 
}
.num-output {
    border: 10px solid; 
    border-color: rgba(255, 255, 255, 0.3);
    width: 96%;
    margin: 2%; 
}
input {
    width: 100%;
    height: 10vh;  
    font-size: 50px;
    background-color: rgba(255, 255, 255, 0.3);
} 
.styled-font {
    -webkit-text-stroke: 1px black;
    color: white;  
    text-shadow:
    3px 3px 0 #000,
   -1px -1px 0 #000,  
    1px -1px 0 #000,
   -1px  1px 0 #000,
    1px  1px 0 #000;
}
@media (min-width: 500px) and (max-width: 900px){
    .bttn {
        height: 90px;
    }
}
@media (min-width: 900px) and (max-width: 1300px){
    .bttn {
        height: 100px;
    }
}
@media (min-width: 1300px) and (max-width: 1700px){
    .bttn {
        height: 110px;
    }
}
@media (min-width: 1700px) and (max-width: 2100px){
    .bttn {
        height: 120px;
    }
}
@media (min-width: 2100px) and (max-width: 2500px){
    .bttn {
        height: 130px;
    }
}
header {
    padding: 20px;
}