body {
    height: 600vh; /* or however tall you want the scrollable page to be */
    margin: 0;
    overflow-x: hidden; /* prevents horizontal scrollbar from appearing */
    background-color: #7bdffd;
}

/* ---------- Title ---------- */

.title {
    font-family: "Brush Script MT", Cursive, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.title h1 {
    font-size: 7rem;
    -webkit-text-stroke: 5px #9a8e9a;
    color: #bcdd42;
    z-index: 20;
}

.title h3 {
    font-size: 2rem;
    color: #9a8e9a;
    -webkit-text-stroke: 2px #020202;
}

.title img {
    width: 250px;
    height: 250px;
}

/* ---------- Logo ---------- */

.logo {
    position: fixed;
    top: 50px;
    left: 50px;
    scale: 1.5;
    z-index: 101;
    border-radius: 10px;
}

/* ---------- Background image ---------- */

.background {
    position: relative;
    z-index: -10;
    margin-top: -650px; /* negative value pulls it upward, overlapping content above */
    
}

.background img {
    display: block;
    width: 99.1vw;
    height: auto;
    mask:
     radial-gradient(140.87px at 50% calc(100% - 189px),#000 99%,#0000 101%) calc(50% - 126px) 0/252px 100%,
    radial-gradient(140.87px at 50% calc(100% + 126px),#0000 99%,#000 101%) 50% calc(100% - 63px)/252px 100% repeat-x;
    -webkit-mask:
      radial-gradient(140.87px at 50% calc(100% - 189px),#000 99%,#0000 101%) calc(50% - 126px) 0/252px 100%,
    radial-gradient(140.87px at 50% calc(100% + 126px),#0000 99%,#000 101%) 50% calc(100% - 63px)/252px 100% repeat-x;
}


/* ---------- Dropdown nav ---------- */

.dropdown {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}

.dropdown button {
    pointer-events: auto;
    font-family: Arial, sans-serif;
    font-size: 1rem;
    padding: 10px 24px;
    border: none;
    border-radius: 50px; /* pill/round shape */
    background-color: #2e7d32;
    color: white;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.dropdown button:hover {
    background-color: #1b5e20;
    transform: scale(1.05);
}

.dropdown button:active {
    transform: scale(0.97);
}

/* ---------- Splash decoration ---------- */

.splash {
    position: absolute;
    width: 500px;
    height: 500px;
    opacity: 0.1;
    pointer-events: none;
    z-index: -1;
    background:
        repeating-conic-gradient(#00f 0 3%, #0000 0 11%),
        repeating-conic-gradient(#0000 0 5%, #00f 0 7%) 50% / 60% 60%,
        repeating-conic-gradient(#0000 0 7%, #00f 0 9%) 50% / 70% 70%,
        repeating-conic-gradient(#0000 0 11%, #00f 0 13%) 50% / 80% 80%,
        radial-gradient(#00f 22%, #0000 0),
        #fff;
    background-repeat: no-repeat;
    filter: blur(20px) contrast(50);
    box-shadow: 0 0 0 10px #fff;
}

.bubbles {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1; /* adjust: above background content, below your dropdown's z-index: 100 */
    pointer-events: none; /* lets clicks pass through to buttons/links underneath */
}

/* ---------- Founder section ---------- */

.founder_text img {
    position: relative;
    z-index: 0;
    display: block;
    margin: 200px auto 0 auto; /* top margin + auto left/right centers it */
    scale: 3;

}

.founder_text h2 {
    position: relative;
    z-index: 0;
    margin: 100px auto 0 auto;
    width: 600px;
    max-width: 90vw;
    text-align: center;
    font-family: "Brush Script MT", Cursive, sans-serif;
    color: #333;
    scale: 1.3;
}

/* ---------- Review title ---------- */

.review_title {
    font-size: 2rem;
    font-family: "Brush Script MT", Cursive, sans-serif;
    color: #006aff;
    z-index: 20;
    margin-top: 180px;
    text-align: center;
}

/* ---------- Review slider ---------- */

.review-slider {
    position: relative;
    z-index: 0;
    display: flex;
    justify-content: safe center;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 40px 60px;
    margin-top: 40px; /* negative value pulls the whole row up; adjust to taste */
    -webkit-overflow-scrolling: touch;
}

.review-slider::-webkit-scrollbar {
    height: 15px;
}

.review-slider::-webkit-scrollbar-thumb {
    background: #2e7d32;
    border-radius: 10px;
    margin-top: 15px;
}

.review-card {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: 175px;
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-family: Arial, sans-serif;
    z-index: 0;
    transform: translateY(-35px);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.review-card h3 {
    font-family: "Brush Script MT", Cursive, sans-serif;
    font-size: 1.3rem;
    color: #2e7d32;
    font-weight: bold;
    z-index: 0;
}

.review-card p {
    z-index: 0;
    font-family: Arial, sans-serif;
    font-size: 1rem;
    color: #444;
    line-height: 1.5;
    font-style: italic; /* gives it a "quote" feel */
}

.stars {
    color: #f5a623;
    font-size: 1.1rem;
}

/* ---------- Review submission form ---------- */

.review-form {
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 400px;
    margin: 40px auto;
    padding: 20px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-family: Arial, sans-serif;
}

.review-form textarea {
    resize: vertical;
    min-height: 80px;
}

.review-form input,
.review-form textarea,
.review-form select {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-family: inherit;
}

.review-form button {
    background-color: #2e7d32;
    color: white;
    border: none;
    border-radius: 50px;
    padding: 10px;
    cursor: pointer;
    font-family: inherit;
}

.review-form button:hover {
    background-color: #1b5e20;
}

.specialties {
    text-align: center;
    font-size: 2rem;
    font-family: "Brush Script MT", Cursive, sans-serif;
    transform: translateY(160px);

    display: flex;
    flex-direction: column;
    align-items: center;
    
}

.specialties h1 {
    color: #5e9843;
    -webkit-text-stroke: 3px #606d79;
}

.specialties .images {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.specialties img {
    width: 600px; /* actual layout size — adjust to taste */
    height: auto;
}

.specialties .image_subtext {
    display: flex;
    justify-content: center;
    gap: 150px;
    transform: translateX(-40px);
    color: #000;
}


/* ---------- Minigame ---------- */

.minigame {
    position: relative;
    z-index: 0;
    display: flex;
    justify-content: center;
    margin: 60px auto;
}

.asteroids-game {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    margin: 60px auto;
}

.dinorunner-game {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    margin: 60px auto;
}

.minigame_title {
  position: relative;
  z-index: 2;
  text-align: center;
  font-family: "Brush Script MT", Cursive, sans-serif;
}

.asteroids-game, .dinorunner-game {
    display: none; /* hidden by default */
}

.asteroids-game.active, .dinorunner-game.active {
    display: flex; /* shown when selected */
}

/* ---------- Contact section ---------- */

.contact {
    position: relative;
    z-index: 2;
    text-align: center;
    font-family:  "Brush Script MT", Cursive, sans-serif;
    margin: 60px auto 100px auto;
    font-size: 2rem;
}

.twitch-button {
    display: inline-block;
    background-color: #9146FF; /* Twitch's brand purple */
    color: white;
    font-family: Arial, sans-serif;
    font-size: 1rem;
    padding: 10px 24px;
    border-radius: 50px;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.2s ease, transform 0.15s ease;
    margin: 10px;
}

.twitch-button:hover {
    background-color: #772ce8;
    transform: scale(1.05);
}

.twitch-button:active {
    transform: scale(0.97);
}

.discord {
    display: inline-block;
    background-color: #5865F2; /* Discord brand color */
    color: white;
    font-family: Arial, sans-serif;
    font-size: 1rem;
    padding: 10px 24px;
    border-radius: 50px;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.2s ease, transform 0.15s ease;
    margin: 10px;
}

.discord:hover {
    background-color: #4752c4;
    transform: scale(1.05);
}

.discord:active {
    transform: scale(0.97);
}

#contact-section {
    scroll-margin-top: 150px;
}

/* ---------- Scroll offset so fixed dropdown doesn't cover section tops ---------- */

#reviews-section {
    scroll-margin-top: 150px;
}