/* pistachio */

@font-face {
  font-family: "PixelOperator";
  src: url("fonts/PixelOperator.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "PixelOperator-Bold";
  src: url("fonts/PixelOperator-Bold.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

* {
	margin: 0;
	padding: 0;
}

:root {
	--brd: #b5b5b5;
	--shadow: #728c54;
}

body.index-bod {
	height: 100%;
	overflow: hidden;
	}

body.posts-bod {
	overflow-y: auto;
	}

body {
	font-family: PixelOperator;
	background-color: white;
}

	#outer {
		width: 800px;
		border-right: 1px solid var(--brd);
		border-bottom: 1px solid var(--brd);
	}
	
	#pagetitle {
		/*background-image: linear-gradient(#eaf0e4, #ccd6c1, #a5b099);*/
		background-image: linear-gradient(#eaf0e4, white);
		padding: 2px 0 2px 10px;
		border-bottom: 1px dotted var(--brd);

		font-size: 16px;
		font-family: PixelOperator-Bold;
		letter-spacing: 5px;
		color: white;
		text-shadow: -1px -1px 1px var(--shadow), 1px -1px 1px var(--shadow), -1px 1px 1px var(--shadow), 1px 1px 1px var(--shadow);
	}
	
	#inner {
		display: grid;
		grid-template-columns: 200px;
		grid-template-rows: 1fr;
		grid-column-gap: 0px;
		grid-row-gap: 0px;
		
		height: 700px;
	}
	
		#sidebar {
			grid-area: 1 / 1 / 2 / 2;
			
			border-right: 1px dotted var(--brd);
			text-align: center;
			background-image: url('graphics/swirly.jpg');
		}
		
			#sidebar img {
				padding: 15px;
			}
		
			#sidebar li {
				text-align: left;
				padding: 5px;
				margin: 5px;
				border: 1px dotted var(--brd);
				border-radius: 5px;
				background-image: linear-gradient(white, white, #eaf0e4);
			}
			
			#sidebar li:hover {
				background-image: linear-gradient(#eaf0e4, white, white);
			}
			
			#sidebar a {
				text-decoration: none;
				font-size: 16px;
				color: #586647;

			}
		
		#main {
			grid-area: 1 / 2 / 2 / 3;
		}
		
		
		
		
/* POSTS STYLING */

	.entry {
		padding: 15px;
	}

	.titlespace {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0 0 15px 0;
	}
	
		.titlespace a {
			text-decoration: none;
			color: #5a8a25;
		}
	
	.pfp {
  		width: 60px;
  		height: 60px;
  		border-radius: 50%;
 		background-size: cover;
  		background-position: center;
}
	
	.username {
		font-size: 20px;
	}
	
	.date {
		font-size: 20px;
		text-align: right;
	}
	
	.postcontent {
		font-size: 20px;
	}
	
	.postimg {
		max-width: 400px;
		padding: 10px;
	}
	
/* BIO STYLING */

	#biospace {
	}
	
	#profile-header {
		height: 100px;
		background-size: cover;
		background-color: blue;
	}
	
	#profile-picture {
		width: 80px;
		height: 80px;
		margin: -50px 0 5px 10px;
		border-radius: 50%;
		background-size: cover;
  		background-position: center;
	}
	
	#bio-username {
		font-size: 25px;
		margin: 5px 0 5px 15px;
		font-family: PixelOperator-bold;
	}
	
	#bio {
		margin: 0 0 20px 15px;
	}