body {
    font-family: 'Press Start 2P', cursive;
    color: #FFD700;
    overflow-y: auto;
}

.profile-picture {
    width: 300px; /* Adjust as needed */
    height: 300px; /* Adjust as needed */
    border: 4px solid white;
    border-radius: 50%; /* Makes the image round */
    margin-top: 40px; /* Adjust as needed to push the image down */
}



padding-top: 48px; /* Adjust according to the height of your header */

h1,
h2,
h3,
p,
a {
    text-shadow: 1px 1px #000;
}

.mt-4 {
    margin-top: 2rem;  /* You can adjust this value if necessary */
}



/* Adjust the styles for larger screens */
@media (min-width: 768px) {
    #mobileNav {
        position: static;
        transform: translateX(0);
        width: auto; 
        /* Add additional styles as needed to fit your design */
    }
}




/* Keep chatbot button always at the top */
#toggleChatButton {
    position: fixed;
    top: 75%; /* Adjust the initial position as needed */
    right: 0;
    transform: translateY(-50%);
    padding: 10px;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 0 5px 5px 0; /* Rounded corners on the left */
    cursor: pointer;
}

#toggleChatButton:hover {
    background-color: red;
    color: white;
}

/* Style for smaller screens, e.g., less than 600px wide */
@media (max-width: 600px) {
    #toggleChatButton {
        top: auto;
        bottom: 25px;  /* Adjust this value based on the height of your footer */
        left: 0;
        right: 0;
        margin: auto;
        width: max-content;  /* Adjust the width automatically based on content */
        transform: none;  /* Remove the previous transform */
        border-radius: 5px 5px 0 0;  /* Adjust the border-radius for aesthetics */
    }
}








.chat-widget {
    width: 300px;
    height: 400px;
    border: 1px solid #ccc;
    border-radius: 0 5px 5px 0; /* Rounded corners on the left */
    font-family: 'Press Start 2P', cursive;
    font-size: xx-small;
    position: fixed;
    top: 50%;
    right: -300px; /* Initially hidden on the right */
    transform: translateY(-50%);
    transition: right 0.3s; /* Smooth slide effect */
    display: flex;
    flex-direction: column;
    background-color: #333;
    overflow-y: auto; /* Ensures chat content doesn't overflow the chat box */
    padding: 10px; /* Padding inside the chat box */
}

#chatButton {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
}


.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#closeChatButton {
    background: none;
    border: none;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
    line-height: 1;
    padding: 0 10px;
}

#closeChatButton:hover {
    background-color: red;
    color: white; /* Change text color to ensure it's visible on a red background */
}

#closeChatButton:focus {
    outline: none;
}

.chat-body {
    flex: 1;
    padding: 10px;
    overflow-y: auto;
    max-height: 300px;
}

.chat-footer {
    padding: 10px;
    display: flex;
    align-items: center;
}

.chat-footer input {
    flex: 1;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.chat-footer button {
    margin-left: 10px;
    padding: 5px 10px;
}

.message {
    margin-bottom: 10px;
}

.response-button {
    display: block;
    margin: 5px 0;
    background-color: #000;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    text-align: left;
}

.bot-message {
    color: green;
    margin-bottom: 10px;
}

button:hover {
    background-color: red;
    color: white; /* This changes the text color to white when hovered */
}


.hidden {
    display: none !important;  /* Added !important to ensure this rule takes precedence */
}

#typingIndicator {
    position: absolute;
    bottom: 60px; /* Adjust this value to position the typing indicator above the chat input */
    left: 10px; /* Adjust this value to position the typing indicator on the left side */
    display: flex;
    justify-content: center;
    align-items: center;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: grey;
    margin: 0 5px;
    animation: bounce 1s infinite;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}


#mario-container {
    position: relative;
    width: 100%; /* Or any specific width */
    height: 150px; /* Adjust as needed */
    border: 0px solid black; /* To visualize the container */
}


#mario {
    position: absolute;
    bottom: 0;
    width: 25px; /* Adjust as needed */
    height: 50px; /* Adjust as needed */
    object-fit: cover; /* This property is used to specify how an <img> or <video> should be resized to fit its container */
}

#flagpole {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 25px; /* Adjust as needed */
    height: 150px; /* Adjust as needed */
    object-fit: cover;
}


.background {
    background-image: url('./images/overworld_bg.png');
    background-size: 100% 100%; /* This will stretch the image to fill the div */
    background-position: center; 
    background-repeat: no-repeat;
}


.hidden {
    display: none;
}

#highscore {
    font-size: 3em;
    color: white;
    z-index: 1000;
    margin: 0;
    padding: 0;
}




#game-container {
  position: relative;
  width: 100%;
  height: 75px;
  border: 0px solid black;
  
}

#pacman, #ghost {
  position: absolute;
  bottom: 0;
}

#pacman {
  width: 50px;
  height: auto;
  animation: movePacman 5s linear infinite paused; /* updated */
}

#ghost {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  animation: moveGhost 4s linear infinite paused; /* updated */
}

@keyframes movePacman {
  0% { left: 0; }
  100% { left: 95%; }
}

@keyframes moveGhost {
  0% { left: 0; }
  100% { left: 95%; }
}


.dot {
  position: absolute;
  bottom: 0;
  width: 10px;
  height: 10px;
  background-color: yellow;
  border-radius: 50%;
}


#level-complete {
  display: none;
  position: absolute;
  top: 45%;
  left: 75%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color: white;
  background-color: black;
  padding: 20px;
  border-radius: 5px;
}


.tetris-board {
    width: 300px;
    height: 600px;
    position: relative;
    border: 1px solid black;
    display: flex;
    flex-wrap: wrap;
}

.block {
    box-sizing: border-box;
}


#meda-man-container {
    position: relative;
    width: 98%;
    height: 150px;
}

#meda-man {
    position: absolute;
    bottom: 0;
    width: auto;  /* Set width to auto */
    height: 75px; /* Specific height value to make all images of the same height */
    object-fit: cover; 
}



        #portfolio-container {
            background-image: url('./images/megaMAN444.jpg'); /* Replace with your image URL */
            background-size: 100% 100%; /* This will stretch the image to fill the container */
            background-position: center;
            background-repeat: no-repeat;
        }



   .card-container {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr 1fr; /* Set to 2 columns by default */
    margin: auto;
  }

  @media (max-width: 640px) {
    .card-container {
      grid-template-columns: 1fr; /* Changes to 1 column on small screens */
    }
  }     

@media (max-width: 768px) {
    .lightbox-content {
        width: 90%; /* Adjust the width to fit smaller screens */
        margin: 10px; /* Adjust margin for smaller screens */
        padding: 10px; /* Adjust padding for smaller screens */
    }
}



.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.5); /* Semi-transparent overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Ensures it's above other content */
}


.lightbox-content {
    max-width: 90vw; /* Use viewport width to limit popup width */
    max-height: 80vh; /* Use viewport height to limit popup height */
    overflow-y: auto; /* Allow scrolling within the popup if content exceeds its height */
    padding: 20px; /* Adjust padding as necessary */
    background-color: #fff; /* Background color */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Optional: adds shadow for better visibility */
    position: relative;
}


.hidden {
    display: none;
}