main {
    display: flex;
    flex-direction: column;
    gap: 1em;
    width: min(60%, 600px);
    margin: 0 auto;
    padding-bottom: 2em;
}

/* Intro */
.intro {
    display: flex;
    gap: .5em;
}

.intro-header {
    text-align: center;
    margin: .5em 0;
}

.intro-text {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.intro-text p {
    font-size: 1em;
}

.profile-img {
    width: 150px;
}

.intro-text a {
    margin: 0 auto;
}

/* Skill Section */
.skill-sec {
    display: flex;
    flex-direction: column;
    text-align: center;
    border: var(--color-primary) 2px solid;
    padding: 1em;
    border-radius: 50px;
    margin: 1em 0;
}

.skill-sec img{
    margin: 0 auto;
}

.skill-list {
    list-style-type: none;
}

/* Project*/
.project {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.project h2,h3 {
    text-align: center;
}

.project h2 {
    margin-bottom: .75em;
}

.project a {
    margin: .3em auto;
    
}

/* Button Animations */
.btn:hover {
    color: var(--color-primary);
    background-color: var(--color-secondary);
    border: 1px solid var(--color-primary);
    transition: all .5s;
}

/* Heading underline */
.project h2:after, h1:after {
    content: "";
    border-bottom: 2px var(--color-primary) solid;
    display: block;
    width: 30%;
    margin: 0 auto;
}

/* Breakpoint */
@media screen and (max-width: 767px)/*mobile or small screens*/ {
    .intro {
        flex-wrap: wrap;
    }

    .profile-img {
        margin: 0 auto;
    }
}