:root {
  --dark-color: #1d1d1d;
  --darker-color: #0c0c0c;
  --light-color: #ccc;
  --accent-color: #ffa500;
  --contrast-dark-color: #000;
  --contrast-light-color: #fff;
  --basic-time: 0.5s;
  --basic-font-family: 'Roboto', sans-serif;
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html,
body {
  margin: 0;
}

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  min-height: 100vh;
  padding-top: 50px;
  margin-bottom: 50px;
}

.calculator {
  --button-size: 70px;
  --gap: 10px;
  --gap-between-buttons: calc(var(--button-size) / 6);
  --button-radius: calc(var(--button-size) / 2);
  --panel-gap: var(--gap);
  --output-gap: calc(var(--gap) * 2);
  --output-height: calc(var(--button-size) * 1.6);
  margin: auto;
  border-radius: var(--button-radius);
  background-color: var(--darker-color);
  display: -ms-inline-grid;
  display: inline-grid;
  -ms-grid-rows: var(--output-height) min-content;
      grid-template-rows: var(--output-height) -webkit-min-content;
      grid-template-rows: var(--output-height) min-content;
      grid-template-areas: 'output' 'panel';
  position: relative;
  overflow-y: hidden;
}

.calculator__output {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: output;
  padding: var(--output-gap);
  color: var(--contrast-light-color);
  background-color: var(--darker-color);
  position: relative;
  cursor: pointer;
  z-index: 2;
}

.calculator__result {
  left: var(--output-gap);
  font: 400 40px sans-serif;
  text-align: right;
  position: absolute;
  right: var(--output-gap);
  bottom: var(--output-gap);
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

.calculator__panel {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: panel;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (min-content)[2];
      grid-template-columns: repeat(2, -webkit-min-content);
      grid-template-columns: repeat(2, min-content);
  -ms-grid-rows: (min-content)[2];
      grid-template-rows: repeat(2, -webkit-min-content);
      grid-template-rows: repeat(2, min-content);
      grid-template-areas: 'top right' 'numbers right';
  gap: var(--gap-between-buttons);
  padding: var(--panel-gap);
  border-top: 1px solid var(--dark-color);
  position: relative;
  z-index: 1;
}

.calculator__buttons {
  display: -ms-grid;
  display: grid;
  gap: var(--gap-between-buttons);
}

.calculator__buttons_top {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: top;
  -ms-grid-columns: (var(--button-size))[3];
      grid-template-columns: repeat(3, var(--button-size));
  -ms-grid-rows: var(--button-size);
      grid-template-rows: var(--button-size);
}

.calculator__buttons_right {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  -ms-grid-column: 2;
  grid-area: right;
  -ms-grid-columns: var(--button-size);
      grid-template-columns: var(--button-size);
  -ms-grid-rows: (var(--button-size))[5];
      grid-template-rows: repeat(5, var(--button-size));
}

.calculator__numbers {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: numbers;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (var(--button-size))[3];
      grid-template-columns: repeat(3, var(--button-size));
  -ms-grid-rows: (var(--button-size))[4];
      grid-template-rows: repeat(4, var(--button-size));
  gap: var(--gap-between-buttons);
}

.calculator__button {
  border: none;
  padding: 0;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: var(--button-radius);
  font: 700 calc(var(--button-size) / 3) var(--basic-font-family);
  background-color: var(--dark-color);
  color: var(--contrast-light-color);
  -webkit-transition: var(--basic-time);
  transition: var(--basic-time);
}

.calculator__button:hover {
  background-color: #101010;
}

.calculator__button_light {
  background-color: var(--light-color);
  color: var(--contrast-dark-color);
}

.calculator__button_light:hover {
  background-color: #b3b3b3;
}

.calculator__button_accent {
  background-color: var(--accent-color);
  color: var(--contrast-light-color);
}

.calculator__button_accent:hover {
  background-color: #cc8400;
}

.calculator__button_wider {
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1 / 3;
}

.calculator__history {
  position: absolute;
  top: -100px;
  left: -100px;
  height: 30px;
  width: 30px;
  background-color: var(--darker-color);
  padding: var(--gap);
  text-align: right;
  -webkit-transition: var(--basic-time);
  transition: var(--basic-time);
  border-radius: 50%;
}

.calculator__history_visible {
  border-radius: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.calculator__history-hide {
  cursor: pointer;
  display: inline-block;
  padding: 0;
  background: none;
  border: none;
  font: 700 calc(var(--button-size) / 4) var(--basic-font-family);
  color: var(--contrast-light-color);
}

.calculator__records {
  margin-top: 0;
  margin-bottom: 0;
  list-style-type: none;
  padding-left: 0;
}

.calculator__record {
  font: 400 calc(var(--button-size) / 4) var(--basic-font-family);
  color: var(--contrast-light-color);
}
/*# sourceMappingURL=style.css.map */