@import url(Base.css);
.main-area-banner{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin-top: 6rem;
    margin-bottom: 3rem;
    z-index: 10;
}

.main-area-banner .banner-texts{
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    perspective: 500px;
}

.main-area-banner .banner-title{
    font-size: 3.4rem;
    font-family: var(--PRESS-START-2P);
    color: #fff;
    -webkit-text-stroke: 2px hsl(292, 55%, 14%);
    /* line-height: 1.5; */
    text-shadow: 1px 1px 0px #321037,
        1px 1px 0px hsl(292, 55%, 12%),
        2px 2px 0px hsl(292, 55%, 10%),
        3px 3px 0px hsl(292, 55%, 8%),
        4px 4px 0px hsl(292, 55%, 6%),
        5px 5px 0px hsl(292, 55%, 4%),
        6px 6px 0px hsl(292, 55%, 2%);
    text-decoration: underline;
    transform: rotateX(15deg) translateZ(0); /* Rotaciona e dá profundidade */
    transform-origin: top center; /* O ponto de rotação é no topo */
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.main-area-banner .banner-sub-title{
    font-size: 2.1rem;
    font-weight: 900;
    font-family: var(--SHARE-TECH-MONO);
    color: #321037;
    text-shadow: 0.1px 0.1px #fff,
        0.5px 0.5px #fff;
    margin-bottom: 3rem;
}

.know-portfolio-anchor{
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.6rem;
    font-family: var(--IBM-Plex-Mono);
    -webkit-text-stroke: 1px hsl(0, 0%, 100%);
    color: #fff;
    text-shadow: 1px 1px 0px #fc0b0b,
    2px 2px 0px #b00707,
    3px 3px 0px hsl(0, 94%, 12%),
    4px 4px 0px #0e0000;
    cursor: pointer;
    text-decoration: none;
    transition: 350ms ease-in;
}

.portfolio-anchor i{
    font-size: 3rem;
}

.know-portfolio-anchor:hover{
    text-decoration: underline;
    transform: scale(1.1);
}

main{
    display: grid;
    row-gap: 9rem;
    align-items: center;
    height: auto;
    border-top: 5px solid #321037;
    border-bottom: 5px solid #321037;
    border-radius: 10px;
    padding: 3rem;
    box-shadow: 20px 20px 100px hsl(292, 57%, 30%);
    backdrop-filter: blur(10px);
    background-color: #321037a9;
}

.my-services{
    scroll-margin-top: 5rem;
    width: 100%;
}

.section-title{
    font-size: 2.6rem;
    font-family: var(--PRESS-START-2P);
    color: #fff;
    text-shadow: 1px 1px 0px #fc0b0b,
    2px 2px 0px #b00707,
    3px 3px 0px hsl(0, 94%, 12%),
    4px 4px 0px #0e0000;
    margin-bottom: 3rem;
}

.list-icon-title{
    display: flex;
    align-items: baseline;
    column-gap: 1.5rem;
}

.list-icon-title i{
    font-size: 2rem;
}

.my-services .services-list{
    display: flex;
    flex-direction: column;
    row-gap: 3rem;
    width: 100%;
    list-style: none;
}

.my-services .services-list > li{
    min-height: 17rem;
    width: clamp(150px, 100%, 58rem);
    color: #fff;
    overflow-wrap: break-word;
    /* border: 1px outset #68028a; */
    border-radius: 6px;
    /* box-shadow: 5px 6px 10px #68028a; */
    padding: 1.5rem;
    background-color: #321037;
}

.my-services .services-list li:nth-child(even){
    margin-left: auto;
}

.services-list .website-development{
    border: 2px solid #00A800;
    box-shadow: 4px 4px #005000;
    padding: 1.5rem;
    background-color: #000000;
}

.services-list .website-maintenance{
    border: 2px solid #FF0000;
    box-shadow: 4px 4px lch(25.53% 61.3 38.38);
    background-color: #1414A8;
    padding: 1.5rem;
}

.services-list .server-hosting-and-configuration{
    border: 2px solid #003CFF;
    box-shadow: 4px 4px #001A66;
    background-color: #2E003E; 
    padding: 1.5rem;
}

.services-list li:hover{
    box-shadow: 6;
}

.services-list li .list-title{
    font-size: 2.1rem;
    font-family: var(--SHARE-TECH-MONO);
    text-decoration: underline;
    margin-bottom: 1.5rem;
}

.services-list li .list-description{
    font-size: 1.6rem;
    font-family: var(--IBM-Plex-Mono);
    line-height: 1.5;
}

.my-skills{
    min-height: 30rem;
}

.my-skills .section-description{
    font-size: 2.1rem;
    font-family: var(--SHARE-TECH-MONO);
    color: #fff;
    text-decoration: underline;
    text-align: center;
}

.my-skills .list-of-languages-and-tools{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(4rem, 10rem));
    justify-content: center;
    gap: 3rem;
    width: 100%;
    margin: 3rem auto 0 auto;
    list-style: none;
}

