:root {
    --color-light-200: #f5f5f5;
    --color-light-300: #A7A7A7;
    --color-dark-900: #191919;

    --color-green: #C0CC46;
    --color-green-1: #C0CC4610;
    --color-green-2: #C0CC4630;

    --fonte-principal: 'Poppins', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--fonte-principal);
    text-decoration: none;
}

body {
    background-color: var(--color-dark-900);
}

header {
    padding: 1% 0 5% 0;
    display: flex;
    justify-content: center;
}

.menu-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 80%;
    padding: 1%;
}

.menu-box-icon {
    width: 3.75rem;
}

.menu-box-links {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.menu-box-links a {
    color: var(--color-light-300);
    font-size: 1.125rem;
    transition: .5s;
}

.menu-box-links a:hover {
    transition: .3s;
    color: var(--color-green);
    text-decoration: overline;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*part1*/
.home {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 80%;
    padding: 2%;
}

.home-quemsou {
    font-weight: bold;
    font-size: 3.75rem;
    color: var(--color-light-200);
}

.home-quemsou span {
    color: var(--color-green);
}

.home-animation {
    width: 34.375rem;
    border-radius: 50%;
}

/*part2*/
.about {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80%;
    padding: 1%;
}

.about-titulo {
    font-weight: bold;
    font-size: 3rem;
    color: var(--color-light-200);
    padding: 10rem 0 3.75rem 0;
}

.about-box {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.about-box-up {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    gap: 6.25rem;
}

.about-box-down {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    gap: 300px;
    padding: 0 9.37rem 0 7.5rem;
}

.about-box-up-conteudo {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
}

.about-box-down-conteudo {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
}

.descricao {
    color: var(--color-light-200);
    text-align: justify;
    font-size: 1.125rem;
}

.ano {
    text-align: center;
    color: var(--color-green);
}

hr {
    border-color: var(--color-green);
}

/*part3*/
.skills {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80%;
    padding: 1%;
}

.skills-titulo {
    font-weight: bold;
    font-size: 3rem;
    color: var(--color-light-200);
    padding: 10rem 0 3.75rem 0;
}

.skills-icons {
    display: flex;
    flex-direction: row;
    gap: 1.25rem;
}

.skills-divisao {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
}

.skills-icons-container {
    max-width: 9.375rem;
}

.skills-icons-container img {
    max-width: 9.375rem;
    max-height: 9.375rem;
    width: auto;
    height: auto;
}

/*part4*/
.projetos {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80%;
    padding: 1%;
}

.projetos-titulo {
    font-weight: bold;
    font-size: 3rem;
    color: var(--color-light-200);
    padding: 10rem 0 3.75rem 0;
}

.projetos-descricao {
    color: var(--color-light-200);
    padding-bottom: 3rem;
    font-size: 1.125rem;
}

.projetos-container {
    width: 80%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.projetos-container div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 15.6rem;
    height: 18.75rem;
    border-radius: 0.75rem;
    border: solid 1px var(--color-green); 
    background-color: var(--color-green-1);
}

.projetos-container div:hover{
    background-color: var(--color-green-2);
}


.projetos-container div p{
    color: var(--color-light-200);
    font-weight: bold;
}

.projeto1{
    background-image: url(./../img/paceraclub-logo.svg);
    background-size: cover;
}

.projeto1 a{
    background-color: transparent;
    width: 15.6rem;
    height: 18.75rem;
}

.projeto1 a:hover{
    background-color: var(--color-green-2);
    border-radius: 0.75rem;
}

/*part5*/
.contato {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80%;
    padding: 1%;
}

.contato-titulo {
    font-weight: bold;
    font-size: 3rem;
    color: var(--color-light-200);
    padding: 10rem 0 3.75rem 0;
}

.contato-container {
    display: flex;
    flex-direction: column;
}

.contato-container-email {
    color: var(--color-green);
    text-decoration: underline;
    font-size: 1.125rem;
}

.contato-container-redes {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    padding: 1%;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.socialContainer {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background-color: var(--color-light-200);
    display: flex;
    align-items: center;
    justify-content: center;
    transition-duration: .3s;
}

.containerOne:hover {
    background-color: #d62976;
    transition-duration: .3s;
}

.containerTwo:hover {
    background-color: #0072b1;
    transition-duration: .3s;
}

.containerThree:hover {
    background-color: #238636;
    transition-duration: .3s;
}

.containerFour:hover {
    background-color: #0057FF;
    transition-duration: .3s;
}

.socialContainer:active {
    transform: scale(0.9);
    transition-duration: .3s;
}

.svgOne {
    width: 1.25rem;
}

.svgTwo {
    width: 1.125rem;
}

.svgThree {
    width: 1.75rem;
}

.svgFour {
    width: 1.38rem;
}

.svgOne path,
.svgTwo path,
.svgThree path,
.svgFour path {
    fill: var(--color-dark-900);
}

.socialContainer:hover .svgOne,
.socialContainer:hover .svgTwo,
.socialContainer:hover .svgThree,
.socialContainer:hover .svgFour {
    animation: slide 0.3s both;
}

@keyframes slide {
    0% {
        transform: translateY(-10px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

footer {
    padding: 6% 0 2% 0;
    display: flex;
    justify-content: center;
}

.footer-container {
    width: 80%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.footer-container .menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 30%;
    padding: 1%;
}

.footer-container .menu a {
    color: var(--color-light-300);
    font-size: 0.875rem;
    transition: .3s;
}

.footer-container .menu a:hover {
    transition: .3s;
    color: var(--color-green);
    text-decoration: underline;
}

.footer-container p {
    color: var(--color-light-300);
    font-size: 0.875rem;
}

.footer-container p a {
    color: var(--color-green);
    text-decoration: underline;
}

.footer-container p span {
    color: var(--color-green);
}

@media (max-width: 1300px) {
    .home {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        gap: 3.75rem;
        width: 80%;
        padding: 2%;
    }

    .home-quemsou {
        font-size: 52px;
    }

    .about-box-down {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        gap: 6.25rem;
        padding: 0 9.375rem 0 7.5rem;
    }

    .skills-icons-container {
        max-width: 6.25rem;
    }

    .skills-icons-container img {
        max-width: 6.25rem;
        max-height: 6.25rem;
    }

    .projetos-container {
        width: 100%;
    }

    .projetos-container div {
        width: 12.5rem;
        height: 18.75rem;
    }

    .footer-container {
        flex-direction: column;
    }

    .footer-container .menu {
        width: 45%;
        margin-bottom: 1.25rem;
    }
}

@media (max-width: 800px) {
    header {
        padding: 2% 0 5% 0;
    }

    .menu-box-icon {
        width: 1.5rem;
    }

    .menu-box-links a {
        font-size: 1rem;
    }

    .home-quemsou {
        font-size: 3.125rem;
    }

    .home-animation {
        width: 31.25rem;
    }

    .about-titulo {
        font-size: 2rem;
    }

    .descricao,
    .ano {
        font-size: 1rem;
    }

    .about-box-up {
        gap: 2.5rem;
    }

    .about-box-down {
        gap: 2.5rem;
        padding: 0 1.875rem 0 1.875rem;
    }

    .skills-titulo {
        font-size: 2rem;
    }

    .skills-icons {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }

    .projetos-titulo {
        font-size: 2rem;
    }

    .projetos-descricao {
        font-size: 1rem;
    }

    .projetos-container {
        flex-direction: column;
        align-items: center;
        gap: 1.25rem;
    }

    .projetos-container div {
        width: 25rem;
        height: 12.5rem;
    }

    .contato-titulo {
        font-size: 2rem;
    }

    .contato-container-email {
        font-size: 1rem;
    }

    .footer-container .menu {
        width: 50%;
        padding: 1%;
    }
}

@media (max-width: 550px) {
    .menu-box-links a {
        font-size: 0.875rem;
    }

    .home-quemsou {
        font-size: 1.625rem;
        margin-top: 3.75rem;
    }

    .home-animation {
        width: 18.75rem;
    }

    .about-titulo {
        font-size: 1.25rem;
    }

    .descricao {
        text-align: left;
        font-size: 0.75rem;
    }

    .ano {
        font-size: 0.75rem;
    }

    .about-box-up {
        gap: 2.5rem;
    }

    .about-box-down {
        gap: 2.5rem;
        padding: 0 1.25rem 0 1.25rem;
    }

    .skills-titulo {
        font-size: 1.25rem;
    }

    .skills-icons {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }

    .skills-icons-container {
        max-width: 5rem;
    }

    .skills-icons-container img {
        max-width: 5rem;
        max-height: 5rem;
    }

    .projetos-titulo {
        font-size: 1.25rem;
    }

    .projetos-descricao {
        font-size: 0.875rem;
    }

    .projetos-container {
        flex-direction: column;
        align-items: center;
        gap: 1.25rem;
    }

    .projetos-container div {
        width: 21.875rem;
        height: 12.5rem;
    }

    .contato-titulo {
        font-size: 1.25rem;
    }

    .contato-container-email {
        font-size: 0.875rem;
    }

    .contato-container-redes {
        gap: 0.625rem;
    }

    .footer-container .menu {
        width: 70%;
    }

    .footer-container .menu a {
        font-size: 0.75rem;
    }

    .footer-container p {
        font-size: 0.75rem;
    }
}