/**
 * Header styles.
 */

nav {
  margin-bottom: 10px;
}

span#page-title {
  padding-top: 8px;
  padding-bottom: 8px;
}

.fixed-header-button {
  position: fixed;
  top: 8px;
  z-index: 1;
}


/**
 * Style the option buttons.
 */

#reload-button {
  right: 8px;
}
#option-buttons {
  left: 8px;
}
#option-buttons #gallery-button, #option-buttons #create-button, #option-buttons #help-button {
  margin-left: 4px;
}
#back-button, #menu-button {
  display: none;
  left: 8px;
}


/**
 * Main monster page styles.
 */

#no-monster-error {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  display: none;
}

canvas#canvas, canvas#make-canvas {
  max-width: 600px;
  width: 100%;
  height: 750px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  cursor: pointer;
}
canvas#canvas div {
  width: 450px;
  margin-left: auto;
  margin-right: auto;
}


/**
 * Monster gallery styles.
 */

div#gallery, div#create, div#help {
  display: none;
  max-width: 700px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
div#gallery h1, div#create h1, div#help h1 {
  text-align: center;
}
div#gallery img, div#saved-monsters img {
  width: 25%;
  cursor: pointer;
}
#gallery-preview {
  display: none;
}
div#gallery-preview img#preview-image {
  width: 100%;
  cursor: default;
  background-color: white;
}
#gallery-preview .btn-primary {
  margin-bottom: 45px;
}
@media screen and (max-width: 767px) {
  #gallery-preview .btn-primary {
    margin-bottom: 10px;
  }
}


/**
 * Editor page styles.
 */

canvas#make-canvas {
  border: gray 1px solid;
  margin-top: 20px;
  margin-bottom: 20px;
  cursor: crosshair;
}
#canvas-template {
  background-image: url('../images/monster_template.png');
}
#brush-colour {
  width: 100%;
}
#editor-buttons {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  margin-top: 30px;
}
#editor-buttons button {
  width: 100%;
}
.accordion-header button.accordion-button {
  color: black;
}


/**
 * Help page styles.
 */

#help .card {
  margin-bottom: 20px;
}
#support-link {
  display: flex;
  justify-content: center;
}


/**
 * Menu styles.
 */

#offcanvasNavbar {
  width: 150px;
}
.offcanvas-header {
  align-items: initial;
  display: block;
}
.offcanvas-header button {
  display: block;
  margin-left: auto;
}
.offcanvas-title {
  text-align: center;
}
.offcanvas-body button {
  display: block;
  margin-bottom: 20px;
}
.offcanvas-body {
  margin-left: auto;
  margin-right: auto;
}


/**
 * Media queries.
 */

/* On small screens, replace all the links with a burger menu. */
@media screen and (max-width: 800px) {
  #option-buttons {
    display: none !important;
  }
  #menu-button {
    display: block !important;
    position: fixed;
  }
}