/* THIS IS FOR SMALLER VIEWPORTS */
@media only screen and (max-width:600px){

	/************************************/
	/* RESPONSIVE INDEX WEBPAGE STYLING */
	/************************************/

	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	
	/* Body attributes */
	body {
		font-family: Arial, sans-serif;
		background-color: rgb(245, 245, 245);
		display: flex;
		flex-direction: column;
		height: auto;
	}
		
	/* Header attributes */
	/* header includes subheader */
	header{
		width: 100%;
		margin-bottom: 1rem;
		margin-top: -80px;
		justify-items: center;
		justify-self: center;
	}
		
	/* Navbar attributes */
	nav {
		background-color: rgb(218, 41, 28);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
		width: 100%;
		padding: 0px 16px;
		position: relative;
		height: 125px;
		display: inline-grid;
		justify-content: center;
	}

	nav #searchbar {
		margin-top: 5px;
		width: 80%;
		justify-self: center;
	}

	nav #login_signup {
		background-color: rgb(218, 41, 28);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
		width: 180px;
		border-radius: 10px;
		justify-self: center;
		position: relative;
		height: 60px;
		margin-top: 180px;
		text-align: center;
		align-content: center;
		display: block;
		text-decoration: none;
		color: white;		
		font-size: 18px;	
	}

	nav #user-info {
		background-color: rgb(218, 41, 28);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
		width: 180px;
		border-radius: 10px;
		justify-self: center;
		position: relative;
		height: 60px;
		margin-top: 180px;
		text-align: center;
		align-content: center;
		display: block;
		text-decoration: none;
		color: white;		
		font-size: 18px;	
	}
	
	/* Edits unordered list that stores the links in the navbar*/
	nav ul {
		list-style-type: none;
		display:flex;
	}
	
	/* Edits unordered list items*/
	nav ul li {
		margin: 0 20px;
	}

	/* Edits text of the link buttons*/
	nav ul li a {
		color: white;
		text-decoration: none;
		font-size: 18px;
		padding: 20px;
		display: block;
		transition: 0.3s;
	}
	
	/* Edits navbar links with mouse hovering*/
	nav a:hover {
		background-color: rgb(173, 36, 36);
		height: auto;
		transition: 0.3s;
	}	

	/*this is for the div that contains the searchbar*/
	#searcharea {
		background-color: white; 
		width: 40%;				
		padding: 5px;			
		border-radius: 10px;	
		display: flex;			
	}
	
	/* Edits the part of the searchbar you type into */
	#searchbar{
		background-color: white;
		width: 50%;				
		padding: 10px;			
		border-radius: 15px;	
		outline: none;			
	}
	
	/* Edits subheader */
	.subheader{
		display:flex;
		margin-top: 80px;
		width: 30%;
		justify-content: center;
		align-content: center;
		background: #333;		
	} 
	
	/*this is to edit the attributes of the header inside the subheader, this is the text that currently just displays the name of the page*/
	.subheader h1{
		color: white;
		padding: 20px;
		text-align: center;
	}
	
	/*this edits the attributes of the content div*/
	.homeSetContainer {
		margin-top: 90px; 	
		text-align: center;	
		display: flex;
		flex-direction: column;
		width: 90%;
		align-items: center;
		align-self: center;
		min-height: 50vh;
		flex: 1;
	}
	.homeSetContainer a {
		border-radius: 10px;
		border-color: #d8d7d7;
		border-width: 2px;
		border-style: solid;
		padding: 10px;
		color: rgb(40, 40, 40);
		text-decoration: none;
		background-color: rgb(245, 245, 245);
		transition: 0.3s;
	}
	.homeSetContainer a:hover {
		color: white;
		background-color: rgb(218, 41, 28);
		border-color: rgb(218, 41, 28);
		transition: 0.3s;
	}
	
	
	/*This edits all paragraph attributes if they are in the content class*/
	.content p{
		width: 100%;							/*This will make the paragraphs 100% of the content width*/
		text-align: center;						/*This will align the text inside the paragraph to center*/
	}
	
	.content a{
		margin:auto;
	}

	/*This edits the two divs of userSets and viewedSets inside of the content div*/
	#userSets, #viewedSets{
		padding: 10px;		
		margin: 25px;		
		background: rgb(245, 245, 245);
		color:rgb(40, 40, 40);
		grid-column: auto;
		border-radius: 10px;
		border-color:#d8d7d7;
		border-style: solid;
		border-width: 2px;
		max-height: 300px;
		min-height: 250px;
		min-width: 350px;	
	}

	/* Edit the headers in the "Your Library" and "Recently Viewed Sets" */
	#userSets h2, #viewedSets h2{
		width: 70%;			
		padding: 5px;		
		margin: auto;
		margin-bottom: 10px;
		color:rgb(40, 40, 40);
		grid-column: auto;
	}
	/* Edit the links in the "Recently Viewed Sets" */
	#viewedSets ul #visitHistory {
		text-decoration: none;
		padding: 10px;
		border-radius: 10px;
		color: white;
		text-decoration: none;
		background-color: rgb(218, 41, 28);
	}

	/*edits the visit history list*/
	.styled-list-item {
		list-style-type: none; 				 /* Removes bullets */
		border-bottom: 1px solid #ccc; 	/* Adds a thin line between items */
		padding: 10px 0; 					 /* Adds spacing for better readability */
	}

	/*make visit history a scrollable field */
	#viewedSets {
		max-height: 300px; 							 /* Define the maximum height for the container */
		overflow-y: auto; 							 /* Enable vertical scrolling when content exceeds the height */
		border: 1px solid #ccc; 					/* Optional: Add a border around the container */
		padding: 10px; 								 /* Optional: Add padding inside the container */
		background-color: rgb(245, 245, 245); 		/* Optional: Background for better visuals */
	}
	
	#visitHistory {
		list-style-type: none; 		/* Remove bullets */
		margin: 0; 					/* Reset default margins */
		padding: 0; 				/* Reset default padding */
	}
	
	#visitHistory li {
		border-bottom: 1px solid #ddd; 		/* Add a thin line between list items */
		padding: 10px 0; 						 /* Add spacing for better readability */
		transition: 0.3s;
	}

	#visitHistory li:hover {
		border-color: #003d77;			/* Change border Color for consistency */
		background-color: #003d77;		/* Change BG color to indicate what's selcted */
		color: white;					/* Change text color for readability */
	}

	.homeBanner {
		display: none;
	}

	.logoContainer {
		margin-top: 0;
		justify-self: center;
		align-self: center;
	}

	.logoContainer img {
		width: 150px;
		height: 150px;
	}

	#studySetCreation{
		margin: 25px;
		padding: 15px;
		border-radius: 15px;
		color:white;
		background:grey;
	}

	h4 {
		text-align: center;
		margin-top: 20px;
	}

	h5 {
		text-align: center;
	}

	/*edits the footer div*/
	footer {
		text-align: center;
		color: white;
		background-color: #c2c2c2;	
		width: 100%;
		position: relative;
		height: 25vh;
		margin-top: 10vh;
	}
}