@media only screen and (min-width:600px){ 



	/* Adds these attributes to the entire webpage*/
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	html, body {
		height: 100%;
		width: 100%;
		margin: 0;
	}

	/* Body attributes */
	body {
		font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serifd;
		background-color: rgb(245, 245, 245);
		display: flex;
		flex-direction: column;
		height: auto;
	}
	body {
		cursor: default; /* Standard cursor for the page */
	}
	
	/* Apply only to truly empty/non-editable areas */
	*:not(input):not(textarea):not([contenteditable="true"]):not(button):not(a) {
		user-select: none; /* Prevent accidental selection */
		cursor: default; /* Stops text cursor from appearing */
	}
	
	
	
	
	/* Header attributes */
	/* header includes subheader */
	header{
		width: 100%;
		margin-top: -3vh;
		margin-bottom: 3vh;
		justify-items: center;
	}

	/* Edits subheader */
	.subheader{
		display: flex;
		grid-column: auto;
		margin-top: 30px;
		width: 30%;			
		align-self: center;
		justify-content: center;
		background: rgb(245, 245, 245);
		border-radius: 10px;	
		border-color:#c2c2c2;
		border-style: solid;
		border-width: 2px;
	} 
	
	/*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:rgb(40, 40, 40);
		padding: 10px;
	}
	


/* --------------------------------- NAVBAR STYLING --------------------------------- */
	/* Navbar attributes */
	nav {
		background-color: rgb(218, 41, 28);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
		width: 70%;
		padding: 0px 20px;
		margin-top: 10px;
		position: absolute;
		height: 70px;
		border-radius: 10px;
		display: inline-flex;
		align-items: center;
		align-self: center;
		justify-content: space-between;
	}

	/* Edits unordered list that stores the links in the navbar*/
	nav ul {

		margin-left: 15px;
		list-style-type: none;
		display:flex;
		align-items: center;
	}

	/* Edits unordered list items*/
	nav ul li {
		margin: 0 2px;			/* Creates spaces on the side of each link*/
	}

	/* 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;
		transform: scale(1.1);
		display: block;
	}	
	
	/*This is for the login/signup button*/
	nav #auth-link{
		margin-left: 15px;
		list-style-type: none;
		display:flex;
		align-items: left;
	}

    nav #auth-link a {
		color: white;
		text-decoration: none;
		font-size: 18px;
		padding: 20px;
		display: block;
		margin-right: 40px;
		transition: 0.3s;
	}
	nav #auth-link a:hover {
		background-color: rgb(173, 36, 36);
		height: auto;
		transform: scale(1.1);
		display: block;
	}	
	
	/* Edits the part of the searchbar you type into */
	nav #searchbar{
		background-color: white;
		width: 50%;				
		padding: 10px;	
		justify-self: left;
		justify-content: left;
		justify-items: left;	
		align-self: left;
		text-align: left; /* Centers the text inside */	
		border-radius: 15px;	
		outline: none;
	}

/* --------------------------------- NAVBAR STYLING --------------------------------- */




/* --------------------------------- IMAGE STYLING --------------------------------- */

	.homeBanner img {
		border: 3px solid rgb(218, 41, 28);
		border-left: none;
		border-right: none;
		margin-top: 2vh;
		width: 100%;
		height: 400px;
		object-fit:	cover;
	}

	.logoContainer img {
		width: 80px;
		height: 80px;
		margin: 5px;
	}

/* --------------------------------- IMAGE STYLING --------------------------------- */




/* --------------------------------- CONTENT STYLING --------------------------------- */

	/*This edits all paragraph attributes if they are in the content class*/
	.content {
		width: 100%;
		align-items: center;
		justify-content: center;
		align-content: center;
		display:flex;
		flex-direction: column;
	}
	.content p{
		width: 50%;
		text-align: center;
	}
	.content a{
		margin:auto;
	}
	.content h2 {
		margin-top: 2vh;
		width: 50%;
		text-align: center;
		color:rgb(40, 40, 40);
	}
	


	/* Edits container for welcomeContainer and banner img */
	.homeBanner {
		position: relative;
		text-align: center;
		color: white;
	}



	/* Edits text header on the home index page, under the navbar, above the banner */
	.welcomeContainer {
		width: 100%;
		height: 100%;
		position:absolute;
		align-content: center;
	}
	.welcomeContainer h1 {
		text-decoration: none;
		margin-bottom: 15px;
		font-size: 66px;
	}
	.welcomeContainer p1 {
		font-size: 22px;
	}
	.welcomeContainer li {
		list-style-type: none;
		margin-top: 50px;
		margin-bottom: 25px;
	}
	.welcomeContainer li a {
		text-decoration: none;
		font-weight: bold;
		padding: 20px;
		background-color: rgb(218, 41, 28);
		color: white;
		border-radius: 10px;
		transition: .3s;
	}
	.welcomeContainer li a:hover {
		background-color: rgb(173, 36, 36);
	}
	
	

	/* this edits the attributes of the content div*/
	.homeSetContainer {
		/*margin-top: 10px;*/ 	
		text-align: center;	
		display: flex;
		width: 80%;
		align-self: center;
		min-height: 40vh;
		flex: 1;
		justify-content: center; /* Centers items */
    	overflow: hidden; /* Prevents clipping */
	}

	/* Edits the User Library Buttons */
	.homeSetContainer a {
		display: inline-block;
		border-radius: 10px;
		border-color: #d8d7d7;
		border-width: 2px;
		border-style: solid;
		padding-top: 1rem;
		padding-bottom: 1rem;
		color: rgb(40, 40, 40);
		text-decoration: none;
		background-color: rgb(245, 245, 245);
		transition: 0.3s;
		margin: 10px;
		text-align: center;
		white-space: nowrap; /* Prevents unwanted text wrapping */
		max-width: 100%; /* Ensures it doesn’t exceed the parent */
		overflow: hidden; /* Prevents any text or border from spilling out */
		align-self: center;
	}
	

	.homeSetContainer a:hover {
		color: white;
		background-color: rgb(218, 41, 28);
		border-color: rgb(218, 41, 28);
		transition: 0.3s;
	}
	


	/*This edits the two divs of userSets and viewedSets inside of the content div*/
	#userSets, #viewedSets{
		width: 50%;			
		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;
	}

	/* 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 */
	}
		
/* --------------------------------- CONTENT STYLING --------------------------------- */



	/* Edits the footer div*/
	footer {
		background-color: #c2c2c2;
		width: 100%;			
		position: relative;		
		min-height: 10vh;		
		bottom: 0px;
	}







	/*-------class----------*/
	.disabled-link {
		pointer-events: none; /* Prevents clicking */
		user-select: none; /* Prevents text selection */
		text-decoration: none !important; /* Removes hover effects */
		color: inherit !important; /* Keeps default text color */
	}
	
	.editing-mode {
		cursor: text !important; /* Force I-beam cursor */
		pointer-events: auto; /* Allow interaction */
		user-select: text; /* Enable text selection */
	}
	
	
	
}