/* Body and HTML: dark gray background, white text */
body, html {
  /* Removing background-color so our background image can show through */
  color: #fff;
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: Arial, sans-serif;
}

/* Simple header styling with centered title */
header {
  text-align: center;
  margin-top: 1px;
  /* iOS Safe Area Support */
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
header h1 {
  font-size: 3em;
  margin: 0;
}

/* Main container for swipeable cards */
.card-container {
  position: relative;
  width: 100%;
  background-image: none !important; /* REMOVE background image completely */
  background-color: #000000 !important; /* Use black background instead */
  background-repeat: no-repeat;
  background-size: auto;
  overflow: hidden;
}

/* Black boxes for Fun Facts and Social Tasks */
.fun-facts-box,
.social-tasks-box {
  background-color: #000; /* pure black background */
  border-radius: 10px;   /* rounded edges */
  padding: 2px;         /* some spacing inside */
  margin-bottom: 10px;   /* space below each box */
}

/* Individual card container */
.card {
  position: absolute;
  width: 100%;            /* Fill full width of container */
  max-width: 102%;       /* Increase this value to make the cards wider */
  height: 99%;           /* Fill full height of container */
  top: 1%;                /* Slight offset from the top */
  left: 50%;
  transform: translateX(-50%);
  background-color: #3c3c3c;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
  padding: 3px;
  color: #fff;
  overflow-y: auto;       /* let it scroll vertically */
}

/* The main text + content container on top of the background image */
.card-content {
  touch-action: auto;
  position: relative;
  z-index: 1; /* ensures text is above the background image */
  padding: 0px;
  color: #fff; 
}

/* Semi-transparent background image container */
.card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.5; /* 30% opacity image */
  z-index: 0;   /* behind the text content */
}

/* If you have a video container for embedded iframes */
.video-container {
  margin-top: 15px;
  text-align: center;
}

.fun-facts-box ul,
.social-tasks-box ul {
  list-style: none;
  padding-left: 0;
  margin: 0; /* optional, to remove default margins */
}



.fun-facts-box ul li, 
.social-tasks-box ul li {
  margin-bottom: 53px; 
  list-style: none;
}

/* Ensure the background image is NEVER visible */
.background-image {
  background-image: none !important; /* No background image */
  background-color: #000000 !important; /* Black background */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto !important;
  background-position: top left !important;
  background-repeat: no-repeat !important; /* No repeating */
  z-index: -1; /* Ensure it stays behind other content */
  opacity: 0.7 !important;
}

/* Ensure images are styled correctly */
.artwork-img {
  max-width: 100%; /* Ensure it fits within the card */
  height: auto;    /* Maintain aspect ratio */
  margin-top: 10px; /* Add some space above the image */
  border-radius: 8px; /* Optional: rounded corners */
  max-height: calc(100% - 60px); /* Reduce height by 60px */
  display: block; /* Ensure images are displayed */
  transform: scale(1.5); /* Increase size by 1.5x */
  transform-origin: center; /* Scale from center */
  margin: 20px auto; /* Add margin to prevent overflow issues */
}