@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700");

html {
  background-color: #202A44;
  font-family: sans-serif;
  color: white;
  width: 100%;
  height: 100%;
}

body {
  background-color: rgba(0, 0, 0, 0) !important;
  font-size: 20px;
}

.container {
  position: absolute;
  left: 0px;
  right: 0px;
  width: 450px;
  height: 800px;
  margin: 10px auto;
}

.title {
  font-size: 30px;
  font-family: cursive;
  text-align: center;
  width: 450px;
}

.calc {
  position: absolute;
  top: 20px;
  width: 450px;
  height: 650px;
  background-color: #111;
  border-radius: 20px / 10px;
}

.logo {
  color: rgb(113, 113, 113);
  position: absolute;
  top: 178px;
  left: 40px;
  font-size: 85%;
}

.model {
  position: absolute;
  top: 178px;
  right: 42px;
  font-size: 90%;
  font-weight: bold;
  color: rgba(0, 58, 0, 1);
}

.calc-edge {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border-right-color: LightGray;
  border-right-width: 5px;
  border-right-style: solid;
  border-left-color: DarkGray;
  border-left-width: 5px;
  border-left-style: solid;
  border-radius: 20px/10px;
  -webkit-box-shadow: -15px 20px 10px 10px rgba(0, 0, 0, 0.5);
  box-shadow: -15px 20px 10px 10px rgba(0, 0, 0, 0.5);
}

.screen-edge {
  position: absolute;
  top: 25px;
  left: 15px;
  width: 420px;
  height: 150px;
  margin: 0;
  padding: 0;
  border-top: 6px solid;
  border-right: 5px solid rgba(0, 84, 37, 1);
  border-bottom: 0 solid;
  border-left: 5px solid rgba(0, 58, 0, 1);
  -webkit-border-radius: 0 0 15px 15px / 0 0 10px 15px;
  border-radius: 0 0 15px 15px / 0 0 10px 15px;
  color: rgba(0, 0, 0, 0.9);
  background: #222A21;
}

.calc-face {
  background-image: url('https://images2.imgbox.com/7a/70/a74hDyDc_o.png');
  background-repeat: repeat;
  position: absolute;
  top: 200px;
  left: 5px;
  width: 440px;
  height: 430px;
  -webkit-box-shadow: 10px 0 10px 10px rgba(0, 0, 0, 0.5) inset, -10px 0 10px 0 rgba(255, 255, 255, 0.05) inset, -20px 0 20px 10px rgba(255, 255, 255, 0.05) inset;
  box-shadow: 10px 0 10px 10px rgba(0, 0, 0, 0.5) inset, -10px 0 10px 0 rgba(255, 255, 255, 0.05) inset, -20px 0 20px 10px rgba(255, 255, 255, 0.05) inset;
}

