/* @import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Story+Script&display=swap'); */

:root {
	--scheme2: #198cff;
	--accent: #939393;
	--accent-lighter: #c2c2c2;
	--heading-2: var(--color8);

	--Marker: "Story Script", sans-serif;

	--Bricolage-Grotesque: "Lexend", sans-serif, "Bricolage Grotesque", sans-serif;

	/* These are the same but are here for reference */
	--bs-breakpoint-sm: 576px;
	--bs-breakpoint-md: 768px;
	--bs-breakpoint-lg: 992px;
	--bs-breakpoint-xl: 1200px;
	--bs-breakpoint-xxl: 1400px;
}

body {
	min-height: 100vh;
	padding-bottom: 4rem;
}

.logo-menu-wrapper  {
	padding-bottom: 2.8125rem;
}

.resume-sidebar {
	min-height: 90vh;
	max-height: 90vh;

	@media (max-width: 1290px) {
		display: none !important; /* Yes, hide the sidebar on mobile */
	}
}

:is(h1, h2, h3, h4, h5, h6) :is(b, strong, em, i),
.important {
	color: var(--scheme2);
}

:is(h1,h2,h3,h4,h5,h6) :is(strong,em,i,b) > :is(strong,em,i,b),
.important {
	color: var(--scheme2);
	font-family: var(--Marker);
	font-style: normal;
	font-size: 4.7rem !important;
	font-weight: bold;

	@media (max-width: 992px) {
		font-size: 3.7rem !important;
	}
}

.simple-link {
	text-decoration: none;
}

.layout-page :is(h1,h2,h3,h4,h5,h6) :is(strong,em,i,b) > :is(strong,em,i,b) {
	line-height: 2rem;
	display: inline;
	margin-left: 0;
	text-transform: none;

	font-size: 4rem;
	line-height: 3rem;

	@media(max-width: 768px) {
		font-size: 2.5rem;
		line-height: 2rem;
	}
}

.hidden {
	display: none !important;
}

img.logo {
	filter:
		grayscale(100%)
		sepia(40%)
		saturate(0)
		brightness(200%)
		contrast(0.92)
	;

	opacity: 0.3;

	&:hover {
		opacity: 0.6;
	}
}


.intro-box {
	gap: 1.5rem;
	margin-top: 0;

	.description {

		i[class*="fa"] {
			color: var(--scheme2);
			padding-left: 4px;
			padding-right: 2px;
		}
	}
}

/* This fixes odd spacing in these boxes */
.fun-fact-box {
	.text {
		font-size: clamp(1.2rem, 1.5vw, 4rem);
		line-height: clamp(1.4rem, 1.7vw, 4.2rem);
		white-space: nowrap;
	}

	.label {
		@media (min-width: 576px) {
			margin-bottom: 0.4rem;
		}
	}
}

.mobile {
	display: none;

	@media (max-width: 1200px) {
		display: unset;
	}
}

.desktop {
	display: none;

	@media (min-width: 1200px) {
		display: unset;
	}
}

p a {
	text-decoration: underline;
}

.help {
	cursor: help;
}

.social-links > a {
	border-width: 2px;
	border-color: #ffffff69;

	&:hover {
		border-color: white;
	}
}

.user-social-wrap:before {
	background-color: var(--accent) !important;
}

