* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

header, footer {
    margin: 0 auto;
    padding: 20px;
    max-width: 960px;
background-color:#663300;
color:#FFFFFF;
}
main {
    margin: 0 auto;
    padding: 20px;
    max-width: 960px;
color:#663300;
}

header h1 {
    text-align: center;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 10px;
}

nav ul li a {
    text-decoration: none;
    color: #fff;
}

.game {
background-image: url('../pix/green.png');
    margin: 20px 0;
    padding: 20px;
    display: flex;
    align-items: flex-start; /* Adjust alignment for better visual */

}

.game-image {
    flex: 0 0 150px; /* Fixed width for the image */
    margin-right: 20px;
}

.game-image img {
    width: 100%;
    height: auto;
display: block;
}


.game-content {
    display: flex;
    flex-wrap: nowrap;   /* keep them on the same line */
    gap: 20px;           /* space between columns */
}

.column {
    flex: 0 0 300px;     /* fixed width, no wrapping */
    min-width: 0;        /* override previous rule */
    margin-left: 0;
}

/* Responsive */
@media (max-width: 768px) {
    nav ul li {
        display: block;
        margin: 10px 0;
    }

    .game {
        flex-direction: column;
    }

    .game-image {
        margin-bottom: 20px;
    }
    .game-content {
        flex-direction: column;
    }

    .column {
        min-width: 100%; /* Make each column full width, stacking them */
    }

}


/* ABOVE IS THE GENERAL PAGE CSS - BELOW INDIVIDUAL GAMES */


/* WORDS OF FORTUNE */


body button {
  font-family: Helvetica, Verdana, sans-serif;
  font-weight: 100;
  font-size:22px;

}

body {
font-family: Helvetica, Verdana, sans-serif;
font-size:18px;
color: #663300;

}


.alpha {
  font-family: Helvetica, Verdana, sans-serif;
  font-weight: bold;
  font-size:50px;
background-color:white;
color: #663300;
  border: 1px solid #663300;
  min-width:80px;
margin-bottom:5px;
margin-top:5px;
font-family: Tahoma, 'Times New Roman', serif;
}

.score {
  font-family: Helvetica, Verdana, sans-serif;
  font-weight: bold;
  font-size:45px;
  width:100px;
border:0;
text-align:center;
  border: 1px solid #663300;
  border-radius: 5px;
font-family: Tahoma, 'Times New Roman', serif;
color: #663300;
//   background-image: url('../pix/green.png');
background-color:white;
  box-shadow: 0 3px 11px 0 rgba(102, 51, 0, 0.7);

}

.letter {
  font-family: Helvetica, Verdana, sans-serif;
  display: inline-block;
  width: 63px;
  height: 80px;
  box-shadow: 0 6px 22px 0 rgba(102, 51, 0, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 10px;
  border: 1px solid #663300;
  text-align: center;
  font-size: 65px;
  line-height: 70px;
  color: transparent;
  margin: 5px;
  padding-top:9px;
  background: #663300; 
  font-weight: bold;

  transition: background-color 0.4s ease-in-out;
}

.letter.revealed {
  display: inline-block;
  width: 63px;
  height: 80px;
  box-shadow: 0 6px 22px 0 rgba(102, 51, 0, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 10px;
  border: 1px solid #663300;
  text-align: center;
  font-size: 65px;
  line-height: 70px;
  margin: 5px;
  padding-top:9px;
  background-color: white;
  color: #663300;
  font-family: Helvetica, Verdana, sans-serif;
  font-weight: bold;
  text-shadow: 2px 2px 2px #FFD0A1;
}

.space {
  display: inline-block;
  width: 63px;
  height: 80px;
  border: 1px transparent #663300;
  text-align: center;
  font-size: 65px;
  line-height: 70px;
  margin: 5px;
  padding-top:12px;
  font-family: Helvetica, Verdana, sans-serif;
  font-weight: bold;
  text-shadow: 2px 2px 2px #FFD0A1;
  color: transparent;
background: transparent;
}

table {
  border:1px solid #663300;
  border-radius: 10px;
  margin:15px;
  padding: 25px;
}

hr {
  margin:2px;
  padding:2 px;
}

.cat {
  border:1px solid #663300;
  border-radius: 5px;
  margin:10px;
  background-color: white;
  color: #663300;
font-family: Tahoma, 'Times New Roman', serif;
  font-size: 45px;
text-align:center;
}

a {
text-decoration:none;
color: #663300;
}

.detail_text {
width:225px;
font-size:16pt;
}

.menu_games {
font-size:15pt;
  border:1px solid #663300;
  border-radius: 5px;
  margin:6px;
  background-color: white;
  padding:6px;
width:300px;
text-align:center;
height:38px;
color: #663300;
}