@media (max-width: 400px) {
	.mobile-only {
		display: block;
	}
	.desktop-only {
		display: none;
	}

	#container {
		width: 98%;
		margin: 1%;
	}
	
	.pg_home .profile_img {
		width: 100%;
		border: 0;
	}

	#pageHeader h1 {
		color: #000;
		font-size: 40px;
	}

	#flower {
		width: 20px;
		height: 20px;
		top: -20px;
		right: 0px;
	}

	#topnav li {
		width: 100%;
	}

	#topnav .arrow {
		display: none;
	}
	
	.pg_software .piece > div,
	.pg_games .piece > div,
	.pg_websites .piece > div,
	.pg_blog .piece > div
	{
		overflow: initial;
		height: auto;
		max-height: initial;
		padding-bottom: 20px;
		width: 100%;
		float: none;
	}

	.pg_software .piece aside,
	.pg_games .piece aside,
	.pg_websites .piece aside,
	.pg_blog .piece aside
	{
		margin-bottom: 20px;
		width: 100%;
		float: none;
	}

	.pg_software .piece aside img,
	.pg_games .piece aside img,
	.pg_websites .piece aside img,
	.pg_blog .piece aside img
	{
		/* scale image size */
		width: 100%;
	}

	.pg_software .piece aside.image_viewer img,
	.pg_games .piece aside.image_viewer img,
	.pg_websites .piece aside.image_viewer img,
	.pg_blog .piece aside.image_viewer img
	{
		/* unless in image viewer */
		width: initial;
	}

	.pg_software .piece.small > div,
	.pg_software .piece.small aside,
	.pg_games .piece.small > div,
	.pg_games .piece.small aside,
	.pg_websites .piece.small > div,
	.pg_websites .piece.small aside,
	.pg_blog .piece.small > div,
	.pg_blog .piece.small aside
	{
		overflow: initial;
		height: auto;
		max-height: initial;
		padding-bottom: 20px;
		width: 100%;
		float: none;
	}

}