@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

html {
  height: 100%;
}

body {
  display: flex; /* Flex container */
  flex-direction: column; /* Stack children vertically */
  min-height: 100vh; /* Use viewport height instead of 100% */
  margin: 0; /* No margin */
	font-family: 'Roboto', sans-serif;
    color: #000; /* Text color is black */
    background-color: #fff; /* Background is white */
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box; /* Ensures padding doesn't affect the total width or height */
}

header {
    background-color: #000; /* Black background */
    color: #fff; /* White text */
}

section {
  padding: 2em; /* Padding around each section for readability */
}



.content-wrapper {
  flex-grow: 1; /* Allow content to expand and push the footer down */
  /* Continue to use box-sizing: border-box if you have padding or borders */
  box-sizing: border-box;
}

footer {
  width: 100%;
  /* Ensure the footer is not too big or too small */
  height: auto; /* Let it size to content or set a specific height */
  background-color: #000;
  color: #fff;
  text-align: center;
  padding: 1em 0;
  /* Remove absolute positioning and let flexbox control the layout */
}

@media (max-width: 768px) {
  /* Responsive styles for smaller devices */
  footer {
    padding: 0.5em 0; /* Less padding on small devices */
  }
}



.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em;
}



.nav-links {
    list-style: none;
    display: flex;
    gap: 1em; /* Space between navigation links */
}

.nav-links a {
  color: #fff;
  text-decoration: none;
  padding: 0.5em 1em;
  transition: background-color 0.3s;
  text-align: center; /* Center-align text */
  display: block; /* Make it block to fill the container */
  width: 100%; /* Full width */
}

.nav-links li {
  /* Ensure this is applying as well */
  list-style: none;
}

.nav-links a:hover {
    background-color: #333; /* Slightly lighter black on hover */
}

.nav-item.active a {
  /* Same styles as .nav-links a */
  color: #fff; /* Example active color - adjust as needed */
  text-align: center; /* Ensuring text is centered */
  /* ...rest of your styles... */
}



@media (max-width: 768px) {
  .navbar {
      flex-direction: column;
      justify-content: center;
      text-align: center;
  }

  .nav-links, .nav-links .nav-item, .nav-links .nav-item.active {
      width: 100%;
      justify-content: center;
      flex-direction: column;
  }

  .nav-links a, .nav-links .nav-item a, .nav-links .nav-item.active a {
      width: 100%;
      text-align: center;
  }
}




.title {
    font-size: 2rem;
    margin-bottom: 1rem; /* Space after title */
}

#landing-content, #instructions-content, #roles-content, #clues-inspector-content {
    text-align: left;
}

p, h1, h3, h4, i {
    margin-bottom: 1rem; /* Consistent margin for all texts */
    margin-left: 5%;
    margin-right: 5%;
}

a{
  color: #ffffff
}

h3::before {
  content: "";      /* Insert an empty content */
  display: block;   /* Make it a block element to allow margins */
  margin-top: 20px; /* Adjust the space you want before the h3 */
  height: 0;        /* Make its height to 0 so it doesn't add extra visible space */
}


.center {
  display: block; /* Making it a block-level element */
  width: fit-content; /* Fit the content's width */
  margin: 0 auto; /* Auto margins for horizontal centering */
  /* Other styles you might need */
}


#relations {
  margin-left: 5%;
  margin-right: 5%;
  column-count: 2; /* Specifies number of columns */
  column-gap: 40px; /* Adjusts the gap between columns */
}

@media (max-width: 768px) {
  #relations {
    column-count: 1; /* On smaller screens, revert back to single column for readability */
  }
}

.text-image-container {
  display: flex; /* Use flexbox for layout */
  align-items: center; /* Align items vertically */
  justify-content: space-between; /* Space between the text and the image */
  margin-left: 1.5%;
  margin-right: 5%;
}

.text-container {
  flex: 1; /* Allow text container to take up remaining space */
  padding-right: 20px; /* Space between text and image */
}

