body {
  background-color: #F5DEB3;
  background-repeat: no-repeat;
  background-size: 100%;
  background-blend-mode: normal;
  background-position: 0% 20%; }

.peg {
  display: inline-flex;
  width: 36px;
  height: 36px;
  border: 4px solid #59260B;
  border-radius: 50%;
  margin: 0 6px; }

.combo-peg {
  background-color: #bbbbbb; }

.result-peg {
  width: 14.4px;
  height: 14.4px;
  border: 2px solid #59260B;
  border-radius: 50%;
  margin: 0 4px;
  display: inline-flex; }

.black-peg {
  background-color: #000000; }

.white-peg {
  background-color: #ffffff; }

.fixed-bar {
  position: fixed;
  left: 0;
  width: 100%;
  padding: 12px;
  background-color: #F0DC82; }

#page-header {
  top: 0; }
  #page-header #combinations-message {
    font-size: 16px;
    padding-left: 16px;
    padding-top: 4px;
    margin-bottom: 4px; }

#page-footer {
  display: none;
  bottom: 0; }
  #page-footer #current-combo {
    margin-bottom: 12px; }
  #page-footer #available-colours {
    display: inline-flex; }
  #page-footer #submit-guess {
    display: inline-flex;
    position: relative;
    bottom: 6px; }
  #page-footer #submit-code {
    display: inline-flex;
    position: relative;
    bottom: 6px; }

#previous-guesses {
  margin: 100px 0 120px;
  overflow: auto; }
  #previous-guesses .guess-number {
    width: 48px;
    text-align: center;
    display: inline-flex; }
    #previous-guesses .guess-number h3 {
      text-align: center;
      font-weight: bolder; }
  #previous-guesses .guess-results {
    display: inline-flex; }
    #previous-guesses .guess-results .black-peg-row {
      display: block; }
    #previous-guesses .guess-results .white-peg-row {
      display: block; }

#site-use-modal {
  display: block;
  height: 620px;
  width: 640px;
  margin-top: -310px;
  margin-left: -320px; }
  #site-use-modal #site-use-logo {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 0; }
  #site-use-modal #site-use-title {
    margin-top: -10px; }

.modal-window {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  background-color: #F0DC82;
  padding: 0 12px;
  border: 2px solid #59260B; }
  .modal-window .button-name {
    font-weight: bold; }
  .modal-window .emph {
    font-style: italic; }

#instruc-modal {
  height: 450px;
  width: 600px;
  margin-top: -225px;
  margin-left: -300px; }

#win-game-modal {
  height: 200px;
  width: 400px;
  margin-top: -100px;
  margin-left: -200px; }

#solve-code-modal {
  height: 200px;
  width: 400px;
  margin-top: -100px;
  margin-left: -200px; }

.close-button {
  position: absolute;
  top: 12px;
  right: 12px; }

/*# sourceMappingURL=styles.css.map */