html {
	height: 100%;
}
@media screen and (max-width: 348px) {
	html {
		font-size: .9rem;
	}
}

p:last-of-type {
	margin-bottom: 0;
}
/* Works on Firefox */
* {
	scrollbar-width: 5px;
	scrollbar-color: black rgba(0,0,0,.3);
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
	width: 5px;
}
  
*::-webkit-scrollbar-track {
	background: rgba(0,0,0,.3);
}

*::-webkit-scrollbar-thumb {
	background-color: black;
	border-radius: 20px;
	border: 3px solid rgba(0,0,0,.3);
}

body {
	background-image: url('../images/UrubambaRiver.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	background-position: center center;
	margin: 0;
	height: 100%;
	max-height: 100%;
	opacity: 1;
	transition: 1s opacity;
}

body.fade-out {
	opacity: 0;
	transition: none;
}

@media screen and (max-width: 1200px) {
	#content .overflow-auto {
		max-height: 61vh;
    	/*max-height: calc(100% - 15vw - 70px);*/
	}
	#pills-portfolio .overflow-auto {
		max-height: 51vh;
		/*Calc just doesn't seem to want to work.
		/*max-height: calc(100% - 15vw - 110px)*/
		/*max-height: calc(100% - 15vw - 80px - 5vh);*/
	}
}
@media screen and (min-width: 1201px) {
	#content .overflow-auto {
		max-height: 61vh;
    	/*max-height: calc(100% - 180px - 70px);*/
	}
	#pills-portfolio .overflow-auto {
		max-height: 51vh;
		/*Calc just doesn't seem to want to work.
		/*max-height: calc(100% - 15vw - 110px)*/
		/*max-height: calc(100% - 15vw - 80px - 5vh);*/
	}
}

/*
@media screen and (max-width: 1200px) {
	#content .overflow-auto {
		max-height: calc(100% - 15vw - 40px - 5vh);
	}

	#pills-about .overflow-auto, #pills-experience .overflow-auto, #pills-links .overflow-auto, #pills-contact .overflow-auto {
		max-height: calc(100% - 15vw - 40px - 5vh);
	}

	#pills-portfolio .overflow-auto {
		max-height: calc(100% - 15vw - 80px - 5vh);
	}
}
@media screen and (min-width: 1201px) {
	#content .overflow-auto {
		max-height: calc(100% - 220px - 5vh);
	}

	#pills-about .overflow-auto, #pills-experience .overflow-auto, #pills-links .overflow-auto, #pills-contact .overflow-auto {
		max-height: calc(100% - 220px - 5vh);
	}

	#pills-portfolio .overflow-auto {
		max-height: calc(100% - 260px - 5vh);
	}
}*/
header {
	padding: 0;
	margin: 0;
	font-family: 'Neucha';
	font-variant: small-caps;
	text-align: center;
	vertical-align: center;
}
@media screen and (max-width: 1200px) {
	header {
		font-size: 15vw;
		word-spacing: -1.5vw;
		line-height: 15vw;
	}
}
@media screen and (min-width: 1201px) {
	header {
		font-size: 180px;
		word-spacing: -18px;
		line-height: 180px;
	}
}

#nav {
	text-align: right;
}

.nav-link:hover {
	color: #70a9ff;
}

button.nav-link.active {
    background-color: rgba(0,0,125,.2) !important;
}

#pills-contact {
	max-width: 600px;
	margin: auto auto !important;
}

#pills-contact div:last-of-type {
	text-align: right;
}

.card {
	margin: 0 auto;
	float: none;
	margin-bottom: 10px;
	background: rgba(050, 050, 050, .3);
}
@media screen and (min-width: 850px) {
	.card {
		max-width: 750px;
	}
}
@media screen and (max-width: 849px) {
	.card {
		max-width: 500px;
	}
}

#pills-about, #pills-experience {
	padding: 1em;
	background: rgba(050, 050, 050, .3);
}
@media screen and (min-width: 768px) {
	#pills-about, #pills-experience {
		max-width: 726px;
		margin: auto auto !important;
	}
}

#content {
	height: 700px;
}

.tab-pane {
	height: 100%;
}

#pills-experience li {
	text-align: left;
}

#pills-links img {
	width: 50%;
	max-width: 400px;
}