*{box-sizing:border-box;margin:0;padding:0;font-family:sans-serif;text-decoration:none;list-style:none}body{background-color:#dddffb;flex-direction:column;justify-content:center;align-items:center;height:100vh;padding:1rem;display:flex}.calculator{background-color:#303d4e;border-radius:1rem;flex-direction:column;gap:1rem;width:100%;max-width:400px;padding:2rem;display:flex;box-shadow:0 0 20px #0003}.calculator .result{box-shadow:inset 8px 7px 3px -2px inset 8px 7px 3px -2px #74939c;color:#303d4e;text-align:right;background-color:#a2cfda;border:none;border-radius:1rem;outline:0;width:100%;padding:1rem;font-size:2.5rem}.calculator .control-row{grid-template-columns:repeat(2,1fr);gap:1rem;display:grid}@media (width<=480px){.calculator{padding:1rem}.calculator .result{padding:.75rem;font-size:2rem}}.buttons{grid-template-columns:repeat(4,1fr);gap:1rem;display:grid}button{color:#fff;cursor:pointer;background-color:#4d637e;border:.25rem solid #435870;border-radius:1rem;padding:1rem;font-size:2rem;transition:background-color .2s}button:hover{background-color:#3b5269}button[data-value=\/],button[data-value=\*],button[data-value=\-],button[data-value=\+],button[data-clear],button[data-delete]{background-color:#7f9fc5;border-color:#6582a7}button[data-value=\/]:hover,button[data-value=\*]:hover,button[data-value=\-]:hover,button[data-value=\+]:hover,button[data-clear]:hover,button[data-delete]:hover{background-color:#6a93c4}button[data-equals]{background-color:#ef7c3a;border-color:#d1622a}button[data-equals]:hover{background-color:#e76e28}@media (width<=480px){button{padding:.75rem;font-size:1.5rem}}.footer{color:#4d637e;text-align:center;margin-top:2rem;font-size:.9rem}.footer a{color:inherit;text-decoration:none}.footer a:hover{text-decoration:underline}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}}