*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
:root{
    --containerbg1:#051d16;
    --containerbg2:#2c3c48;
    --bg:#000;
    --color:#fff;
    --btnbg:#555;
    --opratorbg:orange;
    --opratortop:#999;
    --opratortopcolor:#000;
}
.light
{
    --containerbg1:#C1ECE4;
    --containerbg2:#3AA6B9;
    --bg:#bbb;
    --color:#000;
    --btnbg:#fff;
    --opratorbg:orange;
    --opratortop:#aaa;
    --opratortopcolor:#000;

}
.container
{
    background-image: linear-gradient(45deg,var(--containerbg1),var(--containerbg2));
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.calc{
    background-color: var(--bg);
    border-radius: 10px;
    padding: 45px;
}
.calc form input{
  border: none;
  outline: none;
  width: 65px;
  height: 65px;
  margin: 4px;
  background-color: var(--btnbg);
  color: var(--color);
  border-radius: 50%;
  font-size: 23px;
}
.dis
{
    display: flex;
    align-items: center;
    justify-content: end;
}
#dis{
    flex: 1;
    border-radius:0px;
    text-align: right;
    background-color: transparent;
    font-size: 35px;
}
.row input
{
    background-color: var(--opratorbg);
    
}
#op
{
    background-color: var(--opratorbg);
}
#topop
{
    background-color: var(--opratortop);
    color: var(--opratortopcolor);
}
nav{
    position:absolute;
    top: 10px;
    right: 10px;
    background-color: var(--opratortop);
    border-radius: 50%;
    cursor: pointer;
    padding: 10px;
}
nav img{
    width: 40px;
    height: 40px;
}