html{
    height: 100%;
    background-color: #f9f9f9;
}
body{
    height: 100%;
    background-color: #f9f9f9;
}
#page{
    height: calc(100% - 99999999px);
    background-color: #f9f9f9;
    }

#container{
    height: 100%;
    width: 100%;
}
   
/*MOBILE*/
@media (max-width: 549px) {
#display{
min-height: 21%;
max-height: 21%;
width: 100%;
font-size: 450%;
padding-top: 10px;
margin-top: 0px;
margin-bottom: 0px;
border-radius: 0px;
word-break: normal;
word-wrap: normal;
overflow-x: scroll;
text-align: right;
padding-right: 5px;
padding-left: 5px;
-moz-box-shadow:    inset 0 0 1px #000000;
-webkit-box-shadow: inset 0 0 3px #000000;
box-shadow:         inset 0 0 5px #000000;
}    
}

/*TABLET*/
@media (min-width: 550px) and (max-width: 1025px) {
#display{
min-height: 21%;
max-height: 21%;
width: 100%;
font-size: 600%;
padding-top: 30px;
margin-top: 0px;
margin-bottom: 0px;
border-radius: 0px;
word-break: normal;
word-wrap: normal;
overflow-x: scroll;
text-align: right;
padding-right: 5px;
padding-left: 5px;
-moz-box-shadow:    inset 0 0 1px #000000;
-webkit-box-shadow: inset 0 0 3px #000000;
box-shadow:         inset 0 0 5px #000000;
} 
}

/*TABLET ORIENTATION LANDSCAPE*/
@media (min-width: 550px) and (max-width: 1025px) {
@media screen and (orientation:landscape) {
#display{
min-height: 21%;
max-height: 21%;
width: 100%;
font-size: 450%;
padding-top: 0px;
margin-top: 0px;
margin-bottom: 0px;
border-radius: 0px;
word-break: normal;
word-wrap: normal;
overflow-x: scroll;
text-align: right;
padding-right: 5px;
padding-left: 5px;
-moz-box-shadow:    inset 0 0 1px #000000;
-webkit-box-shadow: inset 0 0 3px #000000;
box-shadow:         inset 0 0 5px #000000;
} 
}
}

/*DESKTOP*/
@media (min-width: 1026px) {
#display{
min-height: 21%;
max-height: 21%;
width: 100%;
font-size: 650%;
padding-top: 0px;
margin-top: 0px;
margin-bottom: 0px;
border-radius: 0px;
word-break: normal;
word-wrap: normal;
overflow-x: scroll;
text-align: right;
padding-right: 10px;
padding-left: 10px;
-moz-box-shadow:    inset 0 0 1px #000000;
-webkit-box-shadow: inset 0 0 3px #000000;
box-shadow:         inset 0 0 5px #000000;
}
}

#display::-webkit-scrollbar-track {
  background: transparent;
}

#display::-webkit-scrollbar {
  width: 10px;
    height: 10px;
}
#display::-webkit-scrollbar-thumb {
  background: #ACACAC;
    border-radius: 60px;
}
    
#button{
width: 25%;
height: 15.8%;
font-size: 230%;
background-color: #D9D9D9;
border: solid grey 0.5px;
    }

#button:active{
    background-color: white;    
}

    
#button_one{
width: 25%;
height: 15.8%;
font-size: 230%;
background-color: #D9D9D9;
border: solid grey 0.5px;
    }

#button_one:active{
    background-color: white;    
}


#button_two{
width: 25%;
height: 15.8%;
font-size: 230%;
background-color: #D9D9D9;
border: solid grey 0.5px;
    }

#button_two:active{
    background-color: white;    
}

   
#button_three{
width: 25%;
height: 15.8%;
font-size: 230%;
background-color: #D9D9D9;
border: solid grey 0.5px;
    }

#button_three:active{
    background-color: white;    
}


#button_four{
width: 25%;
height: 15.8%;
font-size: 230%;
background-color: #D9D9D9;
border: solid grey 0.5px;
    }

#button_four:active{
    background-color: white;    
}


#button_five{
width: 25%;
height: 15.8%;
font-size: 230%;
background-color: #D9D9D9;
border: solid grey 0.5px;
    }

#button_five:active{
    background-color: white;    
}


#button_six{
width: 25%;
height: 15.8%;
font-size: 230%;
background-color: #D9D9D9;
border: solid grey 0.5px;
    }

#button_six:active{
    background-color: white;    
}


#button_seven{
width: 25%;
height: 15.8%;
font-size: 230%;
background-color: #D9D9D9;
border: solid grey 0.5px;
    }

#button_seven:active{
    background-color: white;    
}


#button_eight{
width: 25%;
height: 15.8%;
font-size: 230%;
background-color: #D9D9D9;
border: solid grey 0.5px;
    }

#button_eight:active{
    background-color: white;    
}


#button_nine{
width: 25%;
height: 15.8%;
font-size: 230%;
background-color: #D9D9D9;
border: solid grey 0.5px;
    }

#button_nine:active{
    background-color: white;    
}


#button_zero{
width: 25%;
height: 15.8%;
font-size: 230%;
background-color: #D9D9D9;
border: solid grey 0.5px;
    }
    
#button_zero:active{
    background-color: white;    
}


#button_plus{
width: 25%;
height: 15.8%;
font-size: 230%;
background-color: #D9D9D9;
border: solid grey 0.5px;
}

#button_plus:active{
    background-color: white;    
}


#button_sott{
width: 25%;
height: 15.8%;
font-size: 230%;
background-color: #D9D9D9;
border: solid grey 0.5px;
}

#button_sott:active{
    background-color: white;    
}


#button_per{
width: 25%;
height: 15.8%;
font-size: 230%;
background-color: #D9D9D9;
border: solid grey 0.5px;
}

#button_per:active{
    background-color: white;    
}


#button_divide{
width: 25%;
height: 15.8%;
font-size: 230%;
background-color: #D9D9D9;
border: solid grey 0.5px;
}

#button_divide:active{
    background-color: white;    
}


#button_result{
width: 25%;
height: 15.8%;
font-size: 230%;
background-color: #D9D9D9;
border: solid grey 0.5px;
}

#button_result:active{
    background-color: white;    
}


#button_canc{
width: 25%;
height: 15.8%;
font-size: 230%;
background-color: #D9D9D9;
border: solid grey 0.5px;
}

#button_canc:active{
    background-color: white;    
}


#button_dot{
width: 25%;
height: 15.8%;
font-size: 230%;
background-color: #D9D9D9;
border: solid grey 0.5px;
}    

#button_dot:active{
    background-color: white;    
}


#content{
word-wrap: break-word;
width:90%;
margin:0 auto;	
	}
p{ margin:0 auto;
width:100%;
max-width:800px;
font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
font-size:larger;
}
iframe{ 
width:150px; height:50px;
font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
font-size:larger;
}	
#scroll
{
width: -5px;
height: -10px;
overflow-y:scroll;
}
#height
{
	height:10px;
	max-height:5%;
}
#footer{
position:absolute;
bottom:0px;
height:80px;
width:100%;
}
#img{max-width:100%; min-width:5%; width:40px; height:40px; border-radius:100px; webkit-border-radius:100px;}
#img1{max-width:100%; min-width:20%}
    
    
    
    ::-webkit-scrollbar {
  width: 10px;
}
    ::-webkit-scrollbar-track {
  background: #D3D3D3;
}
    ::-webkit-scrollbar-thumb {
  background: #ACACAC;
    border-radius: 60px;
}