/*
Garden Variety is a suite of CSS styles and javascript functions that seek to
serve as a basis for building a social media platform interface.

At the moment, Garden Variety ***DOES NOT*** offer any backend components
whatsoever. It isn't intended to be a platform on its own.

Garden Variety is intended to work on all form factors out the box, so that you
won't need to fiddle with anything to give your site support for mobile devices.

It is intended to be simple, straight forward, and flexible.
*/

body {
	font-size: 13px;
	font-family: sans-serif;
	margin: 75px 15px 175px 15px;
	padding: 15px;
}

body.gv-white {
	background-color: white;
	color: rgb(35, 35, 35);
}

body.gv-dark {
	background-color: rgb(35, 35, 35);
	color: white;
}

/*A header bar at the top of the screen. Fixed to the top.*/
.gv-top-section {
	background-color: white;
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	height: 50px;
	font-size: 15px;
	display: flex;
	flex-direction: row;
	align-items: center;
	align-content: center;
	box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.2);
}

body.gv-dark .gv-top-section {
	background-color: black;
	box-shadow: 0px 0px 35px 0px rgba(135, 135, 135, 0.2);
}

/*
Stay to the right using flexbox (this might not work, so I might remove it).
*/
.gv-hold-right {
	align-self: flex-end;
}

.gv-top-section .gv-profile {
	display: flex;
	font-size: 11px;
	margin-top: auto;
	margin-right: 5px;
	position: relative;
	letter-spacing: 5px;
	margin-bottom: auto;
	align-items: center;
	text-decoration: none;
	color: rgb(135, 135, 135);
	text-transform: uppercase;
	transition: 0.175s;
}

.gv-top-section .gv-profile:hover {
	color: rgb(135, 195, 235);
	transition: 0.235s;
}

.gv-top-section .gv-profile span {
	position: relative;
}

.gv-top-section .gv-profile span::after {
	top: 175%;
	opacity: 0;
	content: "";
	height: 1px;
	width: 100%;
	left: -0.75%;
	transition: 0.935s;
	position: absolute;
	background-color: rgba(135, 135, 135, 0.5);
}

.gv-top-section .gv-profile:hover span::after {
	width: 75%;
	left: 10.75%;
	opacity: 0.3;
	transition: 1.735s;
}

.gv-profile-infobox {
	top: 50px;
	right: 0%;
	width: 300px;
	display: none;
	height: 315px;
	transition: 1s;
	padding: 35px;
	line-height: 1.5em;
	position: absolute;
	background-color: white;
	box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.3);
}

.gv-top-section .gv-profile img {
	border-radius: 100%;
	height: 35px;
	width: 35px;
	margin-top: auto;
	margin-bottom: auto;
	border-width: 1px;
	border-color: rgba(0, 0, 0, 0.1);
	box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2);
	border-style: solid;
	margin-left: 5px;
	margin-right: 5px;
}

.gv-top-section .gv-network-name {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 3px;
	color: rgb(175, 175, 175) !important;
	margin: 0px 10px 0px 10px;
}

/*Network icon. Should be wrapped up in a div.*/
.gv-top-section .gv-network-name img {
	max-width: 45px;
	height: auto;
	margin-right: 5px;
}

.gv-profile-icon img {
	overflow: hidden;
  width: 100%;
}

.left {
	margin-left: auto !important;
}

.right {
	margin-right: auto !important;
}

.gv-profile-icon.left {
	margin-right: 15px;
}

.gv-profile-icon.right {
	margin-left: 15px;
}

/*
Post related classes.
*/
.gv-canvas {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-around;
}

.gv-post {
	min-width: 40%;
	max-width: 40%;
	margin: 15px;
	border-width: 1px;
	border-style: solid;
	border-radius: 5px;
	min-height: 35%;
	font-size: 15px;
	line-height: 1.75em;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.gv-post .text {
	margin: 45px;
}

.gv-post .empty {
	position: relative;
	min-height: 100px;
	width: 100%;
}

.gv-post img {
	margin: auto;
	width: 100%;
	height: auto;
	overflow: hidden;
	border-radius: 3px;
}

.gv-white .gv-post {
	border-color: rgba(35, 35, 35, 0.2);
	background-color: white;
	box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.3);
}

/*A place for all your actions*/
.gv-actionbar {
	position: fixed;
	left: 32.5%;
	right: 32.5%;
	bottom: 15px;
	padding: 5px;
	min-width: 35%;
	max-width: 35%;
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: space-around;
	background-color: white;
	color: rgb(135, 135, 135);
	height: 45px;
	border-radius: 15px;
	border-style: solid;
	border-width: 1px;
	border-color: rgba(35, 35, 35, 0.1);
	box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.3);
	text-transform: uppercase;
	letter-spacing: 5px;
	transition: 1.315s;
}

.gv-post-button img {
	max-width: 32px;
	height: auto;
}

@media all and (max-width: 800px) {
	.gv-canvas {
		flex-direction: column;
	}

	.gv-post {
		min-width: 100%;
		max-width: 100%;
	}

	.gv-actionbar {
		min-width: 100%;
		max-width: 100%;
		border-radius: 0px;
		left: 0;
		right: 0;
		bottom: 0;
		transition: 1.315s;
	}
}