body {
	font-family: 'Arial', sans-serif;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #111;
	color: #fff;
  }
  
  #apod-container {
	text-align: center;
	margin: 20px;
	max-width: 800px;
  }
  
  #apod-image {
	width: 100%;
	max-height: 500px;
	border: 2px solid #444;
	margin-bottom: 10px;
	border-radius: 8px;
	object-fit: cover;
  }
  
  .video-container {
	border: 2px solid #444; /* Matches the image border color. */
	border-radius: 8px; /* Matches the rounded corners. */
	padding: 10px; /* Space between border and video. */
	background-color: #222; /* Distinguishes the container visually. */
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%; /* Full width to align with images. */
	max-width: 800px; /* Matches the max width of the image container. */
  }
  
  .video-container video {
	border: 2px solid #444; /* Add border around the video itself. */
	border-radius: 8px; /* Rounded corners for the video. */
	max-width: 100%; /* Ensure responsiveness. */
	max-height: 500px; /* Matches the image max-height. */
	object-fit: cover; /* Ensures it fits nicely. */
  }
  
  #apod-title {
	font-size: 24px;
	margin: 10px 0;
  }
  
  #apod-date {
	font-size: 18px;
	margin: 5px 0;
	color: #ccc;
  }
  
  #apod-description {
	font-size: 16px;
	line-height: 1.5;
	margin-top: 10px;
  }
  
  button {
	background-color: #444;
	color: white;
	border: none;
	padding: 10px 20px;
	margin: 5px;
	cursor: pointer;
	border-radius: 5px;
	transition: background-color 0.3s;
  }
  
  button:hover {
	background-color: #666;
  }
  
  #liked-images-container {
	margin-top: 20px;
	width: 100%;
	max-width: 800px;
  }
  
  #liked-images-container h2 {
	text-align: center;
	margin-bottom: 10px;
	font-size: 20px;
	color: #fff;
  }
  
  .liked-image-item {
	display: flex;
	align-items: center;
	cursor: pointer; /* Changes cursor to a pointer when hovering over the image. */
	margin-bottom: 10px;
	padding: 10px;
	background-color: #222;
	border-radius: 5px;
	transition: background-color 0.3s ease;
  }
  
  .liked-image-item:hover {
	background-color: #333;
  }
  
  .liked-thumbnail {
	width: 50px;
	height: 50px;
	margin-right: 10px;
	border-radius: 5px;
	object-fit: cover;
	border: 2px solid #444;
	cursor: pointer; /* Changes cursor to a pointer when hovering over the image. */
	transition: transform 0.2s ease, border-color 0.3s ease;
  }
  
  .liked-thumbnail:hover {
	transform: scale(1.1); /* Slight zoom on hover. */
	border-color: orange;
  }
  
  .delete-btn {
	margin-left: auto;
	background-color: #e74c3c;
	padding: 5px 10px;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.3s ease;
  }
  
  .delete-btn:hover {
	background-color: #c0392b;
  }
  
  /* Styles for the search container. */
  #search-container {
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 0;
  }
  
  #date-input {
	padding: 8px;
	font-size: 16px;
	width: 220px; /* Adjusted width to fully display placeholder. */
	border: 1px solid #ccc;
	border-radius: 4px;
  }
  
  #search-btn { /* Ensures the background button matches others. */
	padding: 8px 16px;
	font-size: 16px;
	background-color: orange;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.3s ease;
  }
  
  #search-btn:hover {
	background-color: darkorange;
  }
  
  /* Sort Container. */
  #sort-container {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 10px 0;
  }
  
  #sort-container label {
	font-size: 16px;
	color: #fff;
  }
  
  #sort-options {
	padding: 5px;
	font-size: 16px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background-color: #444;
	color: #fff;
	cursor: pointer;
  }