@import url(https://fonts.googleapis.com/css2?family=Spartan:wght@702&display=swap);body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,'Courier New',monospace}body,html{font-family:Spartan,sans-serif;background-color:var(--main-background)}.app{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center}.container{width:100vw;padding:10px;max-width:500px}.calculator--error .calculator-result span{font-size:20px!important}.calculator-header{display:flex;margin:20px 10px;align-items:center;justify-content:space-between}.calculator-title{color:var(--text-2);font-size:30px}.calculator-result{height:115px;display:flex;color:var(--text-2);padding:0 25px;max-width:100%;border-radius:10px;justify-content:flex-end;background-color:var(--screen-background)}.calculator-result span{font-size:35pt;align-self:center}.calculator-keyboard{width:100%;height:430px;padding:30px 20px;margin-top:1.5rem;border-radius:10px;background-color:var(--toggle-background);gap:20px 20px;display:grid;grid-template-rows:repeat(5,1fr);grid-template-columns:2fr 2fr 2fr 2fr}.calculator-button{font-size:30px;position:relative;border-radius:10px;outline:0;border:none;color:var(--text);font-family:Spartan,sans-serif;background-color:var(--key-background-3);box-shadow:inset 0 -5px 1px -1px var(--key-shadow-3)}.calculator-button:active{top:2px}.calculator-button--action{color:#fff;font-size:20px;background-color:var(--key-background-1);box-shadow:inset 0 -5px 1px -1px var(--key-shadow-1)}.calculator-button--result{color:var(--text-3);font-size:20px;background-color:var(--key-background-2);box-shadow:inset 0 -5px 1px -1px var(--key-shadow-2)}.calculator-button span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.button-reset{grid-column-start:1;grid-column-end:3}.button-result{grid-column-start:3;grid-column-end:5}.radio{display:flex;align-items:center}.radio-label{margin-right:20px;font-size:12px;color:var(--text-2);letter-spacing:1px}.radio-item input{margin:0;padding:0;width:20px;height:15px;appearance:none}.radio-wrapper{position:absolute;height:100%;width:calc(100% - 5px)}.radio-group{display:flex;position:relative;align-items:center;border-radius:25px;justify-content:center;background-color:var(--toggle-background)}.radio-item{z-index:10;position:relative}.radio-item-label{position:absolute;bottom:100%;left:50%;transform:translate(-50%,-50%);font-size:11px;color:var(--text-2)}.radio-indicator{top:50%;left:0;position:absolute;border-radius:100%;background-color:var(--key-background-2);width:13px;height:13px;transform:translate(0,-50%)}@media (max-width:700px){.app{align-items:flex-start}.calculator-keyboard{height:60vh}}:root[data-theme=theme-dark]{--main-background:hsl(222, 26%, 31%);--toggle-background:hsl(223, 31%, 20%);--screen-background:hsl(224, 36%, 15%);--key-background-1:hsl(225, 21%, 49%);--key-shadow-1:hsl(224, 28%, 35%);--key-background-2:hsl(6, 63%, 50%);--key-shadow-2:hsl(6, 70%, 34%);--key-background-3:hsl(30, 25%, 89%);--key-shadow-3:hsl(28, 16%, 65%);--text:hsl(221, 14%, 31%);--text-2:white;--text-3:white}:root[data-theme=theme-light]{--main-background:hsl(0, 0%, 90%);--toggle-background:hsl(0, 5%, 81%);--screen-background:hsl(0, 0%, 93%);--key-background-1:hsl(185, 42%, 37%);--key-shadow-1:hsl(185, 58%, 25%);--key-background-2:hsl(25, 98%, 40%);--key-shadow-2:hsl(25, 99%, 27%);--key-background-3:hsl(45, 7%, 89%);--key-shadow-3:hsl(35, 11%, 61%);--text:hsl(60, 10%, 19%);--text-2:hsl(60, 10%, 19%);--text-3:white}:root[data-theme=theme-contrast]{--main-background:hsl(268, 75%, 9%);--toggle-background:hsl(268, 71%, 12%);--screen-background:hsl(268, 71%, 12%);--key-background-1:hsl(281, 89%, 26%);--key-shadow-1:hsl(285, 91%, 52%);--key-background-2:hsl(176, 100%, 44%);--key-shadow-2:hsl(177, 92%, 70%);--key-background-3:hsl(268, 47%, 21%);--key-shadow-3:hsl(290, 70%, 36%);--text:hsl(52, 100%, 62%);--text-2:hsl(52, 100%, 62%);--text-3:hsl(0, 0, 100%)}*{box-sizing:border-box}