/* 2048.css */
/* Universal centering for ALL content on mobile */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}

/* 2048 specific body styling */
.twenty48_body{
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #DAD9D9 !important;
}

/* Ensure all body variants are centered on mobile */
body.index_body, body.about_body, body.chess_body, body.hangman_body, 
body.wordsearch_body, body.trivia_body, body.jayhunt_body, body.gameMenu_body,
body.twenty48_body, body.style_body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100vh;
    text-align: center;
    padding-top: 80px; /* Account for navbar */
}

/* Center all main content areas on mobile */
main, main.index_main, main.about_main, main.chess_main, main.hangman_main, 
main.wordsearch_main, main.trivia_main, main.jayhunt_main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* keep content near the navbar */
    width: 100%;
    max-width: 100vw;
    margin: 0 auto;
    text-align: center;
    padding: 10px;
}

/* Center all sections and containers on mobile */
section, .section, div, .container, .ourVision-textContainer, 
.foundingTeam-textContainer, .etownECS-textContainer, .hangman-container,
.twenty48_container, .game-select, #game-select, #welcome-message {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    max-width: 95vw;
    padding: 10px;
}

/* Center all headings on mobile */
h1, h2, h3, h4, h5, h6, .twenty48_h1, .jayhunt_h1, .jayhunt_h2 {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* Center all paragraphs and text on mobile */
p, span, label, select, input {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* Center all forms and form elements on mobile */
form, .form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    text-align: center;
    width: 95%;
}

/* Center all buttons on mobile */
button, .button, input[type="button"], input[type="submit"] {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

/* Center all images on mobile */
img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 95vw;
}

/* Center all tables on mobile */
table {
    margin-left: auto;
    margin-right: auto;
    max-width: 95vw;
}

/* Center game boards and special containers on mobile */
.game-board, .main-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 95vw;
}

/* About page specific centering on mobile */
body.about_body {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    padding-top: 80px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
}

main.about_main {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 95vw !important;
    margin: 0 auto !important;
    text-align: center !important;
    padding: 5px !important;
    box-sizing: border-box !important;
}

#ourVision, #foundingTeam, #etownECS {
    width: 95% !important;
    max-width: 95vw !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important; /* let inner card fill width */
    text-align: center !important;
    margin: 0 auto !important;
    padding: 5px !important; /* 5px blue frame all around */
    box-sizing: border-box !important;
    overflow: visible !important; /* do not create a scrollable flexbox */
}

.ourVision-textContainer, .foundingTeam-textContainer, .etownECS-textContainer {
    /* Grey card inside blue section */
    margin: 0 !important;
    text-align: center !important;
    display: block !important; /* Override flexbox from about.css */
    max-width: 100% !important; /* match section content width */
    width: 100% !important;     /* ensures 5px blue edge from parent padding */
    padding: 12px !important; /* was 15–20px */
    min-height: 330px !important;
    box-sizing: border-box !important;
    background: #C8C8C8 !important;
    overflow: visible !important; /* never scroll within card */
    position: static !important; /* cancel centering hack */
    left: auto !important;
    transform: none !important;
}

#welcome-text, #vision-text, #team-text, #ecs-text {
    text-align: center !important;
    margin: 0 auto !important;
    padding: 10px !important; /* was 15px */
    max-width: 95vw !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.about_body h1, .about_body h2, .about_body h3, .about_body p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 95vw !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Prevent double flexbox issues on mobile */
.about_body .ourVision-textContainer *,
.about_body .foundingTeam-textContainer *,
.about_body .etownECS-textContainer * {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    max-width: 100% !important;
}

#twenty48_logo {
  height: 80px;
  width: 150px;
}

.navbar {
  background-image: linear-gradient(to right, #fff, #C8C8C8, #3DB5E6, #004B98);
  text-align: center;
  padding: 10px;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Keep the hamburger/toggler compact on mobile too */
.navbar .navbar-toggler {
    padding: 0 !important;
    margin: 0 !important;
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.navbar .navbar-toggler:focus,
.navbar .navbar-toggler:active {
    outline: none !important;
    box-shadow: none !important;
}
.navbar .navbar-toggler-icon {
    width: 24px !important;
    height: 24px !important;
    background-size: 100% 100% !important;
}

/* Hide hamburger menu on desktop */
.hamburger-menu-icon {
  display: none !important;
}

/* Show hamburger menu only on mobile */
@media (max-width: 768px) {
    .hamburger-menu-icon {
        display: inline-flex !important;
    }
}

.navbar a {
  text-decoration: none;
  color: #fff;
  margin: 0 10px;
}

body.menu-open {
  overflow: hidden;
}

.twenty48_h1 {
  margin: 20px 0;
  color: #004B98;
  text-shadow: 2px 2px 4px #3DB5E6;
  text-align: center;
}

.twenty48_container {
  text-align: center;
  margin-top: 20px;
}

.game-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  width: 600px; 
  height: 600px; 
  border: 2px solid #ccc;
  background-color: #faf8ef;
  padding: 10px;
  margin: auto;
}

.tile {
  width: 120px;
  height: 120px;
  border: 2px solid #bbada0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#reset {
  margin: 60px;
  font-size: 20px;
}

.hidden {
  display: none;
}

/* about.css (scope to about page only, do not override global body) */
.about_body {
    font-family: Arial, sans-serif;
}
.about_main { flex-grow: 1; }

/* keep only background colors; widths/margins are handled above */
#ourVision { background-color: #64c2e8; }
#foundingTeam { background-color: #296199; }
#etownECS   { background-color: #172a41; }

#break {
    background-color: black;
    /* border: 1px solid white; */
}

#welcome-text {
    font-size: 36px;
    font-family: "Georgia", Times, serif;
    text-align: center;
    color: #004B98;
    order: 1;
    text-shadow: 2px 2px 4px #3DB5E6;
}

#welcome-subtext {
    text-align: center;
    color: #000000;
    max-width: 1000px;
    order: 1;
    margin: auto;
    font-size: 24px;
}

#welcome+div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#welcome-text-2 {
    font-size: 30px;
    font-family: "Georgia", Times, serif;
    text-align: center;
    color: #004B98;
    text-shadow: 2px 2px 4px #3DB5E6;
}

#welcome-subtext-2 {
    text-align: center;
    color: #000000;
    max-width: 1000px;
    margin: auto;
    font-size: 20px;
}

