/* CSS Document */
/*
	* Brandon Tiehen
	* Copyright 2024 (c) All Rights Reserved.
	* Front-End Developer (Portfolio)
	* Hosting: GitHub/Hostinger/Local (Testing Only)
	* - Mobile-First design
	* - https://github.com/brandontiehen/
*/
@import url("brandon.fonts.css");
/* FONTS (all sans-serif):
	~ Figtree, Raleway, Jersey 25, Poppins
*/

/* Normalize */
body{
	background-color:#222222;
	color:#DDDDDD;
	/*background:url("../img/congruent_outline.png");*/
	background:url("../img/folk-pattern-black.png");
	background-attachment: fixed;
	background-size:44%;
}
*{margin:0; padding:0; font-family:"Figtree";}
h1, h2, h3, h4, h5, h6, h1 *, h2 *, h3 *, h4 *, h5 *, h6 *, .nav-ul *{font-family:"Poppins";}
h1, h2, h3, h4, h5, h6, p{margin:2%; max-width:96%;}
.centertext{text-align:center;}
.container{width:100vw; max-width:100%; padding:0; margin: 0 auto;}
.sec-title{padding:4%;}
.spacer-quad-vert{padding:4% 0; clear:both;}
.spacer-triple-vert{padding:3% 0; clear:both;}
.spacer-double-vert{padding:2% 0; clear:both;}
a{
	color:#82EEFD;
	text-decoration:none;
	transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-ms-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	-webkit-transition: 0.2s ease-in-out;
}
a:hover{
	color:gold;
	/*text-decoration:underline;*/
	transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-ms-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	-webkit-transition: 0.2s ease-in-out;
	
}

