body {
	background-image: url('/images/fallingstars.gif');
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
    background-repeat: no-repeat;
    margin: 0;
}

header{
    margin-top: 25px;
    width: 100%;
    padding: 1rem;
    background-color: blue;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav a{
    font-size: 1.5rem;
    color: white;
    margin-left: 4rem;
    font-weight: 500;
    border-bottom: 3px solid transparent;
}

nav a:hover,
nav a.active{
    color: pink;
    border-bottom: 3px solid pink;
}

#video-page {
	display: flex;
	justify-content: center;
	align-content: center;
	padding: 8px;
}

#playlist {
	display: flex;
	flex-flow: column;
}

.video-container {
  display: flex;
  flex-flow: row;
  padding: 10px;
  align-content: center;
  justify-content: center;
}

#video-player {
	display: flex;
	/*align-content: center;*/
	align-self: center;
	min-width: 360px;
}

.video-item {
  flex: 1; /* Makes all three share equal width */
  min-width: 150px; /* Prevents them from getting too skinny */
  max-width: 250px;
}

.video-item>img {
	aspect-ratio: 1/1;
	object-fit: cover;
	width: 150px;
	margin: 10px;
}

video {
  width: 100%;
  object-fit: cover; /* Ensures video fills the area without stretching */
  border-radius: 5px;
}

/* Container styling */
/*#comment-section {
  border: 5px solid pink;
  background-color: white;
  display: grid;
  grid-template-rows: 60%, 40%;
}*/

/* Header style */
#comment-section h2 {
  font-size: 1.5rem;
  color: blue;
  margin-bottom: 5px;
}

/* Input fields and textarea */
#comment-form input,
#comment-form textarea {
  width: 100%;
  padding: 5px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 0.95rem;
}

/* Textarea specific adjustment */
#comment-form textarea {
  resize: vertical;
}

/* Submit button */
#submit-comment-form {
  background-color: blue;
  color: pink;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: bold;
}

#submit-comment-form:hover {
  background-color: pink;
  color: blue;
}

#comment-form {
	margin: 8px;
}

/* Display area for posted comments */
#comments-display {
  margin-top: 5px;
  border-top: 2px solid #eee;
  overflow-y: scroll;
}

/* Individual comment box */
.comment {
  background-color: #fff;
  padding: 3px;
  margin-bottom: 10px;
  border-left: 10px solid blue;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Commenter name */
.comment strong {
  color: black;
  margin-bottom: 5px;
  font-size: 0.9rem;
}

/* Comment text */
.comment p {
  margin: 0;
  color: black;
  font-size: 0.95rem;
  line-height: 1.4;
}

/*#info-content>div, #resource-content>div {
	margin: 5px;
	padding: 10px;
}*/

#group-a {
	margin: 10px;
	justify-content: center;
	display: flex;
	flex-flow: row;
}

#group-d {
	display: flex;
	flex-flow: row;
}

#group-e {
	display: flex;
	flex-flow: column;
}

#group-f {
	display: flex;
	flex-flow: row;
}

.info-item {
	color: white;
	background-color: deeppink;
	border: 5px solid blue;
	margin: 12px;
	padding: 10px;
	font-size: 15px;
}

#info-content>div>a {
	color: pink;
}

.resource-item {
	background-color: white;
	border: 5px solid deeppink;
	padding: 15px;
	margin: 10px;
	width: 85%;
	height: auto;
	align-content: center;
	justify-content: center;
}

#info-sub-heading {
	background-color: white;
	margin: 15px;
	padding: 10px;
	font-size: 40px;
	text-align: center;
}

#resources-sub-heading {
	color: white;
	background-color: deeppink;
	margin: 20px;
	padding: 5px;
	font-size: 35px;
	text-align: center;
}

#helplines {
	text-align: start;
}

#resource-content {
  display: grid;
  grid-template-rows: 60% auto;
  grid-template-columns: 25% 25% 25% 25%;
  justify-self: center;
  justify-content: center;
}

.background {
	margin: 0px;
	height: 100vh;
	width: 100vw;
	position: fixed;
}


#comment-section {
	border: 5px solid pink;
	background-color: white;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
	padding: 10px;
	box-sizing: border-box;
	font-family: system-ui, sans-serif;
}

/* Comment display container */
#comment-display-container {
  width: 100%;
  box-sizing: border-box;
  background: #fafafa;
}

#comment-display-container h2 {
  margin: 0 0 0.75rem 0;
  font-size: 1.25rem;
}

/* Fixed-size scrollable comments list */
#comments-display {
  height: 300px;          /* fixed size */
  overflow-y: auto;
  padding-right: 0.5rem;
  border: 1px solid #e0e0e0;
  background: #fff;

  display: flex;
  flex-direction: column-reverse;
}

/* Optional: nicer scrollbar */
#comments-display::-webkit-scrollbar {
  width: 8px;
}
#comments-display::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

/* Comment form container */
#comment-form-container {
  width: 100%;
  box-sizing: border-box;
  padding: 5px;
  border: 1px solid #ddd;
  background: #fff;
}

#comment-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

#comment-form input,
#comment-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 0.75rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  resize: vertical;
}

#comment-form input:focus,
#comment-form textarea:focus {
  outline: none;
  border-color: #888;
}

/*#comment-form button {
  align-self: flex-start;
  padding: 0.6rem 1.25rem;
  font-size: 1rem;
  border: none;
  border-radius: 6px;
  background: #333;
  color: #fff;
  cursor: pointer;
}

#comment-form button:hover {
  background: #555;
}*/

/* Responsive tweaks */
@media (max-width: 480px) {
  #comment-section {
    padding: 0.5rem;
  }

  #comments-display {
    height: 220px;
  }

#submit-comment-form {
    align-self: stretch;
  }
}

@media (max-width: 768px) {
	#group-a {
		flex-flow: column;
	}

	#group-d {
		flex-flow: column;
	}

	#group-e {
		flex-flow: row;
	}

	#group-f {
		flex-flow: column;
	}

	#resource-content {
		display: flex;
		flex-flow: column;
		align-items: center;
	}

	#playlist {
		flex-flow: row;
	}

	.video-item {
	  min-width: 90px; /* Prevents them from getting too skinny */
	}

	.video-item>img {
		width: 90px;
	}

	#video-page {
		flex-flow: column;
	}

	.video-container {
		flex-flow: column;
	}
}