:root{
	--maroon: #800000; /* primary accent */
	--black: #000000;
	--white: #ffffff;
	--muted: #f5f5f5;
	--card-border: rgba(0,0,0,0.06);
}
/* THIS IS ONLY TO PREVENT SCROLLING REMOVE WHEN WE ADD MORE ELEMENTS */ 
/* html, body { height: 100%; overflow: hidden; } */
/* Allow vertical scroll; hide only horizontal overflow */
html, body {
	margin: 0;
	padding: 0;
	height: auto;
	overflow-y: auto;
	overflow-x: hidden;   /* prevents tiny 100vw overhangs on phones */
	position: relative;
  }
  

/* --- Global/mobile sanity --- */
* { box-sizing: border-box; } 

body {
	font-family: Inter, system-ui, Arial, sans-serif;
	background: rgb(224, 224, 224);
	color: var(--black);
	margin: 0;
	overflow: visible;
}

.site-title {
	width: 70%;
	display: block;
	position: relative;
	z-index: 4;
	height: auto;
	margin: 0 auto;
	margin-top: -50px;
}

/* 2) Normalize both SVGs: block, responsive, same alignment */
.site-subtitle,
.site-title{
  display: block;
  height: auto;
  margin: 0 auto;
  line-height: 1;                 /* kill extra inline image space */
}
/* 3) Scale them with sensible, linked widths (no negative margins) */
.site-subtitle{                   /* black “UVA WiCS PRESENTS:” */
	width: clamp(220px, 36vw, 520px);
}

.site-title{                      /* red “Hack to the Beat” */
	width: clamp(320px, 82vw, 1280px);
	margin-top: 0;                  /* remove -50px pull-up */
  }
  
  /* 4) Give the hero breathing room below the maroon top banner */
  .hero{ padding-top: clamp(56px, 10vh, 96px); 

}


/* If you used .full-bleed, keep it from causing horizontal scroll */
.full-bleed{
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}


/* Navbar override: maroon background, white links */
.navbar {
	background:transparent!important;
	/* margin-top: -4px; */
	margin-top: 0px;
}
.navbar .navbar-brand, .navbar .nav-link{color:var(--white) !important}
.navbar .nav-link:hover{opacity:0.9}

.jumbotron{background:linear-gradient(90deg, rgba(128,0,0,0.06), transparent);border:1px solid var(--card-border)}

/* Stack cards */
.stack-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.stack-card{background:var(--white);border:1px solid var(--card-border);padding:18px;border-radius:8px;box-shadow:0 8px 18px rgba(0,0,0,0.03);transition:transform .18s ease,box-shadow .18s ease,border-color .15s ease;cursor:pointer}
.stack-card:hover{transform:translateY(-6px) scale(1.03);box-shadow:0 20px 40px rgba(0,0,0,0.08);border-color:var(--maroon)}
.stack-card small{color:#444}

/* Sponsors scroller */
.sponsors-scroll{display:flex;gap:12px;overflow:auto;padding:12px 6px}
.sponsor{min-width:140px;background:var(--muted);border:1px solid rgba(0,0,0,0.08);padding:18px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--black);font-weight:600}
.sponsors-scroll.big .sponsor{min-width:220px;padding:28px;font-weight:700;background:linear-gradient(90deg, rgba(128,0,0,0.06), transparent)}

/* make scrollbar thin */
.sponsors-scroll::-webkit-scrollbar{height:10px}
.sponsors-scroll::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.12);border-radius:6px}

