.roboto-thin {
	font-family: "Roboto", sans-serif;
	font-weight: 100;
	font-style: normal;
}

body {
    background-color: #FAF9F6;
}

#Header {
    display: flex;
    justify-content: center;
    width: 100%;
}

a {
	color: inherit;
	text-decoration-color: purple;
}

#Header a h1 {
	min-width: 300px;
	max-width: 500px;
	text-align: center;

	font-family: "Roboto", sans-serif;
	font-weight: 200;
	font-style: normal;

	color: black;
}

#PhotopageTitle {
	font-family: "Roboto", sans-serif;
	font-weight: 400;
	font-style: normal;
	text-transform: uppercase;
	font-size: 18px;
	text-align: center;
	margin-bottom: 50px;
}

.p-container {
	font-size: 18px;
	font-family: "Roboto", sans-serif;
	font-weight: 100;
	font-style: normal;

	/* match .row */
	margin-left: 10px;
	margin-right: 10px;
}

.p-container p {
	padding-top: 6px;
	padding-bottom: 6px;
	border-left: solid 6px purple;
	padding-left: 6px;
}

.row {
	width: 100%;
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
}

img {
	border-radius: 10px;
}

.row .img-container {
	margin-left: 10px;
	margin-right: 10px;
}

.square-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 1130px) {
	.row {
		flex-direction: column;
		align-items: center;
		margin-bottom: 0px;
	}
	.img-container {
		margin-bottom: 20px;
	}
	.square-image {
		max-width: 500px;
	}

	.p-container.with-square-image {
		display: flex;
		justify-content: center;
	}
	.p-container.with-square-image p {
		width: 500px;
	}
}

.square-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* Ensures the image covers the square without distortion */
}

.grainy img {
	filter: contrast(120%) brightness(90%) sepia(10%) saturate(150%) grayscale(10%);
}

.full-width {
	width: 100%;
	display: flex;
    	justify-content: center;
}

.full-width img {
	width: 100%;
}