@import './hamburger.css';


/* ---- Variables ---- */
:root {
    
    --body-background-color: #FEFBFA;
    --header-color: #000000;
    --bio-color: #9FD6FF;
    --projects-color: #F5F9FD;
    --project-box-color: rgba(245,249,253, 0.8);
    --projects-img-border-color:#8A8684;
    --contact-color: #000000;

    --text-header-color: #EDFBF0;
    --text-bio-color: #110D0D;
    --text-projects-color: #372B2B;
    --text-contact-color:#EDFBF0;
    --text-a-hover-color: #81857B;

    --opensans: 'Open Sans', sans serif;
    --roboto: 'Roboto', sans-serif;
    --montserrat: 'Montserrat', sans-serif;
    --playfair-display: 'Playfair Display', serif;

    --min-width: 15vw;
    --med-width: 80vw;
    --max-width: 100vw;
    --nav-height-sm: 115px;
    --nav-height-md: 160px;
}

body {
    box-sizing: border-box;
    margin: 0px;
    background-color: var(--body-background-color);
    font-family: var(--opensans);
}

/* contains: header, main, footer */
.main-container {
    min-width: var(--min-width);
    max-width: var(--max-width);

    display: flex;
    flex-direction: column;
    margin: auto;
}

/* Links */
a:link, a:visited, a:hover {
    font-size: 1em;
    text-decoration: none;
    letter-spacing: 2px;
    font-weight: 600;
}



/* ---- HEADER SECTION ---- */

header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    position: fixed;
    z-index: 1; /* prevents overflow of project divs over header */
    width: var(--max-width);
    
    background: var(--header-color);

    font-family: var(--montserrat);
    color: var(--text-header-color);
}

/* header logo */
.logo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Header logo name */
span.name {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    font-size: 2em;
    font-weight: 500;
    line-height: 60px;
}

/* header logo title */
span.title {
    font-size: 1.375em;
}

/* Nav links */
nav > a, nav > a:visited {
    color: var(--text-header-color);
    margin: 5px 10px;
}

/* Nav links hover state */
nav > a:hover {
    color: var(--text-a-hover-color);
}



/* ---- MAIN SECTION ---- */

main {
    padding-top: var(--nav-height-md);
    width: 100%;
}



/* ---- MAIN - BIO ---- */

/* Bio section container */
section#bio {
    display: flex;
    flex-direction: column;
    align-items: center;

    background-image: url("../img/code-compressed.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: var(--bio-color);
    
    font-family: var(--montserrat);
    color: var(--text-bio-color);
}

/* Bio heading (title phrase) */
.heading {
    margin: 50px 15px 25px 15px;
    width: 75%;

    /* Bio.heading loading animation */
    position: relative;
    top: 0;
    left: -1500px;
    animation-name: loadFromLeft;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

/* Animation keyframes */
@keyframes loadFromLeft {
    0% {
        position: relative;
        top: 0;
        left: -1500px;
    }
    100% {
        position: flex;
        top: 0;
        left: 0px;
    }
}

/* All heading name */
p.heading-name {
    font-size: 1.5em;
    font-weight: 500;
    letter-spacing: 2px;
}

/* heading first and last name  */
p.heading-name > span {
    font-size: 2.375em;
    font-weight: 500;
    line-height: 60px;
}

/* heading job title */
p.heading-title {
    font-size: 1.25em;
    font-weight: 500;
    letter-spacing: 2px;
}

/* heading job title - important */
span.heading-important {
    font-size: 1.375em;
    font-weight: 600;
}


/* Bio descriotion text container */
.container-bio {
    margin: 15px 25px 25px 25px;
    width: 75%;

    /* Bio.container text loading animation */
    position: relative;
    top: 0;
    right: 1500px;
    animation-name: loadFromRight;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}

/* Animation keyframes */
@keyframes loadFromRight {
    0% {
        position: relative;
        top: 0;
        right: -1500px;
    }
    100% {
        position: flex;
        top: 0;
        left: 0px;
    }
}

/* heading Bio text */
p.bio-text {
    font-family: var(--opensans);
    font-size: 1.125em;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: 1.5px;
}



/* ---- MAIN - PROJECTS ---- */

/* projects section container */
section#projects {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 50px 0;

    background-image: url("../img/schedule-compressed.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: var(--projects-color);

    font-family: var(--opensans);
    color: var(--text-projects-color);
    font-size: 1em;
    letter-spacing: 0.5px;
    line-height: 1.5em;
}

/* Project section title */
.projects-title > h1 {
    font-family: var(--montserrat);
    font-weight: 600;
    letter-spacing: 2px;
    padding-bottom: 30px;
}

/* Project container */
.project-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    background-color: var(--project-box-color);
    border: 1px solid rgb(201, 200, 202);
    border-radius: 7px;

    margin: 10px 15px 20px 15px;
    max-width: 500px;
    min-height: 580px;

    transition: all 0.3s ease 0s;
}

