/*

I use the following selector for the purpose of styling and aligning elements.

* {
    border: 1px solid black;
}

*/

body {
    background-color: white;
}

a {
    cursor: pointer;
}

h1, p {
    font-family: "Outfit", serif;
    font-weight: normal;
}

#name, #projects-page-title, .project-detail-title {
    font-family: "Bebas Neue", sans-serif;
    font-weight: normal;
    font-size: 70px;
    letter-spacing: 15px;
}

#projects-page-title {
    width: 980px;
    margin: 55px auto 0;
}

header h2 {
    display: none;
    font-size: 30px;
    font-family: "Bebas Neue", sans-serif;
    font-weight: normal;
    letter-spacing: 7px;
}

/*

openNav and navOverlay is used for a little bit of interactivity of the website
only when the site is rendered for shorter screen-sized devices. Therefore, it is displayed
as none.

 */

#openNav {
    display: none;
}

#navOverlay {
    display: none;
}

/*

The navigation bar below is used for the larger screen-sized devices in
how it is formatted.

 */

nav {
    display: grid;
    grid-template-columns: 100px;
    grid-template-rows: repeat(3, 50px);
    font-size: 20px;
    position: fixed;
    z-index: 1;
    top: 0;
    padding: 10px;
    margin-top: 50px;
    margin-left: 10px;
}

nav a {
    width: 100px;
    text-decoration: none;
    font-size: 20px;
    color: black;
    font-family: "Outfit", serif;
    font-weight: 250;
    transition: color 200ms ease-out;
    -webkit-transition: color 200ms ease-out;
}

nav a:hover {
    color: darkgrey;
}

/*

First grid layout is used to organize the elements for an attractive
introduction to my website. The grid layout changes in the responsive
design for shorter screen-sized devices. Inside this grid, #profile,
#main-story h1 and p, has its own height and width, font style and
formatting.

 */

.grid-layout {
    display: grid;
    height: 680px;
    width: 980px;
    grid-template: 1fr / repeat(2, 1fr);
    grid-auto-flow: column;
    justify-content: center;
    gap: 75px;
    margin: 50px auto 0;
}

#profile {
    height: 600px;
    width: 450px;
    box-shadow: 15px 15px #DFA74F;
}

#main-story {
    height: 680px;
}

#main-story p {
    font-weight: normal;
    line-height: 3;
    letter-spacing: 1.7px;
    text-align: justify;
    font-size: 16px;
}

#main-story h1 {
    font-family: "Bebas Neue", sans-serif;
    font-weight: normal;
    font-size: 70px;
}

/*

The second grid layout shares a similar layout as the first one for
both larger and shorter sized devices which involves the section's
title, paragraph, and image.

 */

.grid-layout-2 {
    display: grid;
    height: 800px;
    width: 980px;
    grid-template: 1fr / repeat(2, 1fr);
    grid-auto-flow: column;
    justify-content: center;
    gap: 75px;
    margin: 50px auto 0;
}

/*

These are the elements formatted and sized for the second
grid layout as mentioned before.

*/

#experiences-section-title {
    font-family: "Bebas Neue", sans-serif;
    font-weight: normal;
    font-size: 70px;
    letter-spacing: 15px;
}

#graduation-tassel {
    height: 533px;
    width: 400px;
    box-shadow: 15px 15px #DFA74F;
}

#experience-paragraph {
    font-weight: normal;
    line-height: 3;
    letter-spacing: 1.7px;
    margin-top: auto;
    text-align: justify;
    width: 500px;
    height: 533px;
    font-size: 16px;
}

/*

A grid layout for organizing portfolio projects and styled each
.portfolio-project-link element to make it stand out to users
like it is clickable.

*/

.projects-grid-layout {
    display: grid;
    height: 311px;
    width: 980px;
    grid-template: repeat(2, 1fr) / repeat(2, 1fr);
    justify-content: center;
    gap: 88px;
    margin: auto;
}

#projects-page-title, .project-detail-title {
    padding-bottom: 10px;
}

.portfolio-image-overlay, .portfolio-project-link, .portfolio-project-link img {
    height: 311px;
    width: 446px;
    box-shadow: 1px 1px 10px lightgrey, -1px 1px 10px lightgrey;
    transition: box-shadow 0.25s ease-in;
    -webkit-transition: box-shadow 0.25s ease-in;
}

.portfolio-image-overlay:hover, .portfolio-project-link:hover, .portfolio-project-link img:hover {
    box-shadow: 0 0 0 lightgrey, 0 0 0 lightgrey;
}

.portfolio-image-overlay {
    position: absolute;
    background-color: black;
    opacity: 0;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.25s ease-in;
    -webkit-transition: opacity 0.25s ease-in;

}

.portfolio-image-overlay p, .portfolio-image-overlay a {
    text-decoration: underline;
    color: white;
    transition: color 0.25s ease-out;
    -webkit-transition: color 0.25s ease-out;
}

