@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');
:root {
 --text-color: #fff;
 --special-text: #6dd23d;
 --grey-text: #434343;
 --grey-text-active: rgb(165, 165, 165);
 --bg-color: #010101;
}
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
body {
 display: grid;
 place-items: center;
 background-color: rgb(18, 18, 18, 0.5);
 font-family: 'Roboto', sans-serif;
 height: 100vh;
}
#calc {
 border-radius: 15px;
 border: 1px solid grey;
 padding: 50px 20px 20px;
 background-color: var(--bg-color);
 color: #fff;
 width: 350px;
 box-sizing: border-box;
}
.calc__output { 
 font-size: 2rem;
 height: 96px;
 display: flex;
 justify-content: flex-end;
 flex-wrap: wrap;
 overflow: auto;
}
.calc__output-content {
 max-width: 100%;
 overflow-x: hidden;
 word-wrap: break-word;
}
.calc__output, 
.calc__temp {
 width: 100%;
 text-align: right;
 margin-left: auto;
}
.calc__temp {
 color: var(--grey-text);
 font-size: 1.5rem;
 height: 30px;
}
.calc__header {
 margin: 30px 0 20px;
 padding: 0 15px 15px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 color: var(--grey-text);
 border-bottom: 1px solid rgba(165, 165, 165, 0.5);
}
.calc__header i.active, 
.calc__header i.special {
 cursor: pointer;
}
.calc__header i.active {
 color: var(--grey-text-active);
}
.calc__btns {
 display: grid;
 grid-template-columns: repeat(4, 62px);
 grid-template-rows: repeat(5, 62px);
 column-gap: 20px;
 row-gap: 10px;
 position: relative;
}
.calc__btns-item {
 display: grid;
 place-items: center;
 background-color: #171717;
 border-radius: 50%;
 cursor: pointer;
 font-size: 1.8rem;
}
.calc__btns-item strong,
.calc__btns-item i {
 pointer-events: none;
}
.calc__btns-item.special {
 font-size: 1.5rem;
}
.calc__btns-item.c {
 color: #f86960;
}
.calc__btns-item.equal {
 font-size: 2.5rem;
 background-color: #308606;
}
.calc__btns-item.unfinished {
 opacity: 0.5;
 cursor: auto;
}
.special {
 color: var(--special-text);
}
.calc__btns-history {
 position: absolute;
 width: calc(100% - 62px - 10px);
 height: 100%;
 background-color: var(--bg-color);
 border-right: 1px solid var(--grey-text);
 text-align: end;
 transition: all 0.5s;
 z-index: 2;
}
.calc__btns-history-clear {
 display: grid;
 place-items: center;
}
.calc__btns-history-clear-btn {
 background-color: var(--grey-text);
 color: #fff;
 padding: 10px 20px;
 border-radius: 20px;
 border: none;
 margin: 10px 0;
 cursor: pointer;
}
.calc__btns-history-slide {
 height: 90%;
 overflow: auto;
 word-wrap: break-word;
 padding: 0 10px 0 20px;
}
.calc__btns-history-slide-item {
 margin-bottom: 15px;
}
.calc__btns-history-slide-item div {
 cursor: pointer;
}
.calc__btns-history-slide-item-equation {
 margin-bottom: 10px;
}
@media only screen and (max-width: 390px) {
 body {
  height: 100svh;
 }
}
@media only screen and (max-width: 370px) {
 :root {
  --item: 55px;
 }
 #calc {
  width: 100%;
  padding: 50px 15px 20px;
 }
 .calc__btns {
  grid-template-columns: repeat(4, var(--item));
  grid-template-rows: repeat(4, var(--item));
  column-gap: calc((100% - var(--item) * 4) / 3);
  height: calc(var(--item) * 5 + 10px * 4);
 }
}