html,body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 20px 0 0 0;
}
.center {
  text-align: center;
}
#main {
  width: 100%;
  /* height: 100%; */
  display: flex;
  justify-content: center;
  align-items: center;
}
#parent {
  /*border: 2px solid red;*/
  width: 690px;
}
#other {
  /*border: 2px solid black;*/
  display: flex;
  justify-content: space-between;
  margin: 0px 0px 0px 0px;
}
input {
  font-size: 15px;
  padding: 7px 15px;
  border: 1px solid grey;
  border-radius: 22px;
}
input#dec {
  /*width: 100%;*/
  box-sizing: border-box;
}
button {
  padding: 5px 15px;
  background-color: #6181FF;
  color: white;
  border: 1px solid transparent;
  font-size: 13px;
  font-family: sans-serif;
  border-radius: 18px;
  outline: none;
}

.btn {
  margin: 13px;
}
button:hover {
  background-color: #5275FF;
  cursor: pointer;
}
button:active {
  transform: scale(0.9,0.9);
}
@media only screen and (max-width: 1086px) {
  #other {
    flex-direction: column;
  }
  #parent{
    width:100%;
  }
}
input:focus {
  outline: none;
}
h1 {
  text-align: center;
  font-family: sans-serif;
  color: white;
  text-shadow: 1px 0px 0px black, 0px -1px 0px black,0px 1px 0px black, -1px 0px 0px black;
}


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