/*!
Theme Name: Mike
Description: The theme for my personal site that displays information about me.
Version: 1.0.4
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: mikemccully.com
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/*
	The template layout styles.
*/
#page {
	margin-top: 0;
	display: flex;
	flex-wrap: wrap;
}

#masthead {
	flex: 0 0 100%;
}

#primary {
	flex: 1 0 80%;
	min-height: 68vh;
}

#secondary {
	flex: 0 0 15%;
}

#colophon {
	flex: 0 0 100%;
}

/*
	The header styles.
*/
#masthead {
	background-color: #800000;
	height: 150px;
	display: flex;
	background-image: url("../images/header-bg.jpg");
	background-position-y: 50%;
	background-size: 100%;
	background-blend-mode: soft-light;
}

#masthead .site-branding {
	height: 150px;
	flex: 0 0 50%;
}

#masthead .site-branding h1 {
	position: absolute;
	left: 50px;
	top: 25px;
}

#masthead .site-branding h1 a {
	text-decoration: none;
	color: white;
}

/*
	The widget panel styles.
*/
#secondary {
	background-color: #600000;
}

#secondary #primary-menu {
	display: flex;
	flex-direction: column;
}

#secondary .main-navigation {
	display: flex;
	padding-top: 10%;
}

#secondary .main-navigation .menu-menu-1-container {
	position: relative;
	left: 25%;
}

#secondary #primary-menu .menu-item a {
	color: white;
}

/*
	The footer styles.
*/
#colophon .site-info {
	background-color: #600000;
	height: 100px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
}

#colophon a.logo_linkedin img {
	height: 40px;
	margin-top: 5px;
}

/*-------------------------------------------------------------------------------------------------
*
*	The content styles.
*
-------------------------------------------------------------------------------------------------*/

/*
	"About Me" styles.
*/
#primary {
	margin-left: 2%;
	margin-right: 2%;
}

#primary div.mm-about-me-container {
	display: flex;
	align-items: top;
	justify-content: center;
}

#primary div.mm-image-row {
	display: flex;
	align-items: center;
	justify-content: center;
}

#primary div.mm-image-row div {
	width: 150px;
	height: 150px;
	margin-left: 90px;
	margin-right: 90px;
}

#primary div.mm-about-me-container p.summary {
	margin: 0px;
	margin-bottom: 10px;
}

#primary div.mm-image-right-side img {
	max-width: 300px;
}

/*
	"Resume" styles.
*/
div:is(
	#mm-resume-synopsis, #mm-resume-employment, #mm-resume-education
) {
	margin-top: 0px;
	margin-bottom: 0px;
}

/* Hide the content of the sections, but display the labels */
.hidden {
	position: absolute;
	visibility: hidden;
	opacity: 0;
	max-height: 0;
	overflow: auto;
	transition: visibility 0s, opacity 0.5s linear;
}

.visible {
	visibility: visible;
	opacity: 1;
}

/* Display the label for the acheivements lists */
div.mm-resume-employer ul:before {
	content: attr(aria-label);
	font-size: 120%;
	font-weight: bold;
}

h3.mm-resume-title {
	font-size: 200%;
	font-style: italic;
	margin: 0px 0px;
	cursor: pointer;
}

h5.mm-resume-title {
	font-size: 130%;
	margin: 0px 0px 10px 0px;
	cursor: pointer;
}

p.mm-resume-contact {
	margin: 0px 40px;
}

p.mm-resume-summary {
	padding-left: 1em;
	padding-right: 1em;
	text-align: justify;
	margin-top: 20px;
	margin-bottom: 0px;
}

div#mm-resume-strengths, div#mm-resume-proficiencies {
	margin-top: 20px;
	margin-bottom: 20px;
}

div.mm-resume-columns {
	display: flex;
	column-gap: 50px;
	padding-left: 20px;
	padding-right: 20px;
}

div.mm-resume-columns>*:is(p) {
	text-align: justify;
	margin: 0;
}

div#mm-resume-proficiencies>div.mm-resume-columns>*:is(p) {
	margin: 0;
	margin-bottom: 10px;
}