@charset "utf-8";
/*
   Survey Forms Style Sheet
   Author: Eric Rivera
   Date:   04/03/2022

   Filename:         rb_forms.css

*/

/* Form Layout Styles */


/* HTML Styles */

html 
{
background-image: url(Grey_1b.jpg);
background-repeat: no-repeat;
background-size: cover;
} 

/*         Body            */


To adjust the height of the body dynamically as the window is resized, you can use the vh (viewport height) unit in CSS. This will make the body height respond to the height of the browser window. Here's how you can achieve it:
Updated CSS Code

html, body 
{
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    height: 100%; /* Ensure the body and HTML take up the full height of the viewport */
}


body 
{
    display: flex; /* Allows for flexible layouts if needed */
    flex-direction: column; /* Ensure vertical stacking of elements */
    height: 100vh; /* Make the body height equal to the viewport height */
    overflow: hidden; /* Prevent scrolling if content fits within the viewport */
    padding: 10px 8px 10px 7px; /* Add padding around the grid */
}


/* General styles for the main image */

/* Body Header Styles */


/* New Header  */






header {
  margin-bottom: 1rem; /* Adjust the spacing between header and section */
  max-width: 100%; /* Limits the image width to 80% of the parent container */
}

header::after {
    content: "";
    display: table;
    clear: both;
}



/*   Article     */


article {
	background-color: rgb(166, 166, 166);
	box-shadow: inset rgb(179, 179, 179) -10px -10px 25px,
					inset rgb(71, 71, 71) 10px 10px 25px;
}

section {
  border: 0px solid #ccc; /* Keeps the border for section */
  padding: 0; /* Adds internal spacing for better readability */
  text-align: center; /* Centers the text inside the section */
}

section img {
  display: block; /* Makes the image a block element */
  margin: 0 auto; /* Centers the image horizontally */
  max-width: 100%; /* Limits the image width to 80% of the parent container */
  height: auto; /* Maintains aspect ratio */
}

/* Vertical list of images */


.image-list {
    display: grid;
    /*grid-template-columns: repeat(3, 1fr);  3 images per row */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive grid with 3-5 images per row */
    min gap: 2px;
    gap: 5px; /* Spacing between images */
    flex-grow: 1; /* Allow the image list to grow and fill available space */
    overflow-y: auto; /* Enable vertical scrolling */
    padding: 1px; /* Add padding around the grid */
}

.image-list img {
    max-width: 300px; /* Set all other images to 300px width */
    height: auto; /* Maintain aspect ratio */
    border: 2px solid #ccc; /* Optional: Add borders around images */
    border-radius: 5px; /* Optional: Round the corners of images */
    width: 100%; /* Make images shrink proportionally */
    margin: 2px 2px 2px 2px; /* Add padding around the grid */
    gap: 2px; /* Spacing between images */
    
}



.image-list::-webkit-scrollbar {
    width: 8px; /* Custom scrollbar width */
}

.image-list::-webkit-scrollbar-thumb {
    background: #888; /* Scrollbar thumb color */
    border-radius: 10px; /* Rounded scrollbar thumb */
}

.image-list::-webkit-scrollbar-thumb:hover {
    background: #555; /* Scrollbar thumb hover color */
}



/*
   
   
   Layout and Typographical Style Sheet for Scrap book page  
   Author: Eric Rivera	
   Date:   05/23/2022--UPdated 12/14/24
   

*/




/* Page Body Styles width: 960px; */

/* Default: Single-column layout for small screens */
@media (max-width: 960px) and (min-width: 640px) {
  .image-list {
    flex-direction: row;
  }
}


/* Page Body Styles width: 680px; */










/* Main Links */


To maximize the size of the <ul> element for mainLinks (e.g., make it span the full width of its container or the entire viewport), you can set the width to 100% and adjust its display properties for alignment and spacing. Here’s how:
CSS to Maximize <ul> for mainLinks

Add this to your CSS file or a <style> block in your HTML:

#mainLinks {
    display: flex;
    justify-content: center; /* Centers the links horizontally */
    padding: 3px;
    margin: 0;
    background-color: #f8f8f8; /* Optional: Background for the nav bar */
}

#mainLinks ul {
    width: 100%; /* Make the list take the full width */
    display: flex;
    justify-content: space-around; /* Spread links evenly */
    padding: 0; /* Remove extra padding */
    margin: 0; /* Remove extra margin */
    list-style: none; /* Remove bullets */
}

#mainLinks li {
    flex: 1; /* Distributes list items evenly across the width */
    text-align: center; /* Centers the text in each link */
    font-size: 1.5rem;
}

#mainLinks a {
    display: block;
    padding: 15px 0; /* Add vertical padding for better clickability */
    text-decoration: none; /* Remove underline */
    color: #fff; /* Text color for header*/
}




/* Article  Styles */



/* Section Styles */





/* Aside Styles */

aside {
	background-color: rgba(211, 211, 211, 0.6);
	float: left;
	margin-right: 15%;
	padding: 20px;
	width: 26%;	 
}

aside h1 {
	color: rgb(77, 77, 77);	
	font-weight: normal;
	font-size: 2em;
	margin-bottom: 10px;
	text-align: center;
}

aside li {
	font-size: 1.1em;
	line-height: 1.5em;
}

aside li.newGroup {
	margin-top: 15px;
}

nav#familyLinks a {
	color: rgb(51, 51, 51);
	text-decoration: underline;
}


/* Footer Styles */

footer {
	color: white;	
	display: block;
	padding-top: 20px;
	padding-left: 180px;
	font-weight: bold;
}

body > footer > nav.vertical, body > footer > section {
	display: block;
		
}

body > footer > nav {
	float: left;
	width: 30%;
}

body > footer > nav#vert2 {
	padding-left: 20px;
	padding-right: 20px;

}


body > footer > section {
	clear: both;
	text-align: center;
	padding-top:200px;
   width: 80%;
	
}

body > footer > nav.vertical > ul {
	line-height: 2em;
}

footer nav a {
	text-decoration: underline;
	font-size: 1.5em;
}

footer a:visited, footer a:link {
	color: white;
}

footer a:hover, footer a:active {
	color: 	rgba(77, 77, 77, 0.4);
	text-shadow: 2px 5px 2px rgba(242, 242, 242, 0.3);
}

footer::after {
   clear: both;	
   content: "";
   display: table;
}