/* Styled with love by Koger Darden, 2017 */
/* 	TABLE OF STYLISH CONTENT
 *	1. 	General
 *	2.	Typography
 *	3.	Navigation Section
 *	4.	Intro Section
 *	5.	About Section
 *	6.	Project Section
 *	7.	Contact Section
 */

/* 1. General
======================================================================== */
* {
	padding: 0;
	margin: 0;
}
ul {
	list-style-type: none;
}
a {
	text-decoration: none;
}
input {
	background-color: transparent;
	border: none;
    border-radius: 0;
}
.container {
	margin-right: auto;
	margin-left: auto;
	padding-top: 30px;
	padding-bottom: 30px;
	display: grid;
	grid-row-gap: 30px;
	grid-template:
		"title" 
		"content"
		;
}
.section-title {
	grid-area: title;
	color: #494949;
  	text-align: center;
}
.hr-top {
	color: #979797;
	margin: auto;
	margin-top: 5px;
	margin-bottom: 5px;
    width: 200px;
    border: solid 1px;
    border-radius: 4px;
}
.hr-bottom {
	color: #979797;
	margin: auto;
	margin-bottom: 8px;
    width: 150px;
    border: solid 1px;
    border-radius: 4px;
    
}
.contact-section .hr-top {
	margin-left: 0;
}
.contact-section .hr-bottom {
	margin-left: 0;
}
.bg-color-1 {
	background-color: #ffffff;
}
.bg-color-2 {
	background-color: #efefef;
}
/* 2. Typography
======================================================================== */
p {
	font-family: 'Poppins', sans-serif;
	color: #767676;
	font-size: 14px;
	line-height: 24px;
	font-weight: 400;
	margin: 0;
}
h1, h2, h3, h4, h5, h6{
	font-family: 'montserratsemibold', sans-serif;
    font-weight: 400;
    color: #4f4f4f;
    margin: 0;
	text-transform:uppercase;
}
h1 {
    font-size: 40px;
    font-family: 'Montserrat', sans-serif;
	font-weight: 700;
}
h2 {
    font-size: 32px;
	color: #484848;
    font-family: 'Montserrat', sans-serif;
	font-weight: 700;
}
h3 {
    font-size: 24px;
}
h4 {
    font-size: 18px;
}
h5 {
    font-size: 16px;
}
h6 {
    font-size: 13px;
}