.calc-face:after {
  position: absolute;
  width: 436px;
  content: " ";
  top: 425px;
  height: 0px;
  border-top: 15px solid rgb(0, 0, 0);
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.credits {
  font-family: sans-serif;
  font-size: 12px;
  position: absolute;
  right: 0px;
  bottom: 0px;
  margin: 10px;
  color: #ffa500;
  text-align: right;
}

.credits a {
  color: #ffa500;
  font-weight: bold;
  text-decoration: none;
}

.credits a:hover {
  color: #ffa500;
  text-decoration: underline;
}

.button {
  display: inline-block;
  width: 45px;
  height: 45px;
  position: absolute;
  cursor: pointer;
  margin: 0;
  padding: 0px;
  border: none;
  -webkit-border-radius: 6px / 10px;
  border-radius: 6px / 10px;
  font: normal 40px/1 "Aldrich", Helvetica, sans-serif;
  text-align: center;
  /* -webkit-box-shadow: -2px 2px 1px 2px rgba(255,255,255,0.1) inset, 4px -4px 1px 0 rgba(0,0,0,0.5) inset;
			box-shadow: -2px 2px 1px 2px rgba(255,255,255,0.1) inset, 4px -4px 1px 0 rgba(0,0,0,0.5) inset; */
  
  -webkit-box-shadow: -2px 2px 3px 3px rgba(0, 0, 0, 0.79), -2px 2px 1px 2px rgba(255, 255, 255, 0.1) inset, 4px -4px 1px 0 rgba(0, 0, 0, 0.5) inset;
  box-shadow: -2px 2px 3px 3px rgba(0, 0, 0, 0.79), -2px 2px 1px 2px rgba(255, 255, 255, 0.1) inset, 4px -4px 1px 0 rgba(0, 0, 0, 0.5) inset;
}

.button:active {
  display: inline-block;
  width: 45px;
  height: 43px;
  position: absolute;
  cursor: pointer;
  margin: 2px 0 0;
  padding: 0px;
  border: none;
  -webkit-border-radius: 6px / 10px;
  border-radius: 6px / 10px;
  text-align: center;
}
/* Button Colors */

.number {
  color: LightGray;
  background-image: -webkit-linear-gradient(-45deg, #262626 0, #7a7a7a 50%, #262626 100%);
  background-image: -moz-linear-gradient(135deg, #262626 0, #7a7a7a 50%, #262626 100%);
  background-image: linear-gradient(135deg, #262626 0, #7a7a7a 50%, #262626 100%);
}

.operator {
  color: rgba(255, 217, 102, 1);
  ;
  font-size: 30px;
  background-image: -webkit-linear-gradient(-45deg, #262626 0, #7a7a7a 50%, #262626 100%);
  background-image: -moz-linear-gradient(135deg, #262626 0, #7a7a7a 50%, #262626 100%);
  background-image: linear-gradient(135deg, #262626 0, #7a7a7a 50%, #262626 100%);
}

.memory {
  color: LightGray;
  background-image: -webkit-linear-gradient(-45deg, #2b73ad 0, #3795dd 50%, #2b73ad 100%);
  background-image: -moz-linear-gradient(135deg, #2b73ad 0, #3795dd 50%, #2b73ad 100%);
  background-image: linear-gradient(135deg, #2b73ad 0, #3795dd 50%, #2b73ad 100%);
  font-size: 20px;
}

.clear {
  color: LightGray;
  font-size: 20px;
  background-image: -webkit-linear-gradient(-45deg, rgba(117, 0, 0, 1) 0, rgba(255, 91, 91, 1) 50%, rgba(96, 0, 0, 1) 100%);
  background-image: -moz-linear-gradient(135deg, rgba(117, 0, 0, 1) 0, rgba(255, 91, 91, 1) 50%, rgba(96, 0, 0, 1) 100%);
  background-image: linear-gradient(135deg, rgba(117, 0, 0, 1) 0, rgba(255, 91, 91, 1) 50%, rgba(96, 0, 0, 1) 100%);
}

.moveup {
  position: relative;
  font-size: 15px;
  display: block;
}

.mr {
  position: absolute;
  right: 47px;
  top: 52px;
  font-size: 10px;
  font-weight: bold;
  color: #2F4139;
}

.active {
  color: #aeffec !important;
}
/* Button Left Positioning */

.num1,
.num4,
.num7,
.num0 {
  left: 50px;
}

.num8,
.num5,
.num2,
.sign {
  left: 125px;
}

.num9,
.num6,
.num3,
.dec {
  left: 200px;
}

.sqrt,
.div,
.mul,
.sub,
.plus {
  left: 275px;
}

.cce,
.percent,
.mrc,
.mplus,
.equal {
  left: 350px;
}
/* Button Top Positioning */

.sqrt,
.cce {
  top: 25px;
}

.num7,
.num8,
.num9,
.div,
.percent {
  top: 100px;
}

.num4,
.num5,
.num6,
.mul,
.mrc {
  top: 175px;
}

.num1,
.num2,
.num3,
.sub,
.mplus {
  top: 250px;
}

.num0,
.sign,
.dec,
.plus,
.equal {
  top: 325px;
}
/* 7Segment Display */

.display {
  position: absolute;
  padding: 5px;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;
  height: 50px;
  width: 290px;
}

.seven-segment {
  display: inline-block;
  position: relative;
  top: 2px;
  float: right;
  width: 28px;
  height: 38px;
  border: 1px solid black;
  padding: 0px 2px;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

sub {
  bottom: -.25em;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

.seven-segment .a {
  position: absolute;
  left: 5px;
  height: 0;
  width: 18px;
  border-top: 3px solid #2F4139;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
}

.seven-segment .b {
  position: absolute;
  left: 20px;
  top: 2px;
  height: 15px;
  width: 0;
  border-right: 3px solid #2F4139;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  transform: rotate(6deg);
}

.seven-segment .c {
  position: absolute;
  left: 18px;
  top: 18px;
  height: 15px;
  width: 0;
  border-right: 3px solid #2F4139;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  transform: rotate(6deg);
}

.seven-segment .d {
  position: absolute;
  top: 32px;
  left: 1px;
  height: 0;
  width: 18px;
  border-bottom: 3px solid #2F4139;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
}

.seven-segment .e {
  position: absolute;
  left: 2px;
  top: 18px;
  height: 15px;
  width: 0;
  border-left: 3px solid #2F4139;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  transform: rotate(6deg);
}

.seven-segment .f {
  position: absolute;
  left: 4px;
  top: 2px;
  height: 15px;
  width: 0;
  border-left: 3px solid #2F4139;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  transform: rotate(6deg);
}

.seven-segment .dot {
  position: absolute;
  left: 22px;
  top: 32px;
  width: 3px;
  height: 3px;
  background: #2F4139;
}

.seven-segment .g .top {
  position: absolute;
  height: 0;
  left: 4px;
  top: 16px;
  width: 18px;
  border-bottom: 2px solid #2F4139;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
}

.seven-segment .g .bottom {
  position: absolute;
  left: 4px;
  top: 17px;
  height: 0;
  width: 18px;
  border-top: 2px solid #2F4139;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
}

.digit0 .a,
.digit2 .a,
.digit3 .a,
.digit5 .a,
.digit6 .a,
.digit7 .a,
.digit8 .a,
.digit9 .a,
.ltrE .a {
  border-top-color: #aeffec;
}

.digit0 .b,
.digit1 .b,
.digit2 .b,
.digit3 .b,
.digit4 .b,
.digit7 .b,
.digit8 .b,
.digit9 .b {
  border-right-color: #aeffec;
}

.digit0 .c,
.digit1 .c,
.digit3 .c,
.digit4 .c,
.digit5 .c,
.digit6 .c,
.digit7 .c,
.digit8 .c,
.digit9 .c,
.ltrO .c {
  border-right-color: #aeffec;
}

.digit0 .d,
.digit2 .d,
.digit3 .d,
.digit5 .d,
.digit6 .d,
.digit8 .d,
.digit9 .d,
.ltrE .d,
.ltrO .d {
  border-bottom-color: #aeffec;
}

.digit0 .e,
.digit2 .e,
.digit6 .e,
.digit8 .e,
.ltrE .e,
.ltrR .e,
.ltrO .e {
  border-left-color: #aeffec;
}

.digit0 .f,
.digit4 .f,
.digit5 .f,
.digit6 .f,
.digit8 .f,
.digit9 .f,
.ltrE .f {
  border-left-color: #aeffec;
}

.digit2 .g .top,
.digit3 .g .top,
.digit4 .g .top,
.digit5 .g .top,
.digit6 .g .top,
.digit8 .g .top,
.digit9 .g .top,
.neg .g .top,
.ltrE .g .top,
.ltrR .g .top,
.ltrO .g .top {
  border-bottom-color: #aeffec;
}

.digit2 .g .bottom,
.digit3 .g .bottom,
.digit4 .g .bottom,
.digit5 .g .bottom,
.digit6 .g .bottom,
.digit8 .g .bottom,
.digit9 .g .bottom,
.neg .g .bottom,
.ltrE .g .bottom,
.ltrR .g .bottom,
.ltrO .g .bottom {
  border-top-color: #aeffec;
}

.dp .dot {
  background-color: #aeffec;
}

:focus {
  outline: none;
}

::-moz-focus-inner {
  border: 0;
}


.article {
  padding: 750px 20% 3%;
  font-family: Montserrat, Raleway, Roboto, Arial, Helvetica, sans-serif;

}

a {
  color:yellow;
}