@import './configs.css';


section#about-me-section {
    padding: 12vh 6vw;
}

section#about-me-section h1 {
    font-size: 24px;
    margin-bottom: 12px;
}

.about-me-info {
    padding: 12px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.about-me-info img {
    margin-bottom: 12px;
}

.about-me-info p {
    margin-bottom: 6px;
}

.skills-list {
    list-style-type: "-";
    padding: 0 12px;
}

.skills-list li {
    padding: 3px;
}

@media(min-width: 940px) {
    section#about-me-section {
        height: 100vh;
    }
    .about-me-info {
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .about-me-info img {
        margin-bottom: 0;
    }
    
    .about-me-info div {
        padding: 0 24px;
    }
}

.about-me-socials {
    font-weight: 600;
    padding: 6px 12px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.about-me-socials a {
    padding: 6px;
}

.socials-icon-anchor-container {
    display: flex;
    align-items: center;
}

.socials-icon-anchor-container:hover > #linkedin-svg,
.socials-icon-anchor-container:hover > #github-svg,
.socials-icon-anchor-container:hover > #contact-svg {
    cursor: pointer;
}

.socials-icon-anchor-container:hover > #linkedin-svg path,
.socials-icon-anchor-container:hover > #github-svg,
.socials-icon-anchor-container:hover > #contact-svg {
    fill: var(--color-yellow);
}

#linkedin-svg:hover ~ #about-me-socials-linkedin,
#github-svg:hover ~ #about-me-socials-github,
#contact-svg:hover ~ #about-me-socials-contact{
    color: var(--color-yellow);
    text-decoration: underline;
}