*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#17243a;background:#f5f6f8}
a{color:inherit}

.topbar{height:75px;padding:0 30px;display:flex;align-items:center;gap:30px;background:#07182d;position:sticky;top:0;z-index:100}
.logo-link{width:190px;height:60px;display:flex;align-items:center;flex-shrink:0}
.logo-image{max-width:100%;max-height:60px}
nav{flex:1;display:flex;justify-content:center;gap:35px}
nav a{color:#fff;text-decoration:none;font-size:14px;font-weight:bold;padding:28px 0}
nav a:hover{color:#10c9ee}
.join-button{background:#0bc3ed;color:#07182d;text-decoration:none;font-weight:bold;padding:13px 22px;border-radius:7px}
.menu-button{display:none;background:none;color:#fff;border:0;font-size:25px;cursor:pointer}

.hero{min-height:390px;padding:40px 7%;position:relative;background-image: url("assets/background.png");background-size: cover;background-position: center;background-repeat: no-repeat;;overflow:hidden}
.hero-logo{width:500px;height:500px;display:flex;align-items:center;justify-content:center}
.hero-logo-image{max-width:100%;max-height:100%}
.brand-logo-image{max-width:100%;max-height:13px}
.tagline{display:inline-block;margin:0 0 20px;padding:7px 20px;color:#fff;background:#08aee0;font-weight:bold;font-style:italic}
.hero-buttons{display:flex;gap:10px}
.button{display:inline-block;padding:13px 18px;border-radius:7px;text-decoration:none;font-weight:bold}
.primary{background:#08bde9;color:#fff}
.secondary{color:#fff;border:1px solid #fff;background: rgba(255, 255, 255, 0.12);backdrop-filter: blur(6px);-webkit-backdrop-filter: blur(6px);}
.stats{width:300px;padding:15px;position:absolute;right:7%;top:45px;background:#092a45;color:#fff;border-radius:10px}
.stats h3{margin:0 0 10px;font-size:13px;color:#48e44e}
.stats div{padding:12px 0;display:flex;justify-content:space-between;border-bottom:1px solid #345066}
.stats strong{color:#13d4ed}
.stats-button{display:block;margin-top:12px;padding:10px;text-align:center;color:#11d2ed;text-decoration:none;border:1px solid #11d2ed;border-radius:6px}

.content{padding:25px 30px;display:grid;grid-template-columns:1fr 1.3fr;gap:30px;background:#f7f8fa}
.column:first-child{padding-right:30px;border-right:1px solid #d5dbe1}
.column h2{margin-top:0;font-size:22px}
.card{background:#fff;border:1px solid #d9dee4;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.stream-card{min-height:105px;margin-bottom:10px;padding:10px;display:grid;grid-template-columns:180px 1fr;gap:12px}
.empty-image{min-height:85px;background:#e2e6ea;border-radius:5px}
.stream-card h3,.video-card h3{margin:0 0 6px;font-size:14px}
.stream-card p,.video-card p{margin:5px 0;font-size:12px}
.stream-card small{color:#1684bb}
.view-link{display:inline-block;margin-top:5px;color:#0872b5;text-decoration:none;font-weight:bold;font-size:12px}
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.video-card{overflow:hidden;padding-bottom:12px}
.video-card .empty-image{height:105px;border-radius:0}
.video-card h3,.video-card p{padding-left:10px;padding-right:10px}

.basic-section{min-height:250px;padding:70px 8%;background:#fff;border-top:1px solid #ddd}
.basic-section:nth-child(even){background:#f0f3f6}
.basic-section h2{font-size:32px}
.basic-section p{color:#667085}
footer{padding:25px 8%;background:#07182d;color:#fff}

@media(max-width:850px){
.topbar{padding:0 15px}
.menu-button{display:block;order:3}
nav{display:none;position:absolute;top:75px;left:0;right:0;padding:15px 25px;flex-direction:column;gap:0;background:#07182d}
nav.show{display:flex}
nav a{padding:12px 0}
.join-button{margin-left:auto}
.hero{min-height:650px;padding:30px 20px}
.hero-logo{width:100%;height:230px}
.stats{left:20px;right:20px;top:auto;bottom:25px;width:auto}
.content{grid-template-columns:1fr;padding:20px}
.column:first-child{padding-right:0;padding-bottom:25px;border-right:0;border-bottom:1px solid #d5dbe1}
.video-grid{grid-template-columns:1fr}
}

@media(max-width:500px){
.logo-link{width:130px}
.hero-buttons{flex-direction:column}
.button{text-align:center}
.stream-card{grid-template-columns:110px 1fr}
.stream-card .empty-image{min-height:80px}
}

/* =========================
   MEMBERS
   ========================= */

.members-section {
  padding: 25px 30px 30px;
  background: #f7f8fa;
}

.members-section .section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.members-section .section-title span {
  color: #08aee0;
  font-size: 30px;
  font-weight: bold;
}

.members-section .section-title h2 {
  margin: 0;
  font-size: 22px;
}

.members-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
}


/* MEMBER CARD */

.member-card {
  position: relative;
  height: 300px;

  overflow: hidden;

  background: var(--member-bg);
  border: 1px solid var(--member-border);
  border-radius: 7px;

  color: white;

  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.15),
    inset 0 0 25px rgba(0, 0, 0, 0.25);

  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.member-card:hover {
  transform: translateY(-4px);

  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.25),
    0 0 12px var(--member-border);
}


/* TOP INFORMATION */

.member-top {
  position: absolute;

  top: 7px;
  left: 7px;
  right: 7px;

  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  z-index: 5;
}

.member-date {
  font-size: 9px;
  line-height: 1.2;
  color: #ffffff;
  text-shadow: 0 1px 3px black;
}

.member-date small {
  font-size: 7px;
  opacity: 0.75;
}


/* STATUS */

.member-status {
  padding: 4px 7px;

  border-radius: 10px;

  font-size: 7px;
  font-weight: bold;

  white-space: nowrap;
}

.member-status.live {
  color: #70ff9b;
  background: rgba(0, 180, 80, 0.25);
  border: 1px solid rgba(50, 255, 130, 0.45);
}

.member-status.upcoming {
  color: #c5a8ff;
  background: rgba(100, 60, 180, 0.3);
  border: 1px solid rgba(160, 120, 255, 0.45);
}


/* SKIN */

.member-skin {
  position: absolute;
  left: 50%;
  top: 15px;

  width: 230px;
  height: 235px;

  transform: translateX(-50%);
  object-fit: contain;
}


/* BOTTOM INFORMATION */

.member-info {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 36px;
  z-index: 4;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.member-info h3 {
  margin: 0 0 5px;
  font-size: 20px;
  font-weight: 800;
}

.member-info p {
  margin: 0;
  color: #eeeeee;
  font-size: 12px;
  line-height: 1.3;
}


/* PLATFORM */

.member-platform {
  position: absolute;
  left: 9px;
  bottom: 9px;
  font-size: 9px;
  font-weight: bold;
  line-height: 1.6;
}

.member-platform .twitch {
  color: white;
}

.member-platform .twitch span {
  color: #a970ff;
}

.member-platform .youtube {
  color: white;
}

.member-platform .youtube span {
  color: #ff1d25;
}

/* =========================
   LATEST VIDEOS
   ========================= */

.videos-grid {

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 8px;

}


.video-card {

  position: relative;

  display: block;

  min-height: 250px;

  overflow: hidden;

  text-decoration: none;

  color: white;

  background: #101b2b;

  border: 1px solid #263b52;

  border-radius: 7px;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;

}


.video-card:hover {

  transform:
    translateY(-4px);

  box-shadow:
    0 8px 20px
    rgba(0, 0, 0, 0.25);

}


.video-thumbnail {

  position: relative;

  width: 100%;

  height: 145px;

  overflow: hidden;

  background: #172333;

}


.video-thumbnail img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}


.play-button {

  position: absolute;

  left: 50%;
  top: 50%;

  transform:
    translate(-50%, -50%);

  width: 45px;
  height: 45px;

  display: flex;

  align-items: center;
  justify-content: center;

  background:
    rgba(255, 0, 0, 0.9);

  border-radius: 50%;

  font-size: 17px;

  padding-left: 3px;

  opacity: 0.95;

}


.video-info {

  padding:
    10px 10px 35px;

}


.video-info h3 {

  margin: 0 0 6px;

  font-size: 14px;

  line-height: 1.25;

}


.video-info p {

  margin: 0 0 3px;

  color: #9fb0c0;

  font-size: 10px;

}


.video-info small {

  color: #728395;

  font-size: 9px;

}


.video-platform {

  position: absolute;

  bottom: 9px;
  left: 10px;

  font-size: 9px;

  font-weight: bold;

}


.video-platform span {

  color: #ff1d25;

  margin-right: 4px;

}


.video-loading {

  padding: 30px;

  color: #718096;

  text-align: center;

}


.video-error {

  color: #ff5555;

}


@media (max-width: 900px) {

  .videos-grid {

    grid-template-columns:
      repeat(2, 1fr);

  }

}


@media (max-width: 550px) {

  .videos-grid {

    grid-template-columns: 1fr;

  }

}
/* DATABASE-DRIVEN LATEST UPLOADS */
.video-card {
  border-top: 2px solid var(--member-colour, #263b52);
}

.video-card .video-thumbnail {
  background: #172333;
}

.video-card .video-info p {
  color: var(--member-colour, #9fb0c0);
  font-weight: 700;
}