section {
  overflow-y: hidden;
  overflow-x: hidden;
}

body, html {
  letter-spacing: 0.3px;
  overflow-x: hidden;
  font-family: 'DM Sans', sans-serif;
}

.text-alt-font {
  font-family: 'Oxanium', sans-serif;
}

#site_wrapper {
  overflow-x: hidden;
}

path {
  fill: none;
  stroke: #FBFCFF;            
  stroke-width: 3;
}

#background-div {
  z-index: -1;
}


body {
  background-color: #5C94FC;  
}

#bg-0, #bg-1, #bg-2, #bg-3, #bg-4 {
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
}

.text-mario{ font-family:"Press Start 2P", system-ui, sans-serif; letter-spacing: .5px; }

.splash-drop {
    animation: splashDrop 800ms cubic-bezier(.2,.8,.2,1.1) both;
    will-change: transform, opacity;
  }
  @keyframes splashDrop {
    0%   { opacity: 0; transform: translateY(-40vh) scale(.98); filter: blur(3px); }
    70%  { opacity: 1; transform: translateY(3vh)  scale(1.0);  filter: blur(0); }
    100% { opacity: 1; transform: translateY(0); }
  }

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; 
  gap: 40px;
  justify-items: center; 
  align-items: center;
}

.color-1 {
  color: #29A1FF;            
}

.color-2 {
  color: #E52521;           
}

.color-3 {
  color: #CDE7FF;          
}

.color-3:hover,
.color-3:link:hover {
  color: #FBFCFF;
}

.color-4 {
  color: #32b24a;             
}

.color-5 {
  color: #FFD100;             
}

.color-6 {
  color: #FFFFFF;             
}

.color-9 {
  color: #0E0E10;
}

.color-10{
  color: #0D2B7E;
}