#seTitle {
    text-align: center;
    color: #004B98; 
    font-size: 25px;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

footer {
        padding: 4px 8px; /* even shorter footer on mobile */
        background-color: #004B98;
        text-align: center;
        color: white;
}

/* Slightly smaller footer text and social row on mobile */
@media (max-width: 768px) {
    footer p, footer span, footer a, footer i {
        font-size: 0.9rem;
    }
    footer p { margin: 4px 0 !important; line-height: 1.1 !important; }
    footer .fa { font-size: 0.95rem !important; margin: 0 6px; }
}

.fa {
    text-align: center;
    text-decoration: none;
    color: white;
}

.team-section {
    overflow: hidden;
    text-align: center;
    padding: 60px;
    padding-bottom: 100px;
}
  
.team-section about_h1 {
    margin-bottom: 60px;
    text-align: center;
    color: black;
    font-size: 40px;
}

.section {
    width: 600px;
    margin: auto;
    font-size: 20px;
    text-align: center;
    color: black;
    text-align: justify;
  }
 
.section a{
    text-decoration: none;
    color: #3DB5E6;
}

.section:target {
    height: auto;
}

.pfp a {
    display: inline-block;
    margin: 0 30px;
    width: 200px;
    height: 200px;
    overflow: hidden;
    border-radius: 50%;
    
  }
  
.pfp a img {
    width: 100%;
    filter: grayscale(100%);
    transition: 0.4s all;
  } 
  
.pfp a:hover > img{
    filter:none;
  }

.name {
    display: block;
    margin-bottom: 30px;
    text-align: center;
    font-size: 22px;
  }

/* Mobile centering for About subpages (Founding, 2024, 2025) */
@media only screen and (max-width: 768px) {
    .team-section {
        padding: 24px 12px 48px !important;
        text-align: center !important;
    }
    .team-section #welcome-text,
    .team-section h1,
    .team-section .about_h1 {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .section {
        width: 95vw !important;
        max-width: 700px !important;
        margin: 0 auto !important;
        text-align: center !important; /* override justify */
    }
    /* Center and wrap profile images */
    .pfp {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 16px !important;
    }
    .pfp a {
        margin: 8px !important;
        width: 130px !important;
        height: 130px !important;
    }
    .pfp a img {
        display: block !important;
        margin: 0 auto !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    /* Center large team photos */
    #Team2024Pic,
    .team-section img {
        display: block !important;
        margin: 0 auto !important;
        max-width: 95vw !important;
        height: auto !important;
    }
}

.button {
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
}

.button2 {
    position: relative;
    padding: 15px 40px;
    background: #fff;
    color: #0A2240;
    text-transform: uppercase;
    font-weight: 500; 
    font-size: 1.2em;
    letter-spacing: 2px;
    transition: 0.5s;
    clip-path: polygon(90% 0, 100% 50%, 90% 100%, 0% 100%, 10% 50%, 0% 0%);
}

.button2:hover {
    background: #0A2240; 
    color: #fff;
    letter-spacing: 4px;
    clip-path: polygon(100% 0%, 90% 50%, 100% 100%, 10% 100%, 0% 50%, 10% 0);
}

/* .backButton {
    background-color: white; 
    color: black; 
    border: 2px solid #3DB5E6;
}
  
.backButton:hover {
    background-color: #3DB5E6;
    color: white;
  }
*/

.bio-title {
    font-size: 36px;
    font-family: "Georgia", Times, serif;
    text-align: center;
    color: #004B98;
    text-shadow: 2px 2px 4px #3DB5E6;
  }

#bio {
    text-align: center;
    color: #000000;
    max-width: 1000px;
    margin: auto;
    font-size: 24px;
}

/* submission form style */


#login { /* lightly offset from navbar */
    width: 100%;
    margin-top: 14px;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    min-height: 88vh; /* make the login section tall so everything fits */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Neutralize global section/div rules inside login so widths don't exceed viewport */
#login > div { /* wrapper around #basicContainer and #welcome-text is unaffected */
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* For the login page, render the heading inside the blue card */
#login #welcome-text { display: none !important; }
#login #basicContainer::before {
    content: "Login";
    display: block;
    text-align: center;
    font-size: 28px;
    font-family: "Georgia", Times, serif;
    color: #004B98;
    text-shadow: 2px 2px 4px #3DB5E6;
    margin: 0 0 8px 0;
}

#basicContainer {
    text-align: center;
    /*color: white; */
    font-size: 16px;
    margin: 12px auto; /* Center horizontally with auto margin */
    width: 100%;        /* fill the login wrapper width */
    max-width: min(640px, 100vw);   /* never exceed viewport width */
    padding: 16px 10px; /* slightly tighter vertical padding */
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: #78c9e9;
    transition: background-color 0.3s; 
    box-sizing: border-box;
    overflow: hidden; /* never show inner scrollbars */
    margin-left: auto !important;
    margin-right: auto !important; /* hard center */
    display: flex;                 /* let contents flow naturally */
    flex-direction: column;
    justify-content: flex-start;
    min-height: 0; /* let the box height shrink to its content */
}

/* Center the login form content within a comfortable column */
#basicContainer form {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    text-align: left; /* readable labels */
    box-sizing: border-box;
    overflow: hidden; /* belt-and-suspenders: no inner scroll */
}

/* Compact, readable sizing so everything fits on one screen */
#basicContainer label {
    font-size: clamp(16px, 4.4vw, 18px);
    margin: 4px 0 4px; /* less gap above labels */
}
#basicContainer input[type=text],
#basicContainer input[type=password],
#basicContainer select {
    font-size: clamp(14px, 4.0vw, 18px);
    padding: 8px 10px; /* shorter input height */
    line-height: 1.2;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
#basicContainer input[type=submit] {
    font-size: clamp(16px, 4.4vw, 18px);
    padding: 10px 14px; /* shorter button height */
}

/* Ensure absolutely no horizontal scroll on the page */
html, body { overflow-x: hidden; }
#login, #login * { max-width: 100%; }