.portfolio-image-overlay a:hover, .portfolio-image-overlay p:hover {
    color: #DFA74F;
}

.portfolio-image-overlay:hover {
    opacity: 85%;
}

.portfolio-project-link img {
    background-size: cover;
}

.flex-jammming {
    flex-direction: column;

}

/*

Styles the child elements in the root element, footer, so that it lines up
well with the rest of the page.

*/

hr {
    margin-top: 100px;
    width: 980px;
}

footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 980px;
    margin: 0 auto;
}

footer a, #paragraph-section-grid-layout a {
    text-decoration: underline;
    color: #1a46ad;
    transition: color 200ms ease-out;
    -webkit-transition: color 200ms ease-out;
}

footer a:hover, #paragraph-section-grid-layout a:hover {
    color: #7a9ff5;
}

#email-icon, #linkedin-icon {
    display: none;
}

/*

Arranges elements based on the width of the user's device.

*/

@media only screen and (max-width: 1230px) {
    header {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        width: 100%;
        height: 55px;
        position: fixed;
        top: 0;
        left: 0;
        border-color: white;
        background-color: white;
        //border-color: #faf1e3;
        //background-color: #faf1e3;
        z-index: 5;
    }
    nav {
        display: none;
        font-size: 15px;
    }
    #otherNav {
        margin-left: 25px;
        width: 200px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    #openNav {
        display: block;
        height: 25px;
        width: 25px;
        margin-right: 25px;
    }
    #closeNav {
        display: block;
        height: 25px;
        width: 25px;
        margin-right: 25px;
    }
    #navOverlay {
        background-color: #4F607A;
        //background-color: #0E2851;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        left: 0;
        top: 0;
        height: 55px;
        width: 100%;

    }
    #navOverlay a {
        color: white;
        text-decoration: none;
        font-family: "Outfit", serif;
        font-weight: 250;
    }
    main {
        margin-top: 85px;
    }
}

@media only screen and (max-width: 1050px) {
    #openNav {
        margin-top: 0;
    }
    #name, #projects-page-title, .project-detail-title {
        display: none;
    }
    header {
        justify-content: space-between;
    }
    header h2 {
        display: block;
        margin-left: 25px;
    }
    .grid-layout {
        grid-template: repeat(2, 1fr) / 1fr;
        grid-auto-flow: row;
        height: 1000px;
        width: 450px;
        justify-content: center;
        margin: auto;
        padding: 0;
        gap: 0;
    }
    #main-story {
        height: 600px;
    }
    #experiences-section-title {
        font-size: 50px;
        width: 450px;
        margin-top: 100px;
    }
    #graduation-tassel {
        display: none;
    }
    #experience-paragraph {
        width: 450px;
        margin-top: 0;
    }
    .grid-layout-2 {
        height: 750px;
        width: 450px;
        justify-content: center;
        grid-template: 1fr / 3fr;
        grid-auto-flow: row;
        margin: 0 auto 0;
        padding: 0;
        gap: 0;
    }
    .portfolio-image-overlay {
        opacity: 85%;
    }
    .projects-grid-layout {
        justify-content: center;
        grid-template: repeat(2, 1fr) / 1fr;
        grid-auto-flow: row;
        height: 710px;
        width: 446px;
    }

    hr {
        margin-top: 25px;
        width: 450px;
    }
    footer {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 450px;
    }
    footer p {
        display: none;
    }
    #linkedin-icon, #email-icon {
        display: block;
    }

}

@media only screen and (max-width: 590px) {
    h1 {
        text-align: center;
    }
    header h2 {
        font-size: 18px;
    }
    #openNav img, #openNav, #closeNav, #closeNav img {
        height: 18px;
        width: 18px;
    }
    #otherNav a {
        font-size: 17px;
    }
    #profile, #main-story, .grid-layout, .grid-layout-2, #experience-paragraph, #experiences-section-title, hr, footer {
        width: 241px;
    }
    #profile {
        height: 321px;
    }
    #main-story {
        height: 300px;
    }
    #main-story p {
        font-size: 12px;
        line-height: 2;
        letter-spacing: 1.7px;
    }
    #experience-paragraph {
        font-size: 12px;
        line-height: 2;
        letter-spacing: 1px;
        height: 360px;
    }
    #experiences-section-title {
        font-size: 27px;
        letter-spacing: 7px;
        margin: 0;
    }
    .grid-layout {
        height: 720px
    }
    .grid-layout-2 {
        height: 440px;
    }
    .grid-layout-2 div {
        height: 60px
    }
    .portfolio-project-link, .portfolio-image-overlay, .portfolio-project-link img {
        font-size: 12px;
        width: 241px;
        height: 170px;
    }
    .projects-grid-layout {
        height: 390px;
        width: 241px;
        gap: 50px;
    }

}