.project-container:hover {
    box-shadow: 2px 2px 5px 0px rgb(201, 200, 202);
    transform: translate(2px, 2px);
}

/* project image container */
.project-image-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* project image */
.project-img {
    max-width: 100%;
    border-top-right-radius: 7px;
    border-top-left-radius: 7px;
}

/* project title */
.project-image-container > h3 {
    font-family: var(--montserrat);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-top: 40px;
}

/* project text container */
.project-text-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 15px 15px 0px 15px;
}

.text-important {
    font-weight: 600;
}

/* project links container */
.project-links-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    
    align-self: flex-end;
    min-width: 70%;
    margin: 10px auto 30px auto;
}

/* projects links */
.project-links-container > a, .project-links-container > a:visited {
    color: var(--text-projects-color);
}

/* projects links */
.project-links-container > a:hover {
    color: var(--text-a-hover-color);
}



/* ---- FOOTER SECTION ---- */

/*footer section container*/
footer {
    background: var(--contact-color);
    color: var(--text-contact-color);
    font-family: var(--montserrat);
    width: 100%;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px 15px;
    transition: all 0.7s ease 0s;
}

/* footer links */
.footer-content > a {
    margin: 5px 0px;
    padding-bottom: 5px;
}

.footer-content > a, .footer-content > a:visited {
    color: var(--text-contact-color);
}

.footer-content > a:hover {
    color: var(--text-a-hover-color);
}



/* PAGE BREAK AT 600px TO TRANSFORM MENU LINKS TO HAMBURGER */
@media screen and (min-width:600px) {

    /* resize all sections to 100vw*/
    .main-container {
        max-width: var(--med-width);
        margin: auto;
    }
    header {
        max-width: var(--med-width);
    }

    /* ---- HEADER SECTION ---- */
    header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    /* ---- MAIN SECTION ---- */
    main {
        padding-top: var(--nav-height-sm);
        width: 100%;
    }

    /* Header logo name */
    span.name {
        padding-left: 15px;
        font-size: 2.5em;
    }
}



/* ---- FULL SIZE BREAK AT 1065px ---- */
@media screen and (min-width: 1065px) { 
   
    /* ---- HEADER SECTION ---- */
    
    /* Header logo name */
    span.name {
        padding-left: 15px;
    }

    nav {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-between;
    }

    nav > a {
        margin: 5px 50px;
    }



    /* ---- MAIN SECTION ---- */
    main {
        padding-top: var(--nav-height-sm);
    }



    /* ---- MAIN - PROJECTS ---- */
    .projects-container {
        display: flex;
        
        flex-direction: row;
        justify-content: space-around;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .project-container {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        
        margin-top: 25px;
        min-height: 680px;
    }

    .projects-title {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

       

    /* ---- FOOTER SECTION ---- */
    .footer-content {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: center;
        margin: 45px 15px;
        transition: all 0.7s ease 0s;
    }

    .footer-content > a {
        margin: 5px 50px;
    }

    .footer-links {
        /* transition: all 0.7s ease 0s; */
    }
}