/*
	SocialMedia.css
	Handles displaying the faux social media posts.
*/

#SocialMediaPost {

	& .positive .post-header,
	& .positive .post-body,
	& .positive .post-footer {
		filter: hue-rotate( 180deg );
	}

	display: flex;
	align-items: center;
	justify-items: center;
	background-color: rgba(255,255,255,0.5);
	
	& .media-stream {
		overflow: hidden;
		display: flex;
		flex-direction: column-reverse;
		align-items: center;
		isolation: isolate;
	}
	
	& .media-post {
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: column;
		margin:auto;
		
		animation-duration: 0.5s;
		animation-fill-mode: forwards;
		animation-name: SOCIAL-MEDIA-POST;

		
		& .avatar-icon {
			width: 100px;
			height: 100px;
			background-size:100%;
			position: absolute;
			left: 30px;
			top: -20px;
			
			& img {
				height:100%;
				width:auto;
			}
		}
				
		& .post-header {
			background-image:
				url( '../images/social-media/social-media-top.png');
			background-size:100%;
			aspect-ratio:410 / 80;
			background-repeat: no-repeat;
			padding-left: 31.7%;
			display: flex;
			flex-direction: column;
			align-items: start;
			justify-content: center;
			color: black;
			font-weight: bold;
			font-size: var( --large-font-size );
			
			& div:last-child {
				margin-bottom:5%;
			}
		}
		
		& .socmed-name {
			color: white;
			font-size: var( --body-font-size );;
		}

		& .post-body {
			background-image:
				url( '../images/social-media/social-media-middle.png');
			background-size:100%;
			background-repeat: repeat-y;
			color: black;
			font-weight: bold;
			font-size: var( --body-font-size );;
			line-height: 1.3;
			padding-left: 60px;
			padding-right: 60px;
			
			& p {
				font-size: var( --body-font-size );;
				margin-top: 10px;
				margin-bottom: 10px;
			}
			& .emoji {
				font-size: 200%;
			}
		}
		& .post-footer{
			width:100%;
			aspect-ratio: 410 / 110;
			background-image:
				url( '../images/social-media/social-media-bottom.png');
			background-repeat: no-repeat;
			background-size:100%;
			text-align: right;
			display: grid;
			align-items: center;
			padding-right: 7.3%;
			font-weight: bold;
			color: black;
			font-size: var( --body-font-size );	;
		}
		
	}
	& button {
		margin-bottom: 30px;
		background-image: url("../images/social-media/button.png");
		width: 250px;
		height: 75px;
		font-family: var(--heading-font);
		font-size: var( --large-font-size );
		border: none;
		background-color: transparent;
		box-shadow: none;
	}

}

@keyframes SOCIAL-MEDIA-POST {
	0% {
		transform: translate( 0px, 50px );
		opacity: 0;
	}
	100% {
		transform: translate( 0px, 0px );
		opacity: 1;
	}
}