/*CSS Document used for project3 assignment
Author: Joe Licavoli
Course: ITWP1050*/

/* root selector with global variable*/
:root { 
	/* create variable for color white */
	--pageColor: #D3D3D3;
}

/* This is the webfont */
@font-face {
	/* grabs the source of the font and sets it to the website*/
	font-family: Font1;
	src: url('webfonts/WinkyRough-VariableFont_wght.ttf') format('truetype');
}

/* This is the Body selector*/
body {
	font-family: Font1, Arial, Helvetica, sans-serif;
	margin: 3rem;
	padding: 0;
	box-sizing: border-box;
	background: url("images/dock.jpg") no-repeat center center fixed;
	background-size: cover;
}

/* This is the H1 selector*/
h1 {
	font-family: Font1, Arial, Helvetica, sans-serif;
	text-shadow: 2px 2px black;
	text-align: center;
	color: darkgreen;
	font-size: 45px;
}

/* This is the img selector*/
img {
	border: 5px solid darkgreen;
	display: block;
  	width: 400px;
  	height: 250px;
}
/* This is the footer selector*/
footer {
	font-family: Font1, Arial, Helvetica, sans-serif;
	text-align:  center;
	font-size: .75rem;
	margin-top: 50px;
	margin-bottom: 50px;
}

/* The anchor tag selector */
a {
	/* Underlines text and sets color using variable */
	text-decoration: underline;
	color: var(--pageColor);
}
/* The anchor link state */
a:link {
	/* Underlines text, sets color using variable, and makes it bold */
	text-decoration: underline;
	color: var(--pageColor);
	font-weight: bold;
}
/* The anchor visited state */
a:visited {
	/* Underlines text and sets text color */
	text-decoration: underline;
	color: green;
}
/* The anchor hover state */
a:hover {
	/* Makes text decoration to none, sets text color, and makes text bold */
	text-decoration: none;
	color: green;
	font-weight: bold;
}
/* The anchor active state */
a:active {
	/* Adds wavy underline in dark red and bold text */
	text-decoration: wavy green underline;
	font-weight: bold;
}

.responsive-text {
	font-size: 3rem;
	line-height: 1.5;
	color: darkgreen;
}

p.responsive-text {
	font-size: 1rem;
	line-height: 1.5;
	color: black;
	text-align: justify;
}

.image-text {
	font-size: 1rem;
	text-align: center;
	margin-top: 20px;
	font-family: 'Font1', sans-serif;
}

@media screen and (max-width: 600px) {
    .responsive-text {
        font-size: 1.5rem;
       
    }
}

/*grid layout */
.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: 400px;
  	height: 250px;
	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);
}