:root {
	--base-font: 1rem;
	--body-font: 1.45rem;
	--header-font: 2.4rem;
	--yellow: #feda6a;
	--silver: #cfcffd;
	--matteGrey: #393f4d;
	--slate: #1d1e22;
	--primary: var(--yellow);
	--secondary: var(--matteGrey);
	--tertiary: var(--slate);
	--navBG: var(--tertiary);
}

.fill-space {
	width: 100%;
	height: 100%;
}

.flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.flex-column {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}

.flex-row {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
}

.horizontal-center {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.vertical-center {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.absolute-center {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

main {
	height: 100%;
	width: 100%;
	overflow: hidden;
}

h1,
h2,
h3,
h4 {
	font-weight: 100;
}

h1 {
	font-size: 3.2rem;
}

h2 {
	font-size: 1.8rem;
}

.section-wrapper {
	/* scroll-snap-type: x mandatory; */
	scroll-behavior: smooth;
	overflow-x: hidden;
}

section,
.content {
	height: 100%;
	width: 100%;
	min-width: 100%;
	max-width: 100%;
}

section {
	overflow-y: auto;
	padding: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23cbae54' fill-opacity='0.2'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
	background-color: #feda6a;
	color: #393f4d;
	background-color: var(--primary);
	color: var(--secondary);
}

.section--active {
	position: fixed;
}

.content {
	margin: 0px;
	padding: 100px 0px;
	display: flex;
}

.content__title {
	padding: 0px 0px 40px 0px;
	font-size: 2.4rem;
	font-size: var(--header-font);
	text-align: center;
}

.content__body {
	max-width: 900px;
	margin: 0px auto;
	font-size: 1.45rem;
	font-size: var(--body-font);
	line-height: 1.8;
}

.intro {
	width: 90%;
	margin: 0 auto;
	text-align: center;
}

.intro__sub-header {
	font-size: 2rem;
	line-height: 1;
	padding: 15px 0px;
}

.intro__kicker {
	display: none;
}

/*
=============================================
||                                         ||
||        	How I Do It Section            ||
||                                         ||
=============================================
*/
.skills {
	width: auto;
	height: auto;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

.skill {
	height: 130px;
	flex: 1 0 350px;
	overflow: hidden;
	border: 2px solid;
	border-color: #393f4d;
	border-color: var(--secondary);
	margin: 40px 10px;
	padding: 15px;
	transition: all 0.4s linear;
}

.skill__bubble {
	width: 15px;
	height: 15px;
	display: inline-block;
	border-radius: 50%;
	border: 2px solid;
	border: 2px solid;
	border-color: #393f4d;
	border-color: var(--secondary);
}

.skill__bubble--filled {
	background-color: #393f4d;
	background-color: var(--secondary);
}

.skill:hover {
	height: 500px;
	background-color: #393f4d;
	background-color: var(--secondary);
	color: #feda6a;
	color: var(--primary);
}

.skill:hover .skill__bubble {
	border-color: #feda6a;
	border-color: var(--primary);
}

.skill:hover .skill__bubble--filled {
	background-color: #feda6a;
	background-color: var(--primary);
}

.compentencies {
	padding: 20px;
}

.compentencies li {
	line-height: 1.4em;
	margin-bottom: 25px;
	padding-left: 15px;
}

.competent--yes {
	list-style: '\1F44D';
}

.competent--no {
	display: block;
	color: #708090;
}

/*
=============================================
||                                         ||
||        Navigation Button Styles         ||
||                                         ||
=============================================
*/
.button--nav {
	position: absolute;
	top: 25px;
	right: 30px;
	width: 75px;
	height: 75px;
	z-index: 10;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	border: 3px solid #feda6a;
	border: 3px solid var(--primary);
	border-radius: 50%;
	background-color: #1d1e22;
	background-color: var(--navBG);
	color: #fff;
}

.button--nav:hover {
	cursor: pointer;
}

.icon-wrapper {
	height: 200%;
	padding: 14px 0px;
	transition: transform 0.4s ease;
}

.nav--visible .icon-wrapper {
	transform: translateY(-40%);
}

.nav--hidden .icon-wrapper {
	transform: translateY(0%);
}

.button--nav__icon {
	width: 45px;
	height: 45px;
}

/*
=============================================
||                                         ||
||              Footer Styles              ||
||                                         ||
=============================================
*/
.footer {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	height: auto;
	display: block;
	transform: translateZ(0%);
	will-change: transform;
}

.nav--visible .footer {
	transform: translateY(0%);
	transition: transform 0.4s ease-in;
}

.nav--hidden .footer {
	transform: translateY(110%);
	transition: transform 0.4s ease-out;
}

/*
=============================================
||                                         ||
||           Navigation Styles             ||
||                                         ||
=============================================
*/
.nav {
	min-height: 250px;
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: var(--navBG);
}

.nav-item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 0 100px;
	padding: 10px;
	font-size: 1.4rem;
	color: #fff;
	background-color: #1d1e22;
	background-color: var(--tertiary);
}

.nav-item__link {
	color: #fff;
}

.nav-item:hover {
	cursor: pointer;
}

.nav-item:hover .nav-item__link,
.nav-item--active .nav-item__link {
	color: #feda6a;
	color: var(--primary);
}

.js-nav-item--active__border {
	transition: transform 0.3s ease;
}

/*
=============================================
||                                         ||
||              MEDIA QUERIES              ||
||                                         ||
=============================================
*/
@media screen and (min-width: 725px) {
	.intro__kicker {
		display: block;
		font-size: 1.2rem;
		line-height: 4;
	}

	/*
    =============================================
    ||                                         ||
    ||           Navigation Styles             ||
    ||                                         ||
    =============================================
    */
	.nav {
		flex-direction: row;
	}

	.nav-item--active__border {
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 5;
		width: calc(100% / 4);
		height: 10px;
		display: block;
		background-color: #feda6a;
		background-color: var(--primary);
	}
}