/* General styles */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f7f7f7;
  display: flex;
  flex-direction: column; /* Ensure children stack vertically */
  align-items: center;    /* Centers vertically */
  overflow: auto;
  padding-top: 65px;
  padding-bottom: 50px;
}


/* Navbar styling */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 18px;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  z-index: 1000;
  width: 100vw;
  overflow-x: hidden;
}

.navbar-links {
  display: flex;
  gap: 20px;
}

.navbar a {
  color: #151515;
  text-decoration: none;
  font-size: 25px;
  font-weight: bold;
  transition: transform 0.6s ease;
}

.navbar a:hover {
  color: #007bff;
  transform: scale(0.9, 1.2);
}

.burger-menu {
  display: none;
  font-size: 24px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .navbar {
      flex-direction: column;
      align-items: flex-start;
      background-color: transparent;
  }

  .burger-menu {
      display: block;
      margin-bottom: 8px;
      background-color: #9aff00;
      padding-left: 6px;
      padding-right: 6px;
      padding-bottom: 3px;
      border-radius: 8px;
  }

  .navbar-links {
      display: none;
      flex-direction: column;
      gap: 10px;
      background-color: rgba(0, 229, 255, 1);
      padding: 10px;
      border-radius: 8px;
  }

  .navbar-links.active {
      display: flex;
  }

  .navbar a {
      font-size: 24px;
  }
}
  
  .menu-text {
    display: none; /* Hide by default */
}

@media (max-width: 768px) {

    .menu-text {
        display: inline-block; /* Show the menu text in mobile */
        position: absolute; /* Position it independently */
        left: 60px; /* Center horizontally */
        font-size: 25px; /* Adjust font size for mobile */
        font-weight: bold;
        color: #151515; /* Match the navbar text color */
        background-color: #f7f7f7;
        padding: 3px;
        border-radius: 10px;
        z-index: -1;
    }

}

/* Styling for title image */
.titleimage {
  margin-top: 80px; /* Spacing between title and slider */
  text-align: center; /* Center align the title */
}

.item-title {
  width: 90%; /* Ensures the image is responsive */
  max-width: 800px; /* Maintain aspect ratio */
}

.main-paragraph {
  text-align: left;
  margin-top: 50px;
  margin-bottom: 50px;
  width: 90%;
}

.main-paragraph p {
  font-size: 16px; /* Adjust the font size */
  line-height: 1.5; /* Improves readability */
  color: #151515; /* Match the navbar text color */
  max-width: 800px; /* Limits the paragraph width for better legibility */
  margin: 0 auto; /* Centers the paragraph */
}

.mainimage {
  text-align: left; /* Center align the title */
  width: 90%;
  max-width: 800px; /* Matches the max width of the image */
  position: relative;
  margin-bottom: 30px;
}

.mainimage-content {
  width: 100%; /* Ensures the image spans the full width of the container */
  max-width: 800px; /* Prevents the image from exceeding 800px */
  height: auto;
  margin-top: 20px;
}

.mainimage-header {
  font-weight: bold;
  font-size: 20px; /* Adjust the font size */
  margin-bottom: 10px; /* Adds space below the header */
}

.mainimage-paragraph {
  font-size: 16px; /* Adjust the font size */
  line-height: 1.5; /* Improves readability */
  color: #151515; /* Match the navbar text color */
  max-width: 800px; /* Limits the paragraph width for better legibility */
  margin: 0 auto; /* Centers the paragraph */
}


#fuck:hover {
  content: url('projects/Megaworld/fuckyourviolence.gif'); 
}

#fuck:active {
  content: url('projects/Megaworld/fuckyourviolence.gif'); 
}

#taekken:hover {
  content: url('projects/Megaworld/taekken.gif') ; 
}

#taekken:active {
  content: url('projects/Megaworld/taekken.gif'); 
}

.image-description {
  text-align: right; /* Aligns the text to the right */
  margin-top: 5px; /* Adds space between the image and description */
  font-size: 14px;
  color: #555; /* Optional: Changes the text color */
}



/* Adjust for mobile screens */
@media (max-width: 768px) {
  .titleimage {
    margin-top: 10px; /* Spacing between title and slider */
  }

  .main-paragraph {
    margin: 10px 0; /* Adds spacing above and below the paragraph */
  }

  .main-paragraph p {
    font-size: 14px; /* Adjust the font size */
  }

  .mainimage-paragraph {
    font-size: 14px; /* Adjust the font size */
  }
}