/*
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
*/

/* -------------------------------------------
 * These are style decisions for the about page.
 * -------------------------------------------
 */

/* -------------------------------------------
 * Specific style decisions in the 'cybrmzrt' section.
 * -------------------------------------------
 */
.cybrmzrtSecPicAndTitle {
	flex-flow: row wrap-reverse;
}

.cybrmzrtTitle {
	font-family: monospace;
	padding-right: var(--image-text-padding);
	margin-left: auto;
	flex-shrink: 0;
}

@media (max-width: 781px) {
	.cybrmzrtTitle {
		margin-left: 0 !important;
		padding-left: var(--image-text-padding) !important;
	}
}

.cybrmzrtImageBox {
	flex-basis: 60%;
}

.cybrmzrtPlaceHolder {
	flex-basis: 40%;
}

.cybrmzrtBioTextBox {
	flex-basis: 60%;
}

.cybrmzrtBioText {
	max-width: 95%;	
}

/* -------------------------------------------
 * Specific style decisions in the 'masteredbymav' section.
 * -------------------------------------------
 */
.masteredbymavSecPicAndTitle {
	flex-flow: row wrap;
}

.masteredbymavTitle {
	padding-left: var(--image-text-padding);
}

.masteredbymavImageBox {
	flex-basis: 60%;
}

.masteredbymavPlaceHolder {
	flex-basis: 40%;
}

.masteredbymavBioTextBox {
	flex-basis: 60%;
}

.masteredbymavBioText {
	max-width: 95%;
	margin-left: auto;
}

/* -------------------------------------------
 * Specific style decisions in the 'mschank' section.
 * -------------------------------------------
 */
.mschankSecPicAndTitle {
	flex-flow: row wrap;
}

.mschankTitleLeft {
	padding-right: var(--image-text-padding);
	margin-left: auto;
	flex-shrink: 0;
	order: 1;
}

@media (max-width: 781px) {
	.mschankTitleLeft {
		order: 2 !important;
		margin-left: 0 !important;
		padding-left: var(--image-text-padding) !important;
		padding-right: 0 !important;
	}
}

.mschankImageBox {
	flex-basis: 60%;
	flex-shrink: 0;
	order: 2;
}

@media (max-width: 781px) {
	.mschankImageBox {
		order: 1 !important;
	}
}

.mschankTitleRight {
	font-style: italic;
	padding-left: var(--image-text-padding);
	margin-right: auto;
	flex-shrink: 0;
	order: 3;
}

@media (max-width: 781px) {
	.mschankTitleRight {
		margin-left: 0 !important;
		padding-left: 0 !important;
	}
}

.mschankPlaceholderLeft {
	flex-basis: 20%;
}

.mschankBioTextBox {
	flex-basis: 60%;
}

.mschankPlaceholderRight {
	flex-basis: 20%;
}