:root{
  --textcolor:black;
}
body
{
  color:var(--textcolor);
}
*
{
  font-family:Trebuchet MS;
}

input[type="text"],input[type="number"],textarea
{
  background-color:beige;
  font-weight:bold;
}
.numbersize
{
  font-size:1.2em;
}

.black { color:black; }
.red { color:crimson; }
.orange { color:orange; }
.blue { color:dodgerblue; }
.navy { color:navy; }
.green { color:green; }
.lime { color:lime; }
.silver { color:silver; }
.gray { color:gray; }
.yellow { color:yellow; }
.gold { color:gold; }

.total
{
  font-weight:bold;
}
.pointer
{
  cursor:pointer;
}

.btn,.badge
{
  position:relative;
  overflow:hidden;
  box-shadow:
    inset -5px 5px 5px rgba(255, 255, 255, 0.2),
    inset 5px -5px 5px rgba(127, 127, 127, 0.2)
  ;
}
.btn::before,.badge::before
{
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:calc(100% - 4px);
  height:calc(50% - 2px);
  background:rgba(255, 255, 255, 0.3);
  border-radius:2px;
  pointer-events:none;
}