HTML {
  font-family: system-ui, "Segoe UI", Roboto, "Open Sans", sans-serif;
  font-size: 1rem;
  font-weight: normal;
  padding: 0;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column; /* Ensures header, nav, and footer stack */
  min-height: 100vh; /* Full height of viewport */
  padding: 0;
  margin: 0;
}

h1,
h2,
h3,
h4,
h5 {
  padding: 0; /* Padding inside the box */
  margin: 5px; /* Margin outside the box */
}

header {
  display: flex; /* Enables flexbox */
  justify-content: space-between; /* Aligns brand left, buttons right */
  align-items: center; /* Centers items vertically */
  background-color: #333; /* Dark background */
  padding: 10px 20px; /* Padding for spacing */
  color: white; /* Text color */
}

/* Main content container (aside + article) */
main {
  display: flex;
  flex: 1; /* Takes up remaining space */
  gap: 20px; /* Adds space between aside and article */
  padding: 0;
  margin: 0;
  gap: 5;
}

/* Center the main login container */
main.middle {
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
  height: 100vh; /* Full viewport height */
  width: 50%;
  margin: auto; /* Ensures it's centered horizontally */
}

/* Aside section on the left */
aside {
  width: 20%; /* Adjust width as needed */
  min-width: 200px;
  background-color: #f4f4f4; /* Light background */
  text-align: center; /* Centers text inside inline elements */
  display: flex;
  flex-direction: column; /* Stacks elements vertically */
  align-items: center; /* Centers elements horizontally */
  justify-content: top; /* Centers elements vertically (if a height is set) */
  padding: 10px;
}

/* Article section takes the rest of the space */
article {
  min-width: 700px;
  flex: 1; /* Fills remaining space */
  background-color: #fff;
  padding: 15px;
}

/* Center the login form elements */
article.middle {
  text-align: center; /* Ensures text inside is centered */
  background: #f4f4f4; /* Light background for visibility */
  padding: 30px;
  border-radius: 10px; /* Optional: Adds rounded corners */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5); /* Optional: Adds shadow effect */
}

/* Footer should remain at the bottom */
footer {
  text-align: center;
  padding: 10px;
  background-color: #333;
  color: white;
}

/* ################################ */
/* Game Stats UI and Cards CSS */
/* ################################ */

.gamecontainer {
  display: flex;
  flex-direction: column;
  width: 90%; /* Adjust to your desired width */
  border: 1px solid #ccc; /* Border for the container */
  border-radius: 8px; /* Rounded corners */
  padding: 8px; /* Padding inside the box */
  margin: 5px auto; /* Center the container with some spacing */
  background-color: #f9f9f9; /* Light background color */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Top row spanning the full width */
.gameTopRow {
  text-align: center; /* Center the text */
  font-weight: bold; /* Make the text bold */
  font-size: 14px; /* Adjust font size */
  margin-bottom: 12px; /* Space below the top row */
  color: #333; /* Text color */
}

/* Bottom row container */
.gameBottomRow {
  display: flex;
  justify-content: space-between; /* Align left and right */
  margin-top: 8px; /* Space above the bottom row */
}

/* Left-hand div in the bottom row */
.gameBottomLH {
  text-align: left; /* Align text to the left */
  font-size: 14px; /* Adjust font size */
  color: #555; /* Text color */
  margin: 0;
  padding: 0 0 0 24px;
}

/* Right-hand div in the bottom row */
.gameBottomRH {
  text-align: right; /* Align text to the right */
  font-size: 14px; /* Adjust font size */
  color: #555; /* Text color */
  margin: 0;
  padding: 0 24px 0 0;
}

/* ################################ */
/* NAV and Menu Bar UI CSS */
/* ################################ */

/* Left-aligned brand */
.Nav_brand a {
  color: #fff;
  text-decoration: none;
}

/* Navigation styling */
nav {
  display: flex;
  align-items: center; /* Centers buttons vertically */
}

/* Navigation links */
.nav_links {
  list-style: none; /* Removes bullet points */
  padding: 0;
  margin: 0;
  display: flex; /* Makes buttons display in a row */
  gap: 15px; /* Adds spacing between buttons */
}

/* Individual navigation items */
.nav {
  display: flex;
}

/* ################################ */
/* WebUI Buttons Style and CSS */
/* ################################ */

/* Base Button Style */
.nav_links button {
  color: white;
  border: none;
  padding: 8px 15px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
  border-radius: 5px;
  font-weight: bold;
}

/* Button hover effect */
.nav_links button:hover {
  transform: scale(1.05); /* Slightly enlarges on hover */
}

/* 🔹 Blue: Login Button */
.nav-button-login {
  background-color: #007bff; /* Bootstrap Blue */
}

.nav-button-login:hover {
  background-color: #0056b3; /* Darker blue */
}

/* 🔴 Red: Logout Button */
.nav-button-logout {
  background-color: #dc3545; /* Bootstrap Red */
}

.nav-button-logout:hover {
  background-color: #a71d2a; /* Darker red */
}

/* 🟢 Green: Event Post Button */
.nav-button-events {
  background-color: #28a745; /* Bootstrap Green */
}

.nav-button-events:hover {
  background-color: #1e7e34; /* Darker green */
}

/* Discord Button Styles */
.button-discord {
  background-color: #5865f2 !important; /* Discord Purple */
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
  border-radius: 5px;
  font-weight: bold;
  display: flex;
  align-items: center; /* Ensures text and icon are centered */
  justify-content: center; /* Centers content */
  gap: 10px; /* Adds space between icon & text */
  text-decoration: none;
}

/* Hover Effect */
.button-discord:hover {
  background-color: #4752c4; /* Darker Discord Purple */
  transform: scale(1.05); /* Slight zoom on hover */
}

/* Remove default link styles inside button */
.button-discord a {
  text-decoration: none;
  color: white;
  display: flex;
  align-items: center;
  gap: 20px; /* Keeps icon and text spaced */
}

/* Remove link underline on hover */
.button-discord a:hover {
  text-decoration: none;
}

/* General Button Styles (Shared for Login & Submit) */
.submit-button {
  background-color: #28a745; /* Green (same as login button) */
  color: white;
  border: none;
  padding: 10px 15px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
  border-radius: 5px;
  font-weight: bold;
  align-items: center; /* Centers text inside button */
  justify-content: center; /* Centers text inside button */
  width: 40%; /* Makes button full-width */
}

/* Hover effect */
.submit-button:hover {
  background-color: #1e7e34; /* Darker green on hover */
  transform: scale(1.05); /* Slight zoom effect */
}

/* Optional: Focus effect for accessibility */
.submit-button:focus {
  outline: 2px solid #1e7e34; /* Adds a focus outline */
}

/* ################################ */
/* UI TABs CSS */
/* ################################ */

.tabs {
  display: flex;
  border-bottom: 2px solid #ccc;
  margin-bottom: 1rem;
}
.pagetab-button-css {
  background: none;
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 1rem;
  border-bottom: 2px solid transparent;
}
.pagetab-button-css.active {
  border-color: #007bff;
  font-weight: bold;
}
.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}

