/* MOBILE, STICKY BACK TO TOP */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

body{ 
    background-color: #2A2A2A;
    color: #D4F6FF;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Jost','Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', sans-serif;
    scroll-behavior: smooth; 
}

.flex-container{
    display: flex;
    flex-direction: column;
}

.heading{
    color: #D4F6FF;
     font-family: 'Montserrat';
}

.subheading{
    font-family: 'Montserrat';
    margin: 1rem;
    font-size: 3rem;
    color: #53B1E3;
    text-align: center;
}

.sub-subheading{
    font-size: 1.75rem;
}

.sub-subheading[data-status="in-progress"] > span{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sub-subheading[data-status="in-progress"] > span::after{
    content: 'In Progress';
    font-size: 1rem;
    padding: .25rem .5rem;
    border: 2px solid #2E58A2;
    border-radius: .25rem;
    background-color: #53B1E3;
    color: #FAF9F6;
    white-space: nowrap;
}

.logos{
    width: 13rem;
}

.section-margin-spacing{
    margin: 4rem 10rem;
}

.img-center{
    display: flex;
    align-items: center;
    justify-content: center;
}

.card{
    margin: 1rem;
    padding: 1rem;
    border: 2px solid none;
    background-color: #FAF9F6;
    color: #18206F;
    box-shadow: -8px 9px 0px 0px #53B1E3;
    border-radius: 1rem;
    justify-self: stretch;
}

svg{
    width: 8rem;
    height: 8rem;
}

/*--------------------------------------HEADER STYLES---------------------------------*/

.header-grid-container{
   display: flex;
    align-content: center;
    justify-content: center;
    height: 90vh;
    padding: 0 8rem;
}

.header-grid-container > *{
    justify-self: center;
    align-self: center;
}

.logo{
    z-index: 999;
    height: 10vh;
    width: 100%;
    background-color: #2A2A2A;
    border-bottom: solid 2px #53B1E3;
    position: sticky;
    top: 0;
}

.navbar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    text-align: center;
    width: 60%;
}

.navbar a{
    font-size: 6vw;
    font-weight: 600;
    text-decoration: none;
    position: relative;
    left: 0rem;
    text-decoration: underline transparent .5rem;
    transition: left .75s ease, color .75s ease, text-decoration .25s linear;
    color: #53B1E3;
}

.navbar a:first-child, .navbar a:first-child:visited{
    color: #53B1E3;
}

.navbar a:nth-child(3){
    color: #D4F6FF;
}

.navbar a:hover, .navbar a:first-child:hover{
    color: #2E58A2;
   left: 1rem;
   text-decoration-color: #2E58A2;
}

.navbar a span, .navbar a span:hover{
    font-family: 'Montserrat';
}

.navbar a:hover span {
    display: none;
}

.navbar .index-link:hover:before {
    content: "Introduction";
}

.navbar .work-link:hover:before {
    content: "Contact";
}

.navbar .contact-link:hover:before {
    content: "My Work";
}

.image{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    max-width: 1920px;
    padding: 2rem;
    h1{
        text-align: center;
        font-size: 3rem;
    }
    p{
        font-size: 1.5rem;
        text-align: center;
        font-weight: 600;
    }
}


.selfie{
    width: 80%;
    object-fit: cover;
}

/*--------------------------------------MAIN STYLES---------------------------------*/

/* RETURN AND MAKE GRID MORE DYNAMIC (min & max)*/

.section--skills-contact{
    display: grid;
    grid-template: repeat(8, 1fr) / 2fr 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: 4rem;
}

