@import"https://fonts.googleapis.com/css2?family=Amatic+SC&family=Indie+Flower&family=Poppins:wght@300&family=Unica+One&display=swap";.calculator{background-color:#e0e0e0;width:16rem;height:26rem;display:grid;gap:.1rem;margin:1rem;padding:.7rem;grid-template-rows:repeat(7,1fr);grid-template-columns:repeat(4,1fr);grid-template-areas:"history history history history" "answer answer answer answer" "delete negate percent divide" "seven eight nine num_times" "four five six minus" "one two three plus" "num_zero dec equals equals";border-radius:1rem;box-shadow:-3px 5px 12px #0000004d}.calculator__history{grid-area:history;align-self:center}.calculator__answer{grid-area:answer;align-self:center}.calculator__button-clear{grid-area:delete;align-self:center}.calculator__button-negate{grid-area:negate;align-self:center}.calculator__button-percent{grid-area:percent;align-self:center}.calculator__button-divide{grid-area:divide;align-self:center}.calculator__button-seven{grid-area:seven;align-self:center}.calculator__button-eight{grid-area:eight;align-self:center}.calculator__button-nine{grid-area:nine;align-self:center}.calculator__button-multiply{grid-area:num_times;align-self:center}.calculator__button-four{grid-area:four;align-self:center}.calculator__button-five{grid-area:five;align-self:center}.calculator__button-six{grid-area:six;align-self:center}.calculator__button-minus{grid-area:minus;align-self:center}.calculator__button-one{grid-area:one;align-self:center}.calculator__button-two{grid-area:two;align-self:center}.calculator__button-three{grid-area:three;align-self:center}.calculator__button-plus{grid-area:plus;align-self:center}.calculator__button-zero{grid-area:num_zero;align-self:center}.calculator__button-dec{grid-area:dec;align-self:center}.calculator__button-equals{grid-area:equals;align-self:center}.header{display:flex;justify-content:center;align-items:center;flex-direction:column}.header__text{font-family:Unica One,sans-serif;font-size:2rem;color:gray}.header__text--cat{color:#966fd6}.header__cat{margin-top:3rem;max-width:6rem;max-height:auto;margin-bottom:.5rem}main{display:flex;justify-content:center;align-items:center}.calculator{margin-bottom:3rem}.calculator__history{display:flex;justify-content:flex-end;align-self:flex-end;font-size:.9rem;margin-right:.4rem;color:gray;opacity:80%;white-space:nowrap;overflow:hidden;max-width:100%}.calculator__answer{display:flex;justify-content:flex-end;margin-bottom:1rem;margin-right:.4rem;font-size:1.25rem;color:gray;font-weight:600}.calculator__button{width:3.2rem;height:3.2rem;border-radius:1.5rem;background-color:#e0e0e0;border:1px solid #d1d1d1;font-size:1.2rem;font-weight:600;color:gray;margin:.1rem;display:flex;justify-content:center;align-items:center}.calculator__button:hover{background-color:#cdb7f6}.calculator__button--equal{width:6.5rem;height:3rem;border-radius:1rem;background-color:#e0bbe4}.calculator__button-clear{background-color:#e0bbe4}.calculator__button-negate,.calculator__button-percent,.calculator__button-divide,.calculator__button-multiply,.calculator__button-minus,.calculator__button-plus{background-color:#afd7fd}.calculator__img{opacity:.5}*{margin:0;padding:0;font-family:Poppins,sans-serif;box-sizing:border-box;text-decoration:none}body{background:linear-gradient(to right bottom,rgb(240,198,247),rgb(158,213,239));height:100vh;width:100vw;background-attachment:fixed}html{font-size:16px}@media screen and (min-width: 768px){html{font-size:18px}}@media screen and (min-width: 1024px){html{font-size:19px}}@media screen and (min-width: 1440px){html{font-size:20px}}@media screen and (min-width: 2560px){html{font-size:26px}}