/* Extra safeguards for small-height phones so the entire form fits without page scroll */
@media (max-height: 740px) and (max-width: 600px) {
    #login { margin-top: 8px; }
    #login #welcome-text { font-size: 24px !important; margin: 6px auto 8px !important; }
    #basicContainer { padding: 12px 10px; max-width: 560px; min-height: 0; }
    #basicContainer label { font-size: 16px; }
    #basicContainer input[type=text],
    #basicContainer input[type=password],
    #basicContainer select { font-size: 15px; padding: 8px 10px; }
    #basicContainer input[type=submit] { font-size: 16px; padding: 10px 12px; }
}

/* Make the Register link align nicely under the form */
#basicContainer .nav-link {
    display: inline-block;
    padding: 8px 0 0; /* slightly closer to the button */
    margin-top: 6px;
}

input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}

input[type=submit] {
width: 100%;
background-color: #135496;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}

input[type=submit]:hover {
background-color: #004B98;
}

input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}

/* chess.css */
.chess_body{
    background-image: url('../images/chessImages/wood.jpg'); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center; 
    background-attachment: fixed; 
}

/* Global guard against horizontal overflow on small screens */
@media only screen and (max-width:768px){
    html, body {
        max-width: 100vw;
        overflow-x: hidden;
    }
    form, input, select, button, label {
        max-width: 100%;
    }

    /* Slide-in mobile nav drawer */
    .navbar .navbar-collapse,
    #navbarNav.navbar-collapse {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        width: 200px !important;
        height: 100vh !important;
        background: linear-gradient(to bottom, #004B98, #3DB5E6) !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        z-index: 9999 !important;
    padding: 12px !important;
    padding-top: 64px !important;
        transition: right 0.3s ease-in-out !important;
        box-shadow: -2px 0 10px rgba(0,0,0,0.1) !important;
    }

    .navbar .navbar-collapse.show,
    #navbarNav.navbar-collapse.show {
        right: 0 !important;
    }

    .navbar .navbar-nav {
        flex-direction: column;
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .navbar .nav-item {
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .navbar .navbar-link,
    .navbar .nav-link {
        display: block;
        padding: 10px 16px;
        font-size: 0.95rem;
        color: #fff;
    }

    /* Overlay behind the drawer */
    .mobile-menu-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        z-index: 9998;
    }
    .navbar.menu-open .mobile-menu-overlay {
        display: block;
    }

    /* Show hamburger buttons on mobile */
    .hamburger-menu-icon,
    .navbar .navbar-toggler {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 1001;
    }

        /* Size and align custom SVG hamburger button (used by NavBar.php) */
        .navbar .hamburger-menu-icon {
            padding: 0 !important;
            margin: 0 0 0 auto !important; /* push to right */
            width: 40px !important;
            height: 40px !important;
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            cursor: pointer;
        }
        .navbar .hamburger-menu-icon svg {
            width: 24px !important;
            height: 24px !important;
            display: block;
        }

    /* Hide collapsed nav by default on mobile, show when toggled */
    .navbar .navbar-collapse {
        display: none;
    }
    .navbar .navbar-collapse.show {
        display: block;
    }

    /* Ensure Bootstrap toggler icon is visible */
    .navbar .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        width: 1.5rem;
        height: 1.5rem;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}

/* Navbar: full-bleed and flush to top on mobile */
.navbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;        /* remove top gap */
  box-sizing: border-box !important;
  z-index: 1000 !important;
}