/* 3. Navigation Section
======================================================================== */
nav {
	z-index: 1;
	position: absolute;
}
.overlay {
	position: fixed;
	top: 0;
	width: 100vw;
	background-color: black;
	height: 100vh;
	height: 0%;
	opacity: 0;
	transition: opacity 0.3s;
	transition-timing-function: ease-out;
}
/* Style the open button (top right corner) */
.openbtn {
    position: fixed;
    top: 5vh;
    right: 5vw;
    font-size: 25px;
    color: #aaa;
    background-color: #000;
    opacity: 0.5;
    border: solid #ddd 2px;
    border-radius: 4px;
    padding: 5px 15px;
}
.openbtn:hover {
    background-color: #ddd;
    color: #000;
}
.overlay-content {
	position: absolute;
	top: 50%;
	left: 50%;
	text-align: center;
	font-size: 10vh;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
/* Position the close button (top right corner) */
.closebtn {
	color: #484848;
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}
/* The navigation links inside the overlay */
.overlay-content a {
	color: #484848;
    font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 36px;
	color: #484848;

    padding: 16px;
    display: block; /* Display block instead of inline */
    transition: 0.3s; /* Transition effects on hover (color) */
}
/* When you mouse over the navigation links, change their color */
.overlay-content a:hover, 
.overlay-content a:focus,
.closebtn:hover,
.closebtn:focus {
    color: #f1f1f1;
}

/* 4. Intro Section
======================================================================== */
.intro-section {
	position: relative;
	background-size: cover;
	background-position: center;
}
/* Intro section is given special properties so sizes to the screen instead of its content */
.intro-section .container {
	height: 100vh;
	/* container is also relative so text can be absolutely positioned to it */
	position: relative; 
	/* Remove extra default padding */
	padding-top: 0;
	padding-bottom: 0;
}
.intro-text {
	width: 100%;
	text-align: center;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.intro-text h1, .intro-text h3{
	color: white;
	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
.intro-text h1 {
	padding-bottom: 20px;
}
/* 4. About Section
======================================================================== */
.about-portrait {
	grid-area: portrait;
}
.about-portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.about-greeting {
	grid-area: greeting;
}
.about-description {
	grid-area: description;
	text-align: justify;
}
.about-objective {
	grid-area: objective;
}
.about-resume {
	grid-area: resume;
}
.about-section p {
	font-size: 18px;
}
.about-resume {
	text-decoration: none;
	text-align: center;
	font-family: 'montserratsemibold', sans-serif;
    font-weight: 400;
	text-transform:uppercase;
	font-size: 21px;
	color: white;
	
	border: 3px solid #777777;
	border-radius: 40px;
	padding: 20px;
	background: #777777;
	
	transition: color 0.2s, background 0.2s, font_weight 0.2s, border-radius 0.5s; 
}
.about-resume:hover {
	border-radius: 3px;
	
}
.about-resume:active {
 	background: white;
 	color: #777777;
 	font-weight: 600;
}
/* 5. Project Section
======================================================================== */
/* scale images to fill out gallery grid */
.project-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
  	transition: all .5s ease;
}
/* Relative ancestor so elements inside can be stacked using absolute positioning */
.project-thumbnail {
	position: relative;
	z-index: 0; /* This fixes some animation overflow issues in safari */
	border-radius: 20px;
  	box-shadow: 5px 5px 5px #888888;
	overflow: hidden;	/* make contained elements adhere to li borders */
}
/* Zoom project image on hover */
.project-thumbnail:hover img,
.project-thumbnail:focus img{
	transform: scale(1.2);
}
/* The info box that shows when the mouse hovers over a project */
.project-info-box {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;

	background-color: rgba(255,255,255,0.8);
	opacity: 0;
	transition: all .5s ease;
}
/* show info box on hover */
.project-thumbnail:hover .project-info-box,
.project-thumbnail:focus .project-info-box {
	opacity: 1;
}
/* Position project info text at bottom of box */
.project-info-text {
	position: absolute;
	padding: 10%;
	top: 50%;
	transform: translateY(-50%);
}
/* ----- Modal Boxes for projects ----- */
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: #ffffff;
    text-align: center;
}
/* The Close Button */
.modal-close {
    color: #767676;
    font-weight: bold;
    right: 25px;
}
/* Button for links to projects */
.modal-btn {
    font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	color: #767676;
	border: solid #767676 4px;
	padding: 5px 50px;
	margin: 0 auto;
         
}
.modal-btn:hover,
.modal-btn:focus {
    color: black;
    border-color: black;
    cursor: pointer;
}
/* Make modal container more fluid and keep content out of way of close button */
.modal .container {
	box-sizing: border-box;
	width:100%;
	max-width: 920px;
	padding: 100px 70px 70px 80px;
}
.modal-close:hover,
.modal-close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* 6. Contact Section
======================================================================== */
.contact-text {
	color: #7b7b7b;
	display: grid;
	grid-gap: 15px;
	grid-template:
		"in email" 
		"github location"
		/ auto 1fr
		;
}
.contact-form {
	grid-area: form;
	display: grid;
	grid-gap: 15px;
	grid-template:
		"name" 
		"email"
		"message" 140px
		"button"
		;
}
.contact-form input {
	color: #7b7b7b;
	line-height: 200%;
	background-color: transparent;
	border-bottom-style: dotted;
    border-bottom: 1px dotted;
}
.contact-form textarea {
	margin-top: 15px;
	padding: 10px;
}

/* (styling ported from other website)
======================================================================== */
.contact-section .section-title {
  	text-align: left;
}
.contact-section .section-title p {
    color: #777777;
}
.contact-text li i {
    border: 1px solid #a8a8a8;
    border-radius: 50%;
    float: left;
    font-size: 24px;
    height: 47px;
    line-height: 47px;
    margin-right: 12px;
    text-align: center;
    width: 47px;
	color: #919191;
}
.contact-text li h4,
.contact-text li span {
  position: relative;
  top: 5px;
}
.contact-text li h4 {
    color: #7b7b7b;
}
.contact-text li span,
.contact-text li h4 {
    overflow: hidden;
}
.contact-text li span a,
.contact-text li span {
    color: #979797;
}
.contact-text li span a:hover {
    color: #7b7b7b;
}