@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
}


/*
body {
    background-image: url("https://storage.googleapis.com/subtlepatterns-production/designers/subtlepatterns/uploads/doodles.png");
    background-attachment: fixed;
    background-position: center;
}
*/

body {
    color: white;
    font-size: 1.1rem;
    font-weight: 1000;
    /* How to make background image dynamic*/
}

#main {
    /*
    background-image: url("https://images.pexels.com/photos/5011647/pexels-photo-5011647.jpeg?cs=srgb&dl=pexels-uzunov-rostislav-5011647.jpg&fm=jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:center;
    */
    background-color: rgb(13, 20, 48);
}

#welcome-section,
.project_section, #contact {
    padding-left: 150px;
    padding-right: 150px;
}



#nav-bar ul {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-image: linear-gradient(rgb(0, 0, 0), black);
    padding-bottom: 25px;
}

#nav-bar div a {
    padding-top: 10px;
    padding-right: 25px;
    padding-left: 25px;
    color: white;
}

#nav-bar div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    font-size: 1.6rem;
}

#nav-bar a:hover {
    color: rgb(0, 183, 255);
}




#welcome-section {
    background-image: linear-gradient(black, rgb(13, 20, 48));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

#intro-name {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    padding-left: 150px;
    font-size: 1.25rem;
    padding-bottom: 25px;
}

#intro-description {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    padding-right: 150px;
    font-size: 1.25rem;
}

#intro-name div:not(:first-child) {
    font-size: 3rem;
}



#projects {
    padding-top: 150px;
}
#projects header, #contact header {
    display: flex;
    justify-content: center;
    color: rgb(0, 183, 255);
    font-size: 2rem;
}

#projects_container {
    display: flex;
    padding-top: 75px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

#projects_container .project_section:nth-of-type(2) {
    background-image: linear-gradient(rgb(13, 20, 48), rgb(20, 29, 66));
}

#projects_container .project_section:nth-of-type(3) {
    background-image: linear-gradient(rgb(20, 29, 66), rgb(28, 40, 90));
}

.project_section {
    display: grid;
    height: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    padding-bottom: 125px;
    align-items: center;
}
.img {
    display: block;
    max-width: 100%;
    max-height: 100%;
 
}

.project_image {
    position: relative;
    display: grid;
    width: 100%;
    height: 85%;
    align-items: center;
    opacity: 1;   
    transition: height 2s, opacity 1s;
}



.project_image:hover {
    height: 100%;
    opacity: 0.6;
}


.project_details {
    display: grid;
    font-size: 1.01rem;
    max-width: 100%;
    color: white;
    align-items: center;
    z-index: 1;
}

.project_title {
    display: grid;
    align-items: center;
    justify-content: flex-end;
    color: rgb(0, 183, 255);
    height: 100%;
}

.project_section {
    padding-left: 20%;
    padding-right: 20%;
}

.project_description {
    display: grid;
    background-color: rgb(44, 49, 75);
    background-size: cover;
    max-height: 100%;
    align-items: center;
    padding: 40px;
}

.project_links div {
    display: flex;
    gap: 75px;
    justify-content: flex-end;
    margin: 20px;
}

.project_links div a:hover {
    color: rgb(0, 183, 255);
}

.project_links div a {
    grid-row: 1/2;
    color: white;
}

.sky-blue_font {
    color: rgb(0, 183, 255);
}

#contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: linear-gradient(rgb(28, 40, 90), rgb(48, 50, 100));
    padding-bottom: 50px;
}

#contact header {
    padding-bottom: 25px;
}

#contact p {
    text-align: center;
    background-color: rgb(52, 57, 87);
    background-size: cover;
    max-height: 100%;
    padding: 40px;
}

.fadeIn {
    animation: fadeIn 3s both;
}


@keyframes fadeIn {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}


@media(max-width:625px) {
    #intro-name {
        display: block;
        text-align: center;
    }
    
    #intro-description {
        text-align: center;
       
    }

    #welcome-section {
        padding-left: 0px;
        padding-right: 0px;
       
        
    }
}

@media (min-width: 625px) {
    #nav-bar div {
        flex-direction: row;
        justify-content: center;
    }

    #welcome-section {
        flex-direction: row;

    }
}

@media (max-width: 775px) {
    #intro-name {
        padding-left: 0px;
        
    }
    #intro-description {
        padding-right: 0px;
    }
}

@media (min-width: 900px) {

    #nav-bar ul {
        flex-direction: row;
    }

    .project_section {
        grid-template-columns: repeat(10, 1fr);
    }

    .project_title {
        grid-row: 1/2;
        grid-column: 1/-1;
    }
    .project_image {
        grid-column: 1/8;
        grid-row: 2/3;
        width: 85%;
        height: 100%;
        opacity: 1;
        transition: width 2s, opacity 2s;
    }
    
    .project_image:hover {
        width: 100%;
    }

    .project_details {
        grid-column: 4/-1;
        grid-row: 2/3;
    }

    .project_links {
        grid-row: 3/4;
    }

}

@media (min-width: 1200px) {
    #intro-name, #intro-description {
        font-size: 2rem;
    }
}


@media (min-width: 1550px) {
    .project_details {
        grid-column: 6/-1;
    }
}