/* Header/Navigation */
.topbar{
	background-color:#101010;
	position:fixed;
	width:100%;
	top:0;
	left:0;
	height:80px;
	border-bottom:1px solid #AAAAAA;
	z-index:3;
	box-shadow:0 0 15px rgba(0, 0, 0, 0.9);
}
header{
	padding:0;
	margin:0;
	text-align:center;
	position:absolute;
	width:100%;
	top:10px;
}
#name-link{
	text-decoration:none;
	color:inherit;
}
.nametag{
	padding:0;
	margin:0;
	text-align:center;
	color:#68B8E5;
	font-size:40px;
	top:0;
}
.nametag span{
	color:#AAAAAA;
}
.nav-container{
	background:rgba(0, 0, 0, 0.95);
	padding:1%;
	width:98%;
	max-width:98vw;
	font-size:1.7rem;
	text-align:right;
	position:fixed;
	height:100vh;
	top:0;
}
.hideNav{
	top:-120vh;
	transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-ms-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	-webkit-transition: 0.2s ease-in-out;
}
.nav-ul{
	list-style-type:none;
	max-width:60%;
	padding:20vh 0%;
	height:100vw;
	max-height:100%;
	margin:0 auto;
}
.nav-li{
	padding:5% 0%;
	max-width:90%;
}
.nav-a{
	text-decoration:none;
	color:#DDDDDD;
	scale:1;
	-webkit-scale:1;
	-o-scale:1;
	-moz-scale:1;
	-ms-scale:1;
	transition:0.2s ease-in-out;
	-ms-transition:0.2s ease-in-out;
	-moz-transition:0.2s ease-in-out;
	-webkit-transition:0.2s ease-in-out;
	-o-transition:0.2s ease-in-out;
}
#navigation{
	max-height:0;
}
.nav-container:hover .nav-a{
	color:#BBBBBB;
}
.nav-a:hover{
	color:#FFFFFF !important;
	scale:1.03;
	-webkit-scale:1.03;
	-o-scale:1.03;
	-moz-scale:1.03;
	-ms-scale:1.03;
	transition:0.2s ease-in-out;
	-ms-transition:0.2s ease-in-out;
	-moz-transition:0.2s ease-in-out;
	-webkit-transition:0.2s ease-in-out;
	-o-transition:0.2s ease-in-out;
}
.nav-btn{
	position:relative;
	float:right;
	margin-top:20px;
	margin-right:20px;
}
#nav-close{
	background:rgba(180, 0, 0, 0.85);
	height:50px;
	width:50px;
	border:1px solid red;
	color:#FFFFFF;
	font-weight:bold;
}
#nav-close:hover{
	cursor:pointer;
	background:rgba(244, 0, 0, 0.85);
}
/* MAIN CONTENT */
main{
	margin-top:60px;
	z-index:1;
	bottom:0;
}
.landing-container{
	padding-top:30vh;
	height:70vh;
	max-height:60%;
	width:100vw;
	max-width:100%;
	/*background:url("../img/cloudy-day.png");*
	background:url("../img/folk-pattern-black.png");
	background:url("../img/blue-snow.png");*/
	background-attachment:fixed;
	color:#0ABB59;
}
h1.intro-hv{
	font-size:2.8rem;
	text-align:center;
}
span.intro-lt{
	font-size:1.4rem;
	font-style:italic;
	color:#FFB800;
	margin-left:-10%;
}
/*#landing, */#portfolio, #about, #contact{box-shadow:15px 15px 15px rgba(0, 0, 0, 0.75);}
.about-container{
	/*background:url("../img/dark_wood.png");*
	background:url("../img/folk-pattern-black.png");*/
	background:url("../img/beanstalk-dark.png");
	/*background: url("../img/herringbone.png");*/
	/*background:url("../img/blue-snow.png");*/
	background-attachment:fixed;
	background-position:center;
	background-repeat:repeat;
	overflow:hidden;
	color:#FFFFFF;
	padding:4% 2%;
	max-width:96%;
}
#about img{
	max-width:13vw;
	padding:0% 1%;
	position:relative;
	display:block;
	margin:0 auto;
}
.portfolio-container{
	/*background:url("../img/blue-snow.png");*-/
	background:url("../img/congruent_outline.png");*/
	background: url("../img/congruent_outline.png");
	background-attachment:fixed;
	background-repeat: repeat;
	min-height:100vh;
}
#contact{
	min-height:70vh;
	padding-top:30vh;
	width:100vw;
	max-width:100%;
}
/* Images & Videos 
-- Note: Always add .padded- after the img-center class/add it LAST in your classes.*/
.img-center, .img-center img{
	padding:0;
	display:block;
	margin:0 auto;
}
.padded-1{padding:1%;}
.padded-1-vert{padding:1% 0;}
.padded-1-horiz{padding:0% 1%;}
.padded-2{padding:2%}
.padded-2-vert{padding:2% 0;}
.padded-2-horiz{padding:0% 2%;}
img.codeicon{max-width:10em;}
.folio-img{
	display:block;
	max-width:100%;
	padding:0%;
	margin:0 auto;
	/*opacity:0.7;
	-o-opacity:0.7;
	-ms-opacity:0.7;
	-moz-opacity:0.7;
	-webkit-opacity:0.7;*/
	scale:0.98;
	-webkit-scale:0.98;
	-o-scale:0.98;
	-moz-scale:0.98;
	-ms-scale:0.98;
	transition:0.2s ease-in-out;
	-ms-transition:0.2s ease-in-out;
	-moz-transition:0.2s ease-in-out;
	-webkit-transition:0.2s ease-in-out;
	-o-transition:0.2s ease-in-out;
	border:1px solid #AAA;
	filter: grayscale(77%);
	-webkit-filter: grayscale(77%);
	-moz-filter: grayscale(77%);
	-ms-filter: grayscale(77%);
	-o-filter: grayscale(77%);
}
#portfolio:hover .folio-img:not(:hover){
	transition:0.2s ease-in-out;
	-ms-transition:0.2s ease-in-out;
	-moz-transition:0.2s ease-in-out;
	-webkit-transition:0.2s ease-in-out;
	-o-transition:0.2s ease-in-out;
	scale:0.95;
	-webkit-scale:0.95;
	-o-scale:0.95;
	-moz-scale:0.95;
	-ms-scale:0.95;
	filter: blur(1px);
	-webkit-filter: blur(1px);
	-o-filter: blur(1px);
	-ms-filter: blur(1px);
	-moz-filter: blur(1px);
	/*opacity:0.5;
	-webkit-opacity:0.5;
	-o-opacity:0.5;
	-moz-opacity:0.5;*/
	opacity:0.7;
	-o-opacity:0.7;
	-ms-opacity:0.7;
	-moz-opacity:0.7;
	-webkit-opacity:0.7;
}
.folio-img:hover{
	filter: grayscale(0%);
	-webkit-filter: grayscale(0%);
	-moz-filter: grayscale(0%);
	-ms-filter: grayscale(0%);
	-o-filter: grayscale(0%);
	opacity:1;
	-o-opacity:1;
	-ms-opacity:1;
	-moz-opacity:1;
	-webkit-opacity:1;
	scale:1.03;
	-webkit-scale:1.03;
	-o-scale:1.03;
	-moz-scale:1.03;
	-ms-scale:1.03;
	transition:0.2s ease-in-out;
	-ms-transition:0.2s ease-in-out;
	-moz-transition:0.2s ease-in-out;
	-webkit-transition:0.2s ease-in-out;
	-o-transition:0.2s ease-in-out;
}
.profile-scaled{
	position:relative;
}
.profile-center{
	padding:0;
	display:block;
	margin:0 auto;
}
.text-right{text-align:right;}
.skill-list{
	list-style-type:none;
}
.skill-list li{
	padding:2% 4%;
}
img[class*="profile-"]{
	min-width:50%;
	max-width:60%;
}
.contact-container{max-width:100vw;}
.contact-input{
	display:block;
	margin:2% auto;
	text-align:center;
	padding:1%;
	width:200px;
}
textarea.contact-input{
	height:200px;
}