.my-portfolio{
    width: 100%;
}

.my-portfolio .section-sub-title{
    width: fit-content;
    font-size: 1.6rem;
    font-family: var(--SHARE-TECH-MONO);
    color: #fff;
    text-shadow: 2px 2px 0px #2E003E,
        4px 4px 0px hsl(285, 100%, 10%);
}

.my-portfolio .projects{
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(auto-fit, minmax(100px, 300px));
    gap: 1.5rem;
    max-width: 93rem;
    margin: 1.5rem auto 0 auto;
}

.projects .project-item{
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* text-align: center; */
    height: max-content;
    width: 100%;
    border: 2px solid hsl(292, 55%, 40%);
    box-shadow: 6px 6px 10px hsl(292, 55%, 15%);
    padding: 1.5rem;
    transition: 950ms ease-in;
    background-color: hsl(257, 29%, 20%);
}

.projects .project-item:hover{
    border: 2px solid hsl(292, 55%, 60%);
    box-shadow: 6px 6px 20px hsl(292, 55%, 10%);
    background-color: hsl(257, 29%, 10%);
    transform: scale(1.1);
}

.project-item .card-banner{
    height: 20rem;
    width: 100%;
    object-fit: fill;
    aspect-ratio: 16 / 9;
    margin: 0 auto 3rem auto;
    transition: 950ms ease-in-out;
}

.project-item .card-banner:hover{
    border-radius: 6px;
    transform: scale(1.2);
    object-fit: fill;
}

.project-item .card-title{
    font-size: 1.6rem;
    font-family: var(--SHARE-TECH-MONO);
    color: #fff;
    margin: 1.5rem 0;
}

.project-item .project-highlights{
    margin-bottom: 1.5rem;
}

.project-highlights .projects-div-title{
    font-size: 1.6rem;
    font-family: var(--SHARE-TECH-MONO);
    color: #fff;
    margin-bottom: 1.5rem;
}

.project-highlights .project-highlights-list{
    display: flex;
    flex-direction: column;
    row-gap: 5px;
    font-family: sans-serif;
    color: #fff;
    list-style: disc inside;
}

.project-item .card-description{
    font-size: 1.3rem;
    font-family: var(--IBM-Plex-Mono);
    color: #fff;
    margin-bottom: 1.5rem;
}

.project-item .card-link{
    text-align: center;
    font-size: 1rem;
    font-family: var(--PRESS-START-2P);
    color: #fff;
    text-shadow: 2px 2px 0 #9801ca,
        4px 4px 0 hsl(285, 100%, 7%);
}

