@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css");
@import url("https://fonts.googleapis.com/css?family=Roboto+Slab");
@import url("https://fonts.googleapis.com/css?family=Oleo+Script");
@import url("https://fonts.googleapis.com/css?family=VT323");
@import url("https://fonts.googleapis.com/css?family=Work+Sans");
@import url("https://fonts.googleapis.com/css?family=Questrial");
body {
  background: #2c5e63c2;
  -webkit-user-select: none;
  /* Chrome all / Safari all */
  -moz-user-select: none;
  /* Firefox all */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none;
  /* Likely future */
  cursor: default;
}

#root {
  position: absolute;
  top: 0px;
  /* overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  height: 100%; */
  left: 0px;
}

#container {
  position: absolute;
  top: 0px;
  overflow-y: auto;
  overflow-x: hidden;
  height: auto;
}

#calculator-body {
  position: relative;
  top: 0px;
  border-top: solid;
  border-left: solid;
  border-width: 2px;
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.2);
  background: -webkit-linear-gradient(160deg, #e3dee8, #9c96a3);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(160deg, #e3dee8, #9c96a3);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(160deg, #e3dee8, #9c96a3);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(160deg, #e3dee8, #9c96a3);
  /* Standard syntax */
}
#calculator-body div {
  position: absolute;
}

#calculator-heading {
  font-family: Oleo Script;
  width: 100%;
  text-align: center;
  color: #7c7682;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.6);
}

#screen-container {
  border-style: solid;
  border-width: 1px;
  border-color: rgba(98, 114, 87, 0.4);
  background: #9bb28b;
  box-shadow: inset 2px 2px 1px rgba(0, 0, 0, 0.1);
}

.screen-label {
  font-family: Roboto Slab;
  text-align: right;
  color: rgba(75, 81, 62, 0.7);
}

.screen-display {
  background: rgba(0, 0, 0, 0.05);
  font-family: VT323;
  color: rgba(30, 35, 20, 0.6);
  overflow: hidden;
  display: inline-block;
  word-wrap: break-word;
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.08);
}

.calculator-button {
  position: absolute;
  font-family: Work Sans;
  outline: none;
  cursor: pointer;
  border-style: solid;
  border-width: 1px;
  box-shadow: inset 2px 2px 2px rgba(255, 255, 255, 0.1);
  padding: 0px;
}

.calculator-button:active {
  box-shadow: inset 2px 2px 0px rgba(0, 0, 0, 0.2);
}

.light-button {
  background: -webkit-linear-gradient(180deg, #eaeff7, #c2c7d9);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(180deg, #eaeff7, #c2c7d9);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(180deg, #eaeff7, #c2c7d9);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(180deg, #eaeff7, #c2c7d9);
  /* Standard syntax */
  color: rgba(67, 81, 104, 0.8);
  border-color: rgba(0, 0, 0, 0.4);
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5);
}

.dark-button {
  background: -webkit-linear-gradient(180deg, #616f86, #435168);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(180deg, #616f86, #435168);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(180deg, #616f86, #435168);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(180deg, #616f86, #435168);
  /* Standard syntax */
  color: rgba(244, 246, 249, 0.8);
  border-color: rgba(0, 0, 0, 0.2);
  text-shadow: -1px -1px 0px rgba(0, 0, 0, 0.2);
}

#signature {
  position: relative;
  width: 100%;
  text-align: center;
  font-family: Questrial;
  color: rgba(139, 198, 192, 0.6);
}

.article {
  padding: 600px 20% 2%;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.article a {
  color:yellow;
}