/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.3.6,
* Autoprefixer: v10.3.1
* Browsers: last 4 version
*/

/*overall document*/
@media (max-width: 900px) {
	.port-box, .home-box, .res-boxy, .anav{ 
	width:100% !important;
	}
	
	nav{
		/*flex-direction:column;*/
	}
	
	form{
		width:90% !important;
	}
	
	.home-img{
	/*display: block;*/
	max-width:100%;
	}
}

@media (min-width: 900px) {
	/*html,body{
		height: 100%;
		width: 100%;
	}
	
	.homie {
	  /* The image used *
	  background-image: url('images/code_3.jpg');
	
	  /* Full height *
	  height: 100%;
	  width: 100%; 
	
	  /* Create the parallax scrolling effect *
	  background-attachment: fixed;
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
	}*/
	
	.port-box, .res-boxy, .home-box {
	/*min-height:calc(100vh - 6rem);*/
	}
	
	#content{
	width:45%;
	padding-right:3rem;
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	    -ms-flex-direction:column;
	        flex-direction:column;
	}

	.home-img{
	/*display: block;*/
	margin:auto;
	/*max-height:calc(100vh - 7.5rem);
	/*max-width:100%;*/
	}
	
	/***portfolio***/
	.port-box{
		display:grid;
		grid-template-columns: auto auto;
		grid-template-rows: auto auto auto auto auto auto;
		align-content: center;
		/*gap: 1em;
		justify-content: space-evenly;*/
	}
	.port-img{
		/*height: 25vw;*/
	}

	.port-box p {
		margin: 10%;
	}

}


*{
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	/*outline: solid pink 1px;*/
}

html{
	scroll-padding-top: 4rem; /* height of sticky header, 
								keeps the section headers from being obscured */
	scroll-behavior:smooth;
}

body{
	background-color: #1A1A1A;
	color: #e5e5e5;
	width:96%;
	max-width: 1500px;
	margin:auto;
	font-family:"Georgia", Georgia, serif;
	font-size: 1.25rem;

}

.light-mode{
	background-color: #f9f9f9;
	color: #1A1A1A;
}

.error{
	color:red;
}

.success{
	color:green;
}
/*-------header---------*/
header{
	/*position: fixed;
	left: 0; this was the thing that was causing problems*/
	background-color: rgba(24, 24, 24, .9);
	position: sticky; /*not sure how this is going to fare in older browsers but...*/
	height:4rem;
	top:0;
	-webkit-transition: -webkit-transform .5s;
	transition: -webkit-transform .5s;
	-o-transition: transform .5s;
	transition: transform .5s;
	transition: transform .5s, -webkit-transform .5s; /* Animation */
}

#logo{
	float:left;
	margin:auto;
	padding:.7rem; 
	max-width:100%;
	max-height:100%;
	-webkit-transition: -webkit-transform .2s;
	transition: -webkit-transform .2s;
	-o-transition: transform .2s;
	transition: transform .2s;
	transition: transform .2s, -webkit-transform .2s; /* Animation */
}
#logo:hover{
	-webkit-transform: scale(1.1);
	    -ms-transform: scale(1.1);
	        transform: scale(1.1);
}

#name{	
	float:left;
	margin: auto;
	padding:.55rem;
	font-size:1.17rem;
	-webkit-transition: -webkit-transform .2s;
	transition: -webkit-transform .2s;
	-o-transition: transform .2s;
	transition: transform .2s;
	transition: transform .2s, -webkit-transform .2s; /* Animation */
	max-height:100%;
}
#name:hover{
	-webkit-transform: scale(1.03);
	    -ms-transform: scale(1.03);
	        transform: scale(1.03);
}
#name:active{
	color:#f9eb97;
}
.dark-link{
	color: #e5ae75;
}
.light-link{
	color: #a02b24;
}

