@import"https://fonts.googleapis.com/css2?family=Mooli&display=swap";*{margin:0;padding:0}html,body{box-sizing:border-box;font-family:Mooli,sans-serif}:root{--main-color: white;--hover-color: black}.container{display:flex;justify-content:center;align-items:center;min-height:100vh;background:rgb(30,30,30)}.container__cellphone{--width: 20rem;width:var(--width);aspect-ratio:20 / 40;background:rgb(20,20,20);box-shadow:0 25px 50px -12px #00000080;border-radius:5rem;border:8px solid rgb(50,50,50);display:flex;flex-direction:column}.cellphone__navigation{--navigation-height: 15%;--navigation-border: 5rem;height:var(--navigation-height);width:100%;background:#343a40;transform:scale(.8);border-radius:var(--navigation-border);position:relative;display:flex;justify-content:center;align-items:center;overflow:hidden}.navigation__element{flex:1;width:calc(100% / var(--options));text-align:center;background:none;border:none;color:var(--main-color);font-size:x-large;text-transform:capitalize;z-index:1;height:100%;cursor:pointer}.element_focus{color:var(--hover-color);transition:all .2s ease-in-out}.navigation__hover{position:absolute;background:white;height:100%;border-radius:var(--navigation-border);transition:all .2s ease-in-out;width:calc(100% / var(--options));left:calc(100% / var(--options) * var(--selected-option))}.cellphone__display{height:20%;display:flex;flex-direction:column;padding-inline:8%;margin-bottom:3%}.display__output{aspect-ratio:1;display:flex;flex-direction:column;justify-content:end;align-items:end;gap:10%;font-size:xx-large}.output__history{background:white;margin-right:1%;border-radius:15em;padding-inline:1rem;height:40%;display:flex;align-items:center;justify-content:space-around}.output__history>svg{height:.7em}.history__text{font-size:large;text-overflow:ellipsis}.output__text{color:var(--main-color)}.display__input{aspect-ratio:2;display:flex;justify-content:space-between;align-items:end;font-size:3em}.go_back_arrow{display:flex;justify-content:center;align-items:center;height:100%;padding-left:.5%;padding-right:4%;scale:1.3}.go_back_arrow svg{height:1em;width:100%;background:transparent;fill:transparent}.go_back_arrow path{stroke:var(--main-color)}.input__text{width:100%;text-align:right;overflow:scroll}.input__text>span{color:var(--main-color)}.cellphone__keypad{display:flex;flex-wrap:wrap;height:50%}.keypad__button{width:25%;height:20%;display:flex;justify-content:center;align-items:center}.keypad__button>button{color:var(--main-color);border-radius:80%;font-size:xx-large;font-weight:500;aspect-ratio:1;height:90%;background:#212529;border:none}.color_yellow{background:orange!important}.color_grey{background:grey!important}.button_large{aspect-ratio:initial;flex-grow:1}.button_large>button{width:80%;text-align:left;padding-left:12%;border-radius:5rem;aspect-ratio:2/1}.home_button{flex-grow:1;display:flex;justify-content:center;align-items:center}.home_button>button{border-radius:50%;width:20%;aspect-ratio:1;cursor:pointer}