footer{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: 
        "a c"
        "b c";
    place-content: center;
    gap: 1.5rem;
    min-height: 25rem;
    height: auto;
    /* width: 100%; */
    border-top: 2px solid hsl(292, 55%, 44%);
    border-bottom: 2px solid hsl(292, 55%, 44%);
    box-shadow: 20px -20px 100px #321037;
    padding: 1.5rem;
    background: linear-gradient(to right, #321037, #7300ff);
    margin-top: 1.5rem;
}

footer .project-to-discuss{
    grid-area: a;
    text-align: center;
    margin-bottom: 3rem;
}

.project-to-discuss h3{
    font-size: 2.1rem;
    font-family: var(--SHARE-TECH-MONO);
    color: #fff;
    margin-bottom: 1.5rem;
    z-index: 1000;
}

.project-to-discuss p{
    font-size: 1.6rem;
    font-family: var(--IBM-Plex-Mono);
    text-decoration: underline;
    color: #fff;
}

footer .contact-itens{
    grid-area: b;
    text-align: center;
    list-style: none;
}

.contact-itens li{
    font-size: 1.6rem;
    font-family: var(--IBM-Plex-Mono);
    color: #fff;
}

.contact-itens li a{
    color: #fff;
}

footer .contact-form-div{
    grid-area: c;
    height: 100%;
    min-width: 0;
    width: clamp(100px, 60vw, 500px);
    margin: 0 auto;
}

.contact-form-div .contact-form{
    display: flex;
    flex-direction: column;
    row-gap: 1.5rem;
    height: auto;
    width: 100%;
    border: 4px solid #2E003E;
    border-radius: 6px;
    padding: 1.5rem;
    background-color: #fff;
}

.contact-form .form-item > * {
    display: block;
    font-size: 1.6rem;
    font-family: var(--SHARE-TECH-MONO);
    color: #8c00ba;
    width: 100%;
}

.form-item label{
    color: #590176;
    margin-bottom: 5px;
}

.form-item input{
    border: 1px outset #321037;
    border-radius: 4px;
    box-shadow: 1px 2px 4px#321037;
    padding: 5px 6px;
}

.form-item input:focus{
    outline:  2px solid #880c9b;
    color: #610281;
}

.form-item span i{
    font-style: normal;
}

.form-item:has(.telefone-input){
    display: none;
}

.form-item .text-area{
    height: auto;
    max-width: 100%;
    border: 1px outset #321037;
    border-radius: 4px;
    box-shadow: 1px 2px 4px#321037;
    resize: vertical;
    padding: 5px 6px;
}

.form-item .text-area:focus{
    outline:  2px solid #880c9b;
    color: #610281;
}

.contact-form .submit-button{
    width: 50%;
    font-size: 1.6rem;
    font-family: var(--IBM-Plex-Mono);
    font-weight: 900;
    color: #fff;
    border: 2px outset #2E003E;
    border-radius: 4px;
    box-shadow: 5px 6px 8px #ae00ff;
    cursor: pointer;
    padding: 5px;
    margin: 1.5rem auto 0 auto;
    transition: transform 400ms ease-in;
    background: linear-gradient(45deg, #70127e, #7300ff);
}

.contact-form .submit-button:hover{
    transform: scale(1.1);
}

footer .footer-signature{
    width: 100%;
    text-align: center;
    font-size: 1.6rem;
    font-family: var(--PRESS-START-2P);
    color: #fff;
    border: 2px solid #60047f;
    box-shadow: 2px 2px 5px #b300ce;
    padding: 5px;
}

.feedback-message-div{
    display: flex;
    column-gap: 1.5rem;
    align-content: baseline;
    position: fixed;
    top: 3rem;
    right: 1.5rem;
    height: auto;
    min-width: 15rem;
    max-width: fit-content;
    text-align: center;
    font-size: 1.6rem;
    font-family: var(--SHARE-TECH-MONO);
    color: #FFF;
    border-radius: 6px;
    padding: 1rem;
    opacity: 0;
    z-index: 100;
    transform: translateX(500px);
    transition: transform 450ms ease-in-out,
                opacity 2s ease-in-out;
}

.feedback-message-div i{
    font-size: 2rem;
}

.feedback-message-div.show-message{
    opacity: 1;
    transform: translateX(0px);
}

.feedback-message-div.status-success{
    border: 1px outset rgb(0, 255, 0);
    background-color: green;
    box-shadow: 2px 2px 10px green;
    /* opacity: 1;
    transform: translateX(0px); */
}

.feedback-message-div.status-error{
    border: 1px outset red;
    background-color: #fe2323;
    box-shadow: 2px 2px 10px #f05959;
    /* opacity: 1;
    transform: translateX(0px); */
}


@media (max-width: 600px){
    .main-area-banner{
        margin-top: 9rem;
    }
    .main-area-banner .banner-texts{
        width: clamp(100px, 80vw, 1800px);
        text-transform: uppercase;
        perspective: 500px;
    }

    .main-area-banner .banner-title{
        font-size: 2.1rem;
        color: #fff;
        overflow-wrap: break-word;
        hyphens: auto;
        -webkit-text-stroke: 1px hsl(292, 55%, 14%);
        text-shadow: 1px 1px 0px #321037,
            1px 1px 0px hsl(293, 54%, 12%),
            2px 2px 0px hsl(292, 57%, 10%),
            3px 3px 0px hsl(292, 56%, 8%);
    }

    main{
        justify-content: start;
        padding: 1rem;
    }

    .my-services{
        width: calc(100% - 2rem);
    }

    .my-services .services-list li:nth-child(even){
        margin-left: 0; /* tira o auto pra mobile */
    }

    .my-services .services-list > * .list-title{
        font-size: 1.6rem;
    }

    .my-services .services-list > * .list-description{
        font-size: 1.3rem;
    }

    .list-icon-title i{
        font-size: 1.5rem;
    }

    .my-skills .section-description{
        font-size: 1.3rem;
        /* word-break: break-all; */
        word-wrap: break-word;
    }

    .my-skills .list-of-languages-and-tools{
        width: 50%;
    }
    
    footer{
        grid-template-columns: 1fr;
        grid-template-areas:
        "a"
        "b"
        "c";
    }
} 
@media (max-width: 450px){
    .section-title{
        font-size: 2.1rem;
    }

    .services-list .website-development{
        border: 1px solid #00A800;
        box-shadow: 2px 2px #005000;
    }

    .services-list .website-maintenance{
        border: 1px solid #FF0000;
        box-shadow: 2px 2px lch(25.53% 61.3 38.38);
    }

    .services-list .server-hosting-and-configuration{
        border: 1px solid #003CFF;
        box-shadow: 2px 2px #001A66;
    }

    .my-skills .section-description{
        width: 90%;
        
    }
}