body{
  padding: 0px;
  margin:0px;
  background-image: linear-gradient(45deg, #4d4d4d 25%, #8a8a8a 25%, #8a8a8a 50%, #4d4d4d 50%, #4d4d4d 75%, #8a8a8a 75%, #8a8a8a 100%);
background-size: 56.57px 56.57px;
}
.main-frame{
  width:100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.calc-body{
  padding: 15px;
  border-radius: 5px;
  height:auto;
  width:auto;
  background-color:#566573;

  border: 1px solid #808B96;
  box-shadow:inset 0 0 10px 2px #273746,0px 1px 0px 1px #273746;
}

.calc-display{
  width: 100%;
  padding:5px;
  border:1px solid #A93226;
  background-color:#EC7063;
  color:#A93226;
  font-size: 20px;
  border-radius: 5px;
  text-align: right;
  font-family: 'Orbitron', sans-serif;

}

input::placeholder{
  color:#A93226;
}
button{
  border:0px;
  outline:0px;
}
.button:active{
  box-shadow: 0px 0px 0px 0px black;
  transform: translateY(2px);
}
.calc-buttons{
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 10px;
}
.button{
  font-size: 20px;
  font-family: 'Orbitron', sans-serif;
cursor: pointer;
padding:10px 15px;
box-shadow:0px 2px 0px 0px #212F3D;
border-radius: 3px;
background: linear-gradient(45deg,#95A5A6,white);
}

.h-long{
  grid-column: span 2;
}

input{
  outline:none;
}

.v-long{
  grid-row: span 2;
}
.spcl-button{
  background: linear-gradient(45deg,#DE1D6B,#992353);
  background-color: #DE1D6B;
  color:white;
  box-shadow:0px 2px 0px 0px #930740;
}
.credit{
  font-family: 'Yanone Kaffeesatz', sans-serif;
  position:fixed;
  z-index:+9999;
  bottom:0px;
  right:0px;
  display: inline-block;
  margin-right: 20px;
  margin-bottom: 15px;
  opacity:0.9;

}
.credit .name-section{
  font-family: 15px;
  text-align: right;

}

a{
  text-decoration: none;
  color:black;
}

.credit .social-icons{
  font-size: 25px;
  text-align: right;
  margin:1px;
}

.credit i{
  cursor: pointer;
  margin:5px;
}

.git:hover{
  color:#34495E;
}

.insta:hover{
color:#C90CEE;
}

.in:hover{
color:#0CA4EE;
}

@media (max-width:500px) {
  .main-frame{
    display: block;
  }
.calc-body{
  width:auto;
  left:0px;
  right: 0px;
  top:0px;
  bottom:0px;
  height: 100%;
}
.calc-display{
font-size: 30px;
padding:20px 5px;
}
.calc-buttons{
  height:70%;
}
}