body {
    background-color: #d9def5;
    margin:0;
    padding:0;
    height: 100vh;
    width: 100%;

    display: flex;
    flex-direction: column;}


/* HEADER PART STYLING */
.webCalculator {
    display: flex;
    align-items: center;
    background-color: #92d0ff;
    width: 100%;
    height: 45px;
    justify-content: space-between;
    font-size: 16px;}

/* Left Part Of Header */
.left{
    font-size: 60px;
    padding-left:20px;
    cursor:context-menu;}

/*for three line menu icon of left styling*/
.menu-panel {
  position: absolute;
  top: 50px;
  left: 10px;
  background-color: #2c2f3a;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  padding: 10px;
  z-index: 100;
  transition: all 0.3s ease-in-out;}

.menu-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;}

.menu-panel li {
  padding: 10px 20px;
  color: white;
  cursor: pointer;
  border-bottom: 1px solid #444;}

.menu-panel li:hover {
  background-color: #3f424e;}

.menu {
    display: flex;
    justify-content: center;
    font-size: 25px;
    color: rgb(10, 187, 116);
    cursor: no-drop;}

#support {cursor:wait;}

/* menu hide by default */
.hidden {
  display: none;}

/* Mid Part Of Header */
.webCalculator h1{cursor: none;}

/* Right Part Of Header */
.right {
    display: flex;
    height: 40px;
    padding-right: 50px;}


/* MAIN PART STYLING */
.display input {
    width:100%;
    padding: 10px;
    font-size: 28px;
    background-color: transparent;
    color: white;
    border: none;
    text-align: right;}

#input {
   direction: ltr;           
  text-align: right;        
  overflow-x: auto;        
  white-space: nowrap;}

.display input::placeholder {
    color: #9490ac;}

.calculator{
    font-family: "Roboto Mono", monospace;
    width: 100%;
    background-color: #071013;
    margin-top: 0px;
    border-radius: 7px;
    box-shadow: 0 20px 50px rgba(0,5,14,0.4);
    display: grid;
    grid-template-columns: repeat(11, 1fr);
    gap: 15px;
    box-sizing: border-box;
    flex: 1;
    padding: 20px 10px;
    overflow-y: auto;}


/* degree radian button*/
#modeSelector {
  margin: 6px 0;
  font-size: 16px;
  color: white;}

#modeSelector label {
  margin-right: 15px;}

.calculation {grid-column: span 6;}


    /* buttons container styling */
.buttons {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 12px;
    margin-top: 20px;}

    /* each button styling */
button {
    font-size: 16px;
    padding: 12px;
    border:none;
    border-radius: 10px;
    color: white;
    cursor: pointer;}

.button:active {
  transform: scale(0.92);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);}

.digit {
    background-color: #6c6a6a;}

.digit:hover {
    background-color: #6c6a6aa8;}

.operator {background-color: rgb(255, 81, 0);}

.operator:hover{background-color: red;}

#equal {
    grid-row: span 2;
    background-color: #f84940;}

#equal:hover {
    background-color: #f9544ca8;}

#zero {grid-column: span 2;}

.side{
    background-color: #333;}

.side:hover {
    background-color: rgba(51, 51, 51, 0.659);}


/* Scientific function button styles*/

#scientificButtons {
    display: none;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
    justify-content: start;
    max-width:460px;}

#scientificButtons button {
    font-size: 15px;
    padding: 12px;
    min-width: 50px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    background-color: #444;
    color: white;}

#scientificButtons button:hover {
    background-color: #5c5c5c;}


  /* History Container Styling */
.history{ grid-column: span 4;
          padding-left: 15px;
          overflow:auto;
          max-height: 100%;}

#historyTitle {         
    color: aliceblue;
    text-align:center;
    font-size: 18px;}

.history-delete {
    font-size: 10px;
    padding: 5px;
    border: none;
    cursor: pointer;
    margin: 5px;
    border-radius: 5px;}


/* toggle between light and dark mode
/* Light Mode Styling Overrides */
body.light-mode {
    background-color: #f0f0f0;}

body.light-mode .webCalculator {
    background-color: #ffffff;
    color: rgb(0, 0, 0);}

/* menu icon color styling in light mode */
body.light-mode .menu-panel {
  background-color: #fff;
  border: 1px solid #ccc;}

body.light-mode .menu-panel li {
  color: #000;
  border-bottom: 1px solid #eee;}

body.light-mode .menu-panel li:hover {
  background-color: #f0f0f0;}

/* calculator light theme */
body.light-mode .calculator {
    background-color: #ffffff;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);}

body.light-mode .display input::placeholder {
    color: #666;}

body.light-mode #modeSelector {
  color: black;}

/* each button color styling in light mode */
body.light-mode .digit {
    background-color: #b7b4b4;
    color: black;}

body.light-mode .digit:hover {
    background-color: #d0d0d0;}

body.light-mode .operator {
    background-color: #ff5722;
    color: white;}

body.light-mode .operator:hover {
    background-color: #e92d08;}

body.light-mode #equal {
    background-color: #f96132;}

body.light-mode #equal:hover {
    background-color: #d67c60;}

body.light-mode .side {
    background-color: #a09f9f;
    color: black;}

body.light-mode .side:hover {
    background-color: #b5b5b5;}


body.light-mode #historyTitle,
body.light-mode .display input {
    color: #000;}

body.light-mode #historyContent *{
    color: #000 !important;}

/* Scientific buttons color styling in light mode */
body.light-mode #scientificButtons button {
    background-color: #cfcfcf;
    color: black;}

body.light-mode #scientificButtons button:hover {
    background-color: #e0e0e0;}


/* responsive code for screen width upto 600px */

@media (max-width: 600px) {
  body {
    padding: 5px;
    font-size: 14px;}

  .webCalculator {
    align-items: center;
    gap: 10px;}

  h1 {
    font-size: 22px;
    text-align: center;}

  .left, .right {
    font-size: 24px;
    padding: 0;}

  .calculator {
    align-items: center;
    gap: 15px;}

  .calculation, .history {
    width: 100%;
    padding: 0 8px;}

  .display input {
    font-size: 20px;
    padding: 10px;
    width: 100%;}

  .buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;}

  .buttons button,
  #scientificButtons button {
    padding: 10px;
    font-size: 15px;
    min-width: 40px;}

  #scientificButtons {
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;}

  .history {
    max-height: 400px;
    overflow-y: auto;
    font-size: 13px;}

  #modeSelector label {
    font-size: 13px;
    margin-right: 10px;}}


@media (min-width:600px) and (max-width:740px) {
  .calculator{display: flex;
              flex-direction: column;}}
@media (max-width:280px) {
  .calculator{display: flex;
              flex-direction: column;}}