@import url(Styles/size.css);
@import url(Styles/colors.css);

@import url(Styles/navbar.css);
@import url(Styles/aside.css);
@import url(Styles/home.css);
@import url(Styles/projects.css);
@import url(Styles/skills.css);
@import url(Styles/tooltipSkills.css);
@import url(Styles/certificates.css);
@import url(Styles/about.css);
@import url(Styles/footer.css);

@import url(Styles/codeAnimation.css);

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
}

html { 
    overflow-x: hidden;
    scroll-behavior: smooth;
    overscroll-behavior: none;
    color-scheme: var(--themeScroll);
}

body {
    position: relative;

    display: flex;
    flex-direction: column;

    background: var(--firstColorBg);

    > .coding {
        width: 100%;
        height: 100vh;

        position: absolute;
        z-index: -1;

        display: flex;
        flex-direction: column;
        align-items: center;
        
        background: transparent;

        span {
            height: var(--heightCoding);

            position: absolute;
            left: 1%;

            display: flex;
            gap: 10%;
    
            &::before, &::after {
                content: '';
    
                height: 100%;
    
                display: inline-block;
    
                background: var(--colorCoding);
                border-radius: 0.3rem;
            }
        }

        span:first-child {
            width: var(--widthCoding01);

            animation: upperCode-1 5s ease infinite normal both;

            &::before { width: 40%; }
            &::after { width: 50%; }
        }

        span:nth-child(2) {
            width: var(--widthCoding02);

            top: 10%;

            animation: upperCode-2 5s ease infinite normal both;

            &::before { width: 70%; }
            &::after { width: 20%; }
        }

        span:nth-child(3) {
            width: var(--widthCoding03);

            top: 16%;

            animation: upperCode-3 5s ease infinite normal both;

            &::before { width: 20%; }
            &::after { width: 70%; }
        }

        span:nth-child(4) {
            width: var(--widthCoding04);

            top: 27%;

            animation: upperCode-4 5s 0.5s ease infinite normal both;

            &::before { width: 22%; }
            &::after { width: 32%; }
        }

        span:nth-child(5) {
            width: var(--widthCoding05);

            top: 33%;

            background: var(--colorCoding);
            border-radius: 0.3rem;

            animation: upperCode-5 5s 0.5s ease infinite normal both;
        }

        span:last-child {
            width: var(--widthCoding06);

            top: 39%;

            animation: upperCode-6 5s 0.5s ease infinite normal both;

            &::before { width: 10%; }
            &::after { width: 80%; }
        }
    }

    header, main, aside, footer { 
        .contact__list {
            display: flex;

            li:first-child a svg { fill: var(--tertiaryColorTools); }
            li:nth-child(2) a svg { fill: var(--fillColorLinks); }
            li:last-child a svg { fill: var(--secondaryColorTools); }
        }

        ul li a {
            svg { 
                width: var(--widthIcon);
                height: var(--heightIcon); 
                transition: transform 0.3s ease-out, scale 0.2s;
            }
    
            &:hover svg { transform: scale(1.25); }
            &:active svg { scale: 0.775; }
        } 
    }

    ul { list-style: none; }

    a { -webkit-tap-highlight-color: transparent; }
      
}

main {
    max-width: 990px;

    padding: 0rem 0rem 1rem;

    margin: 0 13rem;

    align-self: center;

    display: flex;
    flex-direction: column;

    section > h2 {
        font-size: var(--h2Font);
        color: var(--secondColorBg);
        background: linear-gradient(170deg, #afa8ce 40%, var(--secondColorBg) 100%);
        filter: var(--h2Brightness);
        -webkit-text-fill-color: transparent;
        background-clip: text;
    } 

    strong { color: var(--primaryColorTools); filter: var(--strongBrightness); }
}

@media (width < 1100px) { main { margin: 0 7rem; } }
@media (width < 950px) { main { margin: 0 3rem; } }
@media (width < 775px) {
    main { margin: 0 1.05rem; } 
    body > .coding { display: none; }
}