/* Ensure global div/section centering rules don’t shrink the navbar */
div.navbar, header.navbar, .navbar.container {
  max-width: 100% !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.balloon {
      position: fixed;
      bottom: 20px;
      right: 20px;
      padding: 12px 20px;
      border-radius: 20px;
      color: white;
      font-weight: bold;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.3s ease, transform 0.3s ease;
      z-index: 1000;
}
.balloon.show {
      opacity: 1;
      transform: translateY(0);
}

.balloon.success { background-color: #28a745; } /* green */

.balloon.error { background-color: #dc3545; }  

/* gameMenu.css */

.gameMenu_body {
    font-family: veranda, sans-serif;
    text-align: center;
    background-color: #DAD9D9 !important;
}


#welcome-message {
    font-size: 50px;
    margin-top: 20px;
    text-align: center;
    color: #004B98;
    text-shadow: 2px 2px 4px #3DB5E6;
    /* font-family: 'RetroGamingFont', sans-serif; */
    font-family: 'GameplayFont', sans-serif;
}

/* Gaming font implementation */
@font-face { 
    /*font-family: 'RetroGamingFont'; src: url('fonts/Retro Gaming.ttf');*/
    font-family: 'GamePlayFont'; src: url('fonts/GamePlay.ttf');
  }


#game-select {
    margin-top: 20px;
    text-align: center;
    
}

select {
    font-size: 18px;
    padding: 5px;
}

label {
    font-weight: bold;
    margin-right: 10px;
    color: #0A2240;
}

select {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 200px;
}

/* path Ghost and Pac-Man move on */

.path {
    position: relative;
    width: 95%;
    height: 150px;
    padding: 20px;
    box-sizing: border-box;
    background: #DAD9D9;
    overflow: hidden;
    margin: 0 5%;
    /* box-shadow: 0 5px 5px DAD9D9; */
}

.path::after {
    content: '';
    display:block;
    width: 90%;
    position: absolute;
    height:0;
    border: 50%;
    /* border-bottom: 14px dotted blue; */
    left: 5%;

}

/*Pacman css */
.pacman {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #efce29;
    position: absolute;
    margin-top: 20px;
    animation: move 7s linear infinite;
    animation-delay: 1s;
    left: -20%;

}

.pacman_eye {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    top:20px;
    right: 40px;
    background: #333333;

}

.pacman_mouth {
    background: #DAD9D9;
    position: absolute;
    width: 100%;
    height: 100%;
    clip-path: polygon(100% 74%, 44% 48%, 100% 21%);
    animation-name: eat;
    animation-duration: 0.7s;
    animation-iteration-count: infinite;
}

/* Ghost css */

.ghost {
    position: absolute;
    top: 50%;
    z-index: 99;
    left: 20%;
    height: 70px;
    width: 60px;
    background: red;
    margin-top: -35px;
    border-top-left-radius: 70px;
    border-top-right-radius: 70px;
    animation: move 7s linear infinite, blinky 0.4s linear infinite; 
}

.ghost::before, .ghost::after {
    position: absolute;
    z-index: 99;
    content: '';
    top: 15px;
    left: 4px;
    height: 25px;
    width: 20px;
    border-radius: 50%;
    background: white;
}

.ghost::after {
    left: 28px;
}

.eyes::before, .eyes::after {
    position: absolute;
    content: '';
    height: 10px;
    width: 10px;
    background: blue;
    border-radius: 100%;
    top: 25px;
    left: 5px;
    z-index: 99;
    animation: eyeLeft 0.7s linear infinite;
}

.eyes::after {
 animation: eyeRight 0.7s linear infinite;
    z-index: 100;
    left: 30px;
}

.skirt, .skirt::before, .skirt::after {
    position: absolute;
    height: 0;
    width: 0;
    border: 10px solid #DAD9D9;
    border-top-color: transparent;
    bottom: -10px;

}
.skirt::before {
    content: '';
    left: 10px;
}

.skirt::after {
    content: '';
    left: 30px;
}

/* amination keyframes for ghost and pac-man!! */ 

@keyframes eat {
    0% {
      clip-path: polygon(100% 74%, 44% 48%, 100% 21%);
    }
    25% {
      clip-path: polygon(100% 60%, 44% 48%, 100% 40%);
    }
    50% {
      clip-path: polygon(100% 50%, 44% 48%, 100% 50%);
    }
    75% {
      clip-path: polygon(100% 59%, 44% 48%, 100% 35%);
    }
    100% {
      clip-path: polygon(100% 74%, 44% 48%, 100% 21%);
    }
  }

  @keyframes move {
    0% {
         left: -20%;
     }

    100% {
         left: 100%;
    }
    
}

@keyframes blinky {
    50% {
        background: hotpink;
    }
 
}

@keyframes eyeLeft {
    0%, 100% {
        left: 5px; 
    }
    50% {
        left: 10px;
    }
}

@keyframes eyeRight {
    0%, 100% {
        left: 30px;
    }
    50% {
        left: 35px;
    }
}


/* Mario Blocks (with a potential bluejay??) */

* {
    box-sizing: border-box
}
    
.gameMenumain-container {
    display: block;
    margin: 20px auto;
    text-align: center;
}
.mario-block {
    display: inline-block;
    height: 80px;
    margin-right: -7px;
    position: relative;
    width: 80px;
    
}
.mario-block input {
    position: absolute;
    visibility: hidden;
    z-index: -1;
}
.mario-block label {
    background: #F88D2E;
    border: 4px solid #070000;
    box-shadow: inset -4px -4px 0 #965117, inset 4px 4px 0 #FAB89B;
    display: block;
    height: 100%;
    position: relative;
    width: 100%;
    
    
}
.mario-block input:checked + label {
    background: #885818;
    box-shadow: inset -4px -4px 0 #68400B, inset 4px 4px 0 #FAB89B;
    
}
.mario-block input:checked + label .dot,
.mario-block input:checked + label .question-mark {
    display: none;
}
.mario-block input:checked + label:before,
.mario-block input:checked + label:after {
    content: '';
    height: 20px;
    position: absolute;
    transform: rotate(45deg);
    width: 20px;
    
}
.mario-block input:checked + label:before {
    border-right: 4px solid #070000;
    right: 18px;
    top: 15px;
    transform: rotate(45deg);
    
}
.mario-block input:checked + label:after {
    border-left: 4px solid #070000;
    left: 18px;
    top: 15px;
    transform: rotate(-45deg);
    
}
.mario-block .dot {
    background: #070000;
    height: 5px;
    position: absolute;
    width: 5px;
}
.mario-block .dot:nth-child(1) {
    left: 4px;
    top: 4px;
}
.mario-block .dot:nth-child(2) {
    right: 4px;
    top: 4px;
}
.mario-block .dot:nth-child(3) {
    bottom: 4px;
    left: 4px;
}
.mario-block .dot:nth-child(4) {
    bottom: 4px;
    right: 4px;
}
.mario-block--question label {
    cursor: pointer;
    
}
.mario-block--question .question-mark {
    background-image: url("data:image/svg+xml,%3Csvg width='277px' height='380px' viewBox='0 0 277 380' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Group'%3E%3Cpolygon id='Path' fill='%23000000' points='30 168 30 65 63 65 63 30 195.910156 30 238 65 277 65 277 204 207 204 207 274 137 274 137 204 170 204 170 168 207 168 207 65 101 65 101 168'%3E%3C/polygon%3E%3Cpolygon id='Path-2' fill='%23000000' points='137 312 137 380 207 380 207 312'%3E%3C/polygon%3E%3Cpolygon id='Path' fill='%23FFFFFF' points='0 138 0 35 33 35 33 0 208 0 208 35 247 35 247 174 177 174 177 244 107 244 107 174 140 174 140 138 177 138 177 35 71 35 71 138'%3E%3C/polygon%3E%3Cpolygon id='Path-2' fill='%23FFFFFF' points='107 282 107 350 177 350 177 282'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); 
    background-position: center;
    background-repeat: no-repeat;
    background-size: 40px;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

/* hangman.css */

.hangman_body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #DAD9D9 !important;
}

.hangman_main {
    text-align: center;
    padding-top: 15px;
}

.hangman-container {
    margin: 0 auto;
    text-align: center;
    padding: 20px;
    max-width: 400px;
    border: 1px solid black; 
}

.word-display {
    font-size: 24px;
    margin: 20px 0;
}

input[type="text"] {
    text-transform: uppercase;
    font-size: 18px;
    width: 30px;
}

button {
    font-size: 16px;
}

.attempts {
    margin-top: 20px;
}

.attempts span {
    font-weight: bold;
}

#guessed-letters-box {
    padding: 20px;
    border: 2px solid black;
    max-width: 400px;
    margin: 0 auto;
    text-align: center;
    margin-top: 20px;
}

/*index.css */

.index_body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #DAD9D9 !important;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.index_main {
    flex-grow: 1;
}
Menu {
    text-align: center;
    padding-top: 15px;
}

#welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 10px;
    text-align: center;
    justify-content: center;
}

#welcome-text {
    font-size: 36px;
    font-family: "Georgia", Times, serif;
    text-align: center;
    color: #004B98;
    order: 1;
    text-shadow: 2px 2px 4px #3DB5E6;
}

