:root{
  --bg: #161e2b;
  --red: #de0000;
  --blue: #126ad7;
  --white: #fcfcfc;
  --muted: #9aa4b3;
  --max-width: 1500px;
  --min-width: 100%;
}

*{box-sizing:border-box;
}
html,body{height:100%}

body{
  margin:0;
 padding: 0;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  background:var(--bg);
  color:var(--white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
 
}



.container{max-width:var(--max-width); margin:0 auto;padding:1.25rem;}

.site-header{border-bottom:4px solid rgba(255,255,255,0.03);position:sticky;top:0;background:linear-gradient(180deg, rgba(0,0,0,0.25), transparent);z-index:40; }
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.25rem;
  background-color:#161e2b;
  -webkit-box-shadow: 0px 14px 24px 3px rgba(0,0,0,0.2); 
  box-shadow: 0px 14px 24px 3px rgba(0,0,0,0.2);
}
.logo{height:64px}
.logo-link{
  display:inline-block;

}

.mobile_hide {
  display: none;
}

.nav{position:relative}
.menu-toggle{display:none;background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--white);padding:.5rem .75rem;border-radius:6px; 
  }
.nav-list{list-style:none;margin:0;padding:0;display:flex;gap:1rem; }
.nav-list a{color:var(--white);text-decoration:none;font-size:.85rem;padding:.5rem .5rem;border-radius:6px}
.nav-list a:hover{background:rgba(255,255,255,0.03); color: var(--red)}

main {
  padding: 1.5em;
}

.hero{padding:2rem 0}
.hero-grid{display:flex;gap:2rem;align-items:center;flex-wrap:wrap}
.hero-image img{max-width:420px;width:100%;height:auto;display:block;image-rendering:pixelated}
.hero-copy{flex:1;min-width:280px}
.title{font-family: 'Press Start 2P', monospace; font-size:26px;margin:0 0 .5rem;color:var(--blue);text-shadow:2px 2px 0 var(--white)}
.subtitle{color:var(--muted);margin:0 0 .75rem}
.lead{color:var(--white);margin:0 0 1rem; text-align:left}

.hero-ctas{display:flex;gap:.75rem}
.btn{display:inline-block;padding:.6rem .9rem;border-radius:8px;text-decoration:none;font-weight:700;letter-spacing:.02em}
.btn-primary{background:var(--red);color:var(--white);border:3px solid var(--white)}
.btn-primary:hover {
  background:var(--bg);
  color:var(--white);
  border: 3px solid var(--red);
}
.btn-ghost{background:transparent;color:var(--white);border:2px solid rgba(255,255,255,0.06)}
.btn-ghost:hover {
  background: var(--red);
  color:var(--white);
  border:2px solid rgba(255,255,255,0.06);
}

.section{padding:2rem 0}
.section-title{font-family: 'Press Start 2P';color:var(--white);margin:0 0 1rem;font-size:18px}

.two-col{display:flex;gap:1.25rem}
.two-col > div{flex:1}
.two-col ul li a{
  color: var(--white);
/*text-decoration: none;*/
}
.panel{background:rgba(255,255,255,0.03);padding:1rem;border-radius:8px}

.champ-grid{display:flex;gap:1rem;flex-wrap:wrap}
.champ-card{background:rgba(255,255,255,0.02);padding:1rem;border-radius:6px;min-width:140px;text-align:center; margin: 0.5em;}
.champ-card:hover {
  transform: scale(1.2);
  transition: transform 1s ease;
  
}

.embed-placeholder .embed-box{background:rgba(0,0,0,0.35);border:1px dashed rgba(255,255,255,0.06);height:300px;display:flex;align-items:center;justify-content:center;border-radius:8px;color:var(--muted); padding:0.5em;}

.form-wrap{max-width:700px}
label{display:block;margin:0.5rem 0 .25rem;font-weight:700;font-size:.85rem}
input,textarea{width:100%;padding:.6rem;border-radius:6px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);color:var(--white)}
textarea {
  resize: vertical;
  overflow: auto;
}
textarea::placeholder{
  color: rgba(255,255,255,0.6); 
}

.form-actions{display:flex;gap:.75rem;margin-top:.75rem}
.form-result{margin-top:.75rem;padding:.6rem;border-radius:6px;background:rgba(255,255,255,0.02);display:none}

.sponsor-row {
  display: flex;
  flex-direction: row; /* Display items in a row */
  flex-wrap: wrap; /* Allow items to wrap to the next line */
  justify-content: flex-start; /* Align items to the start of the row */
  gap: 1rem; /* Add some space between the items */
}

.sponsor-row > div {
  display: flex;
  flex-direction: column; /* Stack the image and paragraph vertically */
  align-items: flex-start; /* Align items to the left */
  width: calc(33.33% - 1rem); /* Adjust width for three items in a row with gap */
}

.sponsor-row img {
  height: 13em;
  object-fit: contain;
  background: var(--white);
  padding: 6px;
  border-radius: 6px;
  width: 100%; /* Make the image take up the full width of its container */
}

