/*colors */
/*gray-ish - #3b3834 */
/*orange color:  or #d9a053*/
/*projects background-color #f5f4f2*/
/*#f5f5ec html/body background color */

html, body {
    margin: 0;
    font-size: 15px;
    font-weight: 300;
    font-family: "Saira Semi Condensed", sans-serif;
    background-color: #f5f5ec;
}

/* -------------------------------------*/
/* ------- REUSABLE COMPONENTS ----------*/
/* -------------------------------------*/
/*
.clearfix:after {
   content: " ";  Older browser do not support empty content 
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
*/

.title { 
    margin: 0 auto 3% auto;
    padding-top: 1.5%;
    text-align: center;
    color: rgba(0, 0, 0, 0.59);
    font-size: 2.2em;
    border-bottom: 3px solid transparent;
    width: 200px;
    text-transform: uppercase;
    font-weight: 400;
}

.title:after {
    display:block;
    content: '';
    border-bottom: solid 3px #d9a053;  
    transform: scaleX(1);  
    transition: all 250ms ease-in;}

.title:hover:after { transform: scaleX(0); }

header {
    background-image: linear-gradient(rgba(36, 36, 31, 0.69), rgba(69, 54, 54, 0.17)),url("../lib/john-schnobrich-unsplash-min.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    height: 100vh;
}

.overlay, .tools-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba (0, 0, 0, 0);
    transition: background .3s ease;
}

.overlay { border-radius: 20px; }

.link {
    color: #bf7613;
    text-decoration: none;
}

.link:hover {
    color: #000000;
    border-bottom: none;
}


/* -------------------------------------*/
/* ----------- NAV BAR ---------------*/
/* -------------------------------------*/
.nav-btns li {
    display: inline-block;
    float: right;
    margin-right: 8px;
}

.nav-btns a {
    color: white;
    text-decoration: none;
    letter-spacing: 4px;
    font-size: 1.75em;
    padding: 7px 20px;
    border: 2px solid transparent;
    border-radius: 20px;
    transition: 0.3s;
}

.nav-btns a:hover {
    color: #d9a053;
    border: 2px solid #d9a053;
}


/* -------------------------------------*/
/* --------- HERO SECTION -----------*/
/* -------------------------------------*/
.name h1, .name h2 { color: rgba(245, 245, 236, 0.83); }


.name h1 {
    text-transform: uppercase;
    letter-spacing: 6px;
    font-family: "Caveat Brush", sans-serif;
    font-weight: 500;
    font-size: 7em;
    margin-left: 4%;
    margin-top: 14%;
    margin-bottom: 0; 
}

.name h2 {
    font-weight: 300;
    letter-spacing: 4px;
    margin-left: 8%;
    font-size: 1.9em;
    margin-top: -18px;
}


/* -------------------------------------*/
/* --------- ABOUT ME SECTION  -----------*/
/* -------------------------------------*/
.about-box {
    width: 90%;
    margin: 0 auto;  
}
.about-box img {
    float: left;
    width: 25%;
    margin: 2% 0 0 8%;
    max-width: 350px;
    border-radius: 50%;
    border:5px solid #d9a053;
}

.bio-box {
    padding-left: 2%;
    margin: 4% 0% 9% 35%;
    width: 55%;
    max-width: 850px;
    font-size: 1.07em;
}

.about-box p {
    width: 100%;
    text-align: center;
    font-size: 1.4em;
    text-align:justify;
}

.instagram {
    line-height: 5;
    text-decoration: none;
    border-radius: 10px;
    background-color: #d98616;
    padding: 10px;
    color: white;
    
}

