body {
       /* min-height: 90vh; /* Ensures it's at least 90% of the viewport height */
	align-items: flex-start; /* Aligns content to the top */
	font-family: Arial, sans-serif;
    display: flex;
	justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
    height: auto; /* Takes height based on content. Fixed top margin issue as well.*/
	/* height: 90vh; /* Full viewport height */ 
	margin: 0; /* Remove default margin */
	padding-left: 20px;
    padding: 0; /* Remove default padding */
    background: #f0f0f0;  /* background-color: #f0f0f0; is light-gray */
	/* background-color: purple; */
}

.main-content {
	display: flex;
	flex-direction: column; /* stack vertically */
	justify-content: center; /* Center vertically */
    align-items: center;  /* Center horizontally */
    flex-grow: 1;  /* Takes up remaining space not used by other elements */
    /* background-color: lightgreen; */
    padding-left: 20px;
	padding: 10px; /* Ensure space between content and AI results */
	flex: 3;  /* Takes up 60% of the space or screen (3/(3+2)) */
	margin: 0; /* Eliminate margin between elements */
    
}



h1 {
    margin-top: 20px; /* Add more space at the top */
    font-family: 'Roboto', sans-serif; /* Use Roboto font */
    font-weight: 900; /* Make it bold */
    font-size: 3em; /* Increase the size */
    color: #00C48C; /* ChatGPT green or any color you prefer */
    text-shadow: 2px 2px 2px rgba(0,0,0,0.5); /* Add shadow for depth */
    text-align: center; /* Center the title */
	letter-spacing: 2px; /* Adds slight space between characters */
}



/* Container around Entire Page */
.container {
	  
    display: flex;
	flex-direction: row;  /* Should stack children horizontally */
    justify-content: flex-start; 
    align-items: flex-start; /* Align items at the top */
    width: 100%;
    /* background-color: lightblue; /* Temporary background color for debugging */
   
	margin: 0; /* Eliminate margin between elements */
    padding: 0; /* Remove padding within elements */
   

}

/* search box and input */
input[type="text"], button {
    width: 300px; /* Original width for input */
    padding: 10px;
	margin-top: 20px;
    display: block; /* Makes input and button block level elements */
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px; /* Rounded corners */
	border: 2px solid black;
    /* border: 2px solid blue;  */
    /* Add other styles like background-color or box-shadow if needed */
}

input[type="text"]:focus {
    border-color: blue; /* Changes border color to green when input is focused */
    outline: none; /* Removes the default focus outline, optional */
}

.search-container {
    display: flex; /* This enables flexbox layout which is ideal for lining items up in a row or column */
    align-items: center; /* This centers the children vertically */
}

/* primary search input  */
#searchQuery {
    flex-grow: 1; /* Allows the input to take up as much space as possible, pushing the icon to the edge */
    margin-right: 8px; /* Optional: Adds some space between the input and the icon */
	font-style: italic; /* Adds italic style to placeholder text */

}

/* Changes the cursor to indicate the reset icon is clickable */
/* .bi { */
    /* cursor: pointer;  */
/* } */

.bi.bi-arrow-clockwise {
    margin-top: 20px; /* Adjust this value as needed to move the reset icon down */
}


#searchQuery::placeholder {
    font-style: italic; /* Adds italic style to placeholder text */
}


/* AI it! Button */
button {
    width: 120px; /* Adjusted to 60% of the original width */
    padding: 8px 15px; /* Adjust padding to maintain button usability */
    margin-top: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
     background: linear-gradient(to right, #d3d3d3, #a9a9a9); /* Gradient from light grey to dark grey */
    /* background-color: #007BFF; /* Example button color, adjust as needed */
    color: Black; /* Text color, adjust as needed */
    border: 1px dotted black;
	/* border: none; */
    border-radius: 20px; /* Rounded edges */
    font-size: 14px; /* Adjust font size as needed */
    cursor: pointer;
    transition: background-color 0.3s; /* Smooth transition for hover effect */
}

/* AI it! Hover Button */
button:hover {
background: linear-gradient(to right, #a9a9a9, #808080); /* Darker shades when hovered */ 

	/* background-color: #0056b3; /* Darker shade when hovered */
}

/* your link will appear here */
#resultLink {
    
	display: block; 
    margin-top: 10px; /* Adds some space above the link for better spacing */
    margin-bottom: 10px; /* Adds some space below the link before the button */
    font-size: 16px; /* Adjust font size as needed */
    color: #0000FF; /* Example color; adjust as needed */
    text-decoration: none; /* Removes underline from links; optional */

}

.article-link {
    color: #0000EE; /* Traditional blue for hyperlinks */
    text-decoration: underline; /* Underline for emphasis */
	
}

/* margin: 20px 0px 0px 0px; */ /* top, right, bottom, left} */

/* Copy/Paste Button */
.copy-button {
    display: none;
	display: flex; /* Use flexbox instead of block to align items in a row */
    align-items: center; /* Vertically center the items in the button */
    cursor: pointer;
    margin-top: 1px;
    text-align: left; /* Align text to the left, if necessary */
}

/* Copy/Paste Button *Image */
.copy-button img {
    width: 25px;
    height: auto;
	/* Add right margin to create space between the image and text */
    /* margin-right: 2px;  */
	margin: 0px 0px 0px 10px; /* top, right, bottom, left}  the 10px aligns img centered above the button text in the .copy-button span */
}

/* Copy/Paste Button Text */
.copy-button span {
    display: flex; 	/* this fixes the text to be underneath the image icon. Remove to be to the right.  */
	font-size: 10px; /* Maintain font size */
    text-align: center; /* Center the text within the space it occupies */
	flex-grow: 1; /* Allows the span to take up any remaining space in the container */ 
    
}

#mainImage {
    display: block; /* Ensures the image appears on its own line */
    width: 90%;
    border-radius: 10px;
	height: auto;
    margin-top: 20px;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto; /* Centers the image */
	margin-bottom: 10px;
}

