@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&display=swap');

:root {
	--delicious-green-color: rgb(156, 162, 124); 
	--post-background-color: #777a62;
	/* --post-background-color: #5E695E; */
	/* --post-background-color: #CCD5AE; */
	/* --container-background-color: #777a62; */
	/* --container-background-color: ivory; */
	/* --container-background-color: #97998e; */
	/* --container-background-color: #CEE0DC; */
	/* --container-background-color: #FFFCFF; */
	/* --container-background-color: #97998E; */
	/* --container-background-color: #AFAD97; */
	--container-background-color: #FEFAE0;
	/* --post-background-color: #FFFCFF; */
	/* --border-color: rgb(129, 115, 86); */
	/* --border-color: #6e6a55; */
	--border-color: #585851;
	/* --post-text-color: #AFAD97; */
	--post-text-color: hsl(55, 13%, 74%);

	--border-width: 4px;
	--border-radius: 15px;
}

body {
	background: url("../../assets/spruce-forest-green-2360-mm-architextures.jpg");

	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;

	/* font-family: "Jacquard 12 Charted"; */
	font-family: Inconsolata;
}

.main-container {
	background: var(--container-background-color);

	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;

	width: 65%;
	/* margin-left: 5%; */
	/* margin-right: 5%; */
	/* margin: 100px; */

	border: var(--border-width) solid var(--border-color);
	border-radius: var(--border-radius);
}

#description {
	margin: 3%;
	font-weight: 700;
}

.posts-container {
	border: var(--border-width) solid var(--border-color);
	border-radius: var(--border-radius);
	width: 100%;
	height: 100%;

	/* background-color: var(--post-text-color); */
}

.post {
	background-color: var(--post-background-color);
	padding: 25px;
	margin: 25px;
	border: var(--border-width) solid var(--border-color);
	border-radius: var(--border-radius);

	/* color: var(--post-background-color); */
	color: var(--post-text-color);
	font-weight: bold;
	
	margin-left: 4%;
	margin-right: 4%;
}

.post-title {
	font-size: calc(1.25rem + 0.25vw);
	color: var(--container-background-color);
	font-weight: bold;
}

#page-title {
	align-self: start;
	margin-left: 6%;
	margin-top: 2%;
	margin-bottom: 1%;

	/* color: white; */
	font-weight: bold;

	font-size: calc(1.85rem + 0.25vw);
}

@media screen and (max-width: 600px) {
	.main-container {
		width: 85%;
	}
}