/* styles.css */

/* Add your CSS styles here */
body {
  font-family: sans-serif;
  background-color: #f0f0f0;
  /* custom cursor */
  cursor: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMTAiIGN5PSIxMCIgcj0iMTAiIGZpbGw9InJlZCIgLz48L3N2Zz4="),
    auto;
}

h1 {
  color: #333;
}
/* Center the contents of the body horizontally and vertically */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Set height to full viewport height */
  margin: 0; /* Remove default body margin */
  overflow: hidden; /* Hide overflow content */
}

/* Style for the random photo container */
.image-container {
  position: relative; /* Position container relative to its parent */
  width: 100vw; /* Set width to full viewport width */
  height: 100vh; /* Set height to full viewport height */
  overflow: hidden; /* Hide overflow content */
}

/* Style for the images */
.image-container img {
  width: 100%; /* Set width to fill container */
  height: 100%; /* Set height to fill container */
  object-fit: cover; /* Scale image as large as possible while maintaining aspect ratio */
}
/* Style for the image titles (subtitles) */
.image-container p {
  font-family: sans-serif;
  text-transform: lowercase;
  position: absolute; /* Position the title absolutely */
  bottom: 30px; /* Place the title with some space above the bottom */
  left: 0; /* Align the title to the left */
  width: 100%; /* Set the width to match the container */
  padding: 10px; /* Add padding to the title */
  color: #ecd516; /* Text color */
  font-size: 30px; /* Font size */
  text-align: center; /* Center the text horizontally */
  margin: 0; /* Remove default margin */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
    1px 1px 0 #000;
}
/* Adjust positioning for mobile devices */
@media only screen and (max-width: 768px) {
  .image-container p {
    bottom: 70px; /* Adjust as needed for better visibility on mobile */
    font-size: 20px; /* Adjust font size for better readability on mobile */
  }
}

/* CSS styles for the question mark icon */
.question-mark {
  position: fixed;
  top: 20px; /* Adjust as needed */
  right: 20px; /* Adjust as needed */
  z-index: 999; /* Ensure it appears above other elements */
  font-size: 30px; /* Adjust font size */
  color: white; /* Icon color */
  text-decoration: none; /* Remove underline */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
    1px 1px 0 #000;
}