/* Now was that so hard? */
#messageDisplay { 
  color: #ffffff; /* White text */
  color: black; 
  /* background-color: #ddd; /* gray background */ 
  font-style: italic;
  /* text-decoration: underline; */
 /* RGB for Sky Blue */
 background-color: rgba(135, 206, 250, .5);
	border: 1px dotted black;
	/* RGBA with transparency (0 is fully transparent, 1 is fully opaque) */
	/* Half transparent Sky Blue */
	/* background-color: rgba(135, 206, 250, 0.5);  */
   
  margin: auto;
  text-align: center;
  padding: 5px;
  max-width: 250px;
  margin-top: 20px; /* Space above the message */
  border-radius: 5px; /* Rounded corners */
  font-size: 1.2em; /* Larger text */
  font-weight: bold; /* Bold text */
  display: none; /* Hidden by default */
  transition: opacity 0.5s ease-in-out;
}

/* entire api message and header. Margin fix  */
#apiResponseContainer {
   	display: none;
	margin-top: 0px;
	text-align: Left;
	 /* margin-left: 0; */
    /* margin-right: 0; */
	
	/* color: #ffffff; /* White color for the heading */ 
    /* padding: 10px 0; /* Add some padding above and below the heading */ 
    
	
}

/* black box with api response */
#apiResponse {
    /* display: none; */
	/* margin: auto; */
	/* flex-grow: 1;	 */
	margin-top: 0px;
    /* padding: 1px; */
    /* This will make the container width to 90% of the viewport width */
	 /* max-width: 100vw; */
	
	
	/* max-width: 80%; */
    background-color: #192734;
    border-radius: 10px;
	color: #00E5FF; /* White text color for better readability */
    margin: 0px; /* Add some margin around the div */
    overflow: auto; /* Ensures content is scrollable if it overflows */
    /* box-shadow: 0 4px 8px rgba(0,0,0,0.1); */
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
	
    /* box-sizing: border-box; /* Include padding and borders in the width calculation */ 
    padding: 20px;
	 overflow-wrap: break-word; 
	 
}

.reset-icon {
    display: inline-block;
    text-align: center;
    color: black; /* You can change this to match your site's color scheme */
    text-decoration: none; /* Removes underline from the link */
    font-size: 16px; /* Adjust the font size as needed */
}

.reset-icon svg {
    display: block; /* Ensures the SVG icon is centered above the text */
    margin: auto; /* Centers the SVG horizontally */
}

.reset-icon .reset-text {
    display: block; /* Ensures the text appears on a new line under the icon */
    font-size: 14px; /* Smaller text size, adjust as needed */
}


#messageDisplay.visible {
  display: block; /* Show the message */
  opacity: 1; /* Fully visible */
}

/* Responsive styles for mobile devices */
@media (max-width: 600px) {
    .container {
        width: 100%; /* Make the container full width */
        padding: 20px; /* Increase padding */
		padding-top: 70px; /*prevent moving off top of screen */
    }

    /* h1 { */
        /* font-size: 2em; /* Slightly smaller font size for h1 to fit on mobile screens */ */
    /* } */

    input[type="text"], button {
        font-size: 1.2em; /* Increase font size for better readability */
        padding: 12px; /* Increase padding for easier interaction */
        width: 90%; /* Make inputs and buttons take more of the screen */
    }