/* Google Font */
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

 /* UNIVERSAL SELECTOR */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: "Poppins", sans-serif;
 }

 /* Body */
 body {
     min-height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
     background: linear-gradient(45deg, #c0d4d6, #7ebec2, #549194);
     padding: 10px;
 }

 /* Calculator */
 .calculator {
     width: 100%;
     max-width: 360px;
     background: #fff;
     padding: 16px;
     border-radius: 16px;
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
 }

 /* Display */
 #inputBox {
     width: 100%;
     border: none;
     outline: none;
     font-size: clamp(28px, 5vw, 40px);
     padding: 20px;
     text-align: right;
     background: #f8f8f8;
     border-radius: 12px;
     margin-bottom: 12px;
 }

 /* Button Rows */
 .row {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 10px;
     margin-bottom: 10px;
 }

 /* Buttons */
 button {
     border: none;
     aspect-ratio: 1/1;
     font-size: clamp(16px, 4vw, 20px);
     border-radius: 10px;
     cursor: pointer;
     background: #ffffff;
     box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
     transition: 0.2s;
 }

 button:active {
     transform: scale(0.95);
 }

 /* Grey Buttons */
 .g-b {
     background: #353535;
     color: #fff;
 }

 /* Operator Buttons */
 .c-b {
     background: #3C6E71;
     color: #fff;
 }

 /* Mobile Adjust */
 @media(max-width:480px) {
     .calculator {
         max-width: 100%;
     }
 }

 nav {
     position: absolute;
     top: 20px;
     left: 20px;
 }



 a {
     padding: 10px;
     border-radius: 12px;
     background: rgb(7, 106, 109);
     text-decoration: none;
     color: #ffffff;
     font-weight: 800;
 }


 /* ===== DARK MODE ===== */
 body.dark-mode {
     background: linear-gradient(45deg, #121212, #1f1f1f, #2b2b2b);
     /* background: linear-gradient(45deg, #c0d4d6, #7ebec2, #549194); */


 }

 body.dark-mode .calculator {
     background: #1e1e1e;
     background: #3D6063;
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
 }

 body.dark-mode #inputBox {
     /* background: #6F9395; */
     color: #ffffff;
 }

 body.dark-mode button {
     background-color: #ffffff;
     color: #2e2e2e;
 }

 body.dark-mode .g-b {
     background: #2f2e2e;
     color: #fff;
 }

 body.dark-mode .c-b {
     /* background: #0fa3a9; */
     background: rgb(105, 154, 245);
 }

 body.dark-mode a {
     background: #0fa3a9;
     color: #fff;
 }