.instagram:hover { background-color: #ba6b00; }

.resume {
    font-size: 1.3em;
    margin-left: 30%;
    letter-spacing: .5px;
}


/*----------------------------
/*---- Tools I Use ----- */
/*----------------------------*/
.tools-parent-div {
    background-color: white;
    width: 100%;
}
.section-tools {
    background-color: transparent;
    width: 60%;
    margin: 0 auto;
}

.tools-list { width: 100%; }

 .tools-list li {
     position: relative;
     margin: 2% 4% 2% 4%;
     width: 120px;
     height: 120px;
     float: left;
     text-align: center;
     overflow: hidden;
}

.tools-list img {
    max-height: 100%;
    max-width: 100%;
}

.tools-list .centered-img {
    margin-top: 25px;
}

.tools-list li:hover .tools-overlay {
    display: block;
    width: 100%;
    border-radius: 0px;
    background: rgba(255, 255, 255, 0.88);
}

.overlay-tool-name, .overlay-tool-name-2 {
    font-size: 1.8em;
    color: #50350f;
    position: absolute;
    font-weight: 500;
    bottom: 0;
    width: 100%;
    opacity: 0;
    transition: .3s;
}

.tools-list li:hover .overlay-tool-name {
    opacity: 1;
    margin-bottom: 45px;
}

.tools-list li:hover .overlay-tool-name-2 {
    opacity: 1;
    margin-bottom: 20px;
}


/*----------------------------
/*---- Projects Section ----- */
/*----------------------------*/

/*-----General Layout Setup -----*/
.project-section {
    max-width: 100%;
    padding-bottom: 4%;
}

.project-grid {
    margin: 0 auto;
    padding: 0;
    list-style: none;
    display: block;
    text-align: center;
    max-width: 1200px;
    width: 100%;
}

.project-grid:after { clear: both; }

.project-grid:after, 
.project-grid:before {
    content: '';
    display: table;
}

.project-grid li {
    width: 420px;
    height: 328px;
    display: inline-block;
    margin: 5px ;
}

.project-info {
    position: absolute;
    letter-spacing: .6px;
    width: inherit;
    height: inherit;
    z-index: 1;
    bottom: 15px;
    transition: bottom .5s ease;
}

.project-info h3 {
    color: #fff;
    font-size: 42px;
    margin: 0 30px;
    padding: 100px 0 0 0;
    line-height: 1.5;
}

.project-info p {
    color: #fff;
    margin: 0 30px;
    font-size: 14px;
    line-height: 1.7;
}

.project-box  {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 20px;
    -webkit-transition: 0.3s ease-in-out, 
    -webkit-transform 0.3s ease-in-out;
	-moz-transition:  0.3s ease-in-out, 
    -moz-transform 0.3s ease-in-out;
    transition: all 0.3s ease-in-out, 
    transform 0.3s ease-in-out, ;
}

.project-box h3 { font-weight: 500; }

/* ---- Project Box Overlay ------*/
.overlay-btns {
    position: absolute;
    width: 420px;
    left: 0;
    top: 210px;
    text-align: center;
    opacity: 0;
    z-index: 1;
    transition: opacity .3s ease;
}

.overlay-btns a {
    width 200px;
    padding: 12px 28px;
    margin: 10px;
    color: white;
    border: 2px solid white;
    border-radius: 15px;
    z-index: 1;
    text-decoration: none;
    transition: color .3s, border .3s;
}

.overlay-btns a:hover {
    border: 2px solid orange;
    color: orange;
}

.overlay-btns span { font-size: 5px; }

/*-------Project box hover effects ------------*/
.project-box:hover { transform: scale(1.05); }

.project-box:hover .project-info { bottom: 35px; }

.project-box:hover .overlay{
    display: block;
    border-radius: 20px;
    background: rgba(0, 0, 0, .6);
}

.project-box:hover .overlay-btns { opacity: 1; }

/*----- Individual Project Boxes -------*/
.project-img-1 {
    position: relative;
    background: linear-gradient(rgba(0, 0, 0, .50), rgba(0, 0, 0, 0.20)), url(../lib/julian-bialowas-1969-unsplash-min2.jpg);
    background-size: 500px auto;   
}

.project-img-2 {
    background: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)), url(../lib/omnifoodreplace.jpg);
    background-size: 420px 420px;
    background-position: right;
}

.project-img-3 {
    background: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)), url(../lib/colorgame.jpg);
    background-size: auto 460px;
    background-position: bottom;
}

.project-img-4 {
    background: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)), url(../lib/musicgame.jpg);
    background-size: auto 360px;
    background-position: right;
}

.project-img-5 {
    background: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)), url(../lib/john-schnobrich-520019-unsplash-min.jpg);
    background-size: auto 370px;
    background-position: top;
}


/*--------------------------*/
/*-----CONTACT FORM----- */
/*----------------------------*/
.contact-section {
    height: 500px;
    background-color: #2a2924;
}

.contact-section .title { color: #f5f5ec; }

.form {
    width: 50%;
    max-width: 700px;
    margin: 20px auto;
    text-align: center;
}

/*This resets all default submit input styling so button can be styled*/
input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px rgb(15, 14, 12) inset; }

input:-webkit-autofill { -webkit-text-fill-color: #f5f5ec; }

.input-form {
    padding: 3px 10px;
    color: #f5f5ec;
    font-family:inherit;
    font-size: 1.3em;
    display: block;
    margin: 2% auto;
    width: 95%;
    height: 25px;
    border-radius: 5px;
    background-color: rgb(15, 14, 12);
    border: none;
}

.textarea-form {
    padding: 3px 10px;
    color: #f5f5ec;
    font-family:inherit;
    font-size: 1.3em;
    height: 180px;
    width: 95%;
    border-radius: 5px;
    border: none;
    background-color: rgb(15, 14, 12);
}

textarea:focus, input:focus { outline: none; }

.btn-form {
    background-color: #000;
    border: 2px solid rgb(216, 212, 190);
    font-family: inherit;
    text-transform: uppercase;
    width: 25%;
    padding: 6px;
    margin-top: 10px;
    font-size: 20px;
    border-radius: 5px;
    color: #d98b20;
    transition: .3s;
}

.btn-form:hover {
    transform: scale(1.1);
    border: 2px solid #d98b20;
}


/*----------------------------*/
/*--------- FOOTER ---------- */
/*----------------------------*/
.footer-section {
    background-color: rgb(15, 14, 12);
    height: 100px;
}

.designed-by h4 {
    width: 50%;
    margin-left: 25%;
    text-align: center;
    float: left;
    color: rgba(255, 255, 255, 0.71);
    font-weight: normal;
}


/*.footer-section { height: 100%; }*/

.footer-section li {
    display: inline;
    list-style: none;
    padding-right: 20px;
}

.social-links {
    padding-top: 10px;
    text-align: right;
}

.social-links i { font-size: 1.8em; }

.social-links a { color: rgba(196, 196, 196, 0.55); }

.social-links a:hover { color: white; }


/* ---------------------------------*/
/* ------For vanilla HTML Animations ------------*/
/* ---------------------------------*/
.name h1{
  animation-duration: 1s;
  animation-delay: 1s;
}

.name h2{
  animation-duration: 1s;
  animation-delay: 1.25s;
}


/* ---------------------------------*/
/* ------For JS Animations ------------*/
/* ---------------------------------*/

.js--wp-1 {
    opacity: 0;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}
.js--wp-3 {
    opacity: 0;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}
.js--wp-4 {
    opacity: 0;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    animation-delay: .15s;
}
.js--wp-5 {
    opacity: 0;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    animation-delay: .30s;
}
.js--wp-6 {
    opacity: 0;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    animation-delay: .45s;
}
.js--wp-7 {
    opacity: 0;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    animation-delay: .60s;
}
.js--wp-form {
    opacity: 0;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    
}