html {
  /* Global color variables and layout for the page background */
  --darker-color: black;
  --accent-color: white;
  width: 100%;
  min-height: 100vh;
  position: relative;
  background-image: url('../images/papertexture.jpg');
  background-size: 100%;
  background-repeat: repeat;
  background-position: top left;
}

/* CSS Reset for consistent baseline across browsers */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var, u, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* Body base styles */
body {
	line-height: 1.3;
	text-align: center;
	margin: 0; /* Remove side margins for full-width background */
	min-height: 100vh;
	background: transparent; /* Ensure html's background shows through */
}

/* List styles */
ol, ul {
	list-style: none;
	list-style-type: square;
}

/* Headings */
h2{
	font-size: 1em;
	font-weight:bold;
	padding: 10px 8px 10px;
}

/* If you want overlay text to always be white: */
.boxHover h3, .boxHover p {
	color: #fff;
	font-size: 2.5em;
	font-weight:bold;
	padding: 10px 8px 10px;
}

/* Container for the image boxes ("cards") */
.boxgallery{
	margin: auto;
	padding:0px 30px 15px;
	max-width: 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: flex-start;
}

/* Individual image box/card */
.box {
	display: inline-block;
	position: relative;
	height: 300px;
	margin: 5px;
	background-color: transparent;
	border: 0;
	/* Default box shadow for card effect */
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	vertical-align: top;
	overflow: hidden;
	/* Transition for smooth shadow and movement on hover */
	transition: box-shadow 0.3s cubic-bezier(.4,2,.6,1), transform 0.3s cubic-bezier(.4,2,.6,1);
}

/* Hover/focus effect: "raise up" card and deepen shadow */
.box:hover, .box:focus-within {
	box-shadow: 0 12px 24px 0 rgba(0,0,0,0.35), 0 24px 48px 0 rgba(0,0,0,0.22);
	transform: translateY(-8px) scale(1.03);
	z-index: 2;
}

/* Make the link fill the box */
.box a {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	text-decoration: none;
	color: inherit;
}

/* Image fills the box height, keeps aspect ratio */
.box a img {
	display: block;
	height: 100%;
	width: auto;
}

/* Overlay label stripe at the top of the card */
.boxHover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%; /* or 33% if you want a stripe */
	background-image: url('../images/blackpapertexture.jpg');
	background-size: contain;
	opacity: 0;
	transition: opacity 0.4s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	text-align: center;
	padding: 0 12px;
	box-sizing: border-box;
}

/* Show overlay on hover/focus */
.box a:hover .boxHover,
.box a:focus .boxHover {
	opacity: 1;
}

/* Content area styles */
.content{
	background-color: white;
	border: 4px solid white;
	margin: auto;
	margin-bottom: 15px;
	text-align: left;
	max-width: 1300px;
}

/* Paragraph padding */
p{
	padding: 10px 12px 10px;
}

/* Footer styles */
footer{
	width: 100%;
}