body {
    background-color: rgb(189,189,119);
}
h1, h2, h3, h4, h5, h6 {
    text-align: center;
}
header {
    width: 100%;
    font-size: xx-large;
    text-align: center;
}
p {
    font-family: 'Times New Roman', Times, serif;
    font-size: .88em;
    text-align: justify;
    text-justify: inter-word;
    text-indent: 1.5em;
}
sup {
    font-size: .8em; /* smaller so it doesnt push too far up */
    vertical-align: super; /*ensures proper alignment */
    line-height: 0; /* prevents it from adding extra height */
}
.videoContainer {
    position: relative;
    margin: auto;
    width: 640px;
    height: 360px;
}
.container {
    width: 78%;
    margin: 1em auto;
    padding: 0 2% 2%;
    border: .05em solid saddlebrown;
    overflow: hidden;
}
.container ul {
    overflow: auto;
    font-size: .86em;
}
.containerOne {
    width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1em;
}
.tower9picLeft {
    float: left;
    padding: 0% 2% 2% 0;
}
.tower9picRight {
    float: right;
    padding: 2% 0 2% 2%;
}
.middle {
    clear: both;
}
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
.dungeonMasterBox {
    position: relative;
    width: 43.33%;
    background-color: lemonchiffon;
    border: .2em solid gray;
    font-size: .7em;
    line-height: 1.3em;
    margin: 2em auto;
    padding: 0em 2em 1em 2em;
    overflow: hidden;
}
/* Tower 1 stuff */
.explodedSkullPic {
    float: right;
    padding: 2%;
}
.ethmoidBoneTrigger {
    color: rgb(0, 0, 255);
    cursor: pointer;
}
.ethmoidBone {
    position: absolute;
    visibility: hidden;
    width: 56em;
    height: 20em;
    padding: 0em 0em 2em 2em;
    border: .05em solid brown;
    top: 300%;
    left: 20%;
    background-color: rgb(189,189,119);
}
.ethmoidBonePic {
    width: 24%;
    margin-left: 6%;
}
 .ethmoidBoneTrigger:hover + .ethmoidBone {
    visibility: visible;
}
.grow {
    transition: transform 0.25s ease;
}
.grow:hover {
    -webkit-transform: scale(1.5); /* or some other value */
    transform: scale(1.5);
    z-index: 1;
}
.small {
    font-size: x-small;
}
.statueshout {
    width: 80%;
    margin: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    font-weight: 800;
    text-align: center;
}
.tower1-table td, .tower1-table th {
    text-align: left;
    border: .02em solid gray;
}
.tower1-table {
    display: table;
    width: 55%;
    border-collapse: collapse;
    border: .02em solid gray;
    margin: auto;
}
.levelOneAdventure {
    position: relative;
    width: 80%;
    border: .025em solid black;
    padding: 112% 1% 1% 1%;
    background-position: content-box;
    background-repeat: no-repeat;
    background-size: contain;
}
.New {
    background-image: url("tower1Schematic.png");
}
.Old {
    background-image: url("tower1Sketch.png")
}
.westSide {
    position: relative;
    width: 90%;
    border: .05em solid black;
    margin: auto;
}
.day {
    position: absolute;
}
.OneWords {
    left: 14%;
    bottom: 4%;
}
.TwoWords {
    left: 48%;
    bottom: 4%;
}
.ThreeWords {
    left: 80%;
    bottom: 4%;
}

.previous, .next {
    width: 6em;
    height: 1.2em;
    margin: 1em auto;
    text-align: center;
    color: white;
}
figcaption {
    text-align: center;
    font-style: italic;
    font-size: small;
    margin-top: 0.5em;
}
.armaments {
    width: 20%;
    margin: 1%;
}
.defenses {
    text-align: center;
    margin-top: 1em;
}
figure img {
        width: 100%;
        height: auto;
    }
