html,body{
  font-family: "Press Start 2P", cursive;
  color: #D49D42;
  background-color: #151515;
}
input:focus{
  outline: none;
}
input[type=number]{
  -moz-appearance: textfield;
}
@keyframes change{
from{color: #3f3d3d;}
to{color:#D49D42 ;}
}
.heading{
  animation-name: change;
  animation-duration: .25s;
  animation-iteration-count: infinite;
}
header{
  position: relative;
  height: 40vh;
  border-bottom: 5px solid #D49D42;
}
main{
  height: 55vh;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.left{
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.right{
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* ElemetStyle */
h1{
  text-align: center;
  position: absolute;
  width: 100%;
  top: 45%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.info{
  position: absolute;
  top: 2rem;
  right: 2rem;
}
.btn{
  position: absolute;
  top: 2rem;
  left: 2rem;
}
.mid{
  background: #D49D42;
  color: #151515;
  font-size: 3rem;
  width: 10rem;
  padding: 2rem 0rem;
  text-align: center;
  position: absolute;
  bottom: -16.5%;
  left: 50%;
  transform: translate(-50%, 50%);
}
.btn{
cursor: pointer;
background: #D49D42;
color: #151515;
border: none;
font-family: inherit;
padding: 2rem 3rem;
border-radius: 1px;
}
.number{
color: #D49D42;
background: #151515;
font-family: inherit;
font-size: 2rem;
width: 20%;
padding: 2% 2%;
border: 3px solid #D49D42;
text-align: center;
}
.btnCheck{
cursor: pointer;
background: #D49D42;
color: #151515;
border: none;
padding: 2% 3%;
font-family: inherit;
font-size: 1.5rem;
margin-top: 1rem;
}
.btnCheck:hover{
  background: #926b2b;
}
.message{
  margin-bottom: 3rem;
  height: 1.5rem;
}