@import url(main.css);

html{
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

/*INTRODUÇÃO*/
main{
    &{
        padding-top: 8em;
    }
    & section#introducion{
        &{
            display: flex;
            flex-flow: row wrap;
            justify-content: space-evenly;
        }
        & a > p{
            display: inline;
        }
        & section{
            margin: auto;
            display: flex;
            flex-flow: column wrap;
            justify-content: center;
            align-items: center;
        }
        & img{
            display: block;
            margin: auto;
            border: 2px solid var(--color_main);
            border-radius: 50%;
            animation: pain 1.5s infinite;
        }
        & article#text{
            &{
                margin-top: 10px;
                text-align: center;
                color: var(--color_ligth);
            }
            & h3 > span{
                &{
                    position: relative;
                }
                &::after{
                    content: "";
                    position: absolute;
                    height: 100%;
                    border-left: 3px solid var(--color_main);
                    right: -5px;
                    animation: letter 20s steps(12) infinite;
                    width: calc(100% + 13px);
                    background-color: var(--color_second);
                }
                &::before{
                    content: "";
                    color: var(--color_main);
                    animation: words 13.3s infinite;
                }
            }
        }
        & article#social{
            &{
                display: flex;
                flex-flow: row nowrap;
                justify-content: center;
                column-gap: 5px;
                margin: 20px 0;
            }
            & a > img{
                width: 30px;
                height: 30px;
                margin: 5px 0px;
                border-radius: 50%;
            }
        }
        & section >  a{
            align-content: center;
            margin: auto;
            width: 130px;
            height: 40px;
            border-radius: 35px;
            text-transform: uppercase;
            font-weight: bolder;
            color: var(--color_second);
            background-color: var(--color_main);
        }
    }
    & hr{
        margin: 15px 0;
        animation: ligth .8s infinite;
    }
    & section{
        &#skills,&#projects,&#contact,&#about,&#about > section{
            &{
                margin-top: 25px;
                border-radius: 10px;
            }
            & h2 {
                margin-bottom: 15px;
                text-align: center;
                text-transform: uppercase;
                color: var(--color_main);
            }
        }
        &#skills{
            &{
                background: transparent;
            }
            & h3{
                font-size: 20px;
            }
            & p{
                font-size: 17px;
                font-family: var(--font_second);
                color: var(--color_ligth);
                
            }
            & section.table{
                display: flex;
                flex-flow: row wrap;
                row-gap: 20px;
                justify-content: space-evenly;
                text-align: center;
            }
            & article#more_skills{
                display: none;
                flex-flow: row wrap;
                row-gap: 20px;
                justify-content: space-evenly;
                text-align: center;
                background: transparent;
            }
            & section.table > article, & article#more_skills > article{
                animation: ligth 1.2s infinite;
                background-color: transparent;
                width: 280px;
            }
        }
        &#about{
            &{
                color: var(--color_ligth);
            }
            & section{
                padding: 15px;
                background: var(--color_main);
                animation: pain 1.2s infinite;
            }
        }
        &#projects{
            & h3{
                margin-bottom: 8px;
                color: var(--color_ligth);
                font-size: 20px;
                font-weight: bolder;
                text-align: center;
                text-transform: uppercase;
            }
            & article > img{
                display: block;
                margin: auto;
                width: 95%;
                border-radius: 5px;
            }
            & section.table{
                display: flex;
                flex-flow: row wrap;
                row-gap: 30px;
            }
            & article#more_projects{
                display: none;
                flex-flow: row wrap;
                row-gap: 30px;
            }
            & section.table >  article,& article#more_projects > article{
                width: 400px;
                margin: auto;
                background: var(--color_main);
                animation: pain 1.2s infinite;
                margin-bottom: 30px;
            }
        }
        &#contact > form{
            &{
                text-transform: uppercase;
                font-family: var(--font_second);
                margin: auto;
                border-radius: 15px;
                padding: 12px;
                background-color: var(--color_main);
                animation: pain 1.2s infinite;
            }
            & > section{
                &{
                    display: flex;
                    justify-content: space-evenly;
                    flex-flow: row wrap;
                }
                & section{
                    align-self: center;
                }
                & div{
                    &{
                        text-align: center;
                        margin-bottom: 5px;
                    }
                    & label > img{
                        transform: translate(0,8px);
                    }
                    & input{
                        width: 300px;
                        height: 35px;
                    }
                    & textarea{
                        display: block;
                        max-width: 300px;
                        min-width: 300px;
                        max-height: 190px;
                        min-height: 190px;
                        text-align: justify;
                        font-size: 17px;
                    }
                    & input:focus,& textarea:focus{
                        outline: transparent;
                    }
                }
            }
            & input,& button,& textarea{
                padding: 5px;
                border-radius: 5px;
                border: 1px solid var(--color_ligth);
                background-color: #5d045d;
                color: var(--color_ligth);
                font-size: 18px;
                box-shadow: 2px 2px 10px #00000056;
            }
            & button{
                &{
                    display: block;
                    margin: auto;
                    margin-top: 10px;
                    width: 70px;
                    height: 30px;
                    transition: .8s;
                    cursor: pointer;
                }
                &:hover{
                    scale: 90%;
                }
            }
        }
    }
}
@keyframes letter {
    10%,15%,30%,35%,50%,55%,70%,75%,90%,95%{
        width: 0;
    }
    5%,20%,25%,40%,45%,60%,65%,80%,85%{
         width: calc(100% + 13px);
    }
}
@keyframes words {
    0%,29%{
        content: "web developer";
    }
    30%,69%{
        content: "grafhic design";
    }
    70%,100%{
        content: "student";
    }
}