/*
Madisen Caswell
ITWP 1050
This stylesheet applies styles to the Hocking Hills webpage for project3
*/

/* Global variable */
:root {
	--pageColor: #bd9a7a; /* Light brown to match the theme */
}

/* Web font */
@font-face {
	font-family: "Rye";
	src: url("webfonts/Rye-Regular.ttf") format("truetype");
}

/* Body styling */
body {
	font-family: 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;
}

/* h1 styling */
h1 {
	font-family: "Rye", cursive;
	text-align: center;
	text-shadow: -1px -1px 0 black,
		 1px -1px 0 black,
		-1px  1px 0 black,
		 1px  1px 0 black;
}

/* Footer styling */
footer {
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	font-size: 0.75rem;
	margin: 50px 0;
}

/* Link styling */
a {
	text-decoration: underline;
	color: var(--pageColor);
}

a:link {
	text-decoration: underline;
	color: var(--pageColor);
	font-weight: bold;
}

a:visited {
	text-decoration: underline;
	color: darkorange;
}

a:hover {
	text-decoration: none;
	color: darkgreen;
	font-weight: bold;
}

a:active {
	text-decoration: underline wavy yellow;
	font-weight: bold;
}

/* Responsive text */
.responsive-text {
	line-height: 1.5;
	color: #ffffff;
	transition: font-size 0.3s ease-in-out;
}

h1.responsive-text {
	font-size: 3rem;
}

p.responsive-text {
	font-size: 1rem;
	text-align: justify;
}

/* Image text description */
.image-text {
	color: white;
	font-size: 1rem;
	text-align: center;
	margin-top: 20px;
	font-family: Arial, Helvetica, sans-serif; /* Or add your custom font here */
}

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

/* Manual image rows */
.image-row {
	display: flex;
	gap: 20px;
	justify-content: space-between;
	margin-bottom: 2rem;
	flex-wrap: wrap;
}

.photo {
	flex: 1;
	text-align: center;
}

/* Container */
.container {
	max-width: 800px;
	margin: 0 auto;
	padding: 20px;
}

/* Gallery base styling */
.gallery {
	padding: 10px;
}

/* Image styling */
.gallery img {
	width: 80%;
	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);
}

/*color for h1*/
.intro-heading {
	color: darkorange;
	text-shadow: 2px 2px 4px black;
}

/*color for intro*/
.intro-paragraph {
	font-weight: bold;
	color: white;
	text-shadow: 2px 2px 4px black;
}