* {
    box-sizing: border-box;
    margin: 0;
    color: #e8e6e3;
}

body {
    background-color: #2b2f31;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.header {
    background-color: #2b2f31;
}

.header ul {
    list-style-type: none;
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
    font-size: 2rem;
    
    a {
        text-decoration: none;
        color: white;
    }

    .fa-file-pdf {
        color: #f0393a;
    }

    .fa-envelope {
        position: relative;
        background: linear-gradient(45deg, 
            #EA4335 0%, #EA4335 25%, 
            #FBBC05 25%, #FBBC05 50%, 
            #34A853 50%, #34A853 75%,
            #4285F4 75%, #4285F4 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .fa-linkedin {
        color:#72bcf8;
    }

    .fa-github {
        color: #bd7fda;
    }
}

.page-title {
    display: flex;
    justify-content: center;
    padding: 2rem;
    background-color: #37353E;
    font-size: 3rem;
    text-align: center;
}

.featured-projects {
    display: flex;
    flex: 1;
    flex-direction: column;
    text-align: center;
    margin: 1rem;

    .project-section-title {
        font-size: 3rem;
        margin-bottom: 2rem;
    }

    .projects {
        img {
            height: 25rem;
            width: 31rem;
            border-radius: 1rem;
        }

        img:hover {
            transform: scale(1.1);
        }

        .project-title {
            margin-bottom: 2rem;
            font-size: 2rem;
        }

        .asteroid-pygame {
            display: flex;
            justify-content: center;
            gap: 6rem;
            align-items: center;
            margin-bottom: 1rem;
        }

        .resiliance{
            display: flex;
            justify-content: center;
            gap: 6rem;
            align-items: center;
            margin-bottom: 1rem;
        }

        .project-description {
            max-width: 25rem;
            text-align: left;
            line-height: 1.5;
            font-size: 1.3rem;
        }
    }
}

footer {
    display: flex;
    justify-content: center;
    padding: 2rem;
    background-color: #181a1b;
}



@media (max-width: 1400px) {

        .header ul {
            font-size: 1rem;
        }

        .featured-projects {
            .projects {

                .asteroid-pygame {
                    flex-direction: column;
                    gap: 2rem;
                }

                .resiliance {
                    flex-direction: column;
                    gap: 2rem;
                }

                img {
                    height: 15rem;
                    width: 100%;
                }
            }
        }

}