#picture {
  flex: 0 0 auto; /* Don't grow or shrink, but allow basis to be auto */
  width: auto; /* Width of the image container should fit content */
  max-width: 400px; /* Adjust based on your design needs */
  height: auto; /* Maintain aspect ratio */
}

#picture img {
  width: 100%; /* Make the image responsive within the container */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Removes bottom space under the image */
}

@media (max-width: 768px) {
  .text-image-container {
    flex-direction: column; /* Stack children vertically on smaller screens */
  }

  .text-container {
    padding-right: 0;
    margin-top: 10%;
  }

  #picture {
    width: 100%; /* Image takes full width on smaller screens */
    max-width: none; /* Override any max-width set earlier */
  }
}

.picture-container {
  text-align: center;
}

.picture-container img {
  width: 100%; 
  height: auto; 
  max-width: 100%;
  display: block; 
  margin: 0 auto; 
}


#picture-mobile {
  display: none; /* Hide on larger screens */
}

/* On smaller screens, hide desktop image and show mobile */
@media (max-width: 768px) {
  #picture {
    display: none;
  }

  #picture-mobile {
    display: block; /* Show on smaller screens */
  }
}




/* Audio Player Styles */
#audio-player-container {
  background-color: #f0f0f0; /* Light grey background */
  border-radius: 10px; /* Rounded corners */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* subtle shadow for depth */
  padding: 20px;
  width: 100%; /* Full width */
  max-width: 600px; /* Maximum width */
  position: fixed; /* Fixed position to make it float and stick */
  bottom: 10%; /* 5% from the bottom */
  left: 50%; /* Centering from the left */
  transform: translateX(-50%); /* Centering the container */
  z-index: 1000; /* Ensure it's above other items */
}

@media (max-width: 768px) {
  #audio-player-container {
    background-color: #f0f0f0; /* Light grey background */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* subtle shadow for depth */
    padding: 20px;
    width: 100%; /* Full width */
    max-width: 600px; /* Maximum width */
    position: fixed; /* Fixed position to make it float and stick */
    bottom: 0%; /* 5% from the bottom */
    left: 50%; /* Centering from the left */
    transform: translateX(-50%); /* Centering the container */
    z-index: 1000; /* Ensure it's above other items */
  }
}

.audio-player {
  text-align: center;
}

.controls-and-volume {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px; /* space between controls and volume slider */
  margin: 10px 0; /* Margin around controls for separation */
}

.controls button {
  background-color: #333; /* Dark grey background */
  color: white;
  border: none;
  padding: 8px 15px; /* Comfortable padding */
  border-radius: 5px; /* Rounded corners */
  cursor: pointer; /* Pointer to indicate clickable */
  transition: background-color 0.3s;
}

.controls button:hover {
  background-color: #555; /* Lighten on hover */
}

#progressContainer {
  background-color: #ddd; /* Light grey */
  border-radius: 5px;
  height: 5px;
  width: 100%;
  cursor: pointer;
}

#progressBar {
  background-color: #333; /* Dark grey */
  width: 0%; /* Will be updated with JS */
  height: 100%;
  border-radius: 5px;
}

#volume-slider {
  width: 100px; /* Fixed width for consistency */
}


/* General styling for the song list */
#songList {
  display: grid; /* Enables grid layout */
  grid-template-columns: repeat(3, 1fr);
  list-style-type: none; /* Removes default list bullets */
  padding: 0; /* Removes default padding */
  margin: 1em 0; /* Adds some margin around the list */
  background-color: #ffffff; /* Black background for the list */
  border-radius: 5px; /* Rounded corners for the list */
  max-width: 90%; /* Adjust width to suit your layout, or make it responsive */
  margin: 0 auto; /* Center the list */
}

/* Styling individual song items */
#songList li {
  color: #000000; /* White text color */
  padding: 10px 15px; /* Padding inside each list item */
  border-bottom: 1px solid #333; /* Slight border between items for separation */
  cursor: pointer; /* Indicates the items are clickable */
  transition: background-color 0.3s; /* Smooth transition for hover effect */
}

/* Remove border from the last item to maintain clean look */


