style.css

*{padding:0;margin:0;box-sizing:border-box}body{height:80vh;width:100%;background:linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);background-size:400% 400%;-webkit-animation:gradient 15s ease infinite;animation:gradient 15s ease infinite}@-webkit-keyframes gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}@keyframes gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}#div_calculator{height:500px;width:300px;margin:auto;display:grid;gap:10px;border:2px solid #23a6d5;padding:20px;background-color:#1c1c1c;box-shadow:5px 5px rgba(196,190,190,.578);text-align:right;border-radius:10%;margin-top:32px;grid-template-areas:"topscren topscren topscren topscren" "scren scren scren scren" "clear plusmin perc divi" "seven eight nine X" "four five six minus" "one two three plus" "zero zero dot equalz";grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 2fr 1fr 1fr 1fr 1fr 1fr}#div_calculator #div_second_screen{background-color:#505050;border-radius:20%;grid-area:topscren;font-size:22px;color:#000;text-align:right;height:50px;width:100%;line-height:50px;padding-right:10px}#div_calculator #div_screen{background-color:#1c1c1c;grid-area:scren;font-size:60px;color:#fff;text-align:right}#div_calculator .calculator_buttons{border-radius:60%;color:#fff;font-size:22px;cursor:pointer}#div_calculator .calculator_buttons:hover{box-shadow:5px 5px #25363d}#div_calculator #clear{grid-area:clear;background-color:#e73c7e;color:#1c1c1c}#div_calculator #plusminus{background-color:#e73c7e;grid-area:plusmin;color:#1c1c1c}#div_calculator #percentage{grid-area:perc;background-color:#e73c7e;color:#1c1c1c}#div_calculator #divide{grid-area:divi;background-color:#23a6d5}#div_calculator #seven{grid-area:seven;background-color:#505050}#div_calculator #eight{grid-area:eight;background-color:#505050}#div_calculator #nine{grid-area:nine;background-color:#505050}#div_calculator #x{grid-area:X;background-color:#23a6d5}#div_calculator #four{grid-area:four;background-color:#505050}#div_calculator #five{grid-area:five;background-color:#505050}#div_calculator #six{grid-area:six;background-color:#505050}#div_calculator #minus{grid-area:minus;background-color:#23a6d5}#div_calculator #one{grid-area:one;background-color:#505050}#div_calculator #two{grid-area:two;background-color:#505050}#div_calculator #three{grid-area:three;background-color:#505050}#div_calculator #plus{grid-area:plus;background-color:#23a6d5}#div_calculator #zero{grid-area:zero;background-color:#505050;border-radius:30%}#div_calculator #dot{grid-area:dot;background-color:#505050}#div_calculator #equal{grid-area:equalz;background-color:#23a6d5}@media screen and (min-width: 360px){#div_calculator{height:300px;width:200px;margin:auto;margin-top:100px;grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1.5fr 1fr 1fr 1fr 1fr 1fr}#div_calculator #div_second_screen{height:30px;font-size:15px;line-height:30px;padding-right:10px}#div_calculator #div_screen{font-size:30px}}@media screen and (min-width: 375px){#div_calculator{margin-top:60%}}@media screen and (min-width: 768px){#div_calculator{height:550px;width:300px;margin:auto;margin-top:40%;font-size:66px}#div_calculator #div_second_screen{height:70px;line-height:70px;font-size:25px;padding-right:10px}#div_calculator #div_screen{font-size:50px}}@media screen and (min-width: 1024px){#div_calculator{height:770px;width:500px;margin:auto;margin-top:20%}}@media screen and (min-width: 1200px){#div_calculator{height:550px;width:400px;margin:auto;margin-top:10%}}