@charset "utf-8";
/* CSS Document */

h1 {
	font-size: 90px;
	margin: 0;
	box-sizing: border-box;
	padding-left: 5%;
	padding-right: 5%;
	bottom: 10%;
}

.mind-page-title {
	height: 400px;
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	text-align: center;
	position: relative;
	z-index: 3;
	box-shadow: 0 0 3px rgb(0,0,0),0 3px 46px rgb(0,0,0);
}

.mind-page-title h1 {
	/* Leave space for the floating arrow */
	margin-bottom: 4%;
}

.mind-post_main {
	max-width: 1260px;
	width: 1260px;
	display: grid;
	grid-template-columns: 1fr 4fr 1fr;
	margin: auto;
}

.mind-post_content-header {
	/*
		TODO: decide whether the image should be full-size (without rounded borders),
		or with the same margin as the content, with rounded borders.

		SAME-AS-CONTENT:
		margin-top: 50px;

		CURRENTLY:
		full-size.
	 */

	margin: 0 -60px;
	padding: 0 0 20px;
}

img.mind-post_feature-image {
	width: 100%;
	/*
	TODO: see .mind-post_content-header.

	SAME-AS-CONTENT:
	border-radius: 5px;
	*/
}

.mind-post_content code {
	font-family: monospace;
	background-color: rgb(20, 20, 20);
	border-radius: 2px;
	font-size: 14px;
	padding: 7px 5px 2px;
}

.mind-post_content pre code {
	border-radius: 0;
	padding: 0;
}

.mind-post_content pre {
	background-color: rgb(20, 20, 20);
	overflow-x: scroll;
	border: 1px solid black;
	border-radius: 5px;
	font-size: 14px;
	color: white;
	padding: 10px;
	margin: 0 20px 2em;
}

.mind-post_content {
	overflow: hidden; /* to hide, eg., overflowing code */
	padding: 0 60px;
  text-align: justify;
	background-color: rgb(40, 40, 40);
	box-shadow: 0 0 3px rgb(0,0,0),0 3px 46px rgb(0,0,0);
	position: relative;
	z-index: 2;
	font-size: 19px;
	color: rgb(200, 200, 200);
  box-sizing: border-box;
}

.mind-post_content h1, .mind-post_content h2, .mind-post_content h3, .mind-post_content h4, .mind-post_content h5, .mind-post_content h6 {
	text-align: left;
}

.mind-post_content blockquote {
	border-left: 4px solid paleturquoise;
	border-radius: 6px;

	color: rgb(180, 180, 180);
	background-color: rgb(30, 30, 30);

	margin: 20px 0;
	padding: 10px 30px;
}

.mind-post_content li {
	margin: 0 0 1em;
}

/*.mind-post_content a {
  position: relative;
}

.mind-post_content a:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 1px;
	bottom: 0;
	left: 0;
	background-color: paleturquoise;
	visibility: hidden;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
}

.mind-post_content a:hover:before {
	visibility: visible;
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
}*/

.mind-post_sidebar {
	padding: 0 20px;
	background-color: rgb(30, 30, 30);
	box-shadow: 0 0 3px rgb(0,0,0),0 3px 46px rgb(0,0,0);
	height: 100%;
}

.mind-post_sidebar-content {
	padding: 90px 0 10px;
	position: sticky;
	top: 0;
}

.post-card-sidebar_main {
	/* Layout */
	display: flex;
	flex-direction: column;
	margin: 20px 0;

	/* Style */
	background-color: rgb(40, 40, 40);
	border-radius: 5px;
	box-shadow: 0 0 2px rgb(0,0,0),0 2px 3px rgb(0,0,0);
	transition: .3s;
}

.post-card-sidebar_main:hover {
	transform:translate3d(0,-5px,0);
	box-shadow: 0 0 2px rgb(0,0,0),0 2px 15px rgb(0,0,0);
}

.post-card-sidebar_feature-image {

	/*
	The following 3 statements are used
	to make all images have the same size.

	This has the downside of being relatively more difficult to scale,
	so if you want to go back to normal viewing (full image)
	only leave:
	width: 100%;
	*/
	object-fit: cover;
	width: 100%;
	height: 100px;
	max-height: 100%;


	border-radius: 5px;
}

.post-card-sidebar_meta {
	font-weight: 700;
	text-transform: uppercase;
	font-size: 12px;
	color: rgb(180, 180, 180);
}

.post-card-sidebar_header {
	margin: 0 5px 0;
	padding: 0 5px 10px;
}

.post-card-sidebar_tag {
	color: #3fd5ff;
}

/* ARROW BOUNCE */
@keyframes bounce {
	0% { top: 88%; }
	50% { top: 85%; }
	100% { top: 88%; }
}