/*------------------------------------------------------------
Site-wide font classes
-------------------------------------------------------------*/

html {
  	scroll-behavior: smooth;  /* Doesn't work for Edge & Explorer */
  	font-size: 100%;
}

body {
	position: relative;
    font-family: 'Poppins', sans-serif;
	background: #2b1d0e;
}

h1 {
	font-family: TimesNewRoman, Times New Roman, Times, Georgia, serif;
	color: white;
	font-size: 3rem;
}

h2 {
	color: white;
	padding-left: 1.25rem;
	margin-bottom:0;
	margin-top:0;
	text-align: center;
	font-size: 1.3rem;
	font-family: TimesNewRoman, Times New Roman, Times, Georgia, serif;
}

h3 {
	color: white;
	padding-top: 0rem;
	padding-left: 1.25rem;
	text-align:center;
}

h4 {/*  Reserved for the name in top left portrait photo */
	color: white;
	font-size: 1.5rem;
	font-family: TimesNewRoman, Times New Roman, Times, Georgia, serif;
	margin: 0;
}

h5 {/*  Headers for the resume timeline. This one needs absolute size to fit the containers*/
	color:rgb(34, 167, 240);
	font-size: 16px;
	text-align: left;
	margin:0px;
}

h6 {/* sub headers for additional training, portfolio content, hobby content */
	color: #808080;  /*rgb(51, 193, 255); */
	font-size: 1.4rem;
	text-align: left;
	margin: 10px 0px 0px 5px;
	font-family: TimesNewRoman, Times New Roman, Times, Georgia, serif;
}

ul {
  	font-family: arial, sans-serif;
  	font-size: .85rem;
  	line-height: 1.7rem;
  	color:  #fdebd0; 
	text-align: left;
}

li {margin-left:0rem;}

p {
  	font-family: 'Poppins', sans-serif;
  	font-size: 1rem;
  	line-height: 1.6rem;
  	color:   #fdebd0; 
	margin: 0;
	margin:0;
	text-align: left;
	padding: .4rem .25rem 0.25rem 0.4rem;
}

hr {
  margin-top: 0;
  margin-bottom: 0;
  border-top: 1px solid #0d4733;
}

.content_link {  /* Use this links in the main content site */
	color: #989898;
	font-size: 1rem;
	margin:0;
	text-decoration: none;
}

.button_subheader {  /* Looks like content_link, but no hover changes */
	color: #989898;
	font-size: 1rem;
	font-style: italic;
	margin:0;
	text-decoration: none;
}

.close_content_link {  /* Use this one to close some expanding content (with a close icon)*/
	color: #989898;
	font-size: 1rem;
	margin:0;
	text-decoration: none;
	width:100%;
	display: flex;
	align-items:center;
	padding-left:2rem;
}

.content_link:hover {
	text-decoration: none;
	color: #C8C8C8;
	font-weight: bold;
}

.list_link {font-size: .85rem;}    /* Also add this second for links in lists */
.list_link:hover {font-weight: normal;} /* Stop annoying behaviour with multi-line text */

/*------------------------------------------------------------
Site-Wide Formatting Classes and ids
-------------------------------------------------------------*/
.header-block{
	height:55px;
}

.section {
	height: auto;
	min-height: 100vh;
	padding-top: 3.75rem;
	padding-left :0px;
	background-color:grey;
}

.wrapper {
    display: flex;
    width: 100%;
}

.page_col {
	min-height: 100vh;
}

.main-column {
	background: #2b1d0e; /*#1e1301 #342203 rgb(64,64,64) */
	border-right: 1px solid #0d4733;
}

.right-column{
	padding: 0;
	padding-top: 15px;
}

/*------------------------------------------------------------
Sidebar
-------------------------------------------------------------*/

.portrait {
	
	height: 12.8rem;  /* Was 205px Now 12.8*16*1.1 = 225px for FHD, 12.8*.9x3x16 = 553 on mobile*/
	width: 12.5rem;   /* Was 200px Now 12.5*16*1.1 = 220px for FHD, 12.5*.9x3x16 = 158.4 on mobile*/
	position: relative;
	margin-bottom:4px;
}