.flex-spacing {

	display: flex;
	justify-content: space-between;
	flex-direction: column;

	& > * {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	&.gap-lg {
		gap: 3rem !important;
	}

	&.gap-md {
		gap: 2.5rem;
	}

	&.gap-sm {
		gap: 1.5rem;
	}
}

.call-action-box {
	padding: 2.03125rem 2.5rem;
}

.scheme2 .sec-sub, .scheme2 .serv-box:hover, .scheme2 .serv-box > a, .scheme2 .comp-box:hover, .scheme2 .edu-box:hover, .scheme2 .exp-box:hover, .scheme2 .port-info > a, .scheme2 .gen-controls > div.gen-btn:hover, .scheme2 .gen-controls > div.gen-btn:focus, .scheme2 .plan-box:hover, .scheme2 .plan-box.active, .scheme2 .theme-btn2, .scheme2 .field-box:not(.attachment-field) > input:hover, .scheme2 .field-box:not(.attachment-field) > input:focus, .scheme2 .field-box:not(.attachment-field) > textarea:hover, .scheme2 .field-box:not(.attachment-field) > textarea:focus, .scheme2 .load-more-btn:hover, .scheme2 .load-more-btn:focus, .scheme2 .res-menu-btn {
	border-color: var(--accent);
}

.rounded-pill {
	color: var(--accent) !important;
}

h1,
h2,
h3 {
	color: var(--color7);
	font-weight: 600;
}

h4,
h5,
h6 {
	color: var(--accent);
	font-weight: 600;
}

.main-heading {
	font-size: 4rem;
	line-height: 4rem;
	font-size: clamp(3rem, 3.7vw, 4rem);
	line-height: clamp(3.2rem, 4vw, 4.2rem);
}

.layout-page .main-heading {
	max-width: 85%;

	@media (max-width: 992px) {
		max-width: 100%;
		text-align: center;
	}
}

.cont-links, nav ul li a:before {
	@media (max-width: 1030px) {
		display: block !important;
	}
}

.serv-box {
	padding: 3rem;

	> h1,
	> h2,
	> h3,
	> p:first-child {
		font-size: 1.5rem;
	}

	p {
		margin-bottom: 0;
	}
}

.call-action-box {
	.sec-title {
		> p:first-child {
			font-size: 1.5rem;
			line-height: 2rem;
		}
	}
}

p, ul li, ol li {
	line-height: 2.2rem;
}

.accent {
	color: var(--accent);
}

.port-detail-info-box > h2 {
	padding: 1.788125rem 2.5rem;
	color: var(--accent);

	b, strong, em, i {
		color: var(--accent);
	}
}

.cont-links > a:hover:not(.secondary),
.cont-links > a:focus:not(.secondary),
.res-menu-btn:hover,
.res-menu-btn:focus,
.res-menu-close,
.social-links > a::before,
.theme-btn:before, .theme-btn:after {
	background-color: #7b7b7b !important;
}

.light .resume-info,
.light .fun-fact-boxes,
.light .serv-box,
.light .comp-boxes,
.light .edu-box,
.light .exp-box,
.light .testi-box,
.light .plan-box,
.light .call-action-box,
.light .contact-wrap,
.light .port-detail-info-boxes,
.light .tags-box-wrap {

	/* This makes sure the shadow has spacing */
	margin-bottom: 1rem !important;
}

.tags-box {

	& > * {
		display: inline-block;
	}

	&.accent {
		color: var(--accent);
	}

	&.large > p {
		font-size: 1.5rem;
	}
}

h3, h4, h5, h6 {
	color: var(--accent);
}

.page-title {
	padding: 2rem 2.5rem;
}

.light .port-img > a:before, .light .page-title, .light .load-more-btn, .light .social-links2 > a, .light .port-detail-info-box > strong, .light .tagcloud > a {
	background-color: #fff7f787;
}

.greyscale {
	filter: grayscale(100%);
}

.plan-box {

	min-height: 100%;

	ul > li {
		font-size: 1.1rem;
		line-height: 1.2rem;
	}

	.plan-body ul li::marker {
		font-size: 1.1rem;
		line-height: 1.1rem;
	}

	.plan-head {

		> *:first-child {
			min-height: 4.5rem;
			max-height: 4.5rem;
		}
	}

	ul li::marker {
		content: "\f058";
	}
}

.port-detail-info-boxes {
	.heading {
		padding: 1.788125rem 2.5rem;
	}
}

.edu-box,
.exp-box {

	> ul, > ol, > p {
		text-align: left;
	}

	.who {
		padding-bottom: 1rem;

		& > * {
			display: inline;
			line-height: 1rem;
		}
	}

	> p,
	p {
		white-space: wrap;
	}
}

hr {
	border-top-color: var(--accent);
	width: 90%;
	margin-right: auto;
	margin-left: auto;

	&.spacer {
		visibility: hidden;
	}
}

.column-list-box {
	.tagcloud > span {
		text-align: left;
		font-size: 0.95rem;
	}
}

#inline-widget-aubreypwd > iframe {
	width: 100% !important;
	margin: 0 !important;
}

.page-contact-html {

	h1:first-child {
		display: none;
	}
}

header {

	z-index: 666;

	.cont-links {

		a {

			padding: 1rem 1rem 1rem;

			@media (max-width: 847px) {
				padding: 1rem 0.5rem 1rem;
			}

			@media (max-width: 791px) {

				padding: 1rem 0.2rem 1rem;

				&.home {
					padding: 1rem 0.5rem 1rem;
				}
			}

			&:nth-child(4) {
				margin-right: 1rem;
			}

			text-transform: uppercase;
			font-size: 1rem;
			font-weight: bold;

			&.accent {
				background-color: var(--accent) !important;
			}

			&.secondary {

				background-color: transparent !important;
				font-family: Lato, sans-serif;
				text-transform: none;
				color: var(--accent);
				font-style: italic;

				&:hover {
					color: #7b7b7b;
				}
			}

			&.home {

				@media (max-width: 791px) {
					margin-left: 0;
				}

				@media (max-width: 433px) {
					> span {
						display: none;
					}
				}
			}

			&.contact {
				@media (max-width: 847px) {
					display: none;
				}
			}

		}
	}
}

