/*This is the CSS style sheet for Stella Aurorae Web Portal */
body,
html {
	/* fit the whole landing page on one page of desktop */
	margin: 0;
	padding: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow-x: hidden; /* Prevent horizontal scroll */
}

.container {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

h1 {
	/*I want a gold color*/
	color: #e1a250;
	font-family: "Times New Roman", Times, serif;
	font-size: 100px;
	font-weight: bold;
	text-align: center;
	margin: 20px 0; /* Add some margin */
	animation: slide-in 1s ease-out forwards; /* Add slide-in animation */
}

/* h2 {
	I want a Black color
	color: #0b0b0a;
	font-family: "Times New Roman", Times, serif;
	font-size: 60px;
	font-weight: bold;
	text-align: center;
	animation: slide-in 1s ease-out forwards; 
} */

.menu {
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: center;
	padding: 10px 0;
}

.menu ul {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0;
	color: blue;
}

.menu li {
	margin: 0 10px;
}

.logoStellaAurorae {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.small-rounded-photo {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	object-fit: cover;
	margin-right: 20px;
}

.container_laval_details,
.container_desire_details,
.container_ivan_details,
.container_greg_details {
	display: flex; 
	flex-direction: row;
	justify-content: column;
	align-items: center;
	font-size: 20px;
	margin: 20px 0;
}

.container_laval_details img,
.container_desire_details img,
.container_ivan_details img,
.container_greg_details img {
	display: block; 
	margin-right: 20px;
	
}

.container_laval_details div,
.container_desire_details div,
.container_ivan_details div,
.container_greg_details div {
	width: 100%;
	max-width: 600px; /* Limits the width of the text container */
}

.container_laval_details p,
.container_desire_details p,
.container_ivan_details p,
.container_greg_details p {
	font-size: 1rem; /* Use relative units for font size */
	line-height: 1.5;
	margin-bottom: 0.75rem; /* Add some margin at the bottom */
} 

.image-grid {
	display: grid;
	gap: 20px;
	top: 0;
	right: 0;
	/* display: row;*/ 
}

.image-grid .column {
	padding-left: 60px;
	display: flex; 
	flex-direction: column;
} 

.image-grid .column .row {
	display: flex;
	flex-direction: row;
}

#macs { /*position macs logo in about.html*/
	display: flex;
	padding-left: 60px;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

#sydney { /*position sydney logo in about.html*/
	display: flex;
	padding-left: 120px;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

#ipa-logo-laval { /*position ipa logo for laval details in about.html*/
	display: flex;
	padding-left: 60px;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

#ipa-logo-desire { /*position ipa logo for desire details in about.html*/
	display: flex;
	padding-left: 120px;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

@media (min-width: 2560px) { /*adjust screens for 27 inches screens*/
	h1 {
		font-size: 4em; /* Increase font size for larger screens */
	}
	h2 {
		font-size: 3em; /* Increase font size for larger screens */
	}
	.container_laval_details,
	.container_desire_details,
	.container_ivan_details,
	.container_greg_details {
		font-size: 1.5rem; /* Increase font size for larger screens */
	}
	.small-rounded-photo {
		width: 300px;
		height: 300px;
	}
	.menu a {
		font-size: 1.5rem; /* Increase font size for menu links */
	}
	form {
		max-width: 800px; /* Increase form width */
	}
	form button {
		font-size: 18px; /* Increase button font size */
	}
}

@media (min-width: 768px) {
	.container_laval_details,
	.container_desire_details,
	.container_ivan_details,
	.container_greg_details {
		flex-direction: row;
		align-items: flex-start;
	}
	.container_laval_details img,
	.container_desire_details img,
	.container_ivan_details img,
	.container_greg_details img {
		margin-bottom: 0;
		margin-right: 20px;
	}
}

/* Default styles for h1 */
h1 {
	font-size: 2em; /* Adjust as needed */
	text-align: center; /* Center align the text */
	margin: 20px 0; /* Add some margin */
}

/* Media query for small screens of size 600px*/
/* Media queries are used to apply different styles based on the screen size */
@media (max-width: 600px) {
	h1 {
		font-size: 1.5em; /* Reduce font size for smaller screens */
	}
	.container_laval_details,
	.container_desire_details,
	.container_ivan_details,
	.container_greg_details {
		flex-direction: column;
		align-items: center;
		padding: 0 10px;
	}

	.small-rounded-photo {
		width: 80px;
		height: 80px;
		margin-bottom: 10px;
	}

	h1 {
		font-size: 1.5em; /* Reduce font size for smaller screens */
	}

	.container_laval_details div,
	.container_desire_details div,
	.container_ivan_details div,
	.container_greg_details div {
		width: 100%; /* Make text container full width */
		padding: 10px; /* Add some padding for better readability */
	}

	p {
		font-weight: bold; /* Add bold font weight */
	}
}

@media (min-width: 1024px) {
	h2 {
		font-size: 40px;
	}
}

/* Increase font size of href links in the menu */
.menu a {
	font-size: 1.2rem; /* Adjust the size as needed */
	/*text-decoration: none; /* Optional: remove underline */
	color: inherit; /* Optional: inherit color from parent */
}

.footer {
	text-align: center;
	padding: 10px 0;
	background-color: #f1f1f1; /* Optional: Add background color to footer */
	margin-top: auto; /* Push footer to the bottom */
	color: #333; /* Optional: Change text color */
}

@keyframes slide-in {
	from {
		transform: translateX(-100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

/* Styles for the enquiry form */
form {
	max-width: 600px;
	margin: 0 auto;
	padding: 20px;
	background-color: #f9f9f9;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

form div {
	margin-bottom: 15px;
}

form label {
	display: block;
	margin-bottom: 5px;
	font-weight: bold;
}

form input,
form textarea {
	width: 100%;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
}

form button {
	width: 100%;
	padding: 10px;
	background-color: #e1a250;
	color: white;
	border: none;
	border-radius: 4px;
	font-size: 16px;
	cursor: pointer;
}

form button:hover {
	background-color: #d18e40;
}