/* FOOTER */
#github-footer-logo{
	padding:0;
	margin:0px 5px;
	height:15px;
}
footer img{max-width:100%;}/*Default for imgs in footer to not overflow-x*/
footer{
	/*margin-top:40vh;*/
	color:#777777 !important;
	top:0;
	padding:4% 0;
	width:100vw;
	max-width:100%;
	/*background:url("../img/dark_wood.png");*/
	background-attachment: fixed;
	color:#242424;
	/*box-shadow:0 0 15px rgba(0, 0, 0, 0.75);*/
}
.footer-links{
	list-style-type:none;
}
.footer-links li{
	display:inline;
	width:40px;
	height:auto;
	padding:3%;
}
.footer-links li a img{
	opacity:0.7;
	-o-opacity:0.7;
	-ms-opacity:0.7;
	-moz-opacity:0.7;
	-webkit-opacity:0.7;
	filter:invert(1);
	transition:0.2s ease-in-out;
	-ms-transition:0.2s ease-in-out;
	-moz-transition:0.2s ease-in-out;
	-webkit-transition:0.2s ease-in-out;
	-o-transition:0.2s ease-in-out;
	width:28px;
}
.footer-links li a img:hover{
	opacity:1;
	-o-opacity:1;
	-ms-opacity:1;
	-moz-opacity:1;
	-webkit-opacity:1;
	transition:0.2s ease-in-out;
	-ms-transition:0.2s ease-in-out;
	-moz-transition:0.2s ease-in-out;
	-webkit-transition:0.2s ease-in-out;
	-o-transition:0.2s ease-in-out;
}

/* MEDIA QUERIES */
@media all and (min-width:800px){
	/*.container{width:85%; display:block; margin:auto;}*/
	.contact-container{max-width:75vw; margin:0 auto;}
	.nav-btn{
		display:none;
	}
	#navigation{
		max-height:81px;
	}
	.nav-ul{
		list-style-type:none;
		padding:0;
		margin:0 auto;
		float:right;
		margin-top:18px;
		width:60vw;
	}
	.nav-li{
		display:inline;
		padding:0% 2%;
		text-align:right;
		
	}
	nav{
		position:relative;
		height:80px;
		width:75vw;
		max-width:75vw;
		float:right;
	}
	.nav-container{
		position:relative;
		background:none;
		height:80px;
		padding:0;
	}
	#nav-close{display:none;}
	.nametag{
		text-align:left;
		margin-left:20px;
	}
	img[class*="profile-"]{
		min-width:65%;
		max-width:75%;
	}
}
@media all and (min-width:1080px){
	/*.container{max-width:75%;}*/
	.contact-container{max-width:70vw; margin:0 auto;}
	.landing-container{
		padding-top:35vh;
		height:65vh;
	}
	.codeicon{width:120px;}
	img[class*="profile-"]{
		min-width:65%;
		max-width:75%;
	}
}