#portrait-text {
	position:absolute;
  	bottom:0;
  	left:0;
	width:100%;
	height: 45px;     /* Was 45px */
	background: #0d4733;  /* hex: #1D225A  */
	margin:auto;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom-width: 1px;
	border-bottom-style:  solid;
	border-bottom-color:  #0d4733;
	font-family: TimesNewRoman, Times New Roman, Times, Georgia, serif;
}

#sidebar {
	background-image: url(../images/weka.jpg);
	background-repeat: no-repeat;
	background-size: 100% auto;
    background-position: center top;
	margin-left: 0px;
  	width: 12.5rem;      /* Was 201px */
  	position: fixed;
  	top: 0;
  	left: 0;
  	height: 100vh;
  	z-index: 400;
	color: #fff;
  	background-color: #160a01; /*  #1e1301 */
  	position: fixed;
  	transition: all 0.3s;
	border-right: 1px solid #0d4733;
	border-top: 1px solid #0d4733;
}

#sidebar ul.components {
    padding: 0 0;
}

#sidebar ul p {
    color: #606060;
    padding: .85rem;
}

#sidebar ul li a {
	color: #989898;   
  	padding: 7px;
  	font-size: .85rem;
  	display: block;
	margin-left:40px;
}

#sidebar ul li a:hover {
	color: #C8C8C8;
  	background: #160a01;
	font-weight: bold;
}

#sidebar ul li a:active { /*  this only works when mouse pressed */
  	color: #DCDCDC;
	background: #160a01;
	font-weight: bold;
}

#sidebar ul li .active{ /*  this is the real active class */
	color: #DCDCDC;
	background: #160a01;
	font-weight: bold;
}

/*-------------------------------------
Landing Page & The Navbars
--------------------------------------*/
#mobile_header {
	color: white;
	font-size: 1.5rem;
	font-family: TimesNewRoman, Times New Roman, Times, Georgia, serif;
}

#navbar_header {
	margin: 0px;
	color: white;
	font-size: 1.5rem;
	margin-left: 0px;
	text-align: left;
}

#landing-page {
	height: auto;
	min-height: 100vh;
	text-align:center;
	background-image: url(../images/blue.jpg);
	background-position: right;
	background-repeat: no-repeat;
	background-size: auto 100%;
	font-size:1.4em;
}

#attribution {
	position: absolute;
	width:100%;
	bottom: 5px;
	text-align: center;}

.last {
	color:  #808080; /* rgb(235,189,104);  245,222,179);  rgb(34, 167, 240); */
	font-weight: bold;
}

#landing-page-mobile-space{
	height:25vh;
}

#landing-page-header {
	height: 12vh;
	padding-top: 5vh;
	margin-bottom: 1rem;
	text-align: center;
}

#landing_page_block {
	background: rgba(13,71,51,0.4); /* rgba(29,34,90, 0.6);  */
	padding:0rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
	display: inline-block;
}

#landing_page_text{
	background: rgba(29,34,90, 0.6);
	padding: 1rem;
	margin-top:4rem;
}

.landing-page-list {  /* Not in use */
 	padding: 1rem 0rem 0rem 0rem;
 	list-style: none;
 	font-weight: bold;
 	font-size: 1rem;
 	line-height: 2rem;
 	color: #808080;
 	text-align:center;
 }

 .landing-page-paragraph {
	padding: 1.5rem 1rem 1rem 1rem;
	list-style: none;
	font-size: 1rem;
	line-height: 2rem;
	color: #808080;
	text-align:left;
}

.landing-page-downloads {
	padding: 5rem 1rem 1rem 1rem;
	list-style: none;
	font-size: 1rem;
	line-height: 2rem;
	color: #808080;
	text-align:left;
}

#landing-page-subheader {
	padding: .5rem 0 .5rem 0;
	text-align: center;
	line-height: 2rem;
	width: 20rem;
	margin:0;
}

.navbar {
    padding: 0px 0px;
    border: none;
    margin-bottom: 0px;
	background:rgba(0,0,0, 0.7);
	height:55px;
	z-index:300;
}

#top_navbar {
	width: 100%;
}

#SideBarToggler {
	float: right;
}

