:root {
	--pastel-purple: #e6e6fa;
	--oxford-blue: #0A2239;
  }

body {
	font-family: Arial, sans-serif;
	background-color: var(--pastel-purple);
	margin: 0;
	padding: 0;
	line-height: 1.6;
  }
  
  header {
	background-color: var(--oxford-blue);
	color: #fff;
	text-align: center;
	padding: 1rem 0;
  }
  
  header h1 {
	margin: 0;
  }
  
  main {
	padding: 2rem;
  }
  
  h3 {
	margin-top: 0;
  }
  
  .rss-links {
	border: 1px solid #ccc;
	padding: 1rem;
	margin-bottom: 2rem;
  }
  
  .copy-button {
	cursor: pointer;
	background-color: #f4f4f4;
	border: 1px solid #ccc;
	padding: 0.5rem 1rem;
	display: inline-block;
	margin-bottom: 0.5rem;
  }
  
  .copy-button:hover {
	background-color: #ddd;
  }
  
  @media (max-width: 768px) {
	/* Add any responsive styles here if necessary */
  }

textarea {
	resize: none;
	width: 100%;
	height: 40px; /* You can adjust the height as needed */
	padding: 6px;
	border: 1px solid #ccc;
	margin-bottom: 10px;
	flex: 2; /* This allows the textarea to grow and fill available space */
	margin-right: 10px; /* Add some space between textarea and button */

  }
  
  @media (max-width: 768px) {
	/* Add any responsive styles here if necessary */
  }
  
  /* Previous CSS styles (no changes needed) */

.rss-link-container {
	display: flex;
	align-items: center;
	margin-bottom: 10px; /* Add some space between each container */

  }

  .text-container {
	flex: 1; /* This allows the text to take up available space */
  }

  .rss-text {
	margin: 0;
	padding-right: 10px; /* Add some spacing between the text and textarea */
  }

  footer {
	background-color: var(--oxford-blue);
	color: #fff;
	padding: 20px;
	text-align: center;
  }
  
  footer p {
	margin: 0;
  }
  
/* CSS for two-column layout using CSS Grid */
.container {
	display: grid;
	grid-template-columns: repeat(2, 1fr); /* Two equal-width columns */
	grid-gap: 50px; /* Add some spacing between columns */

	@media (max-width: 768px) {
		grid-template-columns: 1fr; /* Single column layout for screens up to 768px */
	  }
  }