/* Buttons */
.btn-primary{background:var(--maroon);border-color:var(--maroon)}
.btn-primary:hover{background:#6a0000;border-color:#6a0000}

/* Cards and quick links */
.card{border:1px solid var(--card-border)}

/* responsive */
@media(min-width:768px){.stack-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:767px){.stack-grid{grid-template-columns:repeat(1,1fr)}}

.card p{margin:0}

/* Top banner styles */
.top-banner{
	position: relative;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1100;
	background:#6d0000;
	color:var(--white);
	height:72px;
	display:flex;
	align-items:center;
	padding-left: 120px;
}
.top-banner .site-logo{
	height:80px;
	padding-left: 150px;
}
.top-banner .banner-title{font-family:'Lobster', cursive;font-size:34px;color:var(--white);letter-spacing:1px}
.top-banner .small-brand{font-size:12px;opacity:0.9}
.btn-register{
	background:transparent;
	border:2px solid var(--white);
	color:var(--white);
	margin-left: 30px;
	font-weight:700
}
.btn-register:hover{background:var(--white);color:var(--maroon)}

/* Hero */
.hero {
	position: relative;
	min-height: 100vh;                 /* fill viewport */
	padding-top: clamp(64px, 12vh, 96px);
	padding-bottom: 32vh;              /* room for the record */
	overflow: visible;
}

/* 1) Make the hero stack and control spacing */
.hero-inner{
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: clamp(2px, 0.8vw, 14px);   /* was ~1.6vw–28px */
}
.site-subtitle{ margin-top: 0; }   /* ensure no extra space */
.site-title{    margin-top: 0; }
.site-subtitle, .site-title { max-width: 100%; height: auto; }

.hero-title{font-family:'Lobster',cursive;font-size:88px;color:var(--maroon);margin:0}
.event-sub{font-size: 170%;font-weight:700;color:#3a3a3a;letter-spacing:1px}
.event-date{color:#222;margin-top:8px;font-weight:600}

/* Countdown: scale down + tighter spacing on phones */
.countdown #countdown{
	font-family: monospace;
	font-size: clamp(20px, 10vw, 42px);
	letter-spacing: clamp(2px, 1.2vw, 6px);
	word-spacing: 0;
  }
  
  .vinyl-art {
	position: absolute;
	left: 50%;
	bottom: 0;                         /* stick to bottom of hero */
	transform: translate(-50%, 40%);    /* push it down so it hangs out */
	width: min(520px, 70vw);           /* reasonable size */
	max-width: 520px;
	opacity: 0.95;
	z-index: 1;
	display: block;
	pointer-events: none;
}

/* Desktop / laptop tweaks */
@media (min-width: 992px) {
	.hero {
	  padding-bottom: 45vh;          /* more space under content */
	}
  
	.vinyl-art {
	  width: min(480px, 40vw);       /* a bit smaller on big screens */
	  transform: translate(-50%, 75%); /* push it further down */
	}
  }  


/* Mobile tweaks */
@media (max-width: 767px) {
	.hero {
		padding-top: 72px;             /* banner height */
		padding-bottom: 28vh;          /* still give bottom space */
	}
	.vinyl-art {
		transform: translate(-50%, 35%);
		width: min(420px, 90vw);
	}
}

/* the wics logo */
.site-logo {
  height: 48px;   /* controls logo size */
  width: auto;    /* keeps aspect ratio */
}

@media (max-width: 768px) {
  .site-logo {
    height: 36px;
  }
}

.mlh-badge-link{
  position: absolute;
  top: 0;
  left: 12px;
  width: 100px;
  z-index: 1200;
  display: block;
}

.mlh-badge{
  width: 130px;
  height: auto;
  display: block;
  padding-left: 30px;
}

.mlh-badge img {
  position: fixed;
  top: 0;
  left: 20px;
  height: 200px;
  z-index: 1200;
} 

/* make collapsed menu full-width */
@media (max-width: 991.98px) {
  .navbar-collapse {
    width: 100%;
    margin-top: 8px;   /* drops below the toggler */
  }

  .navbar-nav {
    width: 100%;
  }

  .navbar-nav .nav-link {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* collapsed menu */

.top-nav {
	position: relative;
}

@media (max-width: 991.98px) {

  /* anchor for absolute dropdown */
  .top-nav {
    position: relative;
  }

  /* right-side dropdown panel that moves with the navbar */
  .top-nav .navbar-collapse.show,
  .top-nav .navbar-collapse.collapsing {
    position: absolute;
    top: calc(100% + 10px);              /* directly under navbar */
    right: 0;
    left: auto;

    width: clamp(260px, 25vw, 360px);  /* ~25% */
    max-width: 90vw;

    background: #6d0000;
    padding: 16px;
    z-index: 2000;

    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.25);
  }

  /* right-align content inside */
  .top-nav .navbar-nav {
    width: 100%;
    margin-left: auto;
    align-items: flex-end;
    text-align: right;
  }

  .top-nav .nav-link {
    display: block;
    width: 100%;
    padding: 10px 0;
  }

  .top-nav .btn-register {
    margin-left: auto;
    margin-top: 12px;
  }
}




.top-banner {
  overflow: visible;
}

.about_svg {
	width: 300px;
	padding-bottom: 50px;
}