@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap');

/*   Meta   */
:root {
	--bg:	  #0F111B;
	--fg:		#ECF0C1;
	--title:	#ECF0C1;
	--hl:	  #5CCC96;
	--black:	#000000;
	--red:		#E33400;
	--green:	#5CCC96;
	--yellow:	#B3A1E6;
	--blue:		#00A3CC;
	--magenta:	#F2CE00;
	--cyan:		#7A5CCC;
}

body {
	font-family: 'JetBrains Mono', monospace;
  background-image: url("img/rss_bg.jpg");
  background-size: 100vw 100vh;
  height: 100vh;
  width: 100vw;  
  line-height: 1.6;
  margin: 0;
  padding: 0;
}


.container {
    max-width: 800px;
    margin: 5vh auto;
    padding: 20px;
    background: var(--fg);
    box-shadow: 0 2px 4px var(--blue);
    border-radius: 8px;
}

h1 {
    text-align: center;
    color: var(--bg);
}

.selector {
    display: flex; /* Flexbox for horizontal alignment */
    align-items: center; /* Vertically center elements */
    gap: 10px; /* Space between dropdown and button */
    margin-bottom: 20px;
}

.selector label {
    margin-right: 10px; /* Add spacing between label and dropdown */
}

.selector select {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1em;
    padding: 10px;
    border: 2px solid var(--black); /* Blue border */
    border-radius: 8px; /* Rounded corners */
    background-color: var(--green); /* Light gray background */
    color: var(--bg); /* Dark text color */
    appearance: none; /* Remove default dropdown arrow */
    cursor: pointer;
    outline: none; /* Remove focus outline */
    transition: all 0.3s ease; /* Smooth transitions */
}

.selector select:hover {
    background-color: var(--green); /* Lighter blue background on hover */
    border-color: var(--black); /* Darker blue border */
    color: var(--cyan);
}

.selector select:focus {
    background-color: var(--green); /* White background when focused */
    border-color: var(--black); /* Blue border */
    box-shadow: 0 0 5px rgba(0, 122, 204, 0.5); /* Subtle blue glow */  
    color: var(--cyan);
}

.selector button {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1em;
    padding: 10px 20px; /* Adjust button size */
    border: 2px solid var(--black); /* Blue border */
    border-radius: 8px; /* Rounded corners */
    background-color: var(--green); /* Blue background */
    color: var(--bg); /* White text color */
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: 10px; /* Extra spacing to ensure button doesn't overlap */
}

.selector button:hover {
    background-color: var(--red); /* Darker blue background */
    border-color: var(--black); /* Darker border */
    color: var(--fg);
}


#home_button {
    display: inline-flex; /* Use inline-flex to keep it compact */
    justify-content: center; /* Center the text horizontally */
    align-items: center; /* Center the text vertically */
    font-family: 'JetBrains Mono', monospace;
    font-size: 1em;
    padding: 5px 18px; /* Adjust padding for size */
    border: 2px solid var(--black); /* Black border */
    border-radius: 8px; /* Rounded corners */
    background-color: var(--green); /* Green background */
    color: var(--bg); /* Text color */
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: 10px; /* Spacing from adjacent elements */
    margin-top: 10px; /* Vertical spacing */
    width: auto; /* Make the button size dynamic based on content */
    text-align: center; /* Ensure text alignment */
    white-space: nowrap; /* Prevent text from wrapping */
}

.feed-container {
    margin-top: 20px;
    max-height: 75vh; /* Set a fixed height for the container */
    overflow-y: auto; /* Enable vertical scrolling if content overflows */
    border: 1px solid #ddd; /* Optional: Add a border for better visibility */
    padding: 10px; /* Add some padding for aesthetics */
    background-color: #f9f9f9; /* Light gray background for contrast */
    border-radius: 8px; /* Rounded corners for a modern look */
}

.feed-container::-webkit-scrollbar {
    width: 8px; /* Width of the scrollbar */
}

.feed-container::-webkit-scrollbar-thumb {
    background-color: #007acc; /* Scrollbar color */
    border-radius: 4px; /* Rounded corners for the scrollbar */
}

.feed-container::-webkit-scrollbar-thumb:hover {
    background-color: #005f99; /* Darker blue when hovered */
}

.feed-container::-webkit-scrollbar-track {
    background-color: #f0f0f0; /* Track color */
}
.feed-item {
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
}

.feed-item:last-child {
    border-bottom: none;
}

.feed-title {
    font-weight: bold;
    font-size: 1.2em;
    color: #007acc;
    text-decoration: none;
}

.feed-title:hover {
    text-decoration: underline;
}

.feed-date {
    font-size: 0.9em;
    color: #666;
    margin-top: 5px;
}

.feed-authors {
    font-size: 0.9em;
    color: #555;
    margin-top: 5px;
    font-style: italic;
}

.feed-description {
    margin-top: 10px;
    color: #555;
}