#backlight{
	float:right;
	margin-top: .5rem;
	max-width:50%;
	max-height:50%;
	cursor:pointer;
	-webkit-transition: -webkit-transform .2s;
	transition: -webkit-transform .2s;
	-o-transition: transform .2s;
	transition: transform .2s;
	transition: transform .2s, -webkit-transform .2s; /* Animation */
}
#backlight:hover{
	-webkit-transform: scale(1.128);
	    -ms-transform: scale(1.128);
	        transform: scale(1.128);
}


/*-------misc--------*/
#uppie{
	/*this div allows me to keep the up button within the body on larger screens*/
	position: fixed;
	bottom: 4rem;
	width:96%;
	max-width: 1500px;
	margin:auto;
	/*outline: solid pink 1px;*/
}
#up{
	/*position: fixed;
	/*bottom: 4rem;*/
	float:right;
	margin-left: calc(100vw-2.5rem);
	right: 0rem;
	max-width:2.5rem;
	z-index: 3;
	-webkit-transition: -webkit-transform .2s;
	transition: -webkit-transform .2s;
	-o-transition: transform .2s;
	transition: transform .2s;
	transition: transform .2s, -webkit-transform .2s; /* Animation */
}
#up:hover{
	-webkit-transform:scale(1.1);
	    -ms-transform:scale(1.1);
	        transform:scale(1.1);
}

.homie{
	height:auto;
	/*min-height:calc(100vh - 7.5rem);
	/*outline: solid pink 1px;*/
	margin-bottom: 3rem;
}
/*this is for all the sections*/
.mainie{
	height:100%;
	/*min-height:calc(100vh - 7.5rem);
	/*outline: solid pink 1px;*/
	margin-bottom:auto;
	margin-top: 2rem;
}
#contact{
	margin-top: 3rem;
}
#res-boxy{
	margin-top: 3rem;
}

/*profile image*/
/*background colors for header and nav divs*/
.header-nav-light{
	background-color: rgba(245, 245, 245, .9);
}
.border-left-light{
	border-left: solid rgba(245, 245, 245, .9) .1rem;
}
.border-bottom-light{
	border-bottom: solid rgba(245, 245, 245, .9) .1rem;
}
	

/*------home-------*/
/*this is the fix for anchors not jumping properly. 
  This puts the content in the right divs*/
#home:before{
	width:100%;
	content: "";
	display: table;
	clear: both;	
}

.home-box{
	float:left;
	/*width:50%;*/
	margin:auto;
	/*margin-top:.5rem;*/
	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;
}

#pic{
	width:55%;
}

#content{
	width:45%;
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	    -ms-flex-direction:column;
	        flex-direction:column;
}
#content>h1{
	margin-bottom:0rem;
}

#home:after{
	content: "";
	display: table;
	clear: both;
}

/*--------Resume------------*/
#res{
	overflow:auto;
	/*outline: solid orange 1px;*/
}
.section-head{
	width:100%;
	content: "";
	display: table;
	clear: both;
	color: #e5ae75;
}
.section-head-light{
	color: #a02b24;
}
#res-grid{
	/*position:relative;*/
	/*outline: solid yellow 1px;*/
}
.res-boxy{
	float:left;
	width: 33.33%;
   	/*outline: solid pink 1px;*/
	overflow: auto;
	margin: auto;
	top: 50%; 
	transform: -50%;
}
   	
}

/*this is the fix for anchors not jumping properly. 
  This puts the content in the right divs*/
#res:after{
	content: "";
	display: table;
	clear: both;
}

.res-title{
	padding:1rem;
	text-align:left;
	margin-top:0rem;
	margin-bottom: -1.3rem;
	font-style: italic;
}

.res-content{
	margin:1rem;
	padding:1rem;
	text-align:left;
}

details summary{
	cursor:pointer;
}

summary{
	margin-bottom:1rem;
}



/*---------Portfolio-------*/
#port{
	margin-bottom:.1rem;
}


.port-box{
	float:center;
	margin:0 auto;
	max-width: 100%;
}
.port-img{
	padding:.5rem;
	max-width:100%;
	height: auto;
}