.section--skills-contact .card{
    margin: 1rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

 .section--skills-contact .card h1, .section--skills-contact .card h2, .section--skills-contact .skills-heading h2, .section--skills-contact .card h3, .contact h2 {
    font-family: 'Montserrat';
    margin: 1rem;
    font-size: 3rem;
    color: #53B1E3;
    text-align: center;
}

.section--skills-contact .card h2{
    font-size: 3rem;
}

.section--skills-contact .card h3{
    font-size: 1.75rem;
}

.section--skills-contact .card p{
    font-weight: 600;
    font-size: 1.25rem;
    margin: 1rem;
}

.section--projects {
    margin: 8rem 0;
    h2{
        font-size: 3rem;
    }
}

.project-card{
    margin: 5rem 0;
    display: flex;
    align-items: center;
    gap: 5rem;
}

.project-card--preview{
    width: 50%;
    
    iframe, img{
        pointer-events: none;
        user-select: none;
        border-radius: 1rem;
    }
}

.project-card--img{
    object-fit: cover;
    width: 100%;
}

.project-card--description{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 40%;
    padding: 3rem;

    h4{
        font-style: italic;
        font-weight: 800;
    }

    .project--links{
        display: flex;
        gap: 1.5rem;
    }
}

.project-card--description .sub-subheading::before{
        content: "";
        display: block;
        width: 2.5rem;;
        border-bottom: 7px solid #53B1E3;
        margin-bottom: 1rem;
    }

.project-card--description p{
    font-weight: 600;
}

.project-card--description a{
    color: #18206F;
    width: fit-content;
    font-size: 1.25rem;
    font-weight: 600;
    text-decoration: none;
    position: relative;
}

.project-card--description a svg{
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

.project-card--description a:hover{
    color: #53B1E3;
}

.project-card--description a::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.project-card--description a:hover::after{
    transform: scaleX(1);
}

/*--------------------Form--------------------- */
.form-wrapper{
    background-color: #FAF9F6;
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid 2px lightgray;
    border-radius: 1rem;
    padding: 1rem;
    width: 100%;
    max-width: 550px;
    height: 75%;
}

.form-wrapper form{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    .names{
        margin-top: 2rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;

        *{
            display: flex;
            flex-direction: column;
        }
    }
    .email{
         display: flex;
        flex-direction: column;
    }

    input{
        padding: .5rem;
        font-weight: 600;
        border: 2px solid lightgray;
        border-radius: .25rem;  
    }
}


.form-wrapper label{
    font-family: Montserrat;
    color: #53B1E3;
    font-size: 1.25rem;
    font-weight: 700;
}

.section--skills-contact .card .form-wrapper input{
    font-family: Montserrat;
    font-weight: 700;
    padding: .25rem;
    width: 100%;
    border: 2px solid rgb(240, 239, 239);
    border-radius: .25rem;
}

.section--skills-contact .card .form-wrapper input:focus, .section--skills-contact .card .form-wrapper textarea:focus{
    background-color: lightgray;
    border-color: #2E58A2;
}

.section--skills-contact .card .form-wrapper input[type="submit"]{
    width: 5rem;
}

.message textarea{
    color: #18206F;
    font-family: Montserrat;
    font-weight: 500;
    width: 100%;
    height: 7rem;
    padding: .5rem;
    resize: none;
    border: 2px solid lightgray;
    border-radius: .25rem;
}

.button{
    align-self: center;
}

.button svg{
    width: 1.75rem;
    height: 1.75rem;
}

.button.button--resume button{
    background-color: #53B1E3;
    border: none;
    padding: .5rem 1rem;
    a{
        color: #FAF9F6;
    }
}

.button.button--resume button:hover{
    background-color: #FAF9F6;
box-shadow: -4px 4px 0px 1px #53B1E3;
    a{
        color: #53B1E3;
    }
    path{
        fill: #53B1E3;
    }
}


.button button a{
    font-family: Montserrat;
    font-size: 1.15rem;
    font-weight: 700;
    color: #FAF9F6;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
}

.button input, .button button{
    font-family: Montserrat;
    font-size: 1.15rem;
    font-weight: 700;
    background-color: #53B1E3;
    color: #FAF9F6;
    border-radius: .25rem;
    padding: .25rem .75rem;
    transition: all ease-in .15s;
    border: 2px solid #8ed4fa;
}

.button input:hover, .button button:hover{
    background-color: #2E58A2;
    cursor: pointer;
}


/*--------------------Grid--------------------- */

.intro{
    display: flex;
    flex-direction: column;
    grid-row: 2/ 5; 

    .subheading{
        text-align: left;
    }

    p{
        font-weight: 600;
        font-size: 1.25rem;
        margin: 1rem;
    }
}

.contact{
    grid-row: 5/9;
    margin: 0 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.skills-heading{
    grid-column: 3/4;
    grid-row: 1/2;
    align-self: end;
}

.section--skills-contact .card:nth-child(5){
    grid-column: 3/4;
    grid-row: 2/ span 2;
}

.section--skills-contact .card:nth-child(2n+5){
    grid-column: 3/4;
    grid-row: auto / span 2;
}

.section--skills-contact .card:nth-child(2n+4){
    grid-column: 2/3;
    grid-row: auto / span 2;
}

/*--------------------------------------FOOTER STYLES---------------------------------*/


footer.flex-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: #53B1E3;
 /*Why does 4rem and less not work */
    padding: 4rem 4rem;
    color: #D4F6FF;
}



footer.flex-container a{
    color: #D4F6FF;
    text-decoration: none;
    font-weight: 700;
    text-decoration: underline transparent .15rem;
    transition: color .15s ease, text-decoration .15s linear;
}

footer.flex-container a:hover{
    color: #D4F6FF;
    text-decoration-color: #D4F6FF;
}

.footer.flex-container .footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
}

footer.flex-container .footer-bottom .footer-bottom--links{
    display: flex;
    justify-content: space-evenly;
}

footer.flex-container .footer-bottom .footer-bottom--links p a svg{
    fill: #D4F6FF;
    width: 1rem;
    height: 1rem;
}


/*--------------------------------------MOBILE STYLES---------------------------------*/

@media only screen and (max-width: 1200px) {

    .selfie{
        max-width: 50vh;
    }

    .logo .logos{
        padding: 2rem;
    }

    .logos{
        width: 13rem;
    }

    .section-margin-spacing {
        margin: 0 2rem;
    }
    header{
        display: flex;
        flex-direction: column;
        .header-grid-container{
            display: flex;
            flex-direction: column;
            padding: 0;
            .navbar{
                display: none;
            }
        }
    }

    main{
        .section--skills-contact{
            display: flex;
            flex-direction: column;
            margin-bottom: 5rem;
            .intro{
                text-align: center;
                .subheading{
                    font-size: 2.25rem;
                    text-align: center;
                }
            }
            > .card{
                width: 65%;
            }       

            > .card:nth-child(odd){
                align-self: flex-end;
            }

            .contact{
                margin: 0 1.5rem;
            }
        }

        .section--projects{
            margin: auto;
            .projects-wrapper{
                .project-card{
                    flex-direction: column;
                    .project-card--preview{
                        width: 75%;
                        margin: 0 auto;
                    }
                    .project-card--description{
                        width: auto;
                        .sub-subheading{
                            span{
                                flex-direction: column;
                                align-items: flex-start;
                                gap: .5rem;
                            }
                        }
                    }

                    .project--links{
                        align-items: center;
                        margin-top: .5rem;
                        flex-direction: column;
                        text-align: center;
                    }
                }
            }
    }
    }

    footer.flex-container{
            flex-direction: column;
            gap: 2rem;
            align-items: center;

            .footer-bottom{
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: .5rem;
                .footer-bottom--links{
                    display: flex;
                    gap: 1rem;
                }
            }
        }
}

@media only screen and (max-width: 600px) {
    main{
        .section--projects{
            .projects-wrapper{
                .project-card{
                    .project-card--preview{
                        width: auto;
                        order: 2;
                        margin: 0;
                    }
                }
            }
    }
    }
}