/* calcStyle.css */

/* content alignment */
#content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  }

/* container alignment */
#container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  }

/* display alignment and styling */
#display {
  height: 50px;
  background-color:#2a3a56;
  color: white;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 10px;
  font-size: 25px;
  }

/* BTN-GROUP */
/* btn-group alignment and styling */
.btn-group button {
  background-color: #2a3a56; 
  border: 1px solid rgb(0, 0, 0);
  color: white; 
  width: 50px;
  padding: 20px 30px; 
  cursor: pointer;
  float: left;
}

/* add button background color on hover */
.btn-group button:hover {
  background-color: #7eb9d5;
}

/* BTN-GROUP1 */
/* btn-group1 alignment and styling */
.btn-group1 button {
  background-color: #7eb9d5; 
  border: 1px solid rgb(0, 0, 0);
  color: white; 
  width: 50px;
  padding: 20px 30px; 
  cursor: pointer;
  float: left;
}

/* add button background color on hover */
.btn-group1 button:hover {
  background-color: #2a3a56;
}

/* BTN-GROUP SPECIAL */
/* btn-group alignment and styling */
.btn-group .special {
  background-color: #7eb9d5; 
}

.btn-group .special:hover {
  background-color: #2a3a56;
}

/* BTN-GROUP2 */
/* btn-group2 alignment and styling */
.btn-group2 button {
  background-color: #2a3a56; 
  border: 1px solid rgb(0, 0, 0);
  color: white; 
  width: 50px;
  padding: 20px 30px; 
  cursor: pointer;
  float: left;
  border-radius: 4px;
}

/* add button background color on hover */
.btn-group2 button:hover {
  background-color: #7eb9d5;
}

/* BTN-GROUP2 SPECIAL */
/* btn-group2 alignment and styling */
.btn-group2 .special {
  background-color: #7eb9d5; 
}

.btn-group2 .special:hover {
  background-color: #2a3a56;
}

/* BTN-GROUP2 SPECIAL2 */
/* btn-group2 alignment and styling */
.btn-group2 .special2 {
  background-color: #facc76;
}

.btn-group2 .special2:hover {
  background-color: #e98b55;
}

/* overriding specific button borders */
#btnClr {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 1px;
  border-top-right-radius: 1px;
  border-top-left-radius: 1px;
  border-left-width: medium;
}

#btnDiv {
  border-bottom-right-radius: 1px;
  border-bottom-left-radius: 4px;
  border-top-right-radius: 1px;
  border-top-left-radius: 1px;
  border-right-width: medium;
}

#btn7, #btn4, #btn1 {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 1px;
  border-top-right-radius: 4px;
  border-top-left-radius: 1px;
  border-left-width: medium;
}

#btnMult, #btnSub, #btnAdd {
  border-bottom-right-radius: 1px;
  border-bottom-left-radius: 4px;
  border-top-right-radius: 1px;
  border-top-left-radius: 4px;
  border-right-width: medium;
}

#btnDec {
  border-bottom-right-radius: 1px;
  border-bottom-left-radius: 4px;
  border-top-right-radius: 4px;
  border-top-left-radius: 1px;
  border-left-width: medium;
  border-bottom-width: medium;
}

#btn0, #btnBck {
  border-bottom-right-radius: 1px;
  border-bottom-left-radius: 1px;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  border-bottom-width: medium;
}

#btnEqu {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 1px;
  border-top-right-radius: 1px;
  border-top-left-radius: 4px;
  border-right-width: medium;
  border-bottom-width: medium;
}