/* Header, Footer, and Main: Allows for sticky header and footer, and main to fill space */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin-right: calc(100vw - 100%);
}
header { /* Sticky Header */
  background-color: #f0f0f0; /* Or your header color */
  padding: 10px;
  position: sticky; /* Key for sticky behavior */
  top: 0; /* Stick to the top */
  width: 100%; /* Ensure full width */
  z-index: 10; /* Ensure it's above other content (important!) */
}
main {
  flex-grow: 1;
}
main hr {
  height: 2px;
  background-color: #ccc;
  border: none;
  margin: 20px 0;
}
/* Footer style */
footer {
  background-color: #f0f0f0; /* Light gray background */
  padding: 20px;
  text-align: center; /* Center the text */
  position: relative; /* Needed for sticky footer */
  bottom: 0; /* Sticky footer */
  width: 100%; /* Ensure full width */
}
footer a {
  margin: 0 10px; /* Space between links */
  text-decoration: none; /* Remove underlines from links */
  color: #333; /* Dark gray link color */
}
footer a:hover {
  color: #007bff; /* Blue on hover */
}

/* Font for links (on the main page) to subpages. */
.subpage_font {
  font-family: "Georgia", sans-serif;
  font-size: 32px;
  color: #007bff;
  text-decoration: none;
}
.subpage_font_black {
  font-family: "Georgia", sans-serif;
  font-size: 32px;
  color: black;
  text-decoration: none;
}

.answer-div {
  font-family: "Georgia", sans-serif;
  font-size: 24px;
  color: black;
  text-decoration: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.answer-div.active {
  /*max-height: auto;*/
  max-height: max-content;
  overflow: auto;
  overflow-y: auto;
}
/*
.answer-div .expanded-text {
	text-indent: 2em;
}
*/

/* Expanding/collapsing div items. */
.collapsed-div {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.collapsed-div.active {
  max-height: max-content;
	background-color: lightblue;
  overflow: auto;
  overflow-y: auto;
}
.collapsed-div .expanded-text {
	text-indent: 2em;
}

/* Drop-Down arrows. */
.dd-item {
  display: flex;
  align-items: center;
}
.dd-item .down-caret {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 10px solid #000;
	/*margin-top: 5px;*/
}
.dd-item .up-caret {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid #000;
  margin-bottom: 5px;
}
.dd-item .right-caret {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #000;
}
.dd-item .left-caret {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 5px solid #000;
}

/* Selected/Highlighted Text */
.selected-text {
  font-family: "Georgia", sans-serif;
  font-size: 24px;
  color: black;
  text-decoration: none;
}
.selected-text.active {
  font-family: "Georgia", sans-serif;
  font-size: 24px;
  color: blue;
  text-decoration: bold;
}
.selected-text-small {
  font-family: "Georgia", sans-serif;
  font-size: 24px;
  color: black;
  text-decoration: none;
}
.selected-text-small.active {
  font-family: "Georgia", sans-serif;
  font-size: 24px;
  color: blue;
  text-decoration: bold;
}


/* Riddle Text div (with background color to match difficulty level) */
.riddle-text-div {
  background-color: orange;
  overflow-y: scroll; 
  /* Enable vertical scrollbar, so that space is allocated for it
                       (so that text doesn't jump around when the vertical scrollbar
                        suddenly appears). */
}
/* So that all inheriting children get the same bg color. */
.riddle-text-div * {
  background-color: inherit;
}
hr {
  display: block;
  height: 25px;
  border: 0;
  border-top: 1px solid black;
  margin: 0em 0;
  padding: 0;
}
td div {
  height: 100%;
}

/* Tables with borders drawn */
.table-with-borders {
  width: 80%; /* Optional: Adjust width */
  border-collapse: collapse; /* Important for single borders */
}
.table-with-borders th,
.table-with-borders td {
  border: 1px solid navy; /* Apply borders to the header and data cells within the bordered table */
  padding: 8px; /* Optional: Add padding */
  text-align: left; /* Optional: Align text */
}


/* Tables without borders drawn */
.table-without-borders {
  width: 80%; /* Optional: Adjust width */
  border-collapse: collapse; /* Important for single borders */
}
.table-without-borders th,
.table-without-borders td {
  border: 0px; /* Apply borders to the header and data cells within the bordered table */
  padding: 0px;
}

/* Spinning Landing image */
.spinning-image {
  width: 800px;
  height: 500px;
	border-radius: 50%;
}

@keyframes dynamicSpin {
  0% { transform: rotate(0deg); } /* Start the image with no rotation */
  50% { transform: rotate(0deg); } /* [0, 5]: no rotation (landing img) */
  60% { transform: rotate(0deg); } /* [5, 6]: Still no rotation (back to roof img) */
  70% { transform: rotate(360deg); } /* [6, 7]: rotate it once */
  80% { transform: rotate(720deg); } /* [7, 8]: rotate it again */
  87% { transform: rotate(1080deg); } /* [8, 8.7]: rotate it again */
  92% { transform: rotate(1440deg); } /* [8.7, 9.2]: rotate it again */
  96% { transform: rotate(1800deg); } /* [9.2, 9.6]: rotate it again */
  97% { transform: rotate(2160deg); } /* [9.6, 9.7]: rotate it again */
  98% { transform: rotate(2520deg); } /* [9.7, 9.8]: rotate it again */
  99% { transform: rotate(2880deg); } /* [9.8, 9.9]: rotate it again */
  100% { transform: rotate(2880deg); } /* [9.9, 10]: maintain its current state. */
}

.spinning {
  animation-name: dynamicSpin;
  animation-duration: 10s; 
  animation-timing-function: linear; 
  /*animation-timing-function: ease-out; */
  /*animation-delay: 2s;*/
  /*animation-direction: alternate;*/
  animation-iteration-count: infinite;
  /*animation-fill-mode: both;*/
  animation-play-state: running;
  /*animation-composition: add;*/
}