/* 
  Name: Evan Jackovich
  Course: ITWP 1050
  Assignment: Project3
  Date: 5/2/2025
*/

/* section 1.0 step 4 (global variable)*/
:root {
  --pageColor: #f5f5f5; 
  --link-color: #0066cc;
}



/* section 1.1 (font)*/
@font-face {
  font-family: 'headlineFont';
  src: url('webfonts/Roboto-VariableFont_wdth,wght.ttf') format('truetype');
  font-weight: 100 900; 
  font-stretch: 75% 100%; 
  font-style: normal;
}


/* section 1.2 step 1(body selector)*/
body {
  font-family: 'headlineFont', Arial, Helvetica, sans-serif;
  margin: 3rem;
  padding: 0;
  box-sizing: border-box;
  background: url('images/background.jpg') no-repeat center center fixed;
  background-size: cover;
}

/* section 1.2 step 2 (h1 selector)*/
h1 {
  font-family: 'headlineFont', Arial, Helvetica, sans-serif;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
  text-align: center;
}



/* section 1.2 step 3 (footer)*/
footer {
  font-family: 'headlineFont', Arial, Helvetica, sans-serif;
  text-align: center;
  font-size: .75rem;
  margin-top: 50px;
  margin-bottom: 50px;
}



/* section 1.3 step 1 (a)*/
a {
  text-decoration: underline;
  color: var(--link-color);
}

/* section 1.3 step 2 (a:link)*/
a:link {
  text-decoration: underline;
  color: var(--link-color);
  font-weight: bold;
}

/* section 1.3 step 3 (a:visited)*/
a:visited {
  text-decoration: underline;
  color: purple; 
}

/* section 1.3 step 4 (a:hover)*/
a:hover {
  text-decoration: none;
  color: #ff4500; 
  font-weight: bold;
}

/* section 1.3 step 5 (a:active)*/
a:active {
  text-decoration: underline wavy #ff6347; 
  font-weight: bold;
}



/* section 1.4 step 1 (.responsive-text)*/
.responsive-text {
  font-size: 3rem;
  line-height: 1.5;
  color: white; 
}




/* section 1.4 step 2 (p.responsive-text)*/
p.responsive-text {
  font-size: 1rem;
  line-height: 1.5;
  color: white; 
  text-align: justify;
}



/* section 1.4 step 3 (image-text)*/
.image-text {
  font-size: 1rem;
  text-align: center;
  margin-top: 20px;
  color: white;
  font-family: 'headlineFont', Arial, Helvetica, sans-serif; 
}


/* section 1.4 step 4 (media query)*/
@media (max-width: 600px) {
  .responsive-text {
    font-size: 1.5rem;
  }
}



/* section 1.5 (grid)*/
.container{
	max-width: 800px;
	margin: 0 auto;
	padding: 20px;
}

.gallery{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 20px;
	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.3);
}