.team-card { text-align:center;  }
.team-name { font-weight:800; font-size:1.6rem; color:#0F1D3B; margin-top:0.6rem;  } 
.team-role { color:#E06A6A; font-weight:600; margin-top:0.15rem; }                 
.team-major { color:#6AA3D8; font-weight:600; margin-top:0.05rem; }               

.team-card figcaption,
.team-card .team-name,
.team-card .team-role,
.team-card .team-major {
  border: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
}


.bg-color-1 { background-color: #5C94FC; }  
.bg-color-2 { background-color: #E52521; } 
.bg-color-3 { background-color: #FBFCFF; }  
.bg-color-4 { background-color: #29A1FF; }  
.bg-color-5 { background-color: #FFD100; } 
.bg-color-6 { background-color: #72c281; }
.bg-color-white { background-color: #FFFFFF; }


.btn-color-1 { background-color: #2ECC40; }        
.btn-color-1:hover { background-color: #FBFCFF; }

.btn-color-2 { background-color: #E52521; }        
.btn-color-2:hover { background-color: #5C94FC; }  

.btn-color-3 { background-color: #FBFCFF; }       
.btn-color-3:hover { background-color: #C9F7D2; } 

.btn-color-4 { background-color: #FFD100; }       
.btn-color-4:hover { background-color: #E2B200; }  

.btn-color-5 { background-color: #29A1FF; }        
.btn-color-5:hover { background-color: #1677CC; } 

.border-color-1 { border: 1px solid #2ECC40; }     
.border-color-2 { border: 1px solid #29A1FF; }    
.border-color-3 { border: 1px solid #FBFCFF; }     
.border-color-4 { border: 1px solid #E52521; }     
.border-color-5 { border: 1px solid #FFD100; }    

.img-div-style { height: 80%; width: 80%; }
.img-style { object-fit: cover; height: 100%; width: 100%; }

.bg-opaque-1       { background-color: #0D2B7E; }               
.bg-very-opaque-1  { background-color: #0D2B7E; }


.bg-block-1       { background-color: #f7c211; }  

.bg-opaque-2       { background-color: rgba(41, 161, 255, 0.9); } 
.bg-very-opaque-2  { background-color: rgba(41, 161, 255, 0.5); }

.bg-opaque-3       { background-color: #CDE7FF; }               
.bg-very-opaque-3  { background-color: rgba(251, 252, 255, 0.5); }

.bg-opaque-4       { background-color: rgba(229, 37, 33, 0.9); } 
.bg-very-opaque-4  { background-color: rgba(229, 37, 33, 0.5); }

.bg-opaque-5       { background-color: rgba(255, 209, 0, 0.9); } 
.bg-very-opaque-5  { background-color: rgba(255, 209, 0, 0.5); }

.mail-a:hover { color: #0E0E10; } 

.pattern-1 {
  background-image: repeating-linear-gradient(45deg, rgba(46, 204, 64, 0), rgba(46, 204, 64, 0) 1.39em, #FFD100 1em, #FFD100 50%);
  background-size: 2em 2em;
}
.pattern-2 {
  background-image: radial-gradient(ellipse farthest-corner at 1em 1em, rgba(41, 161, 255, 0.15), rgba(41, 161, 255, 0.15) 50%, rgba(251, 252, 255, 0) 50%);
  background-size: 2em 2em;
}
.pattern-3 {
  background: linear-gradient(180deg, rgba(229, 37, 33, 0) 20%, rgba(229, 37, 33, 0.1) 20%, rgba(229, 37, 33, 0.1) 40%, rgba(229, 37, 33, 0.2) 40%, rgba(229, 37, 33, 0.2) 60%, rgba(229, 37, 33, 0.4) 60%, rgba(229, 37, 33, 0.4) 80%, rgba(229, 37, 33, 0.5) 80%);
  background-color: #FBFCFF;
  background-size: 100% 100%;
  min-height: 100%;
}


@media screen and (max-width: 768px) { #2026_logo { display: none; } }
@media screen and (min-width: 769px) { #2026_logo { display: block; } }
@media screen and (max-width: 768px) { #mobile_logo { display: block; } }
@media screen and (min-width: 769px) { #mobile_logo { display: none; } }


#bg-half-transparent { background-color: #163B8F; opacity: 0; }
.bg-more-transparent { background-color: #0B225F; }


.cdown_numbers { font-family: "Roboto Mono", monospace; }
@media screen and (max-width: 576px) { .cdown_numbers { font-size: 2rem; } }
@media screen and (min-width: 576px) and (max-width: 768px) { .cdown_numbers { font-size: 4rem; } }
@media screen and (min-width: 769px) { .cdown_numbers { font-size: 8.6rem; } }

@media screen and (max-width: 575px) { .cdown_titles { font-size: 0.5rem; } }
@media screen and (min-width: 576px) and (max-width: 768px) { .cdown_titles { font-size: 1rem; } }
@media screen and (min-width: 769px) { .cdown_titles { font-size: 2rem; } }

@media screen and (max-width: 768px) { #divider_footer { display: none; } }
@media screen and (min-width: 769px) { #divider_footer { display: block; } }

#about_scroll { transition-duration: 0.5s; background-color: transparent; border-radius: 30px; }
#about_scroll:hover { background-color: rgba(251, 252, 255, 0.2); cursor: pointer; }


.span_gold   { background: #FFD700; padding: 0 10px; border-radius: 4px; }
.span_silver { background: #C0C0C0; padding: 0 10px; border-radius: 4px; }
.span_bronze { background: #cd7f32; padding: 0 10px; border-radius: 4px; }
.span_white  { background: #F7FFF7; padding: 0 10px; border-radius: 4px; }

.sponsor_text { width: 100%; text-align: center; line-height: 0.1em; margin: 10px 0 20px; }
.sponsor_text_gold   { border-bottom: 2px solid #FFD700; }
.sponsor_text_silver { border-bottom: 2px solid #C0C0C0; }
.sponsor_text_bronze { border-bottom: 2px solid #cd7f32; }
.sponsor_text_white  { border-bottom: 2px solid #F7FFF7; }

.portrait-img { padding: 0; border-radius: 10px; width: 100%; }
.team-role { border-bottom: 2px solid rgba(229, 37, 33, 0.3); } 

html { scroll-behavior: smooth; }
.center { display: block; margin-left: auto; margin-right: auto; width: 50%; }


#mc_embed_signup { background: #FBFCFF; color: #0D2B7E; padding: 20px; text-align: center; }
#mc_embed_signup .mc-field-group { padding: 10px; }
#mc_embed_signup input { width: 200px; border: #FBFCFF; border-bottom: #0D2B7E; }

/* Smoothly scaling headline size */
.display-fluid {
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
  line-height: 1.15;
}

/* Consistent card behavior */
.section-card { display: flex; flex-direction: column; }

/* Optional: slightly smaller lead on very small screens */
@media (max-width: 575.98px) {
  .lead { font-size: 1.05rem; }
}

/* When the two cards stack (tablet & below) */
@media (max-width: 991.98px) {
  /* stack the grid and remove grid gap */
  #start_content .grid-container { 
    grid-template-columns: 1fr; 
    gap: 0; 
  }

  /* ensure full width so spacing feels consistent */
  #start_content .grid-item { width: 100%; }

  /* add upper spacing to the SECOND card only
     Use margin-top so we don't fight py-* padding,
     and add !important to beat Bootstrap utilities. */
  #start_content .grid-item + .grid-item {
    margin-top: 1.25rem !important; /* tweak 1–1.5rem to match other blocks */
  }
}

:root {
  --section-gap: 6rem; 
}

.section-block {
  margin-bottom: var(--section-gap);
}

/* ===== Tracks grid (2x2) ===== */
.tracks-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  padding: 0.5rem 0 1rem;
}

@media (max-width: 768px) {
  .tracks-grid { grid-template-columns: 1fr; }
}

/* ===== Track tile text ===== */
.track-title {
  margin-top: 0.75rem;
  font-weight: 800;
  font-size: 1.25rem;
  color: #0F1D3B;
  text-align: center;
}

.track-subtitle {
  margin-top: 0.15rem;
  font-weight: 600;
  color: rgba(15, 29, 59, 0.75);
  text-align: center;
  font-size: 0.95rem;
}

.tracks-note {
  text-align: center;
  font-weight: 600;
  margin-top: 0.75rem;
  opacity: 0.9;
}

/* ===== Flip card ===== */
.flip-card {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  background: rgba(251, 252, 255, 0.35);
  border: 3px solid rgba(13, 43, 126, 0.25);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  outline: none;
}

.flip-card:hover,
.flip-card:focus-visible {
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
}

.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 18px;
}

.flip-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  backface-visibility: hidden;
  border-radius: 18px;
  padding: 1rem;
}

.flip-front { 
  background: rgba(251, 252, 255, 0.55);
}

/* icon + sponsor sizing */
.track-icon,
.track-sponsor {
  width: min(220px, 70%);
  height: auto;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}