/*
XFactor Robotics Stylesheet
----------------------------
Accent colors:
red:    #ED1C24
blue:   #27AAE1
yellow: #FDB714
white:  #FFFFFF
black:  #000000
dark grey: #2A2A2A
*/

img {
  width: 500px;
}

/* === GLOBAL STYLES === */
html {
  text-align: center;
  background-color: #000000;
  background-size: cover;
  font-family: Helvetica;
}

body {
  width: 800px;
  margin: 0 auto;
  background: black;
  padding: 20px;
}

h1 {
  font-size: 70px;
  margin: 0;
  color: #FDB714;
}

h2 {
  font-size: 30px;
  color: #ED1C24;
}

p {
  text-align: center;
  font-size: 25px;
  font-family: 'Russo One';
}

p a {
  color: #FDB714;
}

/* === HEADER & NAVIGATION === */
header {

  border-radius: 10px;
  padding: 10px 0 0 0;
  margin-bottom: 20px;

  text-align: center;
}

/* Logo image */
header img {
  width: 100%;
  max-width: 800px;
  display: block;
  margin: 0 auto;
}

/* Navigation bar */
nav {
  background-color: #000000;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

/* Navigation list */
nav ul {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: 'Russo One';
}

/* Each nav item */
nav ul li {
  flex: 1;
}

/* === NAV LINKS - UPDATED ROUNDED BUTTONS === */
nav ul li a {
  display: block;
  padding: 15px 25px; /* more vertical and horizontal padding */
  text-decoration: none;
  color: #FDB714; /* yellow text */
  background-color: #ED1C24; /* red button */
  border-radius: 25px; /* fully rounded */
  margin: 5px; /* adds space between buttons */
  transition: all 0.3s ease;
  font-family: 'Russo One';
  font-size: 18px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* subtle shadow for depth */
}

/* Hover effect */
nav ul li a:hover {
  background-color: #27AAE1; /* blue hover */
  color: #FFFFFF;
}

/* Active page style */
nav ul li a.active {
  background-color: #FDB714; /* yellow active */
  color: #000000;
}


/* Responsive nav layout */
@media (max-width: 600px) {
  nav ul {
    flex-direction: column;
  }

  nav ul li a {
    border-right: none;
    border-bottom: 2px solid #000;
  }

  nav ul li:last-child a {
    border-bottom: none;
  }
}

/* === FOOTER === */
footer p {
  text-align: center;
  font-size: 15px;
  color: #ED1C24;
}

footer a {
  text-decoration: none;
  transition: all 0.3s ease;
}

footer a:hover {
  color: #ffffff !important;
  text-shadow: 0 0 8px #00bfff, 0 0 16px #00bfff;
}

/* === CONTENT BOXES (Dark Grey) === */
.text-box,
.text-boxINSTA,
.text-boxYTUB,
.text-boxTEAM,
.text-boxSPONSORS {
  background-color: #2a2a2a;
  color: #ffffff;
  padding: 20px;
  margin: 20px auto;
  border-radius: 10px;
  font-family: 'Russo One';
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  max-width: 800px;
  text-align: center;
}

.text-box p,
.text-boxINSTA p,
.text-boxYTUB p,
.text-boxTEAM p,
.text-boxSPONSORS p {
  color: #ffffff;
}

/* Instagram box widget alignment */
.text-boxINSTA .elfsight-app-a20c2a12-03f1-4ee2-92bf-ec9b79098a12 {
  display: inline-block;
  max-width: 100%;
}

/* YouTube box */
.text-boxYTUB h2 {
  color: #ED1C24;
  margin-bottom: 15px;
}

.text-boxYTUB .elfsight-wrap {
  max-width: 600px;
  margin: 0 auto;
  transform: scale(0.95);
  transform-origin: top center;
}

/* === TEAM SECTION GRID === */
.text-boxTEAM {
  box-shadow: 0 3px 6px rgba(0,0,0,0.5) !important;
}

.team-grid {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  justify-items: stretch !important;
  align-items: center !important;
  gap: 5px !important;
}

.team-row {
  display: contents !important;
  margin: 6px 0 !important;
}

.role {
  text-align: right !important;
  color: #FDB714 !important;
  font-size: 18px;
  font-family: 'Russo One';
}

.colon {
  text-align: center !important;
  color: #FFFFFF !important;
  font-size: 20px;
  font-family: 'Russo One';
}

.people {
  text-align: left !important;
  color: #FFFFFF !important;
  font-size: 15px;
  font-family: 'Russo One';
}

/* === MOBILE ADJUSTMENTS === */
@media (max-width: 600px) {
  .team-grid {
    grid-template-columns: 1fr auto 1fr !important;
    gap: 3px !important;
  }

  .text-boxTEAM p {
    font-size: 16px !important;
  }
}

@media only screen and (max-device-width: 480px) {
  footer {
    font-size: 60px;
  }

  header img {
    width: 50%;
  }

  ul li {
    width: 200px;
    font-size: 35px;
  }

  h2 {
    font-size: 60px;
  }
}