/* -------------------------------------------------------------------------- */
/* Core HTML Elements                                       
/* -------------------------------------------------------------------------- */

	body {
		position: relative;
		font-family: 'Hind', sans-serif;
		background-color: black;
	}


	h1, h2, h3, h4, h5 {
		font-family: 'Catamaran', sans-serif;
	}


/* -------------------------------------------------------------------------- */
/* Main Layout IDs & Classes                                       
/* -------------------------------------------------------------------------- */

	#header-bar {
		position: fixed; 
		top: 0px; 
		width: 100%;
		padding: 0 5%;
		color: white;
		background-color: rgb(0, 0, 0, 0);
		z-index: 300;
	}

	#content {
		position: absolute;
		top: 10000px; 
		width: 100%; 
		font-size: 18px;
		line-height: 1.5em;
		z-index: 200;
	}

	#about-content,
	#contact-content,
	#portfolio-content {
		margin: 0 5%;
		border: 1px solid black;
		background-color: rgb(255, 255, 255, .95);
		overflow: hidden;
	}

	#footer {
		margin-top: 4rem;
		border-top: 1px solid black;
		background-color: rgb(0, 0, 0, .35);
	}

	#footer-content {
		margin: 0 5%;
		line-height: 1em;
	}


/* -------------------------------------------------------------------------- */
/* Splash IDs & Classes                                       
/* -------------------------------------------------------------------------- */

	#splash {
		position: fixed;
		z-index: 100;
	}

	#splash-opacity {
		position: fixed;
		width: 100%;
		background-color: rgb(0, 0, 0, .35);
		z-index: 133;
	}

	#splash-content {
		position: absolute;
		display: inline-block;
		width: 100%;
		visibility: hidden;
		z-index: 166;
	}

	#splash-img {
		visibility: hidden;
	}

	#splash-title {
		margin-bottom: 1.5rem;
		text-transform: uppercase;
		letter-spacing: 5px; 
		font-size: 1.5em; 
		font-weight: 400;
		color: white;
	}

	#splash-btn {
		font-family: 'Hind', sans-serif;
		font-weight: 500;
	}


/* -------------------------------------------------------------------------- */
/* Logo IDs & Classes                                       
/* -------------------------------------------------------------------------- */

	.logo {
		font-family: 'Montserrat Alternates', sans-serif;
	}

	.logo::first-letter {
		font-size: 1.3em;
		color: orange;
	}

	.logo-dark {
		color: black;
	}

	.logo-light {
		color: white;
	}

	.logo-orange {
		color: orange;
	}


/* -------------------------------------------------------------------------- */
/* Portfolio IDs & Classes                                       
/* -------------------------------------------------------------------------- */

	.portfolio-div {
		position: relative;
		cursor: pointer;
	}

	.portfolio-text {
		position: absolute; 
		top: 50%; 
		left: 50%; 
		transform: translate(-50%, -50%);
		text-align: center;
		font-family: 'Catamaran', sans-serif;
		font-size: 1em;
		color: orange;
	}

	.portfolio-img {
		min-width: 100%;
		max-width: 100%;
	}


/* -------------------------------------------------------------------------- */
/* General IDs & Classes                                       
/* -------------------------------------------------------------------------- */

	.text-small {
		font-size: .9em;
	}

	.text-tiny {
		font-size: .7em;
	}

	.text-orange {
		color: orange;
	}

	.link-orange {
		color: orange;
	}

	.link-orange:hover {
		color: orange;
	}