html{
/* margin: 0;
padding:0;
line-height: 0.5; */
background-image: url(peakpx-PhotoRoom.jpg);
/* font-family: sans-serif; */
width: 100%;
height: 100%;
position: fixed;
background-size: cover;
}
hr{
width: 14rem;
}
.calci{
box-shadow: 5px 5px 10px #000000;
width: 18rem;
height: 22rem;
padding-top: 2.5rem;
padding-bottom: 6rem;
position: absolute;
top:50%;
left:80%;
transition:0.25px;
transform: translate(-50%,-50%);
text-align: center;
}
#zero{
height: 3.4rem;
width: 7rem;
font-family: sans-serif;
font-weight: 18.7rem;
}
#display{
margin-bottom: 0.9rem;
border:none;
background: #cfe2dd;
border-radius: 10px;
width: 15rem;
font-size: 20;
font-family: sans-serif;
font-weight: bold;
height: 3.7rem;
border:2px solid black(5, 218, 255, 0.726);
color: black;
box-shadow: 0px 0px 5px
}
.button{
width: 3.4rem;
height: 3.4rem;
padding-top: -1;
font-size: 20;
border: none;
background: #ff6109;
color: rgb(220, 219, 219);
font-family: sans-serif;
font-weight: 300;
border:0;
border-radius: 1.8rem;
margin: 1.5;
transition:0.25px;
box-shadow: 0px 0px 2px black;
}
h2{
position: absolute;
margin-top: 3rem;
color: rgb(252, 193, 30);
font-size: 0.6rem;
font-family: monospace;
margin-left: 3rem;
}
.operator{
width: 55;
height: 55;
padding-top: -1;
font-size: 20;
text-align: center;
color: white;
border: none;
background: hsl(21, 100%, 52%);
font-family: sans-serif;
font-weight: 31rem;
border:0;
border-radius: 1.8rem;
margin: 1.5;
transition:0.25px;
cursor:pointer;
box-shadow: 0px 0px 2px black;
}
@media only screen and (min-width: 1000px){
.button:hover{
background: #00d9ff;
box-shadow: 0px 0px 5px
}
.operator:hover{
background: #00d9ff;
box-shadow: 0px 0px 5px
}
h2{
position: relative;
margin-top: 47%;
margin-left: 70%;
}
}
@media only screen and (max-width: 1000px){
.calci{
left: 32rem;
box-sizing: inherit;
background-size: cover;
height: 55rem;
width: 40rem;
background: rgba(252, 146, 16, 0.675);
}
.phone{
position: relative;
top: 10rem;
}
.op{
width: 13rem;
position: relative;
}
hr{
width: 30rem;
}
h2{
margin-left: 30%;
margin-top: 38%;
color: rgb(255, 255, 255);
z-index: 1;
font-size: 20px;
}
.button{
box-shadow: 0px 0px 5px black;
padding: 50px;
font-size: xx-large;
font-weight: bold;
border-radius: 50px;
margin: 5.5;
}
.operator{
box-shadow: 0px 0px 5px black;
font-size:25px ;
padding: 50px;
font-weight: bold;
margin: 5.5;
font-size: xx-large;
}
#display{
width: 70%;
height: 90px;
margin-bottom: 30px;
}
}
/*
Design-Calculator
online calculator
By:- Tech Projects
*/