#welcome-subtext {
    text-align: center;
    color: #000000;
    max-width: 1000px;
    margin: auto;
    order: 1;
    font-size: 24px;
    justify-content: center;
}

#welcome+div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#welcome-text-2 {
    font-size: 30px;
    font-family: "Georgia", Times, serif;
    text-align: center;
    color: #004B98;
    text-shadow: 2px 2px 4px #3DB5E6;
}

#welcome-subtext-2 {
    text-align: center;
    color: #000000;
    max-width: 1000px;
    margin: auto;
    font-size: 20px;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

footer {
    padding: 4px 8px; /* reduced padding for shorter footer */
    background-color: #004B98;
    text-align: center;
    color: white;
}

.fa {
    text-align: center;
    text-decoration: none;
    color: white;
}

/* Sub navbar stylesheet Info */

  
.subnav {
  float: left;
  overflow: hidden;
}

.subnav .subnavbtn {
  font-size: 16px; 
  border: none;
  outline: none; 
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .subnav:hover .subnavbtn {
  background-color: linear-gradient(to right, #fff, #C8C8C8, #3DB5E6, #004B98);
  padding: 10px 12px;
}

.subnav-content {
  display: none;
  position: absolute;
  left: 0;
  background-color: #004B98;
  width: 100%;
  padding: 20px 22px;
}

.subnav-content a {
  float: right;
  color: white;
  text-decoration: none;
}

.subnav-content a:hover {
  background-color: #3DB5E6;
  color: black;
}

.subnav:hover .subnav-content {
  display: block;
}


/* submission form style */


#indexbasicContainer {
  text-align: center;
  /*color: white; */
  font-size: 16px;
  margin: 20px auto; /* Center horizontally with auto margin */
  width: 600px;
  padding: 20px 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background-color: #78c9e9;
  transition: background-color 0.3s; 
}

input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}

input[type=submit] {
width: 100%;
background-color: #135496;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}

input[type=submit]:hover {
background-color: #004B98;
}

input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}

/* jayrunner.css */



#gameWindow {
    display: flex;
    justify-content: center; 
    align-items: center;     
    margin: auto;
    width: 80%;
    height: 75vh;

}

#startScreen, #gameOverOverlay, #HSOverlay {
    display: flex;
    margin: auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.display-jayrunnercontainer {
    background-color: #007bff; 
    color: white;              
    border: none;              
    padding: 10px 20px;        
    border-radius: 5px;        
    font-size: 16px;           
    font-weight: bold;         
    text-shadow: 1px 1px 2px black; 
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

#startButton, #playAgainButton, .leaderboard, #returnButton, #returnToStartButton, #retrySubmitButton{
  align-items: center;
  background-color: #FCFCFD;
  border-radius: 4px;
  border-width: 0;
  box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
  box-sizing: border-box;
  color: #36395A;
  cursor: pointer;
  display: inline-flex;
  height: 48px;
  justify-content: center;
  line-height: 1;
  list-style: none;
  overflow: hidden;
  padding-left: 16px;
  padding-right: 16px;
  position: relative;
  text-align: left;
  text-decoration: none;
  transition: box-shadow .15s,transform .15s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  will-change: box-shadow,transform;
  font-size: 18px;
}

#startButton:hover, #playAgainButton:hover, .leaderboard:hover ,#returnButton:hover, #returnToStartButton:hover, #retrySubmitButton:hover{
  background-color: lightblue;
  box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
}

.bottom-nav{
  background-color: #333;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  width: 100%;
  color: white;
}

table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
th, td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}

/* style.css */

/* RESET
----------------------------------------------------------------------------------------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size:100%;
    font: inherit;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
img, embed, object, video { max-width: 100%; }
.ie6 img.full, .ie6 object.full, .ie6 embed, .ie6 video { width: 100%; }

/* BASE
----------------------------------------------------------------------------------------*/

