body {
  max-width: 1600px;
}

p {
  color: white;
}

h2 {
  color: white;
  text-align: center;
}

button {
  border: none;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

/********************** Top Container ***********************/

.bruno-top-container {
  background-color: #ffe169;
  width: 100%;
  padding: 2% 4%;
}

.bruno-banner {
  width: 40%;
  margin: 0 auto;
}

.bruno-banner-img {
  width: 100%;
}

.bruno-instructions-container {
  font-family: "Fredoka One", sans-serif;
}

.bruno-back-btn {
  background-color: blueviolet;
  padding: 10px;
  margin: 0;
}
/********************** Intruction Container ***********************/
.instruction-container {
  background-color: midnightblue;
  padding: 20px;
}

.instruction-container .button {
  color: white;
}

.instruction-p {
  color: white;
  padding: 20px;
  text-align: center;
}

.collapsible {
  background-color: midnightblue;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 25px;
  font-family: "Fredoka One", sans-serif;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active,
.collapsible:hover {
  background-color: midnightblue;
  outline: none;
}

/* Style the collapsible content. Note: hidden by default */
.content {
  background-color: midnightblue;
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  margin-top: 10px;
}

.collapsible:after {
  content: "\02795"; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: white;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}

/********************** Canvas Container ***********************/
.bruno-middle-container {
  width: 100%;
  background-color: blueviolet;
  padding: 5%;
}

.team-btn-container {
  display: flex;
  justify-content: space-around;
  margin: 20px 10px;
}

.btn-p {
  color: white;
}

.team-btn-container button {
  width: 175px;
  height: 80px;
  font-family: "Fredoka One", sans-serif;
  font-size: 25px;
  border-radius: 8px;
  outline: none;
}

.blueBtn {
  background-color: blue;
  color: lightskyblue;
}

.yellowBtn {
  background-color: #ffe169;
  color: darkgoldenrod;
}

.greenBtn {
  background-color: darkgreen;
  color: palegreen;
}

.bruno-canvas-container {
  margin: 0 auto;
  width: 80%;
  height: auto;
}

.puzzle-container {
  background-image: url(../assets/images/games/bruno/bruno_splash.png);
  background-size: cover;
  background-position: center;
  position: relative;
}

img {
  width: 100%;
  height: auto;
}

.puzzle-container img {
  opacity: 0;
  transition: all ease 1s;
}

.puzzle-container img:not(:nth-child(1)) {
  position: absolute;
  top: 0;
  left: 0;
}

#puzzle-actions {
  background-color: blueviolet;
  display: none;
}

.bruno-action-container {
  display: block;
  padding-top: 20px;
  padding-bottom: 50px;
}

.puzzle-action-btn {
  display: block;
  background-color: goldenrod;
  padding: 0;
  width: 220px;
  height: 60px;
  border-radius: 8px;
  margin-left: auto;
  margin-right: auto;
}

.puzzle-back-btn {
  background-color: goldenrod;
  margin: 10px;
  padding: 0;
  width: 220px;
  height: 60px;
  border-radius: 8px;
}

.puzzle-action-p {
  color: white;
  font-family: "Fredoka One", sans-serif;
  font-size: 25px;
  padding: 0;
  margin: 0;
}

.add-puzzle-objects {
  display: block;
}

.reset-puzzle-container {
  display: block;
}

.bruno-back-btn-container {
  display: flex;
  justify-content: center;
  background-color: blueviolet;
  margin-top: 70px;
}

.puzzle-input {
  display: block;
  text-align: center;
  font-size: 50px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
}