@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap'); /* Import a pixelated font; ensure internet connection or use a local file */

body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100%;
    background-color: #282c34; /* Dark background color; change as needed */
    color: #ffffff; /* Light text color; change as needed */
    font-family: 'Press Start 2P', cursive; /* Pixelated font; replace with your chosen font if different */
}

#game-container {
    position: fixed; /* or absolute, depending on your requirement */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* centering the element */
    text-align: center;
    width: 100%;
}

.word {
    display: inline-block;
    padding: 5px;
    font-size: 24px; /* Adjust font size as needed */
    color: #cccccc; /* Non-player word color; change as needed */
}

/* Player word styling; blue color as an example */
.word.player {
    color: #3498db; /* Player word color; change as needed */
}

/* Alternatively, you may choose to style the player word using inline styles in the JavaScript as previously demonstrated */

#level-indicator {
    position: fixed;
    top:  15%;
    text-align: center;
    font-size: 32px;
    color: #ffffff;
    margin-bottom: 20px;
}

#win-indicator {
    position: fixed;
    top:  26%;
    text-align: center;
    font-size: 24px;
    color: #3498db;
    margin-bottom: 20px;
    z-index: 1000;
}

#win-indicator p {
    font-size: 16px;
    color: #cccccc;
}

#loss-indicator {
    position: fixed;
    top:  26%;
    text-align: center;
    font-size: 32px;
    color: indianred;
    margin-bottom: 20px;
    z-index: 1000;
}

#loss-indicator p {
    font-size: 16px;
    color: #cccccc;
}



#loss-indicator, #win-indicator, #level-select-container, #game-container{
    display: none; /* Hide other game elements initially */
}

#level-select-container {
    display: block; /* Initially hidden; display it when needed */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black background */
    overflow-y: scroll; /* Enable vertical scrolling */
}

#level-select-title {
    color: #ffffff;
    font-size: 4vh; /* Adjust as needed */
    text-align: center;
    margin: 2vh 0; /* Adjust as needed */
}

#level-buttons-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15vh, 1fr)); /* Creates a responsive grid of buttons */
    gap: 1vh; /* Adjust as needed */
}

.level-button {
    width: 15vh; /* Adjust as needed */
    height: 15vh; /* Adjust as needed */
    background-color: #3498db; /* Adjust as needed */
     font-family: 'Press Start 2P', cursive;
    color: #ffffff;
    border: none;
    font-size: 3vh; /* Adjust as needed */
    cursor: pointer;
}

.level-button:hover {
    background-color: #2980b9; /* Adjust as needed */
}



#start-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #282c34; /* Dark background color; change as needed */
  color: #ffffff; /* White text color */
  display: flex;
  flex-direction: column; /* Add this line to arrange child elements in a column */
  align-items: center;
  justify-content: center;
  font-size: 2em; /* Adjust font size as needed */
  cursor: pointer; /* Pointer cursor on hover */
  z-index: 1000; /* High z-index to overlay on top of other elements */
}

#start-screen div, #start-screen p {
    margin: 0.5em 0; /* Add some vertical margin between the elements */
    font-size: 1em; /* Adjust font size as needed */
}



.control-button {
    position: fixed;
    padding: 0; /* Adjust the padding as necessary */
    margin:  0;
    color: #ffffff; /*#cccccc;*/
    border: none;
    background-color: none; /*rgba(0, 0, 0, 0.5);*/
    box-sizing: border-box;
    cursor: pointer;
    text-align: center;
    font-size: 1.4em;
}

#menu-bar {
    position: fixed;
    top: 0;
    left: 0;
    padding: 0;
    width: 100vw;
    display: flex; /* Use flexbox to lay out the buttons in a row */
    flex-direction: row;
    justify-content: left;
}

#restart-button{
    position: static;
     color: #cccccc;
}

#menu-button{
    position: static;
}

#next-level-button{
    color: #ffffff;
    bottom: max(10%,30px);
    left: 50%;
    transform: translate(-50%, -50%); /* centering the element */
}

#restart-button2{
    color: #cccccc;
    bottom: max(10%,30px);
    left: 50%;
    transform: translate(-50%, -50%); /* centering the element */
}