* {
    margin: 0;
    padding: 0;
    font-family: Inter, "sans-serif";
    color: var(--text-color);
    transition: 0.7s;
}

:root {
    --background-menu: #f6f8fa;
    --background-main: white;
    --text-color: black;
    --span-color: rgb(160, 0, 255);
    --border-menu-color: rgb(123, 123, 123);
    --link-source-color: rgb(160, 0, 255);
}

html {
    scroll-behavior: smooth;
}

a {
    color: var(--link-source-color);
}

i {
    color: var(--text-color);
}

main {
    background-color: var(--background-main);
    padding: 12vh 16vw 0;
    display: flex;
    flex-direction: column;
}

section {
    padding: 8vmin 0 0;
}

h1,
article>p {
    width: 30vw;
    text-align: justify;
    margin: 4vh 0 0;
}

h1 {
    font-size: 2em;
}

span {
    color: var(--span-color);
}

/*IDs*/

#icon {
    margin: 8px;
    cursor: pointer;
}

#sobre {
    display: inline-flex;
    justify-content: space-between;
}

#rodape {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 8vh;
    background-color: var(--background-menu);
}

/*classes*/
.menu {
    display: flex;
    justify-content: center;
    width: 100vw;
    background-color: var(--background-menu);
    position: fixed;
}

.menu-item {
    color: var(--text-color);
    text-decoration: none;
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 8vh;
    width: 68vw;
}

.nav-list {
    list-style: none;
    display: flex;
}

.nav-list li {
    letter-spacing: 3px;
    margin-left: 32px;
}

.mobile-menu {
    display: none;
    cursor: pointer;
}

.mobile-menu div {
    width: 32px;
    height: 2px;
    background-color: var(--text-color);
    margin: 8px;
    transition: 0.7s;
}

.minha-foto {
    border-radius: 50%;
}

.icones-contato {
    display: inline-flex;
    gap: 30px;
    margin: 5vh 0;
}

.nav-list.active {
    animation: menu 0.5s ease forwards;
}

.mobile-menu.active .line1 {
    transform: rotate(-405deg) translate(-8px, 8px);
}

.mobile-menu.active .line2 {
    opacity: 0;
}

.mobile-menu.active .line3 {
    transform: rotate(405deg) translate(-5px, -7px);
}

/*controle de responsividade para dispositivos menores*/
@media(max-width: 1115px) {

    h1 {
        margin: 0 0 4vmin;
    }

    article>p {
        margin: 4vmin 0 0;
    }

    .minha-foto {
        height: 250px;
        width: 250px;
    }
}

@media(max-width: 900px) {

    main {
        padding: 12vmin 14vmin;
    }

    .nav {
        width: 72vw;
    }
}


@media (max-width: 769px) {

    main {
        padding: 10vmin 20vmin;
    }

    section {
        padding: 17vmin 0 0;
    }

    h1 {
        width: 70vw;
        text-align: start;
        margin: 0 0 10vmin;
    }

    article>p {
        margin: 5vmin 0 0;
        width: 60vw;
    }

    .minha-foto {
        margin: 10vmin 0 0;
        width: 60vw;
        height: auto;
    }

    .nav {
        width: 64vw;
    }

    .nav-list {
        position: absolute;
        top: 8vh;
        right: 0;
        width: 50vw;
        height: 92vh;
        background-color: var(--background-menu);
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        visibility: hidden;
    }

    .nav-list li {
        margin-left: 0;
        opacity: 0;
    }

    .mobile-menu,
    #sobre {
        display: block;
    }
}

/*animação do icone de menu*/
@keyframes menu {

    from {
        opacity: 0;
        visibility: hidden;
    }

    to {
        opacity: 1;
        visibility: visible;
    }
}

@keyframes navLinkFade {

    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

a i:hover {
    transform: scale(1.2);
    transition: transform 0.1s;
    color: var(--span-color);
}

.menu-item:hover {
    color: var(--link-source-color);
    transition: color 0.2s ease-in-out;
}

#icon:hover {
    transform: rotate(720deg);
    transition: transform 2s ease-in-out;
}