body {
font-family: 'Quicksand', sans-serif;
color: #191919;
background-color:#f3f3f3;
}

h1 {
    text-align: center;
}

#title {
margin-bottom: 1em;
}

#wrapper {
display: flex;
flex-direction: column;
flex-flow: row wrap;
justify-content: center;
max-width: 600px;
align-content: center;
margin: auto;
padding-top:1em;
}

#interface {
display: flex;
justify-content: center;
align-items: center;
}

#wrapper, #form, #button, #result, #about {
flex: 1 100%;
justify-content: center;
display:flex;
}

#result {
font-size: 2em;
height: 3em;
overflow: auto;
text-align: center;
}

#about {

font-size: .75em;
max-width: 60%;
}

a {
text-decoration:none;
color: #00628b;
}

button{
background-color: #191919; 
border: none;
transition: .3s;
font-size: 1em;
color: #f3f3f3;
font-family: "Quicksand", sans-serif;
width: 7em;
height: 7em;
margin-top: 2em;
border-radius:50%;
box-shadow: 0 0 1px gray;
}

button:hover {
box-shadow: 0 0 1em gray;
}

button:active {
box-shadow: 0 0 2em gray;
}

button:focus {outline:0;}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
  }
  
 input::-ms-clear {
    display: none;
}

input[type="number"] {
    -moz-appearance: textfield;
}

form {
display: flex;
justify-content: center;
}

input{
 border: none;
 transition: border 0.3s; 
 font-family: "Quicksand", sans-serif;
 font-size: 1em;
  width: 9em;
  height: 3em;
  text-align: center;
  display:flex;
  border: solid 1px #f3f3f3;
 }

input:focus {
  border: solid 1px #cecece;
  box-shadow: 0 0 1px  #4e4e4e;
  outline:none
}

#result {
margin-top: 1em;
}