:root{font-family:Funnel Display,sans-serif;line-height:1.5;box-sizing:border-box}body{height:97vh;display:flex;justify-content:center;align-items:center;background:linear-gradient(135deg,#232526,#414345)}.container{height:650px;width:420px;border-radius:17px 15px 15px;border:solid 2px black}.value_box{height:15%;width:100%;color:#fff;display:flex;justify-content:flex-start;align-items:center;border:solid 2px #454545;border-top-left-radius:14px;border-top-right-radius:15px;background-color:#454545;overflow:hidden;box-shadow:0 2px 10px #2228;background:linear-gradient(90deg,#454545 80%,#5a5a5a)}.output_text{color:#fff;font-size:55px;font-weight:700;padding-left:10px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;letter-spacing:2px;text-shadow:0 2px 8px #000a}.input_box{height:85%;width:100%;display:flex;justify-content:space-evenly;flex-wrap:wrap;gap:10px;overflow:hidden;border-bottom-left-radius:14px;border-bottom-right-radius:14px;background-color:#171717}.circle{height:80px;width:80px;color:#fff;font-size:40px;margin-top:20px;display:flex;justify-content:center;align-items:center;background-color:#454545;border-radius:50%;transition:background .2s,transform .1s,box-shadow .2s;box-shadow:0 2px 8px #2226 inset;cursor:pointer}.circle:hover{background-color:#6b6b6bf3;color:#fff}.circle:active{transform:scale(.95);box-shadow:0 1px 2px #111 inset}.circle:last-child,.circle:nth-child(17){margin-bottom:20px}.circle:last-child{margin-right:210px}.circle:nth-child(1),.circle:nth-child(5),.circle:nth-child(9),.circle:nth-child(13),.circle:nth-child(17){background-color:orange}.circle:nth-child(1):hover,.circle:nth-child(5):hover,.circle:nth-child(9):hover,.circle:nth-child(13):hover,.circle:nth-child(17):hover{background-color:#feb836;color:#fff}.circle.operator{background-color:#ff9800;color:#fff}.circle.operator:hover{background-color:#ffc107;color:#222}.value_box.error{box-shadow:0 0 20px #f00c}@media (max-width: 500px){.container{width:98vw;height:98vh;min-width:0;min-height:0;border-radius:10px;padding:0}.input_box{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:8px;justify-items:center;align-items:center}.circle{width:100%;height:auto;aspect-ratio:1 / 1;font-size:20px;margin:0;border-radius:50%;display:flex;justify-content:center;align-items:center}.output_text{font-size:24px;padding-left:3px}}@media (max-width: 500px){.container{width:90vw;height:90vh;min-width:0;min-height:0;border-radius:10px}.circle{width:80px;height:80px;font-size:28px;margin-top:10px}.output_text{font-size:32px;padding-left:5px}.input_box{gap:6px}}