*{
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
html,
.style_body{
    position:relative;
    min-height: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    font-family: 'Roboto', sans-serif;
}
strong{
    font-weight: 500;
}
i{
    font-style: italic;
}
.overflow-hidden{
    position: relative;
    overflow: hidden;
}
.content a{
    order: 2;
    color: #00a8e3;
    text-decoration: none;
}
.content a:hover{
    text-decoration: underline;
}
.scroll-to-link{
    cursor: pointer;
}
p, .content ul, .content ol{
    font-size: 16px;
    color: #777a7a;
    margin-bottom: 16px;
    line-height: 1.6;
    font-weight: 300;
}
.content h1:first-child{
    font-size: 1.333em;
    color: #034c8f;
    padding-top: 2.5em;
    text-transform: uppercase;
    border-top: 1px solid rgba(255,255,255,0.3);
    border-top-width: 0;
    margin-top: 0;
    margin-bottom: 1.3em;
    clear: both;
}

code,
pre{
    font-family: 'Source Code Pro', monospace;
}
.higlighted{
    background-color: rgba(0,0,0,0.05);
    padding: 3px;
    border-radius: 3px;
}

/* LEFT-MENU
----------------------------------------------------------------------------------------*/

.left-menu{
    position: fixed;
    z-index: 3;
    top: 0;
    left: 0;
    bottom: 0;
    width: 300px;
    box-sizing: border-box;
    background-color: #f4f5f8;
    overflow-x: hidden;
    font-size: 18px;
}
.left-menu .content-infos {
    position: relative;
    padding: 12px 13.25%;
    margin-bottom: 20px;
}
.left-menu .info {
    position: relative;
    font-size: 14px;
    margin-top: 5px;
    color: #777a7a;
}
.left-menu .info b {
    font-weight: 500;
    color: #034c8f;
}
.content-logo{
    position: relative;
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 1.425em 11.5%;
    padding-right: 0;
}
.content-logo img{
    display: inline-block;
    max-width: 70%;
    vertical-align: middle;
}
.content-logo span{
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
    color: #323f4c;
    font-size: 1.1em;
}
.content-menu{
    margin: 2em auto 2em;
    padding: 0 0 100px;
}
.content-menu ul{
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 28px;
}
.content-menu ul li{
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 0;
}
.content-menu ul li:hover,
.content-menu ul li.active{
    background-color:#dcdee9;
}
.content-menu ul li:hover a,
.content-menu ul li.active a{
    color: #00a8e3;
}
@media (hover: none) {
    .content-menu ul li:not(.active):hover {
        background-color: inherit;
    }
    .content-menu ul li:not(.active):hover a {
        color: #777a7a;
    }
}
.content-menu ul li a{
    padding: 12px 13.25%;
    color: #777a7a;
    letter-spacing: 0.025em;
    line-height: 1.1;
    display: block;
    text-transform: capitalize;
}

/* CONTENT-PAGE
----------------------------------------------------------------------------------------*/

.content-page {
    position: relative;
    box-sizing: border-box;
    margin-left: 300px;
    z-index: 2;
    background-color: #ffffff;
    min-height: 100%;
    padding-bottom: 1px;
}
.content-code{
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #323f4c;
    border-color: #323f4c;
}
.content {
    position: relative;
    z-index: 30;
}
.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6,
.content p,
.content table,
.content aside,
.content dl,
.content ul,
.content ol,
.content .central-overflow-x {
    margin-right: 50%;
    padding: 0 28px;
    box-sizing: border-box;
    display: block;
    max-width: 680px;
}
.content .central-overflow-x {
    margin-right: calc(50% + 28px);
    margin-left: 28px;
    padding: 0;
    overflow-y: hidden;
    max-width: 100%;
    display: block;
}
.content p .central-overflow-x {
    margin-right: 0;
    margin-left: 0;
}
.break-word {
    word-break: break-word;
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.content ul,
.content ol {
    padding: 0 44px;
}
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
    font-size: 15px;
    margin-top: 2.5em;
    margin-bottom: 0.8em;
    color: #034c8f;
    text-transform: uppercase;
}
.content h2{
    font-size: 1.333em;
}
.content h4{
    color: #00a8e3;
    margin-top: 0;
    text-transform: none;
    font-size: 18px;
    margin-bottom: 0.2em;
}
.content-page .content p,
.content-page .content pre {
    max-width: 680px;
}
.content pre,
.content blockquote {
    background-color: #323f4c;
    border-color: #323f4c;
    color: #ffffff;
    padding: 0 28px 2em;
    margin: 0;
    width: 50%;
    float: right;
    clear: right;
    box-sizing: border-box;
}
.content pre code, .content pre {
    font-size: 14px;
    line-height: 1.5;
    font-weight: bold;
}
.content blockquote,
.content pre,
.content pre code{
    padding-top: 0;
    margin-top: 0;
}
.content pre code{
    margin-top: -2em;
}
.content table {
    font-size: 0.825em;
    margin-bottom: 1.5em;
    border-collapse: collapse;
    border-spacing: 0;
}
.content table tr:last-child {
    border-bottom: 1px solid #cccccc;
}
.content table th {
    font-size: 0.925em;
    padding: 5px 18px 5px 0;
    border-bottom: 1px solid #cccccc;
    vertical-align: bottom;
    text-align: left;
    line-height: 1.6;
}
.content table td {
    padding: 5px 18px 5px 0;
    text-align: left;
    vertical-align: top;
    line-height: 1.6;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    color: #777a7a;
}


/* burger-menu-icon
----------------------------------------------------------------------------------------*/
.burger-menu-icon {
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    padding: 0;
    position: absolute;
    right: 26px;
    top: 26px;
    display: none;
}
.burger-menu-icon .line {
    fill: none;
    stroke: #000000;
    stroke-width: 6;
    transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
        stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.burger-menu-icon .line1 {
    stroke-dasharray: 60 207;
    stroke-width: 6;
}
.burger-menu-icon .line2 {
    stroke-dasharray: 60 60;
    stroke-width: 6;
}
.burger-menu-icon .line3 {
    stroke-dasharray: 60 207;
    stroke-width: 6;
}
html.menu-opened .burger-menu-icon .line1 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
}
html.menu-opened .burger-menu-icon  .line2 {
    stroke-dasharray: 1 60;
    stroke-dashoffset: -30;
    stroke-width: 6;
}
html.menu-opened .burger-menu-icon  .line3 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
}


/* ONE CONTENT COLUMN VERSION
----------------------------------------------------------------------------------------*/

body.one-content-column-version .content h1,
body.one-content-column-version .content h2,
body.one-content-column-version .content h3,
body.one-content-column-version .content h4,
body.one-content-column-version .content h5,
body.one-content-column-version .content h6,
body.one-content-column-version .content p,
body.one-content-column-version .content table,
body.one-content-column-version .content ul,
body.one-content-column-version .content ol,
body.one-content-column-version .content aside,
body.one-content-column-version .content dl,
body.one-content-column-version .content ul,
body.one-content-column-version .content ol {
    margin-right: 0;
    max-width: 100%;
}
body.one-content-column-version .content-page .content p,
body.one-content-column-version .content-page .content pre {
    max-width: 100%;
}
body.one-content-column-version .content-page {
    background-color: #323f4c;
}
body.one-content-column-version .content h1:first-child,
body.one-content-column-version .content h2,
body.one-content-column-version .content h3,
body.one-content-column-version .content h4,
body.one-content-column-version .content h5,
body.one-content-column-version .content h6 {
    color: #59c3c3;
}
body.one-content-column-version p {
    color: #d6f0f0;
}
body.one-content-column-version .content table td {
    color: #d6f0f0;
}
body.one-content-column-version .content thead {
    color: #417179;
}

/* RESPONSIVE
----------------------------------------------------------------------------------------*/

@media only screen and (max-width:980px){
    .content h1, .content h2, .content h3, .content h4, .content h5, .content h6, .content p, .content table, .content ul, .content ol, .content aside, .content dl, .content ul, .content ol {
        margin-right: 0;
    }
    .content .central-overflow-x {
        margin: 0;
        padding: 0 28px;
    }
    .content-code{
        display: none;
    }
    .content pre, .content blockquote {
        margin: 20px 0;
        padding: 28px;
        display: block;
        width: auto;
        float: none;
    }
    .content pre code {
        margin-top: 0;
    }
}

