.ambrosia,
.ambrosia img {
  max-width: 500px;
  margin: 0 auto;
}
.ambrosia h1 {
  font-size: 30px;
}
.ambrosia h2 {
  font-size: 20px;
}
.jqPuzzle {
  margin: 0 auto 50px;
  padding: 1px;

  border: 1px solid #222222;
  background-color: #6e6eef;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

/* only needed if external css rules set defaults for divs,
   this rule only resets the most common properties */
.jqPuzzle div {
  max-width: 500px;
  background-color: transparent;
  margin: 0px;
  padding: 3px;
  border-style: none;
}

/* div wrapper which holds the puzzle pieces and the solution image */
.jqPuzzle .jqp-wrapper {
  padding: 2px;
  border: 1px solid #ffffff;
  background-color: #444455;
}

/* a single puzzle piece */
.jqPuzzle .jqp-piece {
  border: 1px solid #ffffff;
  color: #ffffff;
  font-size: 36px;
}

.jqPuzzle .jqp-piece:hover {
  border-style: dashed;
}

.jqPuzzle.jqp-solved .jqp-piece:hover {
  border-style: solid;
}

/* the controls area which holds the buttons and the display */
.jqPuzzle .jqp-controls {
  float: left;
}

/* a button */
.jqPuzzle .jqp-controls a {
  margin-top: 5px;
  margin-right: 8px;
  padding: 3px 5px;
  border: 1px outset #ffffff;
  background-color: #777799;
  color: #ffffff;
  font-size: 14px;
  line-height: normal;
  float: left;
}

.jqPuzzle .jqp-controls a:hover {
  background-color: #7777bb;
}

/* toggle/down state for buttons */
.jqPuzzle .jqp-controls a.jqp-toggle,
.jqPuzzle .jqp-controls a.jqp-down {
  padding-left: 4px;
  padding-right: 6px;
  border-style: inset;
  background-color: #bbbbff;
}

/* disabled state for buttons */
.jqPuzzle .jqp-controls a.jqp-disabled {
  background-color: #ddddee;
  color: #ffffff;
}

/* the area which holds the moves/seconds display */
.jqPuzzle .jqp-controls span {
  margin-top: 5px;
  padding: 2px 4px;
  padding-left: 0px;
  border: none;
  background-color: transparent;
  color: #666666;
  font-size: 14px;
  float: left;
}

/* disabled state for the display (non-shuffled puzzle) */
.jqPuzzle .jqp-controls span.jqp-disabled {
  color: #aaaaaa;
}

/* solved state for the display (non-shuffled puzzle) */
.jqPuzzle.jqp-solved .jqp-controls span {
  padding: 1px 3px;
  border: 1px dotted #0f8f08;
  background-color: #9fef86;
  color: #0f8f08;
}

/* a text field for the moves/seconds display */
.jqPuzzle .jqp-controls span input {
  margin: 0px 3px;
  padding: 3px;
  padding-bottom: 2px;
  border-style: none;
  background-color: #ffffff;
  color: #666666;
  font-weight: bold;
  text-align: right;
}

/* disabled state for the text fields */
.jqPuzzle .jqp-controls span.jqp-disabled input {
  background-color: #eeeeff;
  color: #aaaaaa;
}

/* solved state for the text fields */
.jqPuzzle.jqp-solved .jqp-controls span input {
  background-color: #c2ffaf;
  color: #444444;
}
@media (max-width: 768px) {
  .ambrosia,
  .ambrosia img {
    max-width: 350px;
    margin: 0 auto;
  }

  .jqPuzzle {
    margin: 0 auto 30px;
  }

  /* only needed if external css rules set defaults for divs,
   this rule only resets the most common properties */
  .jqPuzzle div {
    max-width: 350px;
  }
  /* a single puzzle piece */
  .jqPuzzle .jqp-piece {
    font-size: 20px;
  }
}