body {
  background: #234047 url("img/brick_bg.png");
  font-family: "Candara", "Open Sans", sans-serif;
  font-size:16px;
  color: white;
  }
  
a {
    color: #0783b9;
  }
  
.tiny {
  font-size: 9px;
  margin: 0 auto;
  text-align: center;
  }
  
/*Everything in the main box goes in this*/
.wrapper {
  width: 750px;
  border: 3px solid #780c99;
  margin: 0 auto;
  top: 0px;
  }
  
.header {
  height: 200px;
  border-bottom: 3px solid #780c99;
  margin: 0 auto;
  overflow: hidden;
  background: url("img/banner.png");
  background-size: cover;
  background-position: center;
  image-rendering: pixelated; /* Use nearest-neighbor upscaling */
}
  
/*This and the header-title class are deprecated now that this style uses a background image for the header div.*/
/*.header img {
  display: block;
  opacity: 0.35;
  width: 100%;
  height: 100%;
  overflow: hidden;
  }
*/

 /*If you want to use a smaller title or normal text, add .header p or .header h4 or whatever to the list*/
.header h2, .header h3, .header h1 {
  font-weight: bold;
  color: white;
  text-align: center;
  border: 0px solid 780c99;
  margin: 18% auto; /*approx centered*/
  opacity: 0.999999;
}

.wrapper { position: relative; }

/* Floating social buttons: anchors with classes `discord-link` and `tiktok-link`.
   Example HTML (add only the anchor elements in your .html files):
   <a href="https://discord.gg/..." class="discord-link" target="_blank" rel="noopener noreferrer">Discord</a>
   <a href="https://www.tiktok.com/@yourhandle" class="tiktok-link" target="_blank" rel="noopener noreferrer">TikTok</a>
   Labels are provided by CSS but can be overridden with `data-label` attribute on the anchor if desired.
*/

.discord-link,
.tiktok-link {
  position: fixed;
  right: 18px;
  width: 220px;
  height: 64px;
  display: inline-block;
  border-radius: 999px;
  background-repeat: no-repeat;
  background-position: 18px center; /* show image on the left */
  background-size: auto 60%; /* standardized to 60% height for consistent look */
  box-shadow: 0 8px 22px rgba(0,0,0,0.5);
  text-indent: -9999px; /* hide link text visually (remains accessible)
                         Use `aria-label` for screen readers */
  overflow: visible;
}  

.discord-link {
  bottom: 18px;
  z-index: 1000;
  background-image: url("img/discord.png");
  background-color: #5865F2; /* Discord blurple for better contrast */
  --label: "Discord";
} 

.tiktok-link {
  bottom: 94px; /* stacked above discord */
  z-index: 999;
  background-image: url("img/tiktok.png");
  background-color: #171717; /* use dark tile for TikTok */
  border: 1px solid rgba(255,255,255,0.06); /* subtle light border */
  --label: "TikTok";
} 

/* Focus styles for keyboard accessibility */
.discord-link:focus, .tiktok-link:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(88,101,242,0.18), 0 6px 18px rgba(0,0,0,0.45);
} 

/* Hover (desktop) - static buttons without labels */
@media (hover: hover) and (pointer: fine) {
  .discord-link::after,
  .tiktok-link::after {
    display: none;
  }
}

/* Touch / small screens: keep buttons static with full size */
@media (max-width: 790px), (pointer: coarse) {
  .discord-link, .tiktok-link {
    width: 220px;
    height: 64px;
    border-radius: 999px;
    background-position: 18px center;
    background-size: auto 60%; /* proportionally sized on small screens */
  }
  .discord-link { bottom: 18px; }
  .tiktok-link { bottom: 94px; }
  .discord-link::after, .tiktok-link::after { display: block; }
}

.links {
  background: #780c99;
  padding: 10px;
  border-bottom: 3px solid #780c99;
  text-align: center;
  }
  
.links a {
  color: white;
  padding: 3px;none
  margin-left: 5px;
  margin-right: 5px;
  text-decoration: none;
  font-size:17px;
  }

.main {
  padding: 15px;
  margin: 0 auto;
  background: #222222;
  }
  
/*Prevent overflow of large images in main text areas.*/
.main img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  image-rendering: pixelated; /* Ensures pixel-perfect scaling */
  }
  
.footer {
  background: #780c99;
  padding: 20px;
  padding-top:5px;
  padding-bottom:5px;
  border-top: 3px solid #780c99;
  font-size:14px;
  }
  
  
/*For narrow screens*/
@media(max-width: 790px) {
  .wrapper {
    width: 95%;
    }
  .header h1, .header h2, .header h3 { /*Vertical centering gets wonky when the box is variable width*/
    margin: 20% 5% auto;
    }
  }  

/*Mobile compatibility*/
@media(orientation: portrait) {
  .wrapper {
    width: 95%;}
  .header {
    height:230px;
    }
  .header h1, .header h2, .header h3 {
    margin: 20% 3% auto;
    }
  }