body {
    font-family: 'Press Start 2P', cursive;
    background-color: #908d8d;
    color: #333;
    overflow: hidden;
  } 

.game-container {
    background-image: url('assets/Room.png');
    image-rendering: pixelated; /* Turn off anti-aliasing for the background image */
    background-size: 30%; /* Scale the image down to fit */
    transition: background-position 0.1s ease; /* Smooth transition for background movement */

  
    grid-template-areas:
      "header header header"
      "left feed orders"
      "footer footer footer";
  
    grid-template-columns: 20% 50% 30%;
    grid-template-rows: auto 1fr auto;

  }

  header {
    grid-area: header;
    background-color: #ccc;
    padding: 10px;
    text-align: center;
}

left {
    grid-area: left;
    padding: 10px;
}

feed {
    grid-area: feed;
    padding: 10px;
}

orders {
    grid-area: orders;
    padding: 10px;
}

footer {
    grid-area: footer;
    background-color: #ccc;
    padding: 10px;
    text-align: center;
}

.menu-header{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;

    background-image: url('assets/Menu_Frame.png');
    background-size: cover;
    background-position: center;
    image-rendering: pixelated; /* Turn off anti-aliasing for the background image */
    background-position-x: -20px;
}

.menu {
    background-color: #000000;
    height: 100vh;
    align-items: center;
}

.menu button {
    font-family: 'Press Start 2P', cursive; /* Apply the pixel art font */
    font-size: 32px; /* Adjust font size for better readability */
    padding: 10px 20px;
    background-color: #444;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: 4px 4px 1px #d1d1d1;
    height: 100px;
}

.menu button:hover {
    background-color: #555;
    box-shadow: 1px 1px 0px #111;
}

#screen-overlay, #results-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    color: white;
    display: flex;
    flex-direction: column;
    pointer-events: auto;
    visibility: hidden;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 2s ease; /* Smooth fade-out */
}

#results-screen {
    padding: 20px;
}

.boss-talking {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
}

.boss-image {
    width: 100px;
    height: 100px;
}

.transition-text {
    padding: 20px;
    font-family: 'Press Start 2P', cursive;
    font-size: 2rem;
    color: white;
    text-shadow: 0 0 5px white, 0 0 10px white, 0 0 30px white;
    animation: glow 1.5s infinite alternate; /* Glowing effect */
}

/** levels Styles **/
/*******************/
/*******************/

.post-board {
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border: 4px solid #000000;
    border-radius: 2px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-height: 80vh; /* Limit the height to 80% of the viewport */
    overflow-y: auto; /* Enable vertical scrolling */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    scrollbar-width: thin; /* For modern browsers */
    scrollbar-color: #ccc #f9f9f9; /* Custom scrollbar colors */
}

  /* Custom scrollbar styling for WebKit browsers */
 .post-board::-webkit-scrollbar {
    width: 8px;
}

.post-board::-webkit-scrollbar-thumb {
    border-radius: 4px;
}

.post-board::-webkit-scrollbar-thumb:hover {
    background-color: #aaa;
}

.post-board::-webkit-scrollbar-track {
    background-color: #f9f9f9;
}

feed > .post-board {
    min-height: 454.8px;
}

  /* The rest of your existing CSS for .myspace-header, .post, etc. remains the same */
.myspace-header {
    font-family: 'Press Start 2P', cursive, sans-serif;
    font-size: 24px;
    color: #333;
    text-align: center;
    margin-bottom: 20px;
}
  
.post-row {
    display: flex;
    flex-direction: row; 
    flex-wrap:wrap;
    width:100%
}

.post-column {
    display:flex;
    flex-direction: column;
    flex-basis: 100%;
    flex:1;
}

.post-column2 {
    display:flex;
    flex-direction: column;
    flex-basis: 100%;
    flex:2;
}

.post {
    background-color: #f1e1a6;
    border: 4px solid #f5a627;
    border-radius: 4px;
    margin-bottom: 20px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
}

.post:hover {
    background-color: #b3e0f5;
}

  /* Post header styling */
.post-header {
   /* display: flex;*/
    align-items: center; 
    margin-bottom: 10px; 
    gap: 10px; 
    border-right: 2px solid white;
    height: 100%;
    width: 100px;;
    box-sizing: border-box;
}


.post-image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #4979ea;
    image-rendering: pixelated;
}

.content-image {
    width: 200px;
    height: 200px;
    border: 2px solid #000000;
    image-rendering: pixelated;
}
  
.post-content {
    flex-grow: 1; /* Allow the content to take up remaining space */
    font-family: 'Press Start 2P', sans-serif;
    font-size: 14px;
    color: #333;
    line-height: 1.5;
    word-wrap: break-word; /* Ensure long words break to the next line */
    margin-bottom: 10px;
    padding-left: 15px; 
}
  
.post-author {
    font-size: 12px;
    color: #012036;
    text-align: left;
    overflow-wrap: break-word;
}
  
.post-text {
    text-align: left;
    font-size: 12px;
    color: #333;
}

