body{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #202020;
  /* background: url("background.jpg") no-repeat center top; */
}

.container{
  max-width: 600px;
  margin: 50px auto;
}

.case{
  background: #303030;
  position: relative;
  height: 500px;
  width: 350px;
  border-radius: 18px;
  border: 5px solid #1f1f1f;
  margin: 0 auto;
}

.top_text{
  position: absolute;
  background: #303030;
  height: 48px;
  width: 300px;
  border-radius: 10px;
  border: 5px solid #404040;
  top: 10px;
  left: 20px;
  text-indent: 20px;
  text-align: left;
  font-size: 20px;
  font-family: "Lucida Console", Monaco, monospace;
  color: #ff8c22;
  text-transform: uppercase;
  line-height: 40px;
  letter-spacing: 0px;
}

#signature{
  position: absolute;
  text-align: right;
  font-size: 12px;
  font-family: "Lucida Console", Monaco, monospace;
  text-transform: lowercase;
  color: #BFBFBF;
  right: 20px;
  bottom: -5px;
}

.overlay{
  border-radius: 4px;
  height: 100%;
  width: 100%;
}

.active{
  display: hidden;
  /* background: url("pictures/button_y.png") no-repeat center top; */
  background-size: cover;
}

.inactive{
  background: #505050;
}

.btn{
  position: absolute;
  background: #2ECC71;
  height: 60px;
  width: 60px;
  border-radius: 8px;
  border: 4px solid #606060;
}

#logo{
  height: 60px;
  width: 60px;
  border: 3px solid #252525;
  background: #303030;
  bottom: 340px;
  left: 20px;
}

#div{
  bottom: 340px;
  left: 100px;
  background: #ff8c22;
}

#mult{
  bottom: 340px;
  left: 180px;
  background: #f2dd5a;
}

#minus{
  bottom: 340px;
  left: 260px;
  background: #f2ede0;
}

#seven{
  bottom: 260px;
  left: 20px;
  background: #fe5532;
}

#eight{
  bottom: 260px;
  left: 100px;
  background: #ff8c22;
}

#nine{
  bottom: 260px;
  left: 180px;
  background: #f2dd5a;
}

#plus{
  left: 260px;
  bottom: 180px;
  height: 140px;
  background: #f2ede0;
}

#four{
  left: 20px;
  bottom: 180px;
  background: #fe5532
}

#five{
  left: 100px;
  bottom: 180px;
  background: #ff8c22;
}

#six{
  left: 180px;
  bottom: 180px;
  background: #f2dd5a;
}

#one{
  left: 20px;
  bottom: 100px;
  background: #fe5532;
}

#two{
  left: 100px;
  bottom: 100px;
  background: #ff8c22;
}

#three{
  left: 180px;
  bottom: 100px;
  background: #f2dd5a;
}

#enter{
  height: 140px;
  bottom: 20px;
  left: 260px;
  background: #f2ede0;
}

#zero{
  bottom: 20px;
  left: 20px;
  width: 140px;
  background: #fe5532;
}

#dot{
  bottom: 20px;
  left: 180px;
  background: #f2dd5a;
}