*,
*::before,
*::after {
  box-sizing: border-box;
}
html, body {
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* ========================================================================
   Root Theme Variables
======================================================================== */
:root {
  /* Color Palette */
  --123-blue: #007bff;
  --123-grey: #6c757d;
  --transparent: transparent;
  --teal: #077A7D;
  --red: #F9041B;
  --light-red: #FDCCD1;
  --orange: orange;
  --light-orange: #ffe4c9;
  --green: #00b300;
  --light-green: #00e600;
  --white: #ffffff;
  --black: #000000;
  --blue: #3399ff;
  --light-blue: #80bfff;

  /* Typography */
  --font-body: 'Roboto', sans-serif;
  --font-heading: 'Roboto Slab', serif;
}

/* ========================================================================
   Base Typography
======================================================================== */
h1, h2, h3, h4, h5, h6 {
  margin: 0; /* reset default spacing */
  font-family: var(--font-heading);
}
/* ========================================================================
   Navbar
======================================================================== */
.navbar {
  background-color: var(--transparent);
	height: 100%;
	position: relative;
}
.navbar-toggler {
	 color: var(--white);;
}
.navbar .top-nav-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.navbar .nav-link {
  color: var(--white);
  transition: color 0.3s ease;
}
.navbar .nav-link.active {
  color: var(--teal);
  font-weight: bold; 
}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: var(--teal);
  font-weight: bold;
}
#top-navigation {
  border-top: 2px solid var(--teal);
}
/* ========================================================================
   Logo Section
======================================================================== */
#logo-section {
	display: flex;
  flex-direction: column;    /* if you have multiple lines or elements stacked */
  align-items: center;       /* horizontal centering */
  font-size: 0.9rem;
  background-color: #7AE2CF;
  border: 2px solid var(--teal);
  border-radius: 2px;
  text-align: center;        /* fallback for text-only centering */
	width: 100%;
}
/* ========================================================================
   Landing Header
======================================================================== */
.landing-header {
  position: relative;
  overflow: hidden;
	width: 100%;
}
.landing-header {
  position: relative;
  overflow: hidden;
}
.landing-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../images/collage-062025.webp');
  background-size: auto 100%;
  background-repeat: repeat-x;
  z-index: 0;
  animation: slide-left 160s linear infinite;
}
.landing-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(7, 122, 125, 0.6);
  z-index: 1;
}
.landing-header > * {
  position: relative;
  z-index: 2;
}
@keyframes slide-left {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -2000px 0;
  }
}
/* ========================================================================
   Main Section
   ======================================================================== */
main {
  flex: 1;
	padding-left: 0;
  padding-right: 0;
}
/* ========================================================================
   Call-to-Action Button
======================================================================== */
.join-123 {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 6px 16px;
  font-size: 0.95rem;
  font-weight: 500;
  text-align: center;
  color: #ffffff;
  background-color: var(--123-blue);
  border-radius: 30px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.join-123:hover {
  background-color: var(--orange);
  color: var(--white);
}
/* ========================================================================
   Channel List 
======================================================================== */

#channel-list {
  padding: 0 10px;
}

#channel-list > li {
  display: inline-block;
  height: 5rem;
  text-align: center;
  padding: 5px;
}

#channel-list > li > .wrapper {
  display: block;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 5px;
  border: 5px solid #ffaa33;
  border-radius: 5px;
  background-color: #077A7D;
}

#channel-list > li > .wrapper.a-notice {
  border-color: red;
  position: relative;
}

#channel-list > li .wrapper.a-notice div:first-child {
  position: relative;
  bottom: 0;
  width: 100%;
  font-size: 0.55rem;
  font-style: italic;
  color: var(--white);
}

#channel-list > li > .wrapper span {
  display: inline-block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  color: var(--white);
  font-weight: bold;
}
/* ========================================================================
   Sections
   ======================================================================== */
.chat_intro {
  color: var(--black);
  background-color: #f8f8f8;
}
.chat_content .card-header {
  color: var(--white);
  background-color: var(--123-blue);
	font-weight: bold;
}
.chat_content h2 {
  font-size: 1.2rem;
}
.chat_content {
  color: var(--black);
  background-color: #e7eff1;
}
.chat_rules {
  color: var(--black);
  background-color: #e7eff1;
}
.chat_rules .card-header {
  color: var(--white);
  background-color: var(--red);
	font-weight: bold;
}
.chat_rules h2 {
  font-size: 1.2rem;
}
.chat_rules ul {
  list-style: square;
  padding: 10px 10px;
}
.chat_login {
  background-color: var(--light-blue);
  color: var(--white);
}
.chat_login h2 {
  color: var(--123-blue);
}
/* ========================================================================
   Footer
   ======================================================================== */

#footer-section {
  display: flex;
  flex-direction: column;    /* if you have multiple lines or elements stacked */
  justify-content: center;   /* vertical centering */
  align-items: center;       /* horizontal centering */
  font-size: 0.9rem;
  background-color: #7AE2CF;
  border: 2px solid #077A7D;
  border-radius: 2px;
  text-align: center;        /* fallback for text-only centering */
}
#footer-section {
	color: #ffffff;
	text-align: center;
}
#footer-section a {
  color: var(--orange);
  text-decoration: none;
  font-weight: bold;
}
/* ========================================================================
   Responsive Design
======================================================================== */
/* --- Mobile-specific layout alignment --- */
@media (max-width: 575.98px) {
  .navbar-toggler {
    margin-bottom: 1rem;
  }
  #top-navigation {
    border-top: none;
  }
}

/* --- Desktop-specific layout alignment --- */
@media (min-width: 576px) {
  .navbar .navbar-nav {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
	 .navbar-toggler {
    margin-bottom: 1rem;
		margin-left: .5rem;
  }
  .navbar .nav-item {
    flex: 1;
    text-align: center;
  }
}
/* Shared layout container for desktop */
@media screen and (min-width: 1200px) {
  .layout-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }
    .expanded.row {
        padding-left: calc((100% - 1200px) / 2 + .9rem);
        padding-right: calc((100% - 1200px) / 2 + .9rem);
    }
}