/* Cleaned and scoped art-style CSS (fixed braces, removed stray blocks) */

html {
  /* tile the background image to match the rest of the site */
  background: #110a03 url("background1.png") repeat;
  background-size: 64px;
  background-attachment: fixed;
  image-rendering: pixelated;
  cursor: url("cursor1.png"), auto;
  color: white;
  scrollbar-width: thin;
  scrollbar-color: #FBC531 #110A03;
}

body {
  font-family: "DotGothic16", cursive;
  max-width: 1100px;
  margin: 32px auto;
  padding: 24px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Press Start 2P", cursive;
}

a {
  color: #ffffff;
  font-weight: bold;
}
a:hover { filter: brightness(50%); }

hr { border: 0; border-top: 6px double #FBC531; }
blockquote { border-left: 6px double #FBC531; margin-left: 0; padding: 0 8px; }
ul { list-style-image: url("bullet1.png"); }
ol { list-style-type: upper-roman; }

button {
  background: #96c6e4;
  color: white;
  font-family: "Press Start 2P", cursive;
  border-image-source: url("border2.png");
  border-image-slice: 25%;
  border-image-width: 32px;
  border-image-outset: 8px;
  border-image-repeat: stretch;
  border-style: solid;
  padding: 7px;
  width: 240px;
  margin: 8px;
}

/* Art Page Styles */
#container {
  background-color: #96c6e4;
  padding: 16px;
  margin: 16px 0;
  border-image-source: url("border2.png");
  border-image-slice: 25%;
  border-image-width: 32px;
  border-image-outset: 8px;
  border-image-repeat: stretch;
  border-style: solid;
}

/* Gallery Styles */
div.gallery {
  background: #96c6e4;
  padding: 6px;
  margin: 5px;
}

div.gallery:hover {
  background: #59a7d8;
}

div.gallery img {
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}

div.desc {
  padding: 15px;
  text-align: center;
  color: white;
  font-family: "Press Start 2P", cursive;
  font-size: 0.8em;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
  
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/* Site frame style used across the site; nav will use this to match other boxes */
.border1 {
  border: 48px solid transparent;
  border-image-source: url("border1.png");
  border-image-slice: 25%;
  border-image-width: 32px;
  border-image-outset: 8px;
  border-image-repeat: stretch;
  border-style: solid;
  padding: 24px;
  box-sizing: border-box;
}

/* smaller vertical padding for navigation boxes so buttons sit tighter */
.nav-frame {
  /* force a small overall padding so nav buttons sit tighter */
  padding: 6px !important;
  box-sizing: border-box;
}

/* reduce vertical margin for buttons inside the nav-frame only */
.nav-frame button {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
  margin-left: 6px !important;
  margin-right: 6px !important;
  width: 220px !important; /* slightly narrower to help visual balance */
}

#layout-wrapper { display: flex; flex-direction: row; gap: 16px; }
#sidebar { width: 300px; flex-shrink: 0; }
#content-box { flex: 1; background: #c5e5f9; padding: 16px; }

/* ----- Gallery styles (scoped for art page) ----- */
.art-page .gallery {
  background: #c5e5f9;
  padding: 24px;
  border-image-source: url("border1.png");
  border-image-slice: 25%;
  border-image-width: 32px;
  border-image-outset: 8px;
  border-image-repeat: stretch;
  border-style: solid;
  width: 100%;
  max-width: 400px;
  margin: 32px;
  box-sizing: border-box;
}

.art-page .gallery:hover {
  overflow: auto;
}

.art-page .gallery img { width: 100%; height: auto; display:block; }
.art-page .desc { padding: 15px; text-align: center; }

.art-page .responsive {
  box-sizing: border-box;
  padding: 0 6px;
  float: left;
  width: 24.99999%;
  max-width: 300px;
  margin: 16px;
}

@media only screen and (max-width: 700px) {
  .art-page .responsive { width: 49.99999%; margin: 6px 0; }
}
@media only screen and (max-width: 500px) {
  .art-page .responsive { width: 100%; }
}

.clearfix:after { content: ""; display: table; clear: both; }