.sponsor-row p {
  text-align: left; /* Align the text within the paragraph */
}
/*dowload button contained here*/
.two-col a.btn.btn-ghost {
  display:inline-block;padding:.6rem .9rem;border-radius:8px;text-decoration:none;font-weight:700;letter-spacing:.02em;
   margin-bottom: 0.45em;
}
  .two-col a.btn.btn-ghost, span.material-symbols-outlined{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: auto;
    padding:.6rem .9rem;border-radius:8px;text-decoration:none;font-weight:700;letter-spacing:.02em;
  }
/*dowload button contained here*/
/*become a sponsor*/
.A_sponsor {
  color: var(--red);
  text-decoration: none;
}
.A_sponsor:hover {
  color: var(--blue);
}
/*become a sponsor*/
.site-footer{border-top:1px solid rgba(255,255,255,0.03);padding:1rem 0;margin-top:2rem;color:var(--muted);font-size:.9rem}

.muted{color:var(--muted)}
.small{font-size:.85rem}

/*back to top button code contained here*/
#backToTopBtn {
    position: fixed; /* Stay in place */
    bottom: 20px; /* Place at the bottom */
    right: 0; /* Place to the right */
    z-index: 99; /* Ensure it stays on top */
    outline: none; /* Remove outline on focus */
    margin: 1em;

    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 1.5em; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 1em; /* Increase font size */
    display:none; /* Hidden by default */
    background: transparent;
    color:var(--white);
    border:2px solid rgba(255,255,255,0.06)
  }

#backToTopBtn:hover {
     background: var(--red);
  color:var(--white);
  border:2px solid rgba(255,255,255,0.06);
}
/*back to top button code contained here*/
/* Responsive */
@media (max-width:900px){
 body {
  overflow-x: hidden;
 }

  .site-header {
    width: 100%; /* Make sure it spans the full width */
    display: grid; /* Enable Grid */
    place-items: center; /* Center content both horizontally and vertically */
    padding: 0; /* Add some padding for better aesthetics */
    
  }
  .header-inner {
        /* 1. Establish the boundary for the logo */
    position: relative;
    width: 100%;
    min-height: 125px; /* Set a height for the bar */
    /* Add any other styling for the nav bar */
    max-height: 300px;
    
    /* Ensure the button (or other items) are placed nicely */
    display: flex;
    align-items: center;
    padding: 0;
  }
  .hero-grid{flex-direction:column-reverse;align-items:flex-start}

  .header-inner .logo{
    position: absolute;
    /* Pin to the exact center point */
    left: 50%;
    top: 50%;
    height: 5em;
    /* Shift it back by half its own width/height to truly center it */
    transform: translate(-50%, -50%);
    padding: 0.25em;
    
    /* Crucial: You must set the z-index to ensure it sits on top */
    z-index: 10;
  }

  .hide {
    display: none;
  }
  .mobile_hide {
  display: block;
}



  .nav-list{
    display:none;
    position:absolute;
    right:0;
    top:70px;
    max-width: 900px;
    min-width: 420px;
    flex-direction:column;
    background: var(--bg);
    padding:.5rem;
    text-align: left;
    gap: 0.3rem;
    border-radius:6px;
    -webkit-box-shadow: 0px 14px 24px 3px rgba(0,0,0,0.3); 
  box-shadow: 0px 14px 24px 3px rgba(0,0,0,0.3);
}


 .nav-list li a {
  font-size: 2.2em;
 }


  .menu-toggle{
    display:inline-block;
     font-size: 3.3em;
      border:none;
      order: 3;
    /* Push it away from the logo that has auto margins */
    margin-right: 1em; }
  .nav-list.show{display:flex}
  .two-col{flex-direction:column}

/*hero image contianed here mobile*/
.hero-image img{
  gap: 0 !important;
  margin-bottom: -3em;
}
/*hero image contained here mobile*/
  /*download icons are kept and styled here*/

  span.material-symbols-outlined {
    align-items: center;
  }
  /*download icons are kept and styled here*/
  /*span.download-icon {
    font-size: 24px; /* Adjust this value (e.g., 1.5 times the button font size) */
  /* 2. Make it bolder (optional, can improve visibility) */
  /*font-weight: bold;
  }*/

  .sponsor-row > div {
  display: flex !important;
  flex-direction: column !important; /* Stack the image and paragraph vertically */
  align-items: center !important; /* Center the image and paragraph horizontally */
    width: calc(100% - 1rem); /* Adjust width for three items in a row with gap */
}

.sponsor-row img {
  height: 13em;
  object-fit: contain !important;
  background: var(--white);
  padding: 6px;
  border-radius: 6px;
  width: 100%; /* Make the image take up the full width of its container */
}

.sponsor-row p {
  width: 100%; /* Make the paragraph take up the full width of its container */
  text-align: left; /* Center the text within the paragraph */
}
}

@media (max-width:500px){
  
}