style.css

/* * and root and other general rules */
/* ---------------------------------------------------------- */
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  background-color: var(--bcd);
  overflow: hidden;
}
:root {
  /* Background Color Dark*/
  --bcd: rgb(243, 243, 243);
  /* Background Color Light */
  --bcl: rgb(249, 249, 249);
  /* Disabled Color */
  --dc: rgb(190, 190, 190);
  /* Hover Color */
  --hc: rgb(224, 224, 224);
}
/* Setting up the whole calculator */
.wrapper-all {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 40px 35px 23vh 1fr 0px;
  grid-template-areas:
    "header"
    "main"
    "main"
    "numbers"
    "history";
}
/* Grid area Names */
.wrapper-header {
  grid-area: header;
}
.wrapper-main {
  grid-area: main;
}
.wrapper-num-fun {
  grid-area: numbers;
}
/* .wrapper-history */
.wrapper-history-memory {
  grid-area: history;
  padding-top: 5px;
}
.noSelect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

/* ============================================================ */

/* Header */
/* ------------------------------------------------------------ */
.container.wrapper-header {
  display: grid;
  grid-template-columns: 1fr repeat(3, 50px);
  grid-template-rows: 40px;
}
.wrapper-header p {
  text-align: center;
  padding-top: 8px;
}
.name p {
  font-family: sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  padding-left: 0.5rem;
  text-align: left;
}
.top-bar p {
  font-size: 1rem;
  font-weight: 500;
}
.top-bar.close:hover {
  background-color: rgb(253, 40, 40);
  color: white;
}
.top-bar.minimize:hover,
.top-bar.maximize:hover {
  background-color: #acacac;
}
/* ============================================================ */

/* Main */
/* ------------------------------------------------------------ */
/* Main grid Defined */
.container.wrapper-main {
  display: grid;
  grid-template-columns: 40px 90px 40px 1fr 40px;
  grid-template-rows: 35px minmax(50px, 16vh) 6vh;
  grid-template-areas:
    "bars standard pop . history"
    "input input input input input"
    "m m m m m";
}
/* Grid areas defined and set to stay in the center */

.main.bars {
  grid-area: bars;
}
.main.standard {
  grid-area: standard;
}
.main.standard p {
  font-family: sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
}
.main.history {
  grid-area: history;
}
.main.number {
  grid-area: input;
  padding-right: 3px;
}
.m {
  grid-area: m;
}
.main.pop {
  grid-area: pop;
}

.main {
  display: flex;
  justify-content: center;
  align-items: center;
}
.main.number {
  flex-direction: column;
}
/* .................... */
/* Applying no effects fot input and the required font size and the holder*/
.main.number div {
  margin-top: 5px;
  background-color: var(--bcd);
  border: none;
  outline: none;
  width: 100%;
  height: 100%;
  text-align: right;
  font-size: 3rem;
  vertical-align: middle;
}
#holder {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 25px;
  font-size: 16px;
}
/* .................... */
/* The part for M's has different grid behavior and will need a different grid */
.m {
  display: grid;
  grid-template-columns: repeat(6, minmax(30px, 80px));
  grid-template-rows: 6vh;
}
.main-m {
  display: flex;
  justify-content: center;
  align-items: center;
}
.main-m.mt {
  padding-bottom: 8px;
}

/* .................... */
/* Set hover for items in Main */
.bars:hover,
.pop:hover,
.history:hover,
.mh:hover {
  background-color: var(--dc);
}
/* .................... */
/* Disabled M's in calculator */
.md {
  color: var(--dc);
}
/* ============================================================ */

/* Numbers and Functions */
/* ------------------------------------------------------------ */
/* Making a grid for numbers and functions */
.wrapper-num-fun {
  margin-top: 3px;
  display: grid;
  grid-template-columns: repeat(4, minmax(70px, 1fr));
  grid-template-rows: repeat(6, minmax(40px, 1fr)) 0px;
  gap: 2px;
}
.cube-x {
  padding-top: 10px;
}
/* .................... */
/* Setting up the divs for hover and centering the content */
.functions,
.numbers {
  display: flex;
}
.functions,
.numbers {
  justify-content: center;
  align-items: center;
}
.wrapper-num-fun > button:hover {
  background-color: var(--hc);
}
.bigger {
  font-size: 1.3rem;
}
/* .................... */
/* Setting a different color for functions and numbers */
.functions {
  background-color: var(--bcl);
  border: none;
}
.numbers {
  background-color: white;
  border: none;
}
/* ============================================================ */

/* Setting up the max width of 480 */
@media only screen and (max-width: 480px) {
  body {
    min-width: 240px;
    min-height: 500px;
  }
}
@media only screen and (min-width: 481px) and (max-width: 499px) {
  body,
  html {
    min-height: 500px;
  }
  .m {
    display: grid;
    grid-template-columns: repeat(5, minmax(30px, 80px)) 1fr;
    grid-template-rows: 6vh;
  }
  .main-m.mt {
    justify-self: right;
    align-self: center;
    padding-bottom: 8px;
    padding-right: 5px;
  }
}
@media only screen and (min-width: 500px) {
  .wrapper-all {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr minmax(200px, 320px);
    grid-template-rows: 40px 35px 23vh minmax(200px, 420px);
    grid-template-areas:
      "header header"
      "main history"
      "main history"
      "numbers history";
  }
  .wrapper-history-memory {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 30px 1fr;
  }
  .container-history-memory {
    display: flex;
    justify-content: space-evenly;
  }
  .history-memory-show {
    padding-left: 25px;
  }
  .history-m {
    font-family: sans-serif;
    padding-bottom: 3px;
    cursor: pointer;
  }
  .selectedBorder {
    border-bottom: solid orange 2px;
  }
  .memory {
    cursor: pointer;
    padding-bottom: 3px;
    font-family: sans-serif;
  }
  .list-style {
    list-style: none;
  }
  .history {
    visibility: hidden;
  }
  .m {
    display: grid;
    grid-template-columns: repeat(6, minmax(30px, 80px));
    grid-template-rows: 6vh;
  }
  .main-m {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .main-m.mt {
    justify-self: center;
    align-self: center;
    padding-right: 0px;
    margin: 0px;
    visibility: hidden;
  }
}
@media only screen and (min-width: 800px) {
  .numbers p,
  .functions p {
    font-size: 1.4rem;
  }
}
@media only screen and (min-width: 1000px) {
  .wrapper-num-fun {
    margin-top: 3px;
    display: grid;
    grid-template-columns: repeat(5, minmax(70px, 1fr));
    grid-template-rows: repeat(5, minmax(40px, 1fr));
    gap: 2px;
    grid-template-areas:
      "percent ce c delete division"
      "root-x n7 n8 n9 multiplication"
      "squared-x n4 n5 n6 minus"
      "rectangle-x n1 n2 n3 plus"
      "one-divided-x plus-divided-minus n0 dot equals";
  }
  .cube-x {
    padding-top: 0px;
  }
  .percent {
    grid-area: percent;
  }
  .division-sign {
    grid-area: division;
  }
  .one-divided-x {
    grid-area: one-divided-x;
  }
  .squared-x {
    grid-area: root-x;
  }
  .x-squared {
    grid-area: squared-x;
  }
  .cube-x {
    grid-area: rectangle-x;
  }
  .one-divided-x {
    grid-area: one-divided-x;
  }
  .main.number div {
    font-size: 4.25rem;
  }
}