:root{--font-family: "League Spartan", sans-serif;--font-size-9: 0.9rem;--font-size-11: 1.1rem;--font-size-16: 1.6rem;--font-size-18: 1.8rem;--font-size-24: 2.4rem;--font-size-32: 3.2rem;--color-main-background: #3a4764;--color-keypad-background: #232c43;--color-screen-background: #182034;--color-key-blue-background: #637097;--color-key-blue-shadow: #404e72;--color-key-blue-hover: #a2b3e1;--color-key-red-background: #d03f2f;--color-key-red-shadow: #93261a;--color-key-red-hover: #f86c5c;--color-key-gray-background: #eae3dc;--color-key-gray-shadow: hsl(28, 16%, 65%);--color-dark-blue-text: #444b5a;--color-white-text: #ffffff;--color-white-hover: #ffffff;--color-white-button-text: #ffffff;--border-radius: 10px;--timing-animation: 0.3s}*{margin:0;padding:0;font:inherit}*,*::before,*::after{box-sizing:border-box}button{background-color:rgba(0,0,0,0);border:none}html{font-size:62.5%}@media(max-width: 400px){html{font-size:8px}}body{line-height:1.4;font-family:var(--font-family)}.container{position:relative;display:flex;justify-content:center;align-items:center;height:100vh;background:var(--color-main-background);transition:background-color var(--timing-animation)}.container::before{content:"";background-image:url(../images/math.jpg);position:absolute;min-height:100%;min-width:100%;background-repeat:no-repeat;background-size:cover;z-index:0;opacity:.2;filter:blur(2px)}.calculator{display:flex;flex-direction:column;gap:2rem;width:100%;max-width:40rem;margin:0 1rem;padding:2rem;box-shadow:0 0 .5rem rgba(0,0,0,.4);border-radius:var(--border-radius);z-index:1;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.header{display:flex;justify-content:space-between;align-items:center;color:var(--color-white-text)}.header__heading{font-size:var(--font-size-16)}.themes{display:grid;grid-template-columns:repeat(2, 1fr);-moz-column-gap:1.3rem;column-gap:1.3rem;row-gap:.1rem}.themes__numbers{grid-column:1/-1;display:flex;gap:1.7rem;margin-inline-end:.3rem;justify-self:end;font-size:var(--font-size-9)}.themes__input{display:none}.themes__input:checked+.themes__label-button{background-color:#404e72}.themes__input:checked+.themes__label-button::after{transform:translateX(1.8rem);background-color:var(--color-key-gray-background)}.themes__label-title{align-self:center;text-transform:uppercase;font-size:var(--font-size-11);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.themes__label-button{position:relative;width:3.4rem;height:1.6rem;cursor:pointer;background:var(--color-keypad-background);border-radius:var(--border-radius);display:flex;align-items:center}.themes__label-button::after{content:"";position:absolute;border-radius:50%;width:1rem;height:1rem;margin-inline-start:.3rem;background-color:var(--color-key-red-background);transition:all var(--timing-animation)}html:has(.themes__input:checked){--color-main-background: #eae3dc;--color-white-text: #404e72;--color-screen-background: #eae3dc;--color-screen-background: #3d48335e;--color-keypad-background: #3d48335e;--color-key-blue-background: #33757a;--color-key-blue-shadow: #074c53;--color-key-blue-hover: #093b40;--color-key-red-background: #90403a;--color-key-red-shadow: #893901;--color-key-red-hover: #743811;--color-key-gray-background: #d0c8b8;--color-key-gray-shadow: #938b85;--color-white-hover: #d2d0d0}.calculator__screen{color:var(--color-white-text);background-color:var(--color-screen-background);padding:2.5rem 2rem;text-align:right;line-height:1;font-size:var(--font-size-32);border-radius:calc(var(--border-radius)/2);transition:background-color var(--timing-animation)}.calculator__screen.overflow{overflow-x:scroll}.calculator__screen.overflow::-webkit-scrollbar{width:.4rem;height:.4rem}.calculator__screen.overflow::-webkit-scrollbar-track{background:var(--color-key-blue-hover);border-radius:var(--border-radius)}.calculator__screen.overflow::-webkit-scrollbar-thumb{background:var(--color-key-blue-background);border-radius:var(--border-radius)}.calculator__screen.overflow::-webkit-scrollbar-thumb:hover{background:var(--color-key-blue-shadow)}.calculator__buttons{display:grid;grid-template-columns:repeat(4, 1fr);color:var(--color-dark-blue-text);gap:2rem;padding:2rem;font-size:var(--font-size-24);background-color:var(--color-keypad-background);border-radius:calc(var(--border-radius)/2);transition:background-color var(--timing-animation)}.calculator__button{position:relative;border-radius:calc(var(--border-radius)/2);height:4rem;isolation:isolate}.calculator__button::before,.calculator__button::after{content:"";position:absolute;height:100%;width:100%;border-radius:calc(var(--border-radius)/2);right:0;transition:all .3s}.calculator__button::after{background-color:var(--color-key-gray-background);z-index:-1;bottom:.1rem}.calculator__button::before{background-color:var(--color-key-gray-shadow);z-index:-2;bottom:-0.2rem}.calculator__button:hover::after,.calculator__button.hover::after{background-color:var(--color-white-hover)}.calculator__button-equal{color:var(--color-white-button-text)}.calculator__button-equal::after{background-color:var(--color-key-red-background)}.calculator__button-equal::before{background-color:var(--color-key-red-shadow)}.calculator__button-equal:hover::after,.calculator__button-equal.hover::after{background-color:var(--color-key-red-hover)}.calculator__button-equal,.calculator__button-reset{grid-column:span 2}.calculator__button-del,.calculator__button-reset{color:var(--color-white-button-text)}.calculator__button-del::after,.calculator__button-reset::after{background-color:var(--color-key-blue-background)}.calculator__button-del::before,.calculator__button-reset::before{background-color:var(--color-key-blue-shadow)}.calculator__button-del:hover::after,.calculator__button-del.hover::after,.calculator__button-reset:hover::after,.calculator__button-reset.hover::after{background-color:var(--color-key-blue-hover)}.calculator__button:not([data-type=number]){font-size:var(--font-size-18);padding-block-end:.2rem}@keyframes clickMove{50%{transform:scale(0.96)}}.click{animation:clickMove var(--timing-animation) ease-in-out reverse}/*# sourceMappingURL=style.css.map */