.post-content img {
    max-width: 100%; /* Ensure images fit within the content area */
    height: auto; /* Maintain aspect ratio */
    margin-top: 10px; /* Add spacing above images */
}

.button-container {
    display: flex;
    justify-content: space-between; /* Space between buttons */
    gap: 10px; /* Add spacing between buttons */
    margin-top: auto; /* Add some space above the buttons */
}

.button {
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    padding: 12px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-transform: uppercase;
}

.accept-button {
    background-color: #4CAF50; /* Green */
    color: white;
}

.deny-button {
    background-color: #f44336; /* Red */
    color: white;
}

.accept-button:hover {
    background-color: #45a049;
}

.deny-button:hover {
    background-color: #d32f2f;
}

.finish-day-button {
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-family: 'Press Start 2P', cursive;
    font-size: 14px;
    padding: 20px;
    background-color: #444;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: 2px 2px 0px #222;
}

.finish-day-button:hover {
    background-color: #555;
    box-shadow: 1px 1px 0px #111;
}

#game-over-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    color: white;
    display: none; /* Hidden by default */
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 10000; /* Ensure it appears on top of other elements */
}

.game-over-text {
    font-size: 2rem;
    margin-bottom: 20px;
}

.restart-button {
    font-family: 'Press Start 2P', cursive;
    font-size: 1rem;
    padding: 10px 20px;
    background-color: #36b2eb;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.restart-button:hover {
    background-color: #1e90ff;
}

.timer {
    position: fixed; /* Fix the timer to the top-left corner */
    top: 10px;
    left: 10px;
    font-family: 'Press Start 2P', sans-serif;
    font-size: 18px;
    color: white;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
    padding: 5px 10px;
    border-radius: 5px;
    z-index: 1000; /* Ensure it appears above other elements */
}

/* Introductory Screen Styles */
.first-page-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: black;
    font-family: 'Press Start 2P', cursive;
    text-align: center;
}

.first-page-title {
    font-size: 2.5rem;
    margin-bottom: 20px;
    text-shadow: 0 0 5px white, 0 0 10px white, 0 0 20px white;
}

.first-page-text {
    font-size: 1.2rem;
    margin-bottom: 30px;
    max-width: 600px;
    line-height: 1.5;
    color: white;
}

.start-button {
    font-family: 'Press Start 2P', cursive;
    font-size: 1rem;
    padding: 10px 20px;
    background-color: #36b2eb;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.start-button:hover {
    background-color: #1e90ff;
}

#continue-button {
    margin: 20px;
    transition: opacity 0.5s ease;
}

/* End Page Styles */
.end-page-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: black;
    font-family: 'Press Start 2P', cursive;
    text-align: center;
}

.end-page-title {
    font-size: 2.5rem;
    margin-bottom: 20px;
    text-shadow: 0 0 5px white, 0 0 10px white, 0 0 20px white;
}

.end-page-text {
    font-size: 1.2rem;
    margin-bottom: 30px;
    max-width: 600px;
    line-height: 1.5;
    color: white;
}

.end-button {
    font-family: 'Press Start 2P', cursive;
    font-size: 1rem;
    padding: 10px 20px;
    background-color: #36b2eb;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.end-button:hover {
    background-color: #1e90ff;
}

/* Pixart Page Styles */
.pixart-page-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: black;
    text-align: center;
}

.pixart-image {
    width: 87%;
    height: auto;
    margin-bottom: 20px;
    image-rendering: pixelated;
}

.pixart-button {
    font-family: 'Press Start 2P', cursive;
    font-size: 1rem;
    padding: 10px 20px;
    background-color: #36b2eb;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.pixart-button:hover {
    background-color: #1e90ff;
}

/* Help Sidebar */
.help-sidebar {
    position: fixed;
    top: 10px;
    right: -400px; /* Hidden by default */
    width: 300px;
    height: 300px;
    background-color: #333;
    color: #fff;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    overflow-y: auto; /* Make it scrollable */
    transition: right 0.3s ease; /* Smooth slide-in effect */
    z-index: 1000;
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    margin-bottom: 10px;
}

/* Help Button */
.help-button {
    position: fixed;
    top: 10px;
    right: 10px;
    background-color: #444;
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    z-index: 1100;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.8rem;
    transition: background-color 0.3s ease;
}

.help-button:hover {
    background-color: #555;
}

.finish-day-button.glow-effect {
    animation: orange-glow 1.5s infinite alternate;
    box-shadow: 0 0 20px orange, 0 0 40px orange, 0 0 60px orange;
    border-color: orange;
}

@keyframes orange-glow {
    from {
        box-shadow: 0 0 10px orange, 0 0 20px orange, 0 0 30px orange;
    }
    to {
        box-shadow: 0 0 40px orange, 0 0 60px orange, 0 0 80px orange;
    }
}

@keyframes yellow-glow {
    from {
        box-shadow: 0 0 10px yellow, 0 0 20px yellow, 0 0 30px yellow;
    }
    to {
        box-shadow: 0 0 20px yellow, 0 0 40px yellow, 0 0 60px yellow;
    }
}