@import url('https://fonts.googleapis.com/css2?family=Galdeano&display=swap');
:root{--bg-color:black;--font-color:white;--display-font-color:greenyellow;--btn-bg-color:#454545;--btn-hover-shadow:rgba(255, 255, 255, 0.8);--btn-active-bg:#353565;--operation-btn-bg:#252422;--operation-btn-color:white;--equal-btn-bg:linear-gradient(220deg, hsla(205, 46%, 10%, 1) 0%, hsla(191, 28%, 23%, 1) 50%, hsla(207, 41%, 27%, 1) 100%)}
.light-mode{--bg-color:#FEFAE0;--font-color:black;--display-font-color:#DDA15E;--btn-bg-color:#CCD5AE;--btn-hover-shadow:rgba(0, 0, 0, 0.2);--btn-active-bg:#FAEDCD;--operation-btn-bg:#E9EDC9;--operation-btn-color:black;--equal-btn-bg:linear-gradient(90deg, hsla(74, 50%, 64%, 1) 0%, hsla(67, 93%, 84%, 1) 100%)}
*{font-family: "Galdeano", sans-serif;font-weight: 500;font-style: normal;color:var(--font-color);overflow:hidden;letter-spacing:1px;background-color:var(--bg-color)}
body{min-height:100vh;margin:0;padding:0;display:flex;justify-content:center;align-items:center}.container{height:100vh;flex-direction:column;width:100vh}
.functions{justify-content:space-between;padding:0;margin:.5rem .25rem;border-radius:.5rem;font-style:italic}.functions i{margin-top:1.5vh;font-size:2.8vh;padding:0}
.btn-container .item,.display,.functions{display:flex;align-items:center}
.display{justify-content:right;padding:3vw;height:34vw;margin:.2vw 1.5vw;font-size:3rem;border:0;border-radius:.8rem}
.btn-container{display:grid;grid-template-rows:repeat(5,1fr);grid-template-columns:repeat(4,1fr);padding:1vw;margin-top:1em;grid-gap:4.5vw}.btn-container .item{background-color:var(--btn-bg-color);height:21vw;width:21vw;justify-content:center;border-radius:50%;font-size:1.3rem;color:var(--font-color)}
.btn-container .item:hover{box-shadow:-1px -1px 1px var(--btn-hover-shadow)}.btn-container .item:active{background:var(--btn-active-bg);transform:scale(.94)}.btn-container>.item:nth-child(-n+4),.btn-container>.item:nth-child(4n){background-color:var(--operation-btn-bg);color:var(--operation-btn-color)}.btn-container>.item:nth-child(-n+4):active,.btn-container>.item:nth-child(4n):active{background:var(--btn-active-bg)}.btn-container .equal{background:var(--equal-btn-bg)}