/* Hover effect for song items */
#songList li:hover {
  background-color: #e70000; /* Slightly lighter black on hover */
}

/* Active or Currently playing song styling */
#songList li.active, #songList li[style*="background-color: black;"] {
  background-color: #ffffff00; /* Different shade to indicate active or playing song */
  color: #e70000; /* Slightly off-white color for better visibility */
}

/* Responsive considerations */
@media (max-width: 768px) {
  #songList {
      width: 90%; /* Make the list wider on smaller screens */
      
  }
}




#noteArea {
  width: calc(100% - 40px);
  height: 200px;
  padding: 20px;
  margin-top: 20px;
  border: 2px solid #ddd;
  border-radius: 8px;
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  color: #333;
  background-color: #f9f9f9;
}

#noteArea:focus {
  outline: none;
  border-color: #aaa;
}

#saveNote {
  display: inline-block;
  padding: 10px 20px;
  margin-top: 20px;
  color: #fff;
  background-color: #333;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s;
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  text-align: center;
}

#saveNote:hover {
  background-color: #555;
}

/* Responsive Styles */
@media (max-width: 768px) {
  #noteArea {
    width: calc(100% - 20px); /* Slightly smaller padding for small screens */
    padding: 10px; /* Less padding */
    height: 150px; /* Adjust height for smaller screens */
    font-size: 0.9rem; /* Slightly smaller font size */
  }

  #saveNote {
    padding: 8px 16px; /* Slightly less padding */
    font-size: 0.9rem; /* Slightly smaller font size */
  }
}

.secret {
  display: none;

}


#code {
  width: 20%; /* Responsive width */
  padding: 10px 15px; /* Comfortable padding */
  margin-left: 5%; /* Centered in the container with some margin */
  display: block; /* To take width and margin properly */

  background-color: #f3f3f3; /* A light background */
  border: 2px solid #333; /* A solid border with a darker color */
  border-radius: 5px; /* Slightly rounded corners for a modern look */

  font-size: 1.2em; /* Slightly larger font size for easy reading */
  color: #333; /* Dark color for the text for contrast and easy reading */
  text-align: center; /* Center the text inside the input field */

  /* Adding some box-shadow for depth, gives a "sinking" effect */
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);

  /* Transition for the interactions */
  transition: all 0.3s ease;
}

#code:focus {
  /* Changing border and shadow slightly on focus to indicate active state */
  border-color: #444;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
  outline: none; /* Removes the default focus outline */
}

/* Placeholder styling */
#code::placeholder {
  color: #666; /* A lighter color for placeholder text */
  opacity: 1; /* Make sure it's fully visible */
}

@media (max-width: 768px) {
  #code {
    width: 80%; /* Slightly narrower on larger screens for better aesthetics */
    padding: 12px 20px; /* Increase padding for a larger touch area */
    font-size: 1.2em; /* Slightly larger text on larger screens */
  }
}

/* Style for paragraphs and QR code containers */
/* Container for all content, you might already have this in your HTML */
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Centering the columns */
  margin-left: 2.5%;
  margin-right: 2.5%;
}

/* Style for each column */
.column {
  flex: 0 1 50%; /* Each column takes up 50% of the container width */
  display: flex;
  flex-direction: column;
}

/* Style for QR code sections */
.qrCode {
  margin: 1em 0;
  align-self: center; /* Align QR code to the right side */
}

.qrCode img {
  width: 100px; /* Adjust size as necessary */
  height: auto;
}

/* Media Query for Smartphones */
@media (max-width: 768px) {
  .container {
    flex-direction: column; /* Stack columns vertically on smaller screens */
  }

  .column {
    flex-basis: 100%; /* Each column takes full width on smaller screens */
  }

  .qrCode {
    align-self: center; /* Center QR codes under the text */
    margin: 1em auto; /* Margin for spacing */
  }

  .qrCode img {
    width: 80%; /* Larger QR code on smaller screens */
  }
}

.lageplan{
  width: 80%;
  height: 100%;
  margin: 0 auto;
  margin-top: 5%;
  display: block;
}