:root{--font-family: "Spartan", sans-serif;--radius: .5rem;--transition-time: .2s ease}:root,[data-theme="1"]{--main-bg: hsl(222, 26%, 31%);--keypad-bg: hsl(223, 31%, 20%);--display-bg: hsl(224, 36%, 15%);--key-bg: hsl(30, 25%, 89%);--key-hover-bg: hsl(30, 25%, 100%);--key-shadow: hsl(28, 16%, 65%);--del-key-bg: hsl(225, 21%, 49%);--del-key-hover-bg: hsl(225, 21%, 55%);--del-key-shadow: hsl(224, 28%, 35%);--eq-key-bg: hsl(6, 63%, 50%);--eq-key-hover-bg: hsl(6, 63%, 55%);--eq-key-shadow: hsl(6, 70%, 34%);--theme-toggle-color: hsl(6, 63%, 50%);--theme-toggle-shadow: hsl(6, 70%, 34%);--dark-text-color: hsl(221, 14%, 31%);--light-text-color: hsl(0, 100%, 100%);--key-text-color: var(--dark-text-color);--eq-key-text-color: var(--light-text-color);--del-key-text-color: var(--light-text-color);--display-text-color: var(--light-text-color);--header-text-color: var(--light-text-color)}[data-theme="2"]{--main-bg: hsl(0, 0%, 90%);--keypad-bg: hsl(0, 5%, 81%);--display-bg: hsl(0, 0%, 93%);--key-bg: hsl(45, 7%, 89%);--key-hover-bg: hsl(45, 7%, 95%);--key-shadow: hsl(35, 11%, 61%);--del-key-bg: hsl(185, 42%, 37%);--del-key-hover-bg: hsl(185, 42%, 50%);--del-key-shadow: hsl(185, 58%, 25%);--eq-key-bg: hsl(25, 98%, 40%);--eq-key-hover-bg: hsl(25, 98%, 50%);--eq-key-shadow: hsl(25, 99%, 27%);--theme-toggle-color: hsl(25, 98%, 40%);--theme-toggle-shadow: hsl(6, 70%, 34%);--dark-text-color: hsl(60, 10%, 19%);--light-text-color: hsl(0, 100%, 100%);--key-text-color: var(--dark-text-color);--eq-key-text-color: var(--light-text-color);--del-key-text-color: var(--light-text-color);--display-text-color: var(--dark-text-color);--header-text-color: var(--dark-text-color)}[data-theme="3"]{--main-bg: hsl(268, 75%, 9%);--keypad-bg: hsl(268, 71%, 12%);--display-bg: hsl(268, 71%, 12%);--key-bg: hsl(268, 47%, 21%);--key-hover-bg: hsl(268, 47%, 31%);--key-shadow: hsl(290, 70%, 36%);--del-key-bg: hsl(281, 89%, 26%);--del-key-hover-bg: hsl(281, 89%, 36%);--del-key-shadow: hsl(285, 91%, 52%);--eq-key-bg: hsl(176, 100%, 44%);--eq-key-hover-bg: hsl(176, 100%, 50%);--eq-key-shadow: hsl(177, 92%, 70%);--theme-toggle-color: hsl(176, 100%, 44%);--theme-toggle-shadow: hsl(177, 92%, 70%);--dark-text-color: hsl(198, 20%, 13%);--light-text-color: hsl(0, 100%, 100%);--yellow-text-color: hsl(52, 100%, 62%);--key-text-color: var(--yellow-text-color);--eq-key-text-color: var(--dark-text-color);--del-key-text-color: var(--light-text-color);--display-text-color: var(--yellow-text-color);--header-text-color: var(--yellow-text-color)}.visually-hidden{clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}*{box-sizing:border-box;margin:0;font-family:var(--font-family)}.Site{display:grid;place-content:center;gap:1rem;min-height:100vh;background:var(--main-bg);transition:background-color var(--transition-time)}.Site__container{max-width:28rem;width:100%;padding:1rem}.Site__header{margin-bottom:1rem}.SiteHeader{display:flex;justify-content:space-between;align-items:baseline}.SiteHeader__title{color:var(--header-text-color);font-size:2rem;transition:color var(--transition-time)}.Calc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}.Calc__section{width:100%}.Calc__display{width:100%;background:var(--display-bg);color:var(--display-text-color);padding:1.5rem 1rem 1rem;border-radius:var(--radius);border:none;text-align:right;font-size:2.5rem;transition:background-color var(--transition-time),color var(--transition-time)}.Calc__display::-moz-placeholder{color:var(--display-text-color);opacity:1}.Calc__display:-ms-input-placeholder{color:var(--display-text-color);opacity:1}.Calc__display::placeholder{color:var(--display-text-color);opacity:1}.Calc__keys{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;background:var(--keypad-bg);padding:1.5rem;border-radius:var(--radius);transition:background-color var(--transition-time)}.Calc__key{cursor:pointer;height:3rem;padding-top:.5rem;font-size:1.5rem;background:var(--key-bg);border:none;border-radius:var(--radius);box-shadow:0 .25rem var(--key-shadow);color:var(--key-text-color);transition:background-color var(--transition-time)}.Calc__key:hover,.Calc__key:focus{background:var(--key-hover-bg)}.Calc__key:active{transform:translateY(.125rem);box-shadow:0 .125rem var(--key-shadow)}.Calc__key:nth-child(4),.Calc__key:nth-last-child(2){background:var(--del-key-bg);box-shadow:0 .25rem var(--del-key-shadow);color:var(--del-key-text-color);font-size:1rem}.Calc__key:nth-child(4):hover,.Calc__key:nth-child(4):focus,.Calc__key:nth-last-child(2):hover,.Calc__key:nth-last-child(2):focus{background:var(--del-key-hover-bg)}.Calc__key:nth-child(4):active,.Calc__key:nth-last-child(2):active{transform:translateY(.125rem);box-shadow:0 .125rem var(--del-key-shadow)}.Calc__key:nth-last-child(2){grid-column:1/span 2}.Calc__key:last-child{grid-column:3/span 2;background:var(--eq-key-bg);box-shadow:0 .25rem var(--eq-key-shadow);color:var(--eq-key-text-color);font-size:1rem}.Calc__key:last-child:hover,.Calc__key:last-child:focus{background:var(--eq-key-hover-bg)}.Calc__key:last-child:active{transform:translateY(.125rem);box-shadow:0 .125rem var(--eq-key-shadow)}.ThemeToggle{display:grid;grid-template-columns:repeat(2,1fr);align-items:flex-end;gap:.5rem;color:var(--header-text-color);font-size:.6rem;text-transform:uppercase;transition:color var(--transition-time)}.ThemeToggle__buttons{display:grid;grid-template-columns:repeat(3,1fr);place-items:center;gap:.5rem}.ThemeToggle__buttons:focus-within .ThemeToggle__bar{box-shadow:0 0 0 3px #007bff80}.ThemeToggle__radio{cursor:pointer;grid-row:2;grid-column:1;z-index:2;opacity:0}.ThemeToggle__radio:nth-of-type(2){grid-column:2}.ThemeToggle__radio:nth-of-type(3){grid-column:3}.ThemeToggle__bar{position:relative;background:var(--keypad-bg);height:20px;width:100%;grid-column:1/span 3;grid-row:2;border-radius:10px;transition:background-color var(--transition-time)}.ThemeToggle__bar:after{content:"";position:absolute;height:.9rem;aspect-ratio:1/1;border-radius:50%;left:3px;top:3px;background:var(--theme-toggle-color);transition:background-color var(--transition-time),transform var(--transition-time)}body[data-theme="2"] .ThemeToggle__bar:after{transform:translate(120%)}body[data-theme="3"] .ThemeToggle__bar:after{transform:translate(240%)}