* {
	box-sizing: border-box;
}

.headerImage {
	width: 100%;
}

html {
	background-color: #d3e6d5;
}

div h1 {
	text-align: center;
	font-weight: bold;
	padding-right: 20px;
}

body {
	background-color: #f4f1e1;
	margin: 10%;
}

/*article {
	float: right;
	width: 20%;
	padding: 10px;
	margin-bottom: 140px;
	background-color: rgb(169, 184, 170);
	
}*/

.container-fluid {
	background-color: rgb(169, 184, 170);
	padding: 25px;
}

.nav-item {
	padding: 5px;
}

.nav-item :hover {
	color: brown;
}

.nav-link {
	color: black;
}

.post1 {
	float: left;
	width: 100%;
	text-align: center;
}


.post1container {
	display: flex;
}

.post2container {
    display: flex;
}

.post2 {
	text-align: center;
}

.post2 img {
    width: 100%;
    max-width: 300px; /* or whatever works visually */
    height: auto;
    object-fit: cover; /* or 'contain' depending on your needs */
}


.post2 p {
	margin-left: 15px;
	margin-right: 15px;
	color: #7A7A7A;
}



/*.post3 p {
	margin-left: 15px;
	margin-right: 15px;
	color: #7A7A7A;
}*/


body > main > div > div.post2container > div.post2 > img,
body > main > div > div.post2container > div.post3 > img {
    width: 33%;
    height: auto;
    object-fit: contain;
}

figcaption {
    font-style: italic;
}


body > main > div > div.post2container > div.post2 > button,
body > main > div > div.post1container > div > button {
	background-color: white;
	margin-bottom: 25px;
}








.option1 {
	max-width: 45%;
	height: auto;
}

.option2 {
	max-width: 45%;
	height: auto;
}

.widget {
	border-style: solid;
	width: 90%;
}

footer {
	background-color: rgb(169, 184, 170);
	display: block;
	clear: both;
	text-align: center;
}


@media screen and (max-width:600px){
    article{
        width: 100%;
    } 
	#post1 {
		width: 100%;
	}
	body > main > div > div.post2container > div:nth-child(2) > p,
	body > main > div > div.post2container > div:nth-child(1) > p {
		display: none;
	}
	.post2 img {
		width: 100%;
		max-width: 300px; /* or whatever works visually */
		height: auto;
		object-fit: cover; /* or 'contain' depending on your needs */
	}
	body > main > div > div.post2container > div:nth-child(1) {
		width: 40%;
		margin-left: 5%;
	}
	body > main > div > div.post2container > div:nth-child(2) {
		width: 40%;
		margin-left: 5%;
	}
}

#gone{
	visibility: hidden;
}