:root {
  --bg-low: #2C6799;
  --bg-mid: #62B7FF;
  --bg-high: #429BE6;
}

::selection {
  background-color: rgba(255, 255, 255, .2);
}

body {
  background-color: var(--bg-low);
  color: white;
  font-family: "Helvetica", sans-serif;
  font-size: 1.25em;
  margin: 0;
}

.flex-container {
  display: flex;
  background-color: var(--bg-high);
  padding: 1em;
  max-width: 100%;
  margin: auto;
  flex-flow: row wrap;
  justify-content: center;
}

.flex-item {
  background-color: var(--bg-mid);
  min-width: 1em;
  max-height: 20em;
  margin: 1em;
  padding: 1.5em;
  flex: 0 0 auto;
  /*position: relative;*/
}

.flex-wide {
  flex: auto;
  flex-basis: 100%;
}

.button-wrapper {
  display: block;
  padding: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--bg-low);
}

button {
  display: block;
  float: left;
  /*margin: 0;*/
  /*padding: 1.125em;*/
  letter-spacing: .03em;
  height: 100%;
  /*font-size: 1em;*/
  border: none;
  color: white;
  background-color: var(--bg-mid);
  /*width: 100%;*/
  outline: none;
  transition-duration: 75ms;
}

button:focus {
  background-color: var(--bg-low);
  /*letter-spacing: .04em;*/
  transition-duration: 50ms;
  /*font-size: 1.2em;*/
}

button:active {
  background-color: var(--bg-low);
  /*letter-spacing: .01em;*/
  transform: scale(.825);
  transition-duration: 50ms;
}

.button-disabled:hover, .button-disabled:active {
  display: block;
  margin: 0 auto;
  padding: 1.125em;
  letter-spacing: .03em;
  font-size: 1em;
  border: none;
  color: white;
  background-color: var(--bg-mid);
  /*width: 100%;*/
  outline: none;
  transition-duration: 75ms;
}

.flex-square {
  font-size: 3em;
  margin: 0em;
  /*min-width: 4.5em;*/
  /*min-height: 4.5em;*/
  transition-duration: 50ms;
}

/*.flex-square:hover {
  background-color: var(--bg-low);
  transition-duration: 100ms;
}*/

.flex-square:active {
  /*padding: .625em 1.125em;
  margin: .5em;*/
  align-self: center;
  justify-content: center;
  /*transform: scale(.825);*/
  transition-duration: 50ms;
}

table {
  width: 80%;
  margin: auto;
}

td {
  font-size: 1.25em;
  width: 100em;
  padding: .5em 3em;
  text-align: center;
  /*background-color: rgba(255, 255, 255, .25);*/
}

p {
  font-size: 1.25em;
  text-align: center;
  margin: auto;
}

/*#guess-display {
  text-align: center;
  font-size: .8em;
}*/

#output {
  /*background-color: var(--bg-mid);*/
  /*text-align: center;*/
  flex: auto;
  flex-basis: 100%;
  /*min-width: 40%;*/
  /*align-items: stretch*/
  /*display: none;*/
}

#output-text {
  /*font-size: 1.25em;*/
  margin: auto;
  padding: .5em;
  line-height: 1.75em;
  /*flex-basis: 40%;*/
  /*background-color: skyblue;*/
}

h1 {
  text-align: center;
  font-size: 2em;
}

input {
  background-color: var(--bg-high);
  border: none;
  color: white;
  outline: none;
  display: block;
  margin: .5em auto;
  padding: .5em;
  /*width: 14em;*/
  min-width: 7em;
  max-width: 85%;
  font-size: 1em;
}

input:focus {
  background-color: white;
  color: var(--bg-high);
}

input:focus::selection {
  background-color: var(--bg-high);
  color: white;
}

#numGuessForm {
  /*background-color: limegreen;*/
  margin: auto;
  width: 100%;
}

:-ms-input-placeholder {color: white;}
:-moz-placeholder {color: white;}
::-moz-placeholder {color: white;}
::-webkit-input-placeholder {color: white;}

input:focus:-ms-input-placeholder {color: var(--bg-high);}
input:focus:-moz-placeholder {color: var(--bg-high);}
input:focus::-moz-placeholder {color: var(--bg-high);}
input:focus::-webkit-input-placeholder {color: var(--bg-high);}


#replay {
  display: none;
}