/* Filename: styles.css
   Name: Aaron Robinson
   Course: ITWP-1050
   Assignment Info: This is the third and final project for the course, created to demonstrate the skills learned with CSS throughout the duration of the course */
   
/* Root selector with a global variable */ 
:root {
	--pageColor: yellow;
}
	
/* References a font to be used for the h1 element of text. */
@font-face {
	font-family: headlineFont;
	src :url(webfonts/Oswald-VariableFont_wght.tff);
	font-style: normal;
}

/* Body selector that changes the font family to the following */
body {
	font-family: "Oswald", "Arial", Helvetica, sans-serif;
	margin: 3rem;
	padding: 0;
	box-sizing: border-box;
	background: url("images/PXL_20240714_215417028-min.jpg") no-repeat center center fixed;
	background-size: cover;
}

/* H1 element selector that adjusts various properties for the text used in this element */
h1 {
	font-family: "Oswald", "Arial", Helvetica, sans-serif;
	text-shadow: 16px 16px 8px #336699;
	text-align: center;
}

/* Footer element selector that adjusts the font, text size, margin and alignment. */
footer {
	font-family: "Oswald", "Arial", Helvetica, sans-serif;
	text-align: center;
	font-size: .75rem;
	margin-top: 50px;
	margin-bottom: 50px;
}

/* Pseudo class for the a element */
a {
	text-decoration: underline;
	color: var(--pageColor);
}

/* Pseudo class for any links on the page */
a:link {
	text-decoration: underline;
	color: var(--pageColor);
	font-weight: bold;
}

/* Pseudo class that styles any link that's already been visited */
a:visited {
	text-decoration: underline;
	color: SkyBlue;
}

/* Pseudo class used to style any links that the user hovers over with their mouse */
a:hover {
	text-decoration: none;
	color: Red;
	font-weight: bold;
}

/* Pseudo class that activates when the user clicks on a link */
a:active {
	text-decoration: underline wavy;
	color: Red;
	font-weight: bold;
}

/* Class for responsive text */
.responsive-text {
	font-size: 3rem;
	line-height: 1.5;
	color: yellow;
}

/* Class for responsive text that uses the p tag */
p.responsive-text {
	font-size: 1rem;
	line-height: 1.5;
	color: yellow;
	text-align: justify;
}

/* Class that adjusts the text descriptions for images */
.image-text {
	font-size: 1rem;
	text-align: center;
	margin-top: 20px;
	font-family: "Oswald", "Arial", Helvetica, sans-serif;
	color: yellow;
}

/* Media query with a breakpoint that modifies the font-size for the any text that uses the specified class below whenever the viewport is the listed size or less */
@media screen and (max-width: 600px) {
	.responsive-text {
		font-size: 1.5rem;
	}
}

/* Grid layout for the images on the page */
.container {
	max-width: 800px;
	margin: 0 auto;
	padding: 20px;
}

.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
	gap: 100px;
	padding: 10px;
}
.gallery img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 2px 4px 8px 10px rgba(0, 0, 0, 0.1);
	transition: transform 0.4s ease-in-out;
}
.gallery img:hover {
	transform: scale(1.1);
}