body, html {
  background-color: #222;
  font-family: arial;
  text-align: center;
}

h4 {
  color: #FFF;
  max-width: 80%;
  margin: 20px auto;
  text-align: left;
}

input {
  display: inline-block;
  margin: 20px 10px 0;
}

.button {
  display: inline-block;
  background-color: #090;
  padding: 5px 10px;
  border-radius: 5px;
  display: none;
}

.colors {
  text-align: center;
  margin-top: 0;
  padding: 0;
}
.colors .entered {
  width: 50%;
}
.colors .result {
  width: 30%;
}
.colors .entered,
.colors .result {
  height: 200px;
  margin: 50px 2%;
  display: inline-block;
  background-color: #FFF;
  padding-top: 5px;
  padding-left: 5px;
  text-align: left;
  font-size: 16px;
  color: #FFF;
  position: relative;
  text-transform: uppercase;
}
.colors .entered .label,
.colors .result .label {
  position: absolute;
  top: 103%;
  width: 100%;
  font-size: 14px;
  text-align: center;
  text-transform: capitalize;
}

.article {
  color:white;
  text-align:left;
  padding: 5% 15% 1%;
}

a {
  color:yellow;
}