@media only screen and (max-width:680px){
    html {
        scroll-padding-top: 83px;
    }
    html.menu-opened {
        overflow: hidden;
    }
    .left-menu {
        position: relative;
        width: auto;
    }
    .left-menu .content-menu {
        position: fixed;
        width: 400px;
        max-width: 90vw;
        z-index: 3;
        top: 0;
        bottom: 0;
        right: -405px;
        left: auto;
        background-color: #ffffff;
        margin: 0;
        overflow-x: hidden;
        padding-top: 83px;
        padding-bottom: 20px;
    }
    .left-menu .content-menu ul {
        position: relative;
    }
    .left-menu .mobile-menu-closer {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        background-color: rgba(50, 63, 76, .5);
        opacity: 0;
        visibility: hidden;
    }
    html.menu-opened .left-menu .mobile-menu-closer {
        opacity: 1;
        visibility: visible;
    }
    html.menu-opened .left-menu .content-menu {
        right: 0;
    }
    .left-menu .content-logo {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 4;
        background-color: #f4f5f8;
    }
    .content-logo .logo {
        margin-right: 65px;
    }
    .content-page{
        margin-left: 0;
        padding-top: 83px;
    }
    .burger-menu-icon {
        display: block;
    }
}

/* BROWSER AND NON-SEMANTIC STYLING
----------------------------------------------------------------------------------------*/

.cf:before, .cf:after { content: ""; display: block; }
.cf:after { clear: both; }
.ie6 .cf { zoom: 1 }


/* HIGH SCORES
----------------------------------------------------------------------------------------*/

/* Drop Down Menu */

button#menu_button{
    background-color: #4caf50; 
    color: white; 
    padding: 10px 20px; 
    border: none; 
    border-radius: 5px; 
    cursor: pointer; 
    font-size: 16px; 
    transition: 0.3s;
}

button#menu_button:hover {
    background-color: #990000;
  }

/* Score Table Format */

.score-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.score-table th,
.score-table td {
    padding: 12px 15px;
    border: 1px solid #dddddd;
    text-align: left;
}

.score-table thead {
    background-color: #4caf50;
    color: #eeeeee;
}

.score-table tbody tr {
    background-color: #f9f9f9;
}

.score-table tbody tr:hover {
    background-color: #f1f1f1;
}

.score-table tbody tr:nth-child(even) {
    background-color: #f2f2f2;
}

/* FONTS
----------------------------------------------------------------------------------------*/

/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TjASc3CsTKlA.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TjASc-CsTKlA.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TjASc2CsTKlA.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TjASc5CsTKlA.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TjASc1CsTKlA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TjASc0CsTKlA.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TjASc6CsQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fCRc4EsA.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fABc4EsA.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fCBc4EsA.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fBxc4EsA.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fCxc4EsA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fChc4EsA.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fCRc4EsA.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fABc4EsA.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fCBc4EsA.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fBxc4EsA.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fCxc4EsA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fChc4EsA.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sourcecodepro/v22/HI_diYsKILxRpg3hIP6sJ7fM7PqPMcMnZFqUwX28DJKQtMRrTEUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sourcecodepro/v22/HI_diYsKILxRpg3hIP6sJ7fM7PqPMcMnZFqUwX28DJKQtM1rTEUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sourcecodepro/v22/HI_diYsKILxRpg3hIP6sJ7fM7PqPMcMnZFqUwX28DJKQtMVrTEUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sourcecodepro/v22/HI_diYsKILxRpg3hIP6sJ7fM7PqPMcMnZFqUwX28DJKQtMprTEUc.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sourcecodepro/v22/HI_diYsKILxRpg3hIP6sJ7fM7PqPMcMnZFqUwX28DJKQtMZrTEUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sourcecodepro/v22/HI_diYsKILxRpg3hIP6sJ7fM7PqPMcMnZFqUwX28DJKQtMdrTEUc.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sourcecodepro/v22/HI_diYsKILxRpg3hIP6sJ7fM7PqPMcMnZFqUwX28DJKQtMlrTA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* trivia.css */

.trivia_body {
    margin: 0;
    padding: 0;
    font-family: Verdana, sans-serif;
    text-align: center;
    background-color: #DAD9D9 !important;
}

#welcome-message-trivia {
    font-size: 32px;
    margin-top: 20px;
    text-align: center;
    color: #004B98;
    text-shadow: 2px 2px 4px #3DB5E6;
    
}

#trivia-subtext {
    font-size: 20px;
    text-align: center;
    color: black;
}

#trivia_logo {
    max-width: 100px;
}

#game-select {
    margin-top: 20px;
    text-align: center;
}

select {
    font-size: 18px;
    padding: 5px;
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 200px;
}

label {
    font-weight: bold;
    margin-right: 10px;
    color: #0A2240;
}

/* Container that holds parts of trivia */
#triviabasicContainer {
    text-align: center;
    color: white;
    font-size: 16px;
    margin: 20px auto; /* Center horizontally with auto margin */
    width: 100%;
    max-width: 600px;
    padding: 20px 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: #78c9e9;
    transition: background-color 0.3s; 
}

/* Put some style on those questions */
#triviaquestion-container {
    text-align: center;
    color: white;
    font-size: 21px;
    margin: 20px auto; /* Center horizontally with auto margin */
    width: 500px;
    padding: 20px 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: #004B98;
    transition: background-color 0.3s;
}

/* Add blinking animations for correct and incorrect answers */
@keyframes blink-green {
    0%, 100% {
        background-color: #4CAF50;
    }
    50% {
        background-color: #DAD9D9;
    }
}

@keyframes blink-red {
    0%, 100% {
        background-color: #FF5733;
    }
    50% {
        background-color: #DAD9D9;
    }
}

.green-blink {
    animation: blink-green 1s ease-in-out;
}

.red-blink {
    animation: blink-red 1s ease-in-out;
}

#question-triviacontainer.green-blink {
    background-color: #4CAF50;
}

#question-triviacontainer.red-blink {
    background-color: #FF5733;
}
/* Answer options styles */
#answer-options {
    text-align: center;
    display: flex;
    justify-content: center;
}

#answer-options button {
    font-size: 1.2rem;
    padding: 10px 20px;
    margin: 10px;
    border: 2px solid #004B98;
    border-radius: 5px;
    background-color: #fff;
    color: #004B98;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

#answer-options button:hover {
    background-color: #004B98;
    color: #fff;
}

#answer-options .correct {
    background-color: #4CAF50;
    color: #fff;
    border-color: #4CAF50;
}

#answer-options .incorrect {
    background-color: #FF5733;
    color: #fff;
    border-color: #FF5733;
}

#answer-options button {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

