@import url(https://fonts.googleapis.com/css?family=Orbitron);@import url(https://fonts.googleapis.com/css?family=Roboto);@import url(https://fonts.googleapis.com/css?family=Berkshire+Swash);body{background:url(../images/bg.jpg) no-repeat fixed center center;background-size:cover;-webkit-box-sizing:border-box;box-sizing:border-box}.main-container{margin-top:50px}h1{color:#fff;text-align:center;font-family:"Berkshire Swash",cursive,sans-serif}.calculator-frame{background-color:#505050;border:2px solid #000;border-radius:40px;display:grid;height:600px;width:463px;margin:0 auto;grid-template-rows:25%;-webkit-box-shadow:inset 0 -5px 14px 1px #0d0d0d;box-shadow:inset 0 -5px 14px 1px #0d0d0d}.calculator-frame .display-block{display:grid;-webkit-box-align:center;-ms-flex-align:center;align-items:center;justify-items:center}.calculator-frame .display-block input{font-family:Orbitron,cursive,serif;font-size:50px;text-align:right;background:#f2f6f8;background:-webkit-gradient(linear,left top,left bottom,from(#f2f6f8),color-stop(47%,#d8e1e7),color-stop(51%,#b5c6d0),to(#c3d4c2));background:linear-gradient(to bottom,#f2f6f8 0,#d8e1e7 47%,#b5c6d0 51%,#c3d4c2 100%);width:398px;height:86px;border-radius:15px;border:#8c8b8c;margin-top:30px;padding-right:10px;-webkit-box-shadow:.1px .1px .1px 3px #6e7d6e inset;box-shadow:.1px .1px .1px 3px #6e7d6e inset}.calculator-frame .display-block [type=text],.calculator-frame .display-block textarea{color:#000}.calculator-frame .display-block ::-webkit-input-placeholder{color:#000}.calculator-frame .display-block :-ms-input-placeholder{color:#000}.calculator-frame .display-block ::-ms-input-placeholder{color:#000}.calculator-frame .display-block ::placeholder{color:#000}.calculator-frame .buttons{width:406px;height:465px;display:grid;grid-template-columns:repeat(4,25%);grid-template-rows:repeat(5,19%);margin-top:20px}.calculator-frame .buttons .button{outline:0;width:93px;height:67px;-ms-flex-item-align:center;align-self:center;justify-self:center;border-radius:14px;border:0;-webkit-box-shadow:inset 1px -6px 15px -8px #0d0d0d;box-shadow:inset 1px -6px 15px -8px #0d0d0d;-webkit-box-shadow:0 4px 0 0 #000;box-shadow:0 4px 0 0 #000;background:#f2f6f8;background:-webkit-gradient(linear,left top,left bottom,from(#f2f6f8),color-stop(36%,#d8e1e7),color-stop(59%,#b5c6d0),to(#e0eff9));background:linear-gradient(to bottom,#f2f6f8 0,#d8e1e7 36%,#b5c6d0 59%,#e0eff9 100%);font-family:Roboto,cursive,serif;font-weight:700;font-size:2em}.calculator-frame .buttons .button:hover{cursor:pointer}.calculator-frame .buttons .button:active{background:#b7c8d1;-webkit-box-shadow:0 0 0 0 #000;box-shadow:0 0 0 0 #000;-webkit-transform:translateY(4px);transform:translateY(4px)}.calculator-frame .buttons .cancel-button{grid-column:1/5;justify-self:end;margin-right:5px;background:#f85032;background:-webkit-gradient(linear,left top,left bottom,from(#f85032),color-stop(53%,#f16f5c),color-stop(70%,#f6290c),color-stop(76%,#f02f17),to(#e73827));background:linear-gradient(to bottom,#f85032 0,#f16f5c 53%,#f6290c 70%,#f02f17 76%,#e73827 100%)}.calculator-frame .buttons .cancel-button:active{background:#ef3018}.calculator-frame .buttons .equal-button{background-color:#f8b250;background:-webkit-gradient(linear,left top,left bottom,from(#fceabb),color-stop(46%,#fccd4d),color-stop(67%,#f8b500),to(#f8b250));background:linear-gradient(to bottom,#fceabb 0,#fccd4d 46%,#f8b500 67%,#f8b250 100%)}.calculator-frame .buttons .equal-button:active{background:#f8b807}@media screen and (max-width:360px){.calculator-frame{height:565px;width:353px}.calculator-frame .display-block input{width:280px;height:68px}.calculator-frame .buttons{width:auto;height:auto;grid-gap:4px;margin-right:10px}.calculator-frame .buttons .cancel-button{margin-right:0}.calculator-frame .buttons .button{width:75px;height:70px}}