.businesses-boxes {
	padding: 2rem 1rem 3rem;
	border: 1px solid var(--accent-lighter);
	box-shadow: inset 1px 1px 39px var(--accent);
	border-radius: 2rem;
}

.snap-scroll {
	scroll-snap-type: x mandatory;
	scroll-padding-left: 1rem; /* matches px-3-ish, tweak if needed */
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none;     /* IE + old Edge */
	scrollbar-width: none;

	&::-webkit-scrollbar {
		display: none;
	}
}

.snap-scroll .row {
	margin-left: 0;
	margin-right: 0;
}

.snap-scroll .snap-item {

	scroll-snap-align: start;
	scroll-snap-stop: always;

	@media (max-width: 700px) {
		min-width: 90%;
		max-width: 90%;
	}
}

.btn-box {
	a {
		font-size: 0.85rem;
		padding: 0.85rem;

		@media (min-width: 992px) {
			font-size: 1rem;
			padding: 1rem;
		}
	}
}

.invisible {
	height: 0;
	min-height: 0;
	max-height: 0;
	overflow: hidden;
}

.page-claims-html header a.claims, .page-claims-html header a.claims:hover,
.page-experience-html header a.experience, .page-experience-html header a.experience:hover,
.page-process-html header a.process, .page-process-html header a.process:hover,
.page-pricing header a.pricing, .page-pricing header a.pricing:hover {
	color: var(--scheme2);
}

.underlined {
	text-decoration: underline;
}

.page-experience-html {
	.inspired-kid {
		img {
			border-radius: 50px;
			filter: sepia(0.3);
		}
	}
}

.primary-container {

	/* Fixes issue where at this range the edges meet the screen */
	@media (min-width: 1600px) and (max-width: 1667px) {
		padding: 2rem;
	}
}

h2 {
	color: var(--heading-2);
}

.breadcrumb li.breadcrumb-item {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	white-space: nowrap;
}

@media (max-width: 770px) {
	p, ul li, ol li, .plan-body ul li {
		font-size: 1.2rem;
	}
}

form {

	label {
		font-weight: bold;
		margin-bottom: 1rem;
		font-size: 1.3rem;
	}

	input[type="text"],
	input[type="url"] {
		max-width: 500px;
	}

	textarea {
		max-width: 700px;
	}

	.required {
		color: #d26e6e;
	}

	input,
	textarea {
		padding: 0.7rem !important;
	}

	input::placeholder,
	textarea::placeholder {
		color: var(--accent-lighter) !important;
	}

	.form-heading {
		margin-top: 2rem !important;
	}

	.form-check-input {
		margin-right: 1rem;
	}
}

.portfolio-article {

	.screenshot {
		border: 1px solid var(--accent-lighter);
		position: relative;

		&.before::before,
		&.after::before {

			display: block;
			position: absolute;
			bottom: 0;
			right: 0;
			background: white;
			color: var(--scheme2);
			border-top-left-radius: 1rem;
			font-weight: bold;
			font-size: clamp(0.5rem,3.5vw,1rem);
			padding: 0.5rem 1rem;
			text-transform: uppercase;
			font-family: var(--Bricolage-Grotesque);
		}

		&.before::before {
			content: "Before";
		}

		&.after::before {
			content: "After";
		}
	}

	.port-cat > span {

		display: inline-block;
		font-family: var(--Bricolage-Grotesque);
		-webkit-border-radius: var(--round50);
		border-radius: var(--round50);
		background-color: var(--accent);
		box-shadow: 0 0 10px var(--accent);
		color: var(--color1);
		font-weight: 300;
		font-size: 1rem;
		padding: 5px 1.375rem;
		color: white;
	}

	.port-detail-cap {

		.logo {
			display: inline-block;
		}
	}
}

.rounded-pill {

	a:hover {
		border-bottom: 1px solid var(--accent);
	}

	i.fas,
	i.far {
		margin-right: 0.5rem;
	}
}

ul > li::marker {
	color: var(--accent);
}

.content {

	img:not(.borderless) {
		border: 1px solid var(--accent-lighter);
		border-radius: 1rem;
		position: relative;
	}
}

.port-detail-cont {
	@media(max-width: 992px) {
		gap: 1.5rem;
	}
}

.list-style {
	padding-left: 2rem;
}

.document {
	background-color: hsl(0deg 0% 0% / 3%);
	padding: 2rem;
	border: 1px solid var(--accent-lighter);
	border-radius: 2rem;
}