@import "https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap";*{box-sizing:border-box;margin:0;padding:0}html{font-size:62.5%}:root{--bg-main:#3a4764;--bg-toggle:#232c43;--bg-screen:#182034;--key-primary-bg:#637097;--key-primary-bg-hover:#97a4c8;--key-primary-shadow:#404e72;--key-accent-bg:#d03f2f;--key-accent-bg-hover:#ea867b;--key-accent-shadow:#93261a;--key-accent-bg-two:#ca5502;--key-accent-bg-three:#00e0d1;--key-light-bg:#e6e6e6;--key-light-bg-hover:#fff;--key-light-shadow:#b4a597;--text-dark:#444b5a;--text-light:#fff;--size:32px;--Font-weight:700;--Font-family:"League Spartan", sans-serif;--text:#fff}.theme-2{--bg-main:#e6e6e6;--bg-toggle:#d1cccc;--bg-screen:#ededed;--key-primary-bg:#377f86;--key-primary-bg-hover:#58c1ca;--key-primary-shadow:#1b5f65;--key-accent-bg:#ca5502;--key-accent-bg-hover:#f83;--key-accent-shadow:#893901;--key-light-bg-hover:#fff;--key-light-bg:#e6e6e6;--key-light-shadow:#a69d91;--text-dark:#35352c;--text-light:#fff;--text:#1b2428}.theme-3{--bg-main:#160628;--bg-toggle:#1d0934;--bg-screen:#1d0934;--key-primary-bg:#58077d;--key-primary-bg-hover:#a000eb;--key-primary-shadow:#bc15f4;--key-accent-bg:#00e0d1;--key-accent-bg-hover:#47fff3;--key-accent-shadow:#6cf9f2;--key-light-bg:#341c4f;--key-light-bg-hover:#65379a;--key-light-shadow:#871c9c;--text-dark:#ffe53d;--text-light:#000;--text:#ffe53d}body{font-family:var(--Font-family);background-color:var(--bg-main);font-weight:var(--Font-weight);color:var(--text-light);flex-direction:column;justify-content:center;align-items:center;min-height:100vh;transition:all .5s ease-in-out;display:flex}main{width:fit-content}.calc__display,.calc__buttons{font-size:3.2rem}.calc{width:37rem;height:71.3rem;padding:3rem}.calc__header,.calc__theme,.calc--themes{justify-content:space-between;align-items:flex-end;display:flex}.calc__header h1{font-size:3.2rem}.calc__theme{gap:3.5rem;transform:translate(-.6rem)}.calc__theme h2{text-transform:uppercase;font-size:1.5rem}.calc--themes{gap:.5rem}.calc--themes div{flex-direction:column;align-items:center;gap:1.2rem;display:flex}label{font-size:1.4rem}input[type=radio]{appearance:none;cursor:pointer;border-radius:50%;width:2rem;height:2rem;transition:all .5s ease-in-out}input[type=radio]:hover,input[type=radio]:active{filter:brightness(1.3)}input[type=radio]:checked{background-color:var(--key-accent-bg)}.calc--themes :nth-child(2) input[type=radio]:checked{background-color:var(--key-accent-bg-two)}.calc--themes :nth-child(3) input[type=radio]:checked{background-color:var(--key-accent-bg-three)}.calc--themes:before{content:"";background-color:var(--bg-toggle);z-index:-1;border-radius:2rem;width:8rem;height:3rem;position:absolute;transform:translateY(.5rem)translate(-.5rem)}.calc__header{margin-bottom:3.5rem}.calc__display{background-color:var(--bg-screen);border-radius:1rem;justify-content:flex-end;align-items:center;min-height:10rem;margin-bottom:2.5rem;padding:2rem;transition:all 1s ease-in;display:flex}.calc__display p{white-space:nowrap;text-align:right;letter-spacing:.2rem;width:100%;font-size:4rem;overflow-x:hidden}.result{flex-direction:column-reverse;justify-content:flex-end;align-items:center;display:flex}.calc__display .val{font-size:6rem}.calc__display #result{filter:brightness(1.9)}.calc__buttons{background-color:var(--bg-toggle);border-radius:1rem;grid-template-columns:repeat(4,1fr);justify-content:space-between;place-items:center;gap:1.5rem 1rem;margin-bottom:4rem;padding:2rem 2rem 2.5rem;display:grid}.numbers,.operators{color:var(--text-dark);font-size:3.5rem}.buttons{width:100%;font-weight:var(--Font-weight);background-color:var(--key-light-bg);height:6rem;box-shadow:0rem .5rem var(--key-light-shadow);cursor:pointer;border-radius:1rem;justify-content:center;align-items:center;transition:all .5s ease-in-out;display:flex}.commands{background-color:var(--key-primary-bg);box-shadow:0rem .5rem var(--key-primary-shadow)}.buttons--result{background-color:var(--key-accent-bg);box-shadow:0rem .5rem var(--key-accent-shadow);width:100%;color:var(--text-light);grid-column:span 2}.buttons--reset{grid-column:span 2;width:100%}.buttons--reset,.buttons--del{color:#fff}.calc__header,.calc__display{color:var(--text)}.buttons--del,.buttons--reset,.buttons--result{text-transform:uppercase;font-size:2rem}.buttons--result:active,.buttons--result:hover{background-color:var(--key-accent-bg-hover)}.buttons--del:active,.buttons--del:hover,.buttons--reset:active,.buttons--reset:hover{background-color:var(--key-primary-bg-hover)}.numbers:active,.numbers:hover,.operators:hover,.operators:active{background-color:var(--key-light-bg-hover)}.attribution{width:max-content;color:var(--key-primary-bg-hover);place-self:flex-end center;align-items:center;gap:.5rem;margin-bottom:1rem;font-size:1.6rem;font-weight:700;display:flex}.attribution a{color:var(--key-accent-bg);text-decoration:none;transition:all 1s ease-in-out}.attribution a:hover,.attribution a:active{filter:brightness(1.3)}@media (width>=600px){.calc{width:55rem}.calc__buttons{gap:2.5rem 2rem}}