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

/* Universal centering for web_src */
body.index_body, body.about_body, body.chess_body, body.hangman_body, body.wordsearch_body, body.trivia_body, body.jayhunt_body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

/* Ensure all body variants are centered */
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 fixed navbar */
}

/* Center all main content areas */
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 page content near navbar */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    padding: 20px;
}

/* Center all sections and containers */
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: 100%;
}

/* Center all headings */
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 */
p, span, label, select, input {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

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

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

/* Center all images */
img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Center all tables */
table {
    margin-left: auto;
    margin-right: auto;
}

/* Center game boards and special containers */
.game-board, .main-container {
    margin-left: auto;
    margin-right: auto;
}

/* About page specific centering - Override individual stylesheet */
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: 0 !important;
    padding-right: 0 !important;
}

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

#ourVision, #foundingTeam, #etownECS {
    width: 90% !important;
    max-width: 1200px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important; /* allow child to fill width */
    text-align: center !important;
    margin: 0 auto !important;
    padding: 5px !important; /* 5px blue frame */
    box-sizing: border-box !important;
    overflow: visible !important; /* not scrollable */
}

.ourVision-textContainer, .foundingTeam-textContainer, .etownECS-textContainer {
    margin: 0 !important;
    text-align: center !important;
    display: block !important; /* Override flexbox from about.css */
    max-width: 100% !important;
    width: 100% !important; /* ensures blue edge shows */
    min-height: 330px !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    background: #C8C8C8 !important;
    overflow: visible !important;
    position: static !important;     /* remove left/transform */
    left: auto !important;
    transform: none !important;
}

#welcome-text, #vision-text, #team-text, #ecs-text {
    text-align: center !important;
    margin: 0 auto !important;
    padding: 20px !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;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Prevent double flexbox issues */
.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;
}

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

.navbar {
    background-image: linear-gradient(to right, #fff, #C8C8C8, #3DB5E6, #004B98);
    text-align: center;
    padding: 10px 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;        /* was 100vw (caused horizontal bleed) */
    min-width: 100%;    /* was 100vw */
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

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

/* Ensure hamburger/toggler never shows above mobile widths */
@media (min-width: 769px) {
    /* Hide both custom and Bootstrap hamburger buttons */
    .hamburger-menu-icon,
    .navbar .navbar-toggler {
        display: none !important;
        visibility: hidden !important;
    }

    /* Always display the full nav on tablet/desktop */
    .navbar-expand-lg .navbar-collapse {
        display: 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 */
about_body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #DAD9D9 !important;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.about_main {
    flex-grow: 1;
}

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

#ourVision {
    padding-top: 10px;
    text-align: center;
    background-color: #64c2e8;
}

.ourVision-textContainer {
    margin: 0 auto;
    text-align: center;
    padding: 0;
    /* max-height: 300px; */
    max-width: 1000px;
    border: 1px solid black;
    background-color: #C8C8C8; 
    
}

#foundingTeam {
    padding-top: 10px;
    text-align: center;
    background-color: #296199;
}

.foundingTeam-textContainer {
    margin: 0 auto;
    text-align: center;
    padding: 0;
    /* max-height: 300px; */
    max-width: 1000px;
    border: 1px solid black;
    background-color: #C8C8C8;
}

#etownECS {
    padding-top: 10px;
    text-align: center;
    background-color: #172a41;
}

.etownECS-textContainer {
    margin: 0 auto;
    text-align: center;
    padding: 0;
    /* max-height: 300px; */
    max-width: 1000px;
    border: 1px solid black;
    background-color: #C8C8C8; 
}

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

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

#welcome-subtext {
    text-align: center;
    color: #000000;
    max-width: 1000px;
    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: 10px;
    background-color: #004B98;
    text-align: center;
    color: white;
}

.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;
  }

.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 */


#aboutbasicContainer {
  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;
}

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

.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 {
    padding-top: 10px;
    text-align: center;
}

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

#welcome-subtext {
    text-align: center;
    color: #000000;
    max-width: 1000px;
    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;
}

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

footer {
    padding: 10px;
    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{
    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: 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;            /* center instead of absolute offset */
    padding: 20px;
    border-radius: 8px;
    width: 60%;
    max-width: 1000px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    position: static;             /* was relative + left:275px */
    height: 300px;
    overflow-y: auto;
}

.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: #0044cc;
    color: white;
    padding: 10px 0;
    position: fixed;
    bottom: 0;
    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 page – keep layout inside viewport and hide separators */
body.about_body {
    overflow-x: hidden !important;
}
.about_body #break { 
    display: none !important; 
}

/* Fix invalid/typo rules copied in */
.about_body {                               /* was `about_body` (invalid selector) */
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #DAD9D9 !important;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
#etownECS { padding-top: 10px; }            /* was 10x */
.ourVision-textContainer { padding: 0; }    /* was 'none' */
.foundingTeam-textContainer { padding: 0; } /* was 'none' */
.etownECS-textContainer { padding: 0; }     /* was 'none' */

/* About containers: remove transforms that shoved them right */
.ourVision-textContainer, .foundingTeam-textContainer, .etownECS-textContainer {
    margin: 0 auto !important;
    text-align: center !important;
    display: block !important;
    max-width: 1000px !important;
    width: 90% !important;
    min-height: 330px !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    position: static !important;     /* remove left/transform */
    left: auto !important;
    transform: none !important;
}

/* JayHunt styles – scope to JayHunt only and remove hard left offset */
.jayhunt_body section {
    background-color: #ffffff;
    margin: 20px auto;            /* center instead of absolute offset */
    padding: 20px;
    border-radius: 8px;
    width: 60%;
    max-width: 1000px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    position: static;             /* was relative + left:275px */
    height: 300px;
    overflow-y: auto;
}

/* About (desktop): blue frame + 5px inset grey */
.about_body #ourVision,
.about_body #foundingTeam,
.about_body #etownECS {
  padding: 5px !important;           /* 5px gap around the grey box */
  height: auto !important;           /* undo any global fixed heights */
  overflow: visible !important;      /* no scrollbars on the blue section */
  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 content area */
  max-width: 100% !important;
  margin: 0 !important;
  overflow: visible !important;      /* no inner scroll */
  position: static !important;
  left: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
}