/*this is the fix for anchors not jumping properly. 
  This puts the content in the right divs*/
#port:after{
	content: "";
	display: table;
	clear: both;
}


/*-------contact-------*/
#contact{
	padding-bottom:2.5rem;
	display: grid;
}

form{
	margin: auto;
	/*height: calc(100vh-7.5rem);
	width:60%;
}

#msg{
	margin-top:.5rem;
	width:100%;
	resize: none;
	padding: .5rem;
	background-color:#e5e5e5;
	color:#1a1a1a;
}

#vercode, #email, #namie{
	margin-top:.5rem;
	width:100%;
	padding:.5rem;
	background-color:#e5e5e5;
	color:#1a1a1a;
}


input[type=submit]{
	width:100%;
	margin:auto;
	background-color: #e5ae75;
	border:none;
	height: 2rem;
	color:#a02b24;
	-webkit-transition: -webkit-transform .2s;
	transition: -webkit-transform .2s;
	-o-transition: transform .2s;
	transition: transform .2s;
	transition: transform .2s, -webkit-transform .2s; /* Animation */
}
input[type=submit]:hover{
	-webkit-transform: scale(1.02);
	    -ms-transform: scale(1.02);
	        transform: scale(1.02);
}
input[type=submit]:active{
	background-color:#f9eb97;
}

input[type=submit]:after{
	content: "";
	display: table;
	clear: both;
}
#contact:after{
	content: "";
	display: table;
	clear: both;
}
.push{
	/*height:2.5rem; /*this should move the menu button down*/
}


/*-----navigation-----*/
/*checkbox*/
#check{
	display:none;
}

/*navigation div*/
nav{
/*color won't toggle when the id is called*/
	position:fixed; /*sticky doesn't work well in mobile browsers*/
	bottom:0;
	width:96%; /*for some reason this was separated from the body so it needs to be sized the same*/
	max-width: 1500px;
	background-color: rgba(24, 24, 24, .9);
	height:2.5rem;
}
#navie ul{
/*for whatever reason, calling the id name of the ul did not work for this*/
	padding:0;
	margin:0; /*this seems to be what I was missing last time*/
	width:100%;
}

#navie ul li{
	list-style:none;
	display:inline-block;
	width:8rem;
	background-color: rgba(160, 43, 36, .9) /*#a02b24*/;
	text-align:center;
	border-left: solid rgba(24, 24, 24, .9) .1rem;
	height: 2.5rem;
}
#navie ul a {
	text-decoration:none;
	display:block; /*makes link cover the entire list item*/
	background-color:transparent; /*background is styled on li*/
	color: #e5ae75;
	padding:.7rem;
}

/*menu button*/
#menu{
	display:none;
}

/*hover and active*/
 #navie ul li a:hover{	
	background-color: rgba(229, 174, 117, .9) /*#e5ae75*/;
	color: #9e1c16;
}
#navie ul li a:active{
	background-color: rgba(158, 28, 22, .9) /*#9e1c16*/;
	color: #e5ae75;
}

/*navigation for the mobiles*/
@media screen and (max-width:600px){
	#menu{
		position:relative;
		display:block;
		cursor:pointer;
		color: #e5ae75;
		background-color: rgba(160, 43, 36, .9) /*#a02b24*/;
		text-align:center;
		padding:.7rem;
		padding-right:.9rem;
		height:2.5rem;	
		z-index: 9999;
	}
	
	#navie{
		width:96%;
		display:inline-block;
	}
	#navie ul{
	/*a combo of the following attributes makes this menu drop up.*/
		display:none;
		position:absolute;
		bottom: 2.5rem;
		z-index:3;
	}
	#navie ul li{
		content: "";
		display: table;
		clear: both;
		width:100%;
		border:none;
		border-bottom: solid rgba(24, 24, 24, .9) .1rem;
	}
	
	#check:checked~#menuette{
	/*this ties the checkbox to the nav list*/
		display: block;
	}
}