/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your HTML content. */

body {
  margin: 0;
  padding-top: 4rem;          /* Dynamically spaces out the top bar based on font size */
  font-family: Arial, Helvetica, sans-serif; /* Cleaner modern font stack, replacing standard Times */
  
  /* Background Image Setup */
  background-image: url('meow2.webp');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

/* Main content wrapper */

/* Fixed inline logo next to text */
.decorr {
  display: inline-block;
  vertical-align: middle; /* Centers it vertically with the text */
  width: 5%;              /* Scales relative to navbar width */
  min-width: 35px;        /* Prevents it from becoming microscopic */
  height: auto;
  margin-right: -35%;       /* Safe percentage gap */
}

/* Sticker layout */
.decor {
  position: absolute;  /* Takes them out of the text flow so they float on top */
  z-index: 10;         /* Forces them to layer ON TOP of the text and backgrounds */
  width: 15%;          /* Sticker scales dynamically with the size of the container box */
  max-width: 120px;    /* Caps size on massive monitor resolutions */
  height: auto;
  pointer-events: none; /* Optional: users can click "through" them to highlight text */
}

/* Position individual stickers exactly where you want them using percentages */
.decor-top-left {
  top: -3%;            /* Spill over top based on container scale */
  left: -3%;           /* Spill over left */
  transform: rotate(-15deg); /* Give it a chaotic, messy sticker tilt */
}
.decor-top-right {
  top: -3%;            
  right: -3%;           
}

.plebian {
  font-family: Times, "Times New Roman", serif;
  margin-right: auto;  
  margin-top: 0.5rem;
  margin-bottom: 0;
}

.calltophone {
  font-family: Times, "Times New Roman", serif;
  margin-left: auto;  
  margin-top: 0.5rem;
  margin-bottom: 0;
}

/* Main blog container */
.loser {
  display: flex;
  flex-direction: column;    /* Stacks elements vertically inside the box */
  align-items: center;       /* Centers elements horizontally inside the box */
  position: relative;
  
  min-height: 80vh;          /* Scales to take up at least 80% of the desktop window height */
  width: 60%;                /* Ideal baseline desktop percentage width */
  max-width: 950px;          /* Stops it from stretching too wide on 4K/Ultrawide screens */
  min-width: 450px;          /* Stops it from getting too skinny on smaller laptop screens */
  margin: 2% auto;           /* Centers the box vertically/horizontally using percentage spacing */
  
  background-color: #1F1F1F; /* Dark charcoal/black background */
  color: #ffffff;            /* Crisp white text */
  
  border-style: double;
  border-width: 0.5rem;      /* Scalable border thickness */
  border-color: white;       
  
  padding: 3%;               /* Padding scales perfectly with container size */
  box-sizing: border-box;    /* Ensures padding stays inside the width thresholds */
  
  /* Prevents overly long text or single unbroken links from spilling out */
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Sticky top container bar */
.bar {
  display: flex;
  justify-content: flex-start;
  position: fixed;
  top: 0;
  left: 0;                   /* Snaps the bar flush to the left screen edge */
  width: 100%;               /* Forces the bar across the entire screen width */
  margin: 0;                 
  z-index: 1000;             /* Ensures navigation stays on top of the scrolling text */
  background-color: #610000; 
  color: #ffffff;            
}

/* Top Navigation Bar Container */
.topnav {
  background-color: #1F1F1F;
  overflow: hidden;
  width: 100%;
  
  display: flex;
  align-items: center;          /* Centers text and buttons vertically */
  justify-content: space-between; /* Pushes the title to the left, links to the right */
  padding: 0 2%;                /* Left/Right breathing room handles different widths dynamically */
  box-sizing: border-box;
}

/* Style for your new left-side text */
.nav-title {
  color: #ffffff;
  font-size: 1.15rem;           /* Fluid text size relative to browser defaults */
  font-weight: bold;
  letter-spacing: 2px;
}

/* Container for just the buttons */
.nav-links {
  display: flex; /* Sits the links side-by-side on the right */
}

/* Individual links inside the navigation bar */
.topnav a {
  color: #f2f2f2;
  text-align: center;
  padding: 0.8rem 1rem;       /* Links adjust size proportionally based on font */
  text-decoration: none;
  font-size: 1.05rem;
  border-style: double;
  border-width: 0.35rem;     
  border-color: white;
  margin-left: 0.5rem;        
}

/* Change link color when hovering mouse */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Active navigation link accent */
.topnav a.active {
  background-color: #610000;
  color: white;
}

/* Message Board Styles */
.board-wrapper {
  max-width: 100%;
  margin: 2rem auto;
  text-align: left; /* Keeps text left-aligned even if .loser is centered */
}

#messageForm {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 2rem;
}

#messageInput {
  width: 100%;
  height: 70px;
  padding: 8px;
  background: #fff;
  color: #000;
  border: 2px solid #000;
  font-family: inherit;
  box-sizing: border-box;
  resize: vertical;
}

#messageForm button {
  align-self: flex-end;
  background: #000;
  color: #fff;
  border: 2px solid #000;
  padding: 4px 16px;
  font-weight: bold;
  cursor: pointer;
}

#messageForm button:hover {
  background: #fff;
  color: #000;
}

.post {
  background: #fff;
  border: 2px solid #000;
  padding: 12px;
  margin-bottom: 12px;
}

.post-text {
  word-break: break-word;
  white-space: pre-wrap; /* Keeps line breaks if people hit enter */
  color: #000;
}

.post-meta {
  font-size: 0.75rem;
  color: #666;
  margin-top: 8px;
  text-transform: uppercase;
}