@media (width >= 40rem){.calculator{border:1px solid #b3b3b3;border-radius:.375rem;width:240px;height:420px;font-family:Arial,sans-serif;margin:auto;padding:10px}.output{height:40px;display:flex;align-items:center;justify-content:flex-start;padding-left:10px;padding-right:20px;overflow:hidden}.buttons{display:grid;grid-template-columns:repeat(5,1fr);grid-gap:5px;color:var(--background)}button{border:none;border-radius:.375rem;padding:10px;background-color:var(--foreground);cursor:pointer;font-size:16px}}@media (width < 40rem){.calculator{border:1px solid #b3b3b3;border-radius:.375rem;width:210px;height:385px;font-family:Arial,sans-serif;margin:auto;padding:10px}.output{height:40px;display:flex;align-items:center;justify-content:flex-start;padding-left:10px;padding-right:20px;overflow:hidden}.buttons{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:5px;color:var(--background)}button{border:none;border-radius:.375rem;padding:8px;background-color:var(--foreground);cursor:pointer;font-size:16px}}.screen{border:1px solid #ccc;border-radius:.375rem;padding:0;margin-bottom:10px;margin-top:10px}.result{font-size:20px}button:hover{background-color:#ddd}button:active{background-color:#ccc}.bg-green{background-color:rgba(0,177,29,.651);color:#fff;grid-column-start:2;grid-column-end:6}.bg-green:hover{background-color:rgba(0,231,39,.651);color:#fff}.bg-red{background-color:rgba(223,4,4,.651);color:#fff;grid-row-start:1;grid-row-end:3}.bg-red:hover{background-color:rgba(255,1,1,.651);color:#fff}.bg-blue{background-color:rgba(4,4,223,.651);color:#fff}.bg-blue:hover{background-color:rgba(1,40,225,.651);color:#fff}