/*
Description: This is the styling for my self-introduction website.
Version: 1.0.1
Author: Marvin Schank
Author URI: https://marvinschank.de/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* -------------------------------------------
 * Specific style decisions in the landing page (focus).
 * Since it is the landing page and the first thing a visitor sees, it needs special attention.
 * -------------------------------------------
 */
.focusImageAndTitle {
	flex-flow: row wrap;
}

.focusImageBox {
	flex-basis: 66.5%;
	flex-shrink: 0;
}

@media (max-width: 781px) {
	.focusImageBox {
		flex-basis: 100% !important;
	}
}

.focusImage {
	object-position: top;
}

.focusTitle {
	align-self: flex-end;
	padding-left: var(--image-text-padding);
	padding-top: var(--image-text-padding);
	flex-shrink: 4;
	display: flex;
	flex-flow: row wrap;
	max-width: 32%;
}

@media (max-width: 781px) {
	.focusTitle {
		max-width: 100% !important;
	}
}

.focusTitle h1 {
	padding-right: var(--image-text-padding);
}

.focusTitle nav {
	align-self: flex-end;
}

.focusBioTextBox {
	flex-basis: 66.5%;
}

@media (max-width: 781px) {
	.bioTextBox {
		flex-basis: 100% !important;
	}
}

.focusBioText {
	margin-left: auto;
	max-width: 66.5%;
}

@media (max-width: 781px) {
	.bioText {
		margin-left: 25px !important;
		margin-right: 25px !important;
		max-width: 100% !important;
	}
}

.focusBioPlaceholder {
	flex-basis: 33.5%;
}

@media (max-width: 781px) {
	.placeholder {
		width: 0px !important;
		flex-basis: auto !important;
	}
}