/* ################################ */
/* Events Table CSS */
/* ################################ */

caption {
  font-size: 2rem;
  font-weight: bold;
  text-transform: uppercase;
  font-style: italic;
}

.events-table {
  width: 100%;
  color: black;
  text-align: center;
  border-collapse: collapse;
}
.events-table th {
  border-bottom: 2px solid #666666;
  font-size: 1.5rem;
  text-decoration: solid;
}
.events-table td {
  font-size: 1rem;
  padding: 1rem 0rem;
}

/* ################################ */
/* Games im Running Tab CSS */
/* ################################ */

.week-block {
  border: 2px solid rgb(120, 120, 120);
  color: #fff;
  padding: 0.5rem;
  margin-bottom: 2rem;
  border-radius: 16px;
  position: relative;
  background-color: rgb(0, 0, 53);
  z-index: 1;
  overflow: hidden;
}

.game-block {
  border: 2px solid rgb(120, 120, 120);
  color: #000;
  padding: 2rem;
  margin-bottom: 2rem;
  border-radius: 16px;
  position: relative;
  background-color: rgb(255, 255, 255);
  z-index: 1;
  overflow: hidden;
}

/* Shared background overlay for all game blocks */
.game-block::after {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.35;
  z-index: 0;
}

/* Individual background images only */
#daggerheart::after {
  background-image: url("./images/gameBanners/daggerheart.png");
}
#coriolis::after {
  background-image: url("./images/gameBanners/coriolis_the_great_dark.png");
}
#vaesen::after {
  background-image: url("./images/gameBanners/vaesen.jpg");
}
#vampire::after {
  background-image: url("./images/gameBanners/vampire.jpg");
}

/* Ensure content is above background */
.game-block > * {
  position: relative;
  z-index: 2;
}

/* ################################ */
/* Events Post form UI CSS */
/* ################################ */

.event-post-container {
  display: flex;
  min-height: calc(100vh - 93px);
  align-items: center;
  justify-content: center;
}

.event-post-layout {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 25px;
  padding-top: 50px;
  text-align: center;
  padding: 20px;
}

.form-group {
  display: grid;
  grid-template-columns: 15ch auto; /* Fixed width for label and remaining space for input */
  gap: 10px; /* Spacing between label and input */
  align-items: center;
  margin-bottom: 10px;
}

.form-lable {
  text-align: left;
  font-style: italic;
  line-height: 2rem;
  font-size: 1rem;
  font-weight: bold;
  color: #666666;
}

.form-input {
  background-color: rgb(255, 255, 255);
  font-size: 1rem;
  line-height: 2rem;
  min-width: 250px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding-left: 5px;
}

.form-input::placeholder {
  font-size: 1rem;
  line-height: 2rem;
  color: #9c9c9c;
  font-style: italic;
}

.event-post-submit {
  font-style: italic;
  width: 200px;
}

/* ################################ */
/* Website images CSS and Styles */
/* ################################ */

img.profile,
img.badge {
  max-height: 150px;
  max-width: 150px;
  border-radius: 15px;
}

img.brand {
  height: 30px;
  width: 30px;
}


/* Ensure the icon scales properly */
.icon-discord {
  width: 20px; /* Adjust as needed */
  height: 20px;
  vertical-align: middle;
}