/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-image: url('photos/dungeonback.png');
  color: black;
  font-family: Verdana;
}

.panel-box {
  background-color: #2e1c0b; /* deep brown, like wood */
  border: 4px solid #a68c5b; /* gold/bronze trim */
  padding: 16px;
  margin: 20px;
  font-family: 'MedievalSharp', 'Uncial Antiqua', serif;
  color: #f4e6c5; /* aged parchment */
  box-shadow: inset 0 0 6px #000000, 0 0 10px #000;
  border-radius: 8px;
}


.panel-box {
  background: url('/images/panel-bg.png');
  border-image: url('/images/pixel-border.png') 8 round;
  border-width: 8px;
  border-style: solid;
  padding: 16px;
  font-family: 'Uncial Antiqua', serif;
  color: #e3d5b8;
}


.medieval-button {
  font-family: 'MedievalSharp', serif;
  background-color: #5e3d20;
  color: #fdf6d3;
  padding: 8px 16px;
  border: 3px solid #c9a34e;
  box-shadow: 0 2px 0 #8a6a2f;
  cursor: pointer;
  text-shadow: 1px 1px 0 #000;
}

.medieval-button:hover {
  background-color: #7a512e;
  border-color: #e4c76f;
}

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
}

.button-menu {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

   .hill-button {
  position: fixed;
  top: 16px;  /* distance from bottom of the screen */
  left: 16px;   /* distance from right edge — or use left: 16px for bottom-left */
  z-index: 1000; /* ensures it's on top of other elements */
}

.hill-button img {
  width: 48px;
  height: 48px;
  transition: transform 0.2s ease;
  cursor: pointer;
  image-rendering: pixelated; /* keeps it crisp if it's pixel art */
}

.hill-button img:hover {
  transform: scale(1.1) rotate(-2deg);
}

    h2, p {
      margin: 0 0 1em 0;
    }

.scroll-frame {
  background: url('/images/parchment.png') center center repeat;
  padding: 20px;
  border: 6px double #a67c52;
  color: #3e2f1c;
  font-family: 'Uncial Antiqua', serif;
}

.outer-container {
      background-color: rgba(255, 255, 255, 0.75);
      padding: 20px;
      margin: 40px auto;
      max-width: 800px;
      border: 4px solid  #d9d9d9;
    }
    
    .inner-container {
      background-color: rgba(255, 255, 255, 0.75);
      padding: 20px;
      border: 2px solid #d9d9d9;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }

area {
  cursor: pointer;
}