/* CSS */

body {
  background: linear-gradient(#0d1919, #102121);
}

nav {
    position: sticky;
    top: 0;
    z-index: 1000; 
    background-color: rgba(255, 255, 255, 1); /* or whatever Bootstrap gives */
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
}

/* When scrolled */
nav.scrolled {
  background-color: rgba(13, 25, 25, 0.35); /* 85% opacity */
  backdrop-filter: blur(10px); /* optional but gorgeous */
}

/* Default link style */
nav .nav-link {
  color: #000000; /* or whatever you're using now */
  transition: color 0.3s ease;
}

/* When scrolled */
nav.scrolled .nav-link {
  color: #4c5a5b; 
  font-weight: 500; /* optional, but improves readability */
}

/* Override Bootstrap background when scrolled */
.navbar.bg-body-tertiary.scrolled {
  background-color: rgba(255, 255, 255, 0.35) !important;
  backdrop-filter: blur(10px);
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
}

.fade-in {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}


@font-face {
  font-family: "Oaxaca";
  src: url("assets/fonts/Oaxaca.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

h1 {
    font-family: "Oaxaca";
}

h2 {
    font-family: "oaxaca";
}

h3 {
    font-family: "oaxaca";
}

h4 {

    font-family: "Oaxaca";
}

li {
    font-family: "oaxaca";
}

.fw-bold h2 {
  color: #b8b8b8;   
}

.lead p {
  color: #b8b8b8;   
}


form {
    background-color: #234346;
    padding-left: 15%;
    padding-right: 15%;
    margin-left: 10%;
    margin-right: 10%;
    padding-bottom: 20%;
    margin-bottom: 20%;
    opacity: 70%;
}

label {

    color: white;

}

.LAMNYoutube {
    display: flex;
    justify-content: center;
    padding: 20px;
}

.site-footer {
    background-color: #111;     /* or whatever fits your theme */
    color: #fff;
    text-align: center;
    padding: 20px 0;
    font-size: 0.9rem;
    margin-top: 40px;
}


html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

.site-footer {
    margin-top: auto;
}


.event-party {
    display: flex;
    gap: 40px;
    justify-content: center;

    /* Prevent the entire block from becoming too wide */
    max-width: 700px;
    margin: 40px auto;
    padding: 20px;

    /* Optional aesthetic */
    color: aliceblue;
}

.event-left,
.event-right {
    flex: 1;
    min-width: 250px;
}

/* Typography adjustments */
.event-left h3,
.event-left h5,
.event-left h6,
.event-right p {
    margin: 0 0 10px 0;
}

/* Mobile stacking */
@media (max-width: 700px) {
    .event-party {
        flex-direction: column;
        text-align: center;
    }
}


.twentytwenty-container {
  display: block !important;
  position: relative !important;
  overflow: hidden;
}

.tt-wrapper {
  display: block;
  width: 100%;
}