html {
  height: 100%;
}

body {
  padding: 0;
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  font-family: 'Anonymous Pro', monospace;
}

header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: rgb(247, 240, 56);
}

.game_name {
  font-size: 2em;
  font-family: 'Bungee Shade', cursive;
  font-weight: bolder;
  padding-left: 20px;
  margin-bottom: 0;
}

.slogan {
  font-size: 1em;
  font-family: 'Anonymous Pro', monospace;
  font-weight: bolder;
  padding-left: 20px;
  margin-top: 0px;
}
main {
  display:flex;
  flex: 2 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgb(126, 246, 107);
  border-style: solid;
  border-width: 1px;
}

.monkey {
  width: 200px;
  transform: rotate(-5deg);
}

.question {
  display: flex;
  width: 80%;
}

input {
  flex: 9;
  padding: 10px;
}

input[type="text"] {
  /*flex: 1;*/
  font-size: 1.5em;
  text-align: center;
}

input[value="?"] {
  flex: 1 0 auto;
  font-size: 2em;
  font-weight: bolder;
  max-width: 50px;
  color: rgb(247, 240, 56);
  background-color: rgb(250, 134, 60);
}

input[value="X"] {
  flex: 1 0 auto;
  font-size: 2em;
  font-weight: bolder;
  max-width: 50px;
  color: rgb(126, 246, 107);
  background-color: rgb(250, 134, 60)
}

.answer_8 {
  display: flex;
  flex: 3 0 auto;
  background-color: rgb(89, 171, 76);
  font-size: 2em;
  padding: 10px;
  margin-left: inherit;
  justify-content: center;
}

.ape_says {
  font-size: 1em;
  align-content: stretch;
  margin-bottom: 0px;
  font-weight: bold;
}

.answer {
  display: flex;
  flex-direction:column;
  justify-content: center;
  width: 80%;
}

.bananas1 {
  flex: 1;
  height: 40px;
  align-self: flex-start;
  padding-right: 10px;
}

.bananas1:focus {
  outline: 0;
}

.bananas1:hover  {
  transform: scale(1.1);
}

.bananas1:active  {
  transform: scale(0.9);
}

hr {
  border-color: rgb(79, 150, 68);
  margin-top: 20px;
}

.text_answer {
  flex: 9;
  justify-content: center;
  padding: 15px 5px 5px 20px;
  background-color: rgb(79, 150, 68);
}

.type_answer {
  display: flex;
  flex: 1 0 auto;
  background-color: rgb(89, 171, 76);
  font-size: 2em;
  padding: 10px;
  margin-left: inherit;
}

footer {
  display: flex;
  justify-content: center;
  font-size: 0.8em;
  background-color: rgb(250, 134, 60);
}