/*---------------------------------------------------------------------
Content Page
----------------------------------------------------------------------*/

.main_p{
	max-width:40rem;
	margin-left:1rem;
	padding-top:0;
	padding-bottom:.5rem;
}


#content-page {
	height: auto;
	min-height: 100vh;
	background-color:#404040;
	background-image: url(../images/side-image.jpg);
	background-position: right;
	background-repeat: no-repeat;
	background-size: auto 100%;
}

.resume-timeline-col{
	padding:0; 
	background-color:#404040;
}

/*-------------------------------------
Contact Page
--------------------------------------*/

.left_margin_30pc {
	text-align: left;
	margin-left:30%;     /*For the Header*/
}

.contact-main-column {
	background: #2b1d0e
}

#contact-page {
	height: auto;
	min-height: 100vh;
	background-color: #3f2a14;  
	background-image: url(../images/side-image-2.jpg);
	background-position: right;
	background-repeat: no-repeat;
	background-size: auto 100%;
}

#contact-page-column{
	padding: 0;
	padding-top: 15px;
}

.contact_p{
	width:90%;
	margin-left:1rem;
	padding-top:0;
	padding-bottom:.5rem;
}


/*-------------------------------------
Forms
--------------------------------------*/
label {
	color: #fdebd0; 
}

.form-group > label{margin-bottom:0px;}

.form_button {
	color: #fdebd0; 
	background: #160a01;
	border: 1px solid black;
}

input:hover {
	box-shadow: .5rem .5rem .25rem #202020;
	font-style: italic;
}

::placeholder {
	font-size:0.85rem;
	color:#909090;
}

textarea:hover {
	box-shadow: .5rem .5rem .25rem  #202020;
	font-style: italic;
}

textarea:active {
	outline: none;
	border: 1px solid #160a01;
}


.forms-link {
	color: #989898;
	font-size: .85rem;
	text-decoration: none;
	cursor: pointer;
}

.forms-link:hover {
	text-decoration: none;
	color: #C8C8C8;
	font-weight: bold;
}

.forms-link.active{ /*  this is the real active class */
	color: #DCDCDC;
	font-weight: bold;
}

.GreyButton{
	padding: 5px;
	border:none;
	background: rgba(13,71,51,1);
	display: flex;
	justify-content: center;
	cursor: pointer;
}

/* ----------------------------------
CONTENT STYLE
------------------------------------ */

#content {
    width: calc(100% - 12.5rem);
    padding: 0px;
    min-height: 100vh;
    transition: all 0.3s;
    position: absolute;
    top: 0;
    right: 0;

}

#content.active {
    width: 100%;
}

/* --------------------------------
MEDIAQUERIES
-------------------------------- */
@media (max-width: 768px) {
    #sidebar {
        margin-left: -12.5rem;
	}
    #sidebar.active {
        margin-left: 0;
    }
    #content {
        width: 100%;
    }
    #content.active {
        width: calc(100% - 12.5rem);
    }
    #sidebarCollapse span {
        display: none;
    }

	.remove_for_mobile {
		display: none;
	}

	#contact-page{
		background-image: none;
	}
	
	#content-page{
		background-image: none;
	}
	/* Decrease all font sizes on mobile */
	/* default is 1rem or 16px */
	html {
	font-size: .9rem;
	}
}

/* Decrease the font size for narrow browsers (Like a 32 inch screen, covering only half)*/
@media (max-width: 1000px) {
	html {
		font-size: .9rem;
	}
}

/* Things to change on large screens */

@media (min-width: 768px) {
	#top_navbar {
		display: none;
	}

	h2 {
		padding-top: 1rem;
	}

	.contact_p{  /* Space the contact page paragraphs differently */
		width:80%;
		margin-left:1rem;
		padding-top:0.25rem;
		padding-bottom:.5rem;
	}

	.mobile_only{
		display: none;
	}
}

/* Things to change on FHD and larger */

@media (min-width: 1800px) {  /* transition on my laptop is at 1840px    */
	html {
		font-size: 1.1rem;
		}
	.header-block{
		height:75px;
	}
	h2:not(#landing-page-subheader){
		margin-bottom:2rem;
	}
}