/* a circle (idk) */
#circle1,
#circle2,
#circle3 {
    width: 50px;
    height: 50px;
    background: white;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    text-align: center;
    display: inline-block;  
    margin-right: 10px;     
}

/* Color-coded backgrounds for correct and incorrect answers */
.green-background {
    background-color: green;
    max-width: 500px;
}

.red-background {
    background-color: red;
    max-width: 500px;
}

/* wordsearch.css */

.wordsearch_body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #DAD9D9 !important;
}

.wordsearch_h1 {
    margin: 20px 0;
    color: #004B98;
    text-shadow: 2px 2px 4px #3DB5E6;
    display:inline-block;
}

.wordsearch_main {
    text-align: center;
    padding-top: 15px;
}

#timer {
    /* css for the timer element*/
    font-size: xxx-large;
    padding-right: 10px;
    font-family: "Orbitron",sans-serif;
}

#score, #scoreLbl{
    font-size: large;
    font-family: "Orbitron",sans-serif;
}

#Difficulty{
    /* this hides the difficulty form*/
    display:none;
}

#timerBox{
    /* this is the box for the timer*/
    color:white;
    float:right;
    position:absolute;
    top:140px;
    right:0px;
    height: 140px;
    width: 150px;
    background-color: #004B98;
    padding-left: 10px;
    padding-right: 10px;
}

#wordbank{
    /* css for the wordbank*/
    position:absolute;
    top:300px;
    right:0px;
    list-style-type: none;
    background-color: #004B98;
    color:white;
    padding:10px;
}

#rand{
    /* this hides the random button*/
    display:none;
}

#rand:hover{
    /* css for the defunct random button*/
    background-color: red;
    border-color: red;
}

#start:hover{
    /* css for the start button*/
    background-color: green;
    border-color: green;
}

.Box{
    height:100px;
    width:300px;
    margin: auto;
}

.wordsearchcontainer label{
    color:rgb(3, 70, 128);
}

.wordsearchcontainer input:checked ~ label{
    /* this is css for the radio*/
    color:rgb(0, 163, 188);
}

.activeButton{
    background-color: grey;
    color:white;
}

.found{
    /* this is for finding the words*/
    text-decoration: line-through;
}

.foundWord{
    /* found button color*/
    background-color: #0A2240;
    color:white;
}
/* 
these are for the color slide at the end of the game
*/

.orange{
    background-color: orange;
    color: white;
}

.yellow{
    background-color: yellow;
    color: white;
}

.yellowgreen{
    background-color: yellowgreen;
    color:white;
}

.green{
    background-color: green;
    color:white;
}

.teal{
    background-color: teal;
    color:white;
}
.blue{
    background-color: #004B98;
    color:white;
}

.letterButton{
    height:30px;
    width:30px;
}

/* Jayhunt */
.jayhunt_body {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    background-color: #f0f0f0;
    color: #333;
    text-align: center;
}

header {
    background-color: #0044cc;
    padding: 20px 0;
    color: white;
}

section > p{
    padding-top: 10px;
    font-size: smaller;
}
section > .jayhunt_h2{
    padding-bottom: 10px;
}

.jayhunt_h1 {
    margin: 0;
    font-size: 2.5em;
}

.jayhunt_main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* height: 80vh; */
}

section {
    background-color: #ffffff;
    margin: 20px auto; /* ensure centering */
    padding: 20px;
    border-radius: 8px;
    width: 60%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    position: relative;
}

.jayhunt_h2 {
    margin-bottom: 10px;
    font-size: 1.8em;
    color: #0044cc;
}
#game {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    background-color: #ffffff;
    color: #333;
    text-align: center;
}

button {
    padding: 10px 20px;
    font-size: 1.2em;
    background-color: #333;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: black ;
}

footer {
    background-color: #004B98; /* standardize color */
    color: white;
    padding: 4px 8px; /* shorter footer */
    position: static; /* avoid large fixed bar */
    width: 100%;
}
#bluejay-left {
    position: absolute;
    left: 0; /* Aligns the image to the left */
    top: 50%; /* Vertically centers the image */
    transform: translateY(-50%);
    width: 200px;
    height: auto;
    margin-left: 10px; /* Add margin to move it slightly away from the edge */
}
#bluejay-right {
    position: absolute;
    right: 0; /* Aligns the image to the right */
    top: 50%; /* Vertically centers the image */
    transform: translateY(-50%);
    width: 200px;
    height: auto;
    margin-right: 10px; /* Add margin to move it slightly away from the edge */
}
/* about.css */
.about_body #ourVision,
.about_body #foundingTeam,
.about_body #etownECS {
    width: 95% !important;
    max-width: 95vw !important;
    margin: 12px auto !important;        /* was 20px+ */
    padding: 8px 0 !important;            /* reduce top/bottom padding */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.about_body .ourVision-textContainer,
.about_body .foundingTeam-textContainer,
.about_body .etownECS-textContainer {
    width: 95% !important;
    max-width: 95vw !important;
    margin: 0 auto !important;
    padding: 12px !important;             /* was 15–20px */
    min-height: 330px;                    /* keep height, just less padding */
    box-sizing: border-box !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* Reduce default section spacing within About only */
.about_body section {
  margin: 12px auto !important;         /* override any 20px margins */
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* Trim heading and paragraph margins within About only */
.about_body h1, .about_body h2, .about_body h3,
.about_body h4, .about_body h5, .about_body h6,
.about_body p {
  margin-top: 6px !important;
  margin-bottom: 6px !important;
}

/* Tighten custom text blocks */
#welcome-text, #vision-text, #team-text, #ecs-text {
  padding: 10px !important;
}

/* About page – make sure nothing bleeds horizontally on mobile */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }

  .about_body #ourVision,
  .about_body #foundingTeam,
  .about_body #etownECS {
    width: 95vw !important;
    margin: 12px auto !important;
    padding: 5px !important;              /* 5px gap around the grey box */
    box-sizing: border-box !important;
  }

  .about_body #ourVision > .ourVision-textContainer,
  .about_body #foundingTeam > .foundingTeam-textContainer,
  .about_body #etownECS > .etownECS-textContainer {
    width: 100% !important;               /* fill the blue box content area */
    max-width: 100% !important;
    margin: 0 !important;
    position: static !important;
    left: auto !important;
    transform: none !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .about_body #break { display: none !important; }
}