html {
    display: table;
    width: 100%;
    height: 100%;
}
body {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  height: 100%;
}

#calculator {
  position: relative;
  margin: 0 auto;
  background-color: white;
  width: 380px;
  height: 600px;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
  border-radius: 30px;
}
#theme {
  position: absolute;
  top: 0;
  right: 48%;
  color: white;
  padding: 4px 7px;
  border-radius: 30px;
}

table {
  padding: 5px 10px;
  width: 100%;
}
thead, tr, tbody, tfoot {
  width: 100%;
}
img {
  width: 20px;
  height: 20px;
  padding-top: 5px;
}
#result {
  position: absolute;
  right: 15px;
  top: 105px;
  font-size: 30px;
}
/*== Light theme style==*/
input {
  background-color: #EAEFF9;
  width: 377px;
  height: 150px;
  border-radius: 30px;
  border-radius: 30px;
  border: 0;
  font-size: 50px;
  text-align: right;
  color: black;
  margin-bottom: 15px;
}
td {
  background-color: #F7F9FC;
  font-size: 40px;
  width: 25%;
  height: 80px;
  color: #001D35;
  text-align: center;
  border-radius: 50%;
}
.bar {
  background-color: #C2E7FF;
}
/*== Dark theme style==*/
.input {
  background-color: #37393D;
  color: white;
}
.main {
  background-color: #28282A;
  color: #C2E7FF;
}
.dark-bar {
  background-color: #004A77;
  color: #C2E7FF;
}