main {
    padding: 0 5rem;
    display: flex;
    flex-direction: column;
    margin-bottom: 20rem;
}

.common-title {
    /* font-family: "Abril Fatface", serif; */
    font-size: 2.4rem;
    font-weight: 600;

}

#banner {
    height: 30vh;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;

    & > h1 {
        font-size: 2.8rem;
        font-weight: 700;
        margin-bottom: 1rem;
        text-align: center;
    }

    & > p {
        font-size: 2rem;
        color: rgb(109, 109, 109);
        font-weight: 500;
    }   
}


/* about */
#about {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;

    .profile-image{
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 2rem;
}

    & h2 {
        font-size: 2.4rem;
        font-weight: 700;
    }   

    & p {
        font-size: 1.6rem;
        color: rgb(109, 109, 109);
        font-weight: 500;
    }   
}

/* skills */
#skills {
    display: flex;
    gap: 2rem;
    & > h2 {
        width: 25rem;
    }
    & img {
        margin-right: 1rem;
    }

    margin: 10rem 0;

}

/* projects */
#projects {
    position: relative;
    display: flex;
    gap: 3rem;
    min-height: 50rem;
    padding: 5rem 0 10rem;
    flex-wrap: wrap;

}

.projects-filter {
    display: flex;
    flex-direction: row;
    gap: 2rem;

    & input[type="radio"] {
        appearance: none;
    }

    & span {
        font-size: 1.6rem;
        color: rgb(109, 109, 109);
        font-weight: 500;
        padding: 0 1rem 1rem;

        border-bottom: 0.2rem solid rgb(175, 175, 175);
        cursor: pointer;

        &:hover {
            color: black;
            border-bottom: 0.2rem solid black;
        }
    }
}   

input[value="projects"]:checked + .projects-projects {
    opacity: 1;
}
input[value="volunteering"]:checked + .projects-volunteering {
    opacity: 1;
}
input[value="deepdive"]:checked + .projects-deepdive {
    opacity: 1;
}

/* portfolio */
/* projects, education & activity, career 을 담을 섹션 */
#portfolio {
  display: flex;
  align-items: flex-start;
  gap: 2rem;

  aside {
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: fit-content;
    width: 25rem;
  }

  aside ul {
    list-style: none;
    padding: 0;
  }

  aside li {
    color: #ccc;
    padding: 0.5rem 0;
    cursor: pointer;
    transition: color 0.3s ease, background-color 0.3s ease;
  }

  aside li.active {
    color: rgb(0, 0, 0);
    font-weight: bold;
  }

  & > div {
    flex: 1;
  }
}


/* contact */
#contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;

    & h2 {
        font-size: 2.4rem;
        font-weight: 700;
    }   

    & p {
        font-size: 1.6rem;
        color: rgb(109, 109, 109);
        font-weight: 500;
    }   
}