@import url(https://fonts.googleapis.com/css2?family=Spartan:wght@700&display=swap);.switch{font-size:.6rem;position:relative;width:5rem;height:2rem;display:flex;flex-direction:row;justify-content:space-evenly}.switch:before{content:"  ";position:absolute;left:0;z-index:-1;width:100%;height:3rem;background:#000;border-radius:30px}.switch__group{position:absolute;width:4.5rem;background-color:var(--buttons-background-color);height:1.2rem;bottom:0;border-radius:10px}.switch__main__label{position:absolute;left:-3.5rem;bottom:0;font-size:inherit}.switch__label{width:10px;cursor:pointer}.switch__label:hover{color:#fff}.switch__indicator{width:.8rem;height:.8rem;position:absolute;bottom:3px;left:0;border-radius:50%;transition:transform .6s cubic-bezier(.02,.94,.09,.97),background .3s cubic-bezier(.17,.67,.14,1.03);transform:translate3d(1rem,0,0)}input#one:checked~.switch__indicator{background:var(--span-two-red-background-color);transform:translate3d(.5rem,0,0)}input#two:checked~.switch__indicator{background:var(--span-two-red-background-color);transform:translate3d(2rem,0,0)}input#three:checked~.switch__indicator{background:var(--span-two-red-background-color);transform:translate3d(3.3rem,0,0)}input[type=radio]:checked,input[type=radio]:not(:checked){display:none}.container{color:var(--container-color);font-size:2rem;display:flex;flex-direction:column;justify-content:space-evenly;width:95%;height:96vh;margin:0 auto}.bar{display:flex;flex-direction:row;justify-content:space-between;margin-top:20px}.display{grid-column:1/-1;min-height:100px;background-color:var(--display-background-color);color:var(--display-color);display:flex;align-items:flex-end;justify-content:space-around;flex-direction:column;padding:0 20px;word-wrap:break-word;word-break:break-all}.buttons,.display{border-radius:10px}.buttons{display:grid;justify-content:center;padding:20px;grid-template-columns:repeat(4,75px);grid-template-rows:repeat(5,75px);background-color:var(--buttons-background-color)}.buttons>button{border:none;font-family:Spartan,Menlo,Avenir,Helvetica,Arial,sans-serif;cursor:pointer;font-size:2rem;outline:none;border-radius:5px;background-color:var(--button-background-color);color:var(--button-color);padding:15px 10px;margin:8px;box-shadow:0 4px 0 0 var(--button-box-shadow-color)}.buttons>button:active{transform:translateY(4px);box-shadow:0 0 0 0}.span-two{grid-column:2 span}.span-two.text{background-color:var(--span-two-text-background-color);box-shadow:0 4px 0 0 var(--span-two-text-box-shadow-color);color:var(--span-two-text-color)}.text{box-shadow:0 4px 0 0 var(--span-two-text-box-shadow-color)!important;background-color:var(--span-two-text-background-color)!important;font-size:1rem!important;color:var(--span-two-text-color)!important}button.text:active{transform:translateY(4px)!important;box-shadow:0 0 0 0!important}.span-two.red{font-size:1rem;color:var(--span-two-red-color);box-shadow:0 4px 0 0 var(--span-two-red-box-shadow-color);background-color:var(--span-two-red-background-color)}@media (max-width:375px){.container{width:90%}}@media (min-width:425px){.container{width:80%}}@media (min-width:768px){.container{width:45%}.buttons{display:grid;grid-template-columns:repeat(4,25%)}}@media (min-width:1440px){.container{width:40%}}@media (min-width:1441px){.container{width:60%}}.theme-one{--body-background-color:#637097;--container-color:#fff;--display-background-color:#182034;--display-color:#fff;--buttons-background-color:#232c43;--button-background-color:#eae3dc;--button-color:#404e72;--button-box-shadow-color:#b4a597;--span-two-text-background-color:#637097;--span-two-text-color:#fff;--span-two-text-box-shadow-color:#404e72;--span-two-red-background-color:#d03f2f;--span-two-red-color:#fff;--span-two-red-box-shadow-color:#93261a}.theme-two{--body-background-color:#e6e6e6;--container-color:#444b5a;--display-background-color:#ededed;--display-color:#444b5a;--buttons-background-color:#d1cccc;--button-background-color:#e5e4e1;--button-color:#404e72;--button-box-shadow-color:#a69d91;--span-two-text-background-color:#377f86;--span-two-text-color:#fff;--span-two-text-box-shadow-color:#1b5f65;--span-two-red-background-color:#ca5502;--span-two-red-color:#fff;--span-two-red-box-shadow-color:#893901}.theme-three{--body-background-color:#160628;--container-color:#ffe53d;--display-background-color:#1d0934;--display-color:#ffe53d;--buttons-background-color:#1d0934;--button-background-color:#341c4f;--button-color:#ffe53d;--button-box-shadow-color:#bc15f4;--span-two-text-background-color:#58077d;--span-two-text-color:#fff;--span-two-text-box-shadow-color:#871c9c;--span-two-red-background-color:#00e0d1;--span-two-red-color:#1b2428;--span-two-red-box-shadow-color:#404e72}body{font-family:Spartan,Menlo,Avenir,Helvetica,Arial,sans-serif;margin:0;padding:0}#main{background-color:var(--body-background-color);height:100vh}