.sunPic img {
    display: flex;
    width: 30%;
    height: auto;
    margin: 0 auto;
    align-items: center;
}
.centerUL {
    width: 50%;
    margin: .5em auto;
}
.sidebar {
    float: right;
    width: 28%;
    background: #f4f1e8;
    border-left: 4px solid #8a6d3b;
    padding: 1em;
    margin: 1em 0 2em 2em;
    font-size: 0.9em;
    line-height: 1.4em;
    box-shadow: 0 0 6px rgba(0,0,0,0.15);
}

.sidebar h5 {
    margin-top: 0;
    font-size: 1.1em;
    color: #5a4525;
}

/* Tower 9 Stuff */

.fortressNav {
    background-color: #2c2c2c;   /* dark stone */
    padding: 10px;
    border-bottom: 3px solid #444;
}

.fortressNav ul {
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    display: flex;
    justify-content: space-between;
    width: 80%;
}

.fortressNav li {
    display: inline;
}

.fortressNav a {
    color: #f0e68c;              /* parchment gold */
    text-decoration: none;
    font-weight: bold;
}

.fortressNav a:hover {
    color: #ff4500;              /* fiery highlight */
    text-decoration: underline;
}

.villageFigure {
    position: relative;       /* allows caption to be positioned inside */
    display: table;    /* keeps figure tight around the image */
    margin: 1em auto;        /* center the figure */
}

.villageFigure img {
    display: block;
    max-width: 600px;         /* adjust as needed */
}

.villageFigure figcaption {
    position: absolute;       /* places caption over the image */
    bottom: 5px;              /* almost touching the bottom */
    left: 50%;                /* start at center */
    transform: translateX(-50%); /* truly center it */
    background: rgba(0,0,0,0.5); /* optional: semi-transparent background */
    color: #fff;              /* white text for contrast */
    padding: 4px;         /* small padding for readability */
    font-size: 14px;          /* adjust to taste */
    text-align: center;
    border-radius: 4px;       /* optional: soften edges */
}

.emptyBackground {
    background-color: transparent;
    border: none;
    padding: 0;
    margin: -2em auto 0em auto;
    font-size: 1em;
}

.adventureContainer {
    width: 90%;
    margin: 2em auto;
    border: .2em solid gray;
    padding: .5em 2em;
    overflow: auto;
}
/* Front Gate House Stuff */

.sketch-gallery {
  display: flex;
  flex-wrap: wrap;       /* allows multiple rows */
  justify-content: center; /* center images horizontally */
  gap: 1rem;             /* space between images */
}

.sketch-gallery img {
  flex: 1 1 22%;         /* roughly 4 per row, responsive */
  max-width: 22%;        /* ensures they don’t stretch too wide */
  height: auto;          /* keeps proportions */
  border: 2px solid #444; /* optional styling */
  border-radius: 4px;    /* soft corners */
}

/* Lightbox styles */
.lightbox {
  display: none;
  position: fixed;
  z-index: 999;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
}

.lightbox img {
  max-width: 90%;
  max-height: 90%;
  border: 3px solid #fff;
}
@media (max-width: 1280px) {
  /* Styles to apply when the viewport width is 1280px or less */
  .tower9picLeft, .tower9picRight {
    width: 40%;
    float: none;
  }
  .container {
    width: 100%;
  }
}

@media screen and (max-width: 820px) {

    video, .videoContainer {
        width: 320px;
        height: 180px;
    }
    .tower9picLeft, .tower9picRight {width: 50%; float: none; margin: 0em 0em 0em 25%;}
    .container {width: 90%; margin-left: .5em;}
    .westSide {width: 98%;}
    .westSide img {width: 32%;}
    .OneWords {left: 8%;}
    .TwoWords {left: 40%;}
    .ThreeWords {left: 70%;}
    .dungeonMasterBox {width: 90%; margin: 0em;}
    .previous, .next {width: 100%; margin: 0.5em 0;}
 }