:root {
    --slides-visible: 3;


    --preto-hsl: 0, 0%, 0%;
    --branco-hsl: 0, 0%, 100%;
    --texto-hsl: 211.2, 12.56%, 100%;
    --cinza-100-hsl: 0, 0%, 10%;
    --cinza-200-hsl: 0, 0%, 20%;
    --cinza-300-hsl: 0, 0%, 35%;
    --cinza-400-hsl: 0, 0%, 50%;
    --cinza-500-hsl: 0, 0%, 70%;

    --bg-color-hsl: var(--preto-hsl);
    --text-color-hsl: var(--branco-hsl);
    --filter: invert();

    --filter-thumb: saturate(0) invert(100%) opacity(1);
    --filter-thumb-hover: saturate(1) invert(100%) opacity(1);

    --icon-color-black: 0, 0%, 0%;

    --fill-color: transparent;

    --about-color: -webkit-linear-gradient(97deg, #29e0a9 -12.7%, #5f75f2 32.64%, #9956f6 78.49%, #e254ff 109.78%);
    --about-bg-color: -webkit-linear-gradient(97deg, #29e0a9 -12.7%, #5f75f2 32.64%, #9956f6 78.49%, #e254ff 109.78%);

    --skills-color: -webkit-linear-gradient(37deg, #00a3d1 0%, #00ff2e 100%);
    --skills-bg-color: -webkit-linear-gradient(45deg, #00a3d1 0%, #00ff2e 100%);

    --projects-color: -webkit-linear-gradient(206deg, #ff00b3 0%, #ffe700 75% 75%, #ff00aa 100%);
    --projects-bg-color: -webkit-linear-gradient(206deg, #ff00b3 0%, #ffe700 75% 75%, #ff00aa 100%);

    --contato-color: -webkit-linear-gradient(45deg, #0026ff 0%, #00ffcc 100%);
    --contato-bg-color: -webkit-linear-gradient(45deg, #0026ff 0%, #00ffcc 100%);

    --extras-color: -webkit-linear-gradient(37deg, #9800ff 0%, #feff00 100%);
    --extras-bg-color: linear-gradient(90deg, #9800ff 0%, #feff00 100%);
}

.light-theme {
    --preto-hsl: 0, 0%, 0%;
    --branco-hsl: 0, 0%, 100%;
    --texto-hsl: 211.2, 12.56%, 100%;
    --cinza-100-hsl: 0, 0%, 95%;
    --cinza-200-hsl: 0, 0%, 85%;
    --cinza-300-hsl: 0, 0%, 70%;
    --cinza-400-hsl: 0, 0%, 50%;
    --cinza-500-hsl: 0, 0%, 30%;

    --bg-color-hsl: var(--branco-hsl);
    --text-color-hsl: var(--preto-hsl);
    --filter: none;

    --filter-thumb: saturate(0) invert(0) opacity(1);
    --filter-thumb-hover: saturate(1) invert(0) opacity(1);

    --icon-color-black: 0, 0%, 100%;

    /* --fill-color: transparent; */

    /* --about-color: var(--cinza-400-hsl);*/
    --about-color: #5f75f2;
    --about-bg-color: none;

    --skills-color: #00e388;
    --skills-bg-color: none;

    --projects-color: #ff0099;
    --projects-bg-color: none;

    --contato-color: #00ebdf;
    --contato-bg-color: none;

    --extras-color: #f68eff;
    --extras-bg-color: none;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Poppins, Quicksand, Roboto, 'Segoe UI', sans-serif;
    background-color: hsl(var(--bg-color-hsl));
    color: hsl(var(--text-color-hsl));
    transition: background-color 0.4s ease, color 0.4s ease;
    /* background-color: #e4e1ea; */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120px' height='120px' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23aeaeae' fill-opacity='0.1'%3E%3Cpath opacity='0.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

#topbar {
    height: 80px;
    width: 100%;
    display: flex;
    overflow: hidden;
    border-bottom: 1px solid hsla(var(--text-color-hsl), 0.2);
    background-color: hsl(var(--bg-color-hsl), 0.6);
    transition: background-color 0.4s ease, color 0.4s ease;

    text-align: center;
    /*horizontal*/

    align-content: center;
    /*vertical*/

    align-items: center;
    /*vertical*/
}

.logotipotopbar {
    height: 22px;
    width: auto;
    margin: 0 10px 0 20px;
    transition: ease 0.5s;
    filter: var(--filter);
}

#titulonav {
    font-family: 'Poppins';
    letter-spacing: 0.04rem;
    min-width: 90px;
    transform: scaleY(1.2);
    text-align: left;
    cursor: context-menu;
    user-select: none;
}

#titulonav #nome {
    font-weight: 700;
    font-size: 0.8rem;
}

#titulonav #info {
    font-weight: 300;
    font-size: 0.5rem;
}

.menu {
    display: block;
    font-family: 'Poppins';
    font-weight: 400;
    letter-spacing: 0.05rem;
    padding: 0 10px;
    margin: 0 0 0 10px;
    flex: 1 1 100%;
    text-transform: uppercase;
    font-size: 12px;
    user-select: none;
}

.menu ul {
    margin: 0px;
    display: inline-flex;
}

.menu ul li {
    margin: 0 2px;
}

.menu ul li a {
    color: hsla(var(--text-color-hsl), 0.4);
    text-shadow: 0.5px 0.5px hsla(var(--text-color-hsl), 0);
    transition: ease 0.5s;
    white-space: nowrap;
    padding: 10px 20px;
    border-radius: 10px;
}

.menu ul li a:hover {
    color: hsla(var(--text-color-hsl), 1);
    text-shadow: 0.5px 0.5px hsla(var(--bg-color-hsl));
    background-color: hsla(var(--text-color-hsl), 0.1);
    transition: ease 0.5s;
}

.light-theme .menu ul li a {
    color: hsla(var(--text-color-hsl), 0.5);
    text-shadow: 0.5px 0.5px hsla(var(--text-color-hsl), 0.2);
}

.light-theme .menu ul li a:hover {
    color: hsla(var(--text-color-hsl), 1);
    text-shadow: 0.5px 0.5px hsla(var(--text-color-hsl), 0.6);
    background-color: hsla(var(--cinza-100-hsl), 0.2);
    box-shadow: 0.5px 0.5px 5px hsla(var(--text-color-hsl), 0.1);
}

.menu_expand_area {
    position: absolute;
    height: 0;
    width: calc(100% - 20px);
    display: block;
    overflow: hidden;
    background-color: hsl(var(--bg-color-hsl), 0.95);
    transition: background-color 0.4s ease, color 0.4s ease;
    text-align: center;
    align-items: center;
    padding: 0 10px;
    transition: height 0.5s ease, padding 0.5s ease;
}

.menu_expand_area p {
    color: hsl(var(--text-color-hsl));
}

.hero_section {
    display: flex;
    width: 100%;
    min-height: 88.5vh;
    min-height: 88.5dvh;
    justify-content: left;
    align-items: center;
    cursor: context-menu;
    user-select: none;
}

.section_area {
    /* background-color: pink; */
    width: 50dvw;
    margin: 80px;
    align-content: center;
}

.section_area #nome {
    font-family: 'Poppins';
    font-size: 0.9rem;
    line-height: 1.3rem;
    text-transform: uppercase;
    color: hsl(var(--cinza-400-hsl));
    font-weight: 500;
    letter-spacing: 0.2rem;
}

.section_area #info {
    font-family: 'Poppins';
    font-weight: 700;
    font-size: 4.2rem;
    color: hsl(var(--text-color-hsl));
    padding: 10px 0;
    letter-spacing: -3px;
}

.section_area #about {
    font-size: 1.4rem;
    font-family: 'Poppins';
    font-weight: 400;
    color: hsl(var(--cinza-400-hsl));
    letter-spacing: normal;
    line-height: 1.8rem;
    padding-bottom: 10px;
}

.section_area #links {
    font-size: 1rem;
    font-family: 'Poppins';
    font-weight: 400;
    color: hsl(var(--cinza-400-hsl));
    letter-spacing: normal;
    margin-top: 10px;
}

.section_area #links a {
    font-size: 1rem;
    font-weight: 400;
    color: hsl(var(--cinza-500-hsl));
    text-decoration: none;
    transition: 0.6s;
    border-bottom: 2px solid transparent;
}

.section_area #links a:hover {
    color: hsl(var(--cinza-500-hsl));
    border-bottom: 2px solid hsl(var(--cinza-400-hsl));
}

.section_area #links a:visited {
    color: hsl(var(--cinza-500-hsl));
    text-decoration: none;
}

/*=========================================================================*/

.about_me {
    display: flex;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    justify-content: center;
    align-items: center;
    cursor: context-menu;
    user-select: none;
    background: 
    linear-gradient(0deg, hsl(var(--bg-color-hsl), 0) 0%, hsl(var(--bg-color-hsl), 0.6) 20%, hsl(var(--bg-color-hsl), 0.6) 80%, hsl(var(--bg-color-hsl), 0) 100%);
}

.about_section {
    width: 75dvw;
    position: relative;
    padding: 15px 30px 20px 30px;
}

.about_section #title {
    display: table;
    letter-spacing: 0.15rem;
    font-weight: 500;
    margin: 0 auto;
}

.about_section #title span {
    position: relative;
    color: hsl(var(--text-color-hsl));
    font-size: 1rem;
}

.about_section #title p {
    position: relative;
    color: var(--about-color);
    background: var(--about-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--fill-color);
    font-size: 1.6rem;
}

.about_section #title p::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--about-bg-color);
    filter: blur(30px);
    opacity: 0.8;
    z-index: -1;
    /* pointer-events: none; */
    border-radius: 20px;
}


.about_section #about_one {
    font-family: 'Poppins';
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.8rem;
    color: hsl(var(--text-color-hsl));
    padding: 20px 0;
    text-align: center;
    letter-spacing: 0.01rem;
}

.about_section #about_two {
    font-family: 'Poppins';
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.4rem;
    color: hsl(var(--cinza-500-hsl));
    padding: 10px 0 20px 0;
    text-align: center;
    letter-spacing: 0.05rem;
}


/*===========================================================*/


.skills {
    display: flex;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    justify-content: center;
    align-items: center;
    cursor: context-menu;
    user-select: none;
    background: 
    linear-gradient(0deg, hsl(var(--bg-color-hsl), 0) 0%, hsl(var(--bg-color-hsl), 0.6) 20%, hsl(var(--bg-color-hsl), 0.6) 80%, hsl(var(--bg-color-hsl), 0) 100%);
}

.skills_section {
    width: 75dvw;
    position: relative;
    padding: 15px 30px 20px 30px;
}

.skills_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    justify-content: start;
}

.skills_section #title {
    display: flex;
    justify-content: center;
    font-size: 3rem;
}

.skills_section #title span {
    position: relative;
    font-family: 'Poppins';
    font-weight: 400;
    line-height: 5rem;
    color: hsl(var(--text-color-hsl));
}

.skills_section #title p {
    position: relative;
    font-family: 'Poppins';
    font-weight: 400;
    line-height: 5rem;
    color: var(--skills-color);
    padding-left: 10px;
    background: var(--skills-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--fill-color);
}

.skills_section #title p::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--skills-bg-color);
    filter: blur(30px);
    opacity: 0.3;
    z-index: -1;
    pointer-events: none;
    border-radius: 20px;
}

/*=========================================================================*/

.skills_section .skills_card {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23232323' fill-opacity='0.1' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
        margin: 10px;
        position: relative;
}

.skills_section .skills_card::before,
.skills_section .skills_card::after {
    content: '';
    position: absolute;
    left: -5px;
    width: calc(100% + 10px);
    height: 0.5px;
    background-color: hsl(var(--cinza-200-hsl));
    z-index: 1;
}

.skills_section .skills_card::before {
    top: 0;
}

.skills_section .skills_card::after {
    bottom: 0;
}

.linha-vertical-skills_card {
    position: absolute;
    top: -5px;
    height: calc(100% + 10px);
    width: 0.5px;
    background-color: hsl(var(--cinza-200-hsl));
    z-index: 1;
}

.linha-vertical-skills_card.esquerda {
    left: 0;
}

.linha-vertical-skills_card.direita {
    right: 0;
}

.skills_wrapper {
    overflow: hidden;
    position: relative;
    padding: 15px;
}

/*=========================================================================*/

.skills_section .skills_title {
    font-family: 'Poppins';
    font-weight: 400;
    font-size: 1.2rem;
    color: hsl(var(--text-color-hsl));
    padding: 0 0 15px 0;
    text-align: center;
    text-wrap: nowrap;
}

.skills_section #skills_list {
    display: flex;
    justify-content: center;
    color: hsl(var(--text-color-hsl));
}

.skills_section #skills_list .name {
    margin-right: 10px;
    transition: ease 0.5s;
    position: relative;
    z-index: 1;
    background-color: hsl(var(--bg-color-hsl));
    background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23a5a5a5' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
    color: hsl(var(--cinza-500-hsl));
}

.skills_section #skills_list .name:hover {
    transition: ease 0.5s;
    background-color: hsl(var(--cinza-100-hsl));
    background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23a5a5a5' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
    color: hsl(var(--text-color-hsl));
}

.skills_section #skills_list .name:last-child {
    margin-right: 0px;
}

.name::before,
.name::after {
    content: '';
    position: absolute;
    left: -2.5px;
    width: calc(100% + 5px);
    height: 0.5px;
    background-color: hsl(var(--cinza-200-hsl));
    z-index: 1;
}

.name::before {
    top: 0;
}

.name::after {
    bottom: 0;
}

.linha-vertical-name {
    position: absolute;
    top: -2.5px;
    height: calc(100% + 5px);
    width: 0.5px;
    background-color: hsl(var(--cinza-200-hsl));
    z-index: 1;
}

.linha-vertical-name.esquerda {
    left: 0;
}

.linha-vertical-name.direita {
    right: 0;
}

.skills_section #skills_list .name #name {
    font-size: 0.8rem;
    text-align: center;
    font-weight: 400;
    align-content: center;
    padding: 8px 10px;
    text-wrap: nowrap;
}

.skills_card
.icon_type {
    height: 40px;
    position: absolute;
    top: -52px;
    right: 5px;
    transition: ease 0.5s;
    transform: rotate(10deg);
    fill: hsl(var(--cinza-200-hsl));
}

.skills_card .ribbon {
    --f: 0em;
    --r: .4em;
    position: absolute;
    right: 5px;
    top: -52px;
    transition: ease 0.5s;
    transform: rotate(10deg);
    padding: 4px 4px 2px 4px;
    background: hsl(var(--cinza-200-hsl));
    border-right: var(--f) solid #0005;
    border-bottom: var(--r) solid #0000;
    clip-path: polygon(calc(100% - var(--f)) 0, 0 0, 0 100%, calc(50% - var(--f) / 2) calc(100% - var(--r)), calc(100% - var(--f)) 100%);
}

.skills_card .icon_ribbon {
    height: 30px;
    color: hsl(var(--icon-color-black));
    fill: hsl(var(--icon-color-black));
}

/*=================================================================================*/

.projects {
    display: flex;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    justify-content: center;
    align-items: center;
    cursor: context-menu;
    user-select: none;
    margin-top: 50px;
}

.projects_section {
    width: 75dvw;
    position: relative;
    padding: 15px 30px 20px 30px;
}

.projects_section #title {
    display: flex;
    justify-content: center;
    font-size: 3rem;
}

.projects_section #title span {
    position: relative;
    font-family: 'Poppins';
    font-weight: 400;
    line-height: 5rem;
    color: hsl(var(--text-color-hsl));
}

.projects_section #title p {
    position: relative;
    font-family: 'Poppins';
    font-weight: 400;
    line-height: 5rem;
    color: var(--projects-color);
    padding-left: 10px;
    background: var(--projects-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--fill-color);
}

.projects_section #title p::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--projects-bg-color);
    filter: blur(30px);
    opacity: 0.2;
    z-index: -1;
    pointer-events: none;
    border-radius: 20px;
}

.projects_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(344px, 1fr));
    gap: 2rem 1rem;
    margin-top: 10px;
    overflow: hidden;
    padding: 5px 0;
}

/*============================================================*/

.projects_section .project_card_model {
    background-color: hsl(var(--bg-color-hsl));
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23a5a5a5' fill-opacity='0.2' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
    padding: 10px 10px 0 10px;
    transition: ease 0.5s;
    position: relative;

    margin: 0 10px;
    height: auto;
    aspect-ratio: 16 / 9;
    flex: 0 0 calc((100% / var(--slides-visible)) - 40px);
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    user-select: none;
}

.project_card_display {
    display: none;
}

/* =========== LINHAS HORIZONTAIS ============ */

.projects_section .project_card_model::before,
.projects_section .project_card_model::after {
    content: '';
    position: absolute;
    left: -5px;
    width: calc(100% + 10px);
    height: 0.5px;
    background-color: hsl(var(--cinza-200-hsl));
    transition: ease 0.5s;
}

.projects_section .project_card_model::before {
    top: 0;
}

.projects_section .project_card_model::after {
    bottom: 0;
}

/* ========= FIM LINHAS HORIZONTAIS ========== */

.projects_section .project_card_model:hover {
    transition: ease 0.5s;
}

.project_thumb_model {
    position: relative;
}

/* =========== LINHAS HORIZONTAIS ============ */
.project_thumb_model::before,
.project_thumb_model::after {
    content: '';
    position: absolute;
    left: -5px;
    width: calc(100% + 10px);
    height: 0.5px;
    background-color: hsl(var(--cinza-200-hsl));
    z-index: 1;
}

.project_thumb_model::before {
    top: 0;
}

.project_thumb_model::after {
    bottom: 0;
}

/* ========= FIM LINHAS HORIZONTAIS ========== */


/* ============ LINHAS VERTICAIS ============= */
.linha-vertical0 {
    position: absolute;
    top: -5px;
    height: calc(100% + 10px);
    width: 0.5px;
    background-color: hsl(var(--cinza-200-hsl));
    z-index: 1;
}

.linha-vertical0.esquerda {
    left: 0;
}

.linha-vertical0.direita {
    right: 0;
}

/* ========== FIM LINHAS VERTICAIS =========== */

.thumb_limiter {
    height: auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.project_thumb_model .thumb_model {
    width: 100%;
    transform: scale(1) rotate(0deg);
    transition: ease 0.8s;
    filter: var(--filter-thumb);
}

.projects_section .project_card_model:hover .thumb_model {
    transform: scale(1.2) rotate(-5deg);
    margin-left: 20px;
    transition: ease 0.8s;
    filter: var(--filter-thumb-hover);
}

.project_card_model .titles_model {
    height: 44.8px;
    padding: 16px 40px 16px 16px;
}

.project_card_model #project_title_model {
    font-size: 1.3rem;
    overflow: hidden;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 0.3rem;
    text-decoration: none;
    color: hsl(var(--text-color-hsl));
}

.project_card_model #subtitle_model {
    font-size: 1rem;
    color: hsl(var(--cinza-500-hsl));
    white-space: nowrap;
    overflow: hidden;
    font-weight: 300;
    text-overflow: ellipsis;
    text-decoration: none;
}

.linha-vertical {
    position: absolute;
    top: -5px;
    height: calc(100% + 10px);
    width: 0.5px;
    background-color: hsl(var(--cinza-200-hsl));
}

.linha-vertical.esquerda {
    left: 0;
}

.linha-vertical.direita {
    right: 0;
}

/*=================================================================================*/

.seeAll_projects {
    display: flex;
    justify-content: center;
    margin: 20px 0 40px 0;
}

.seeAll_button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 5px;
    width: 130px;
    color: hsl(var(--text-color-hsl), 0.5);
    background-color: hsl(var(--bg-color-hsl), 0.3);
    transition: all 0.5s ease;
    cursor: pointer;
}

.seeAllDisplay {
    display: none;
}

.seeAll_button:hover {
    color: hsl(var(--text-color-hsl));
    transition: all 0.5s ease;
}

.icon-all-projects {
    font-size: 1rem;
    margin-right: 5px;
}

.seeAll_button p {
    font-size: 0.8rem;
}

.seeAll_button::before,
.seeAll_button::after {
    content: '';
    position: absolute;
    left: -2.5;
    width: calc(100% + 5px);
    height: 0.5px;
    background-color: hsl(var(--cinza-200-hsl));
    z-index: 1;
}

.seeAll_button::before {
    top: 0;
}

.seeAll_button::after {
    bottom: 0;
}

.linha-vertical-seeall {
    position: absolute;
    top: -2.5px;
    height: calc(100% + 5px);
    width: 0.5px;
    background-color: hsl(var(--cinza-200-hsl));
    z-index: 1;
}

.linha-vertical-seeall.esquerda {
    left: 0;
}

.linha-vertical-seeall.direita {
    right: 0;
}

/*=================================================================================*/

.carousel-wrapper {
    position: relative;
    margin: auto;
    overflow: hidden;
}

.carousel-container {
    overflow: hidden;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;

    padding: 10px 0;
}

.carousel-track {
    display: flex;
    transition: transform 0.4s ease;
    will-change: transform;
}

/*=================================================================================*/

.carousel-buttons {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    transform: translateY(-70%);
    pointer-events: none;
}

.carousel-buttons button {
    pointer-events: all;
    background: hsl(var(--cinza-100-hsl),1);
    color: hsl(var(--text-color-hsl));
    border: none;
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    cursor: pointer;
}

.carousel-buttons button:first-child {
    border-radius: 0 50% 50% 0;
}
.carousel-buttons button:last-child {
    border-radius: 50% 0 0 50%;
}

.carousel-buttons button i {
    transition: transform 0.5s ease;
}
.carousel-buttons button:first-child:hover i {
    transform: translateX(-30%);
    transition: transform 0.5s ease;
}
.carousel-buttons button:last-child:hover i {
    transform: translateX(30%);
    transition: transform 0.5s ease;
}

.carousel-dots {
    display: none;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.carousel-dot {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 0.6rem; /* ajuste o tamanho do ícone */
    color: hsl(var(--text-color-hsl), 0.6);
    transition: color 0.5s ease;
}

.carousel-dot:hover {
    color: hsl(var(--text-color-hsl), 0.8);
}

.carousel-dot i.fa-circle-dot {
    color: hsl(var(--text-color-hsl), 0.5);
    transition: color 0.5s ease;
}

.carousel-dot i.fa-circle-dot:hover {
    color: hsl(var(--text-color-hsl), 0.8);
}

/*=================================================================================*/

.contact {
    display: flex;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    justify-content: center;
    align-items: center;
    cursor: context-menu;
    user-select: none;
    background: 
    linear-gradient(0deg, hsl(var(--bg-color-hsl), 0) 0%, hsl(var(--bg-color-hsl), 0.3) 20%, hsl(var(--bg-color-hsl), 0.3) 80%, hsl(var(--bg-color-hsl), 0) 100%);

}

.contact_section {
    width: 75vw;
    width: 75dvw;
    position: relative;
    padding: 15px 30px 20px 30px;
}

.contact_section #title {
    display: flex;
    justify-content: center;
    font-size: 3rem;
}

.contact_section #title span {
    position: relative;
    font-family: 'Poppins';
    font-weight: 400;
    line-height: 5rem;
    color: hsl(var(--text-color-hsl));
}

.contact_section #title p {
    position: relative;
    font-family: 'Poppins';
    font-weight: 400;
    line-height: 5rem;
    color: var(--contato-color);
    padding-left: 10px;
    background: var(--contato-color);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--fill-color);
}

.contact_section #title p::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--contato-bg-color);
    filter: blur(30px);
    opacity: 0.2;
    z-index: -1;
    pointer-events: none;
    border-radius: 20px;
}

.contact_grid {
    display: inline;
    margin-top: 10px;
    overflow: hidden;
}

.icons_contact {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    margin-top: 2px;
}
.contact_icon {
    position: relative;
    display: flex;
    background-color: hsl(var(--bg-color-hsl), 0.5);
    background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23a5a5a5' fill-opacity='0.2' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
    fill: hsl(var(--cinza-500-hsl));
    align-items: center;
    justify-content: center;
    padding: 5px;
    margin: 10px 5px 0 5px;
    min-width: 130px;
    transition: ease 0.5s;
}
.contact_icon:hover {
    transition: ease 0.5s;
    background-color: hsl(var(--cinza-100-hsl));
    fill: hsl(var(--text-color-hsl));
    color: hsl(var(--text-color-hsl));
}
.contact_icon p {
    margin-left: 10px;
    color: hsl(var(--cinza-500-hsl));
    font-size: 0.8rem;
    transition: ease 0.5s;
}
.contact_icon:hover p {
    color: hsl(var(--text-color-hsl));
    transition: ease 0.5s;
}

.contact_icon::before,
.contact_icon::after {
    content: '';
    position: absolute;
    left: -2.5;
    width: calc(100% + 5px);
    height: 0.5px;
    background-color: hsl(var(--cinza-200-hsl));
    z-index: 1;
}

.contact_icon::before {
    top: 0;
}

.contact_icon::after {
    bottom: 0;
}

.email_contact {
    display: flex;
    justify-content: center;
}
.contact_email {
    position: relative;
    display: flex;
    background-color: hsl(var(--bg-color-hsl), 0.5);
    background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23a5a5a5' fill-opacity='0.2' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
    align-items: center;
    padding: 5px;
    width: calc(100% - 20px);
    min-width: 280px;
    height: 60px;
    margin: 10px 5px 0 5px;
    justify-content: center;
    text-decoration: none;
    color: hsl(var(--cinza-500-hsl));
    transition: ease 0.5s;
    cursor: pointer;
}
.contact_email:hover {
    transition: ease 0.5s;
    background-color: hsl(var(--cinza-100-hsl));
    color: hsl(var(--text-color-hsl));
}
.contact_email::before,
.contact_email::after {
    content: '';
    position: absolute;
    left: -2.5;
    width: calc(100% + 5px);
    height: 0.5px;
    background-color: hsl(var(--cinza-200-hsl));
    z-index: 1;
}

.contact_email::before {
    top: 0;
}

.contact_email::after {
    bottom: 0;
}
.contact_email_limiter {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
}
.copyContactEmail {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    transition: ease 0.5s;
    position: absolute;
    top: 0px;
    opacity: 1;
}
.copiedContactEmail {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    transition: ease 0.5s;
    position: absolute;
    top: 70px;
    opacity: 0;
}

.sendEmail {
    font-size: 1.2rem;
    margin-right: 10px;
}
.email {
    font-size: 1.4rem;
    margin-right: 10px;
}
.contact_email p {
    font-size: 0.8rem;
}

.linha-vertical-contact {
    position: absolute;
    top: -2.5px;
    height: calc(100% + 5px);
    width: 0.5px;
    background-color: hsl(var(--cinza-200-hsl));
    z-index: 1;
}

.linha-vertical-contact.esquerda {
    left: 0;
}

.linha-vertical-contact.direita {
    right: 0;
}

/*=================================================================================*/

.extras {
    display: flex;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    justify-content: center;
    align-items: center;
    cursor: context-menu;
    user-select: none;
    background: 
    linear-gradient(0deg, hsl(var(--bg-color-hsl), 0) 0%, hsl(var(--bg-color-hsl), 0.3) 20%, hsl(var(--bg-color-hsl), 0.3) 80%, hsl(var(--bg-color-hsl), 0) 100%);
}

.extras_section {
    width: 75vw;
    width: 75dvw;
    position: relative;
    padding: 15px 30px 20px 30px;
}

.extras_section #title {
    display: flex;
    justify-content: center;
    font-size: 3rem;
}

.extras_section #title span {
    position: relative;
    font-family: 'Poppins';
    font-weight: 400;
    line-height: 5rem;
    color: hsl(var(--text-color-hsl));
}

.extras_section #title p {
    position: relative;
    font-family: 'Poppins';
    font-weight: 400;
    line-height: 5rem;
    color: var(--extras-color);
    padding-left: 10px;
    background: var(--extras-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--fill-color);
}

.extras_section #title p::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--extras-bg-color);
    filter: blur(30px);
    opacity: 0.2;
    z-index: -1;
    pointer-events: none;
    border-radius: 20px;
}

.extras_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(344px, 1fr));
    gap: 1rem;
    margin-top: 10px;
    overflow: hidden;
}

/*=================================================================================*/

footer {
    position: absolute;
    width: 100%;
    overflow: hidden;
    border-top: 1px solid hsl(var(--cinza-200-hsl));
    background-color: hsl(var(--bg-color-hsl));
    background-image: var(--bg-pattern-footer); /*definido no root de "src/bg-pattern-footer.css"*/
    user-select: none;
}
.footer_section {
    width: 100%;
}
.footer_grid {
    display: grid;
    grid-template-columns: 2.5fr 1fr 2fr;
    height: 100%;
    padding: 20px 40px 20px 80px;
}

/* =============================================================================== */

.footer_specs {
    width: auto;
    padding: 30px;
    margin: 0 auto;
}
.footer_specs .logotipotopbar {
    margin: 0;
}
.footer_title {
    display: flex;
    align-items: center;
}
.footer_title #titulonav {
    margin-left: 5px;
}
.footer_text {
    font-size: 0.8rem;
    padding: 10px 0;
    line-height: 1rem;
    color: hsla(var(--text-color-hsl), 0.5);
    max-width: 400px;
}

/* =============================================================================== */

.footer_menu {
    padding: 30px;
    font-size: 0.8rem;
}
.footer_menu p {
    color: hsl(var(--text-color-hsl));
    margin-bottom: 10px;
    font-weight: 600;
}
.footer_menu .menuFooter ul {
    display: inline;
}
.footer_menu.menuFooter ul {
    margin: 0px;
    display: inline-flex;
}
.footer_menu .menuFooter ul li {
    margin: 10px 0;
}
.footer_menu .menuFooter ul li a {
    color: hsla(var(--text-color-hsl), 0.5);
    text-shadow: 0.5px 0.5px hsla(var(--text-color-hsl), 0.2);
    transition: ease 0.5s;
    white-space: nowrap;
    padding: 0px;
}
.footer_menu .menuFooter ul li a:hover {
    color: hsla(var(--text-color-hsl));
    text-shadow: 0.5px 0.5px hsla(var(--text-color-hsl), 0.6);
    transition: ease 0.5s;
    background-color: none;
    box-shadow: none;
}

.light-theme .footer_menu .menuFooter ul li a {
    text-shadow: none;
}
.light-theme .footer_menu .menuFooter ul li a:hover {
    text-shadow: none;
}

/* =============================================================================== */

.footer_socialmedias {
    padding: 30px;
}
.footer_socialmedias p {
    font-size: 0.8rem;
    text-wrap: nowrap;
    font-weight: 600;
}
.footer_socialmedias .icons_contact {
    display: flex;
    justify-content: left;
}
.footer_socialmedias .contact_icon {
    display: inline;
    text-align: center;
    min-width: auto;
    background-color: transparent;
    background-image: none;
    fill: hsla(var(--text-color-hsl), 0.5);
}
.footer_socialmedias .contact_icon:hover {
    transition: ease 0.5s;
    background-color: transparent;
    fill: hsla(var(--text-color-hsl), 1);
}
.footer_socialmedias .contact_icon p {
    border-bottom: none;
    color: hsla(var(--text-color-hsl), 0.5);
    margin: 0;
    width: auto;
    font-weight: normal;
}
.footer_socialmedias .contact_icon:hover p {
    color: hsla(var(--text-color-hsl), 1);
}

.footer_socialmedias .contact_icon::before,
.footer_socialmedias .contact_icon::after {
    background-color: transparent;
}


/* =============================================================================== */

.footer_copyright {
    display: flex;
    font-size: 0.8rem;
    justify-content: center;
    padding: 20px 10px;
    background-color: hsl(var(--bg-color-hsl));
}
.footer_copyright p {
    margin-left: 5px;
}

/* =============================================================================== */

.cursor-neon {
    position: fixed;
    width: 300px;
    height: 300px;
    background-color: hsl(var(--text-color-hsl));
    mix-blend-mode: screen;
    filter: blur(100px);
    opacity: 0.05;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1002;
    box-shadow: 0 0 10px hsl(var(--text-color-hsl)), 0 0 20px hsl(var(--text-color-hsl)), 0 0 40px hsl(var(--text-color-hsl));
    transition: transform 0.1s ease;
}

/* Animação para encolher */
@keyframes trailShrink {
    to {
        transform: scale(0.2);
        opacity: 0;
    }
}

/* =============================================================================== */

#scrollButton {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    border: 2px solid hsl(var(--text-color-hsl), 0.1);
    border-radius: 25px;
    background-color: hsl(var(--bg-color-hsl));
    color: hsl(var(--cinza-300-hsl));
    cursor: pointer;
    box-shadow: none;
    animation: bounce2 2s ease infinite;
    transition: top 0.2s ease, background 0.5s, color 0.5s, box-shadow 0.5s;
}

#scrollButton:hover {
    color: hsl(var(--text-color-hsl), 0.6);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

@keyframes bounce2 {
    0%, 20%, 50%, 80%, 100% { transform: translate(-50%, 0); }
    40% { transform: translate(-50%, -10px); }
    60% { transform: translate(-50%, -5px); }
}

/* Ícone com rotação suave */
.iconNext {
    font-size: 1rem;
    display: inline-block;
    transition: transform 0.3s linear;
    padding: 10px 4px;
}

/* Quando deve girar */
.iconNext.rotate {
    transform: rotate(180deg);
}

/* Estilo aplicado quando botão deixa de ser fixo */
#scrollButton.stopped {
    position: absolute;
    bottom: 300px; /* altura que define onde ele “para” */
    animation: bounce2 2s ease infinite;
}

/*=================================================================================*/


@media (max-width: 480px) {

    .skills_section #title, .projects_section #title, .contact_section #title, .extras_section #title {
        font-size: 2rem;
    }

    .section_area {
        width: 100%;
        margin: 30px;
    }

    .section_area #nome {
        font-size: 0.6rem;
        line-height: 1rem;
    }

    .section_area #info {
        font-size: 4rem;
        line-height: 3.5rem;
    }

    .section_area #about {
        font-size: 0.8rem;
        font-family: 'Poppins';
        font-weight: 400;
        line-height: 1.2rem;
        padding: 10px 0;
    }

    .section_area #links {
        font-size: 0.8rem;
        letter-spacing: normal;
    }

    .section_area #links a {
        font-size: 0.8rem;
        text-decoration: none;
        transition: 0.6s;
        border-bottom: 2px solid transparent;
    }

    /*===================================================================================================*/

    .about_section {
        width: 100%;
        position: relative;
        padding: 15px 30px 20px 30px;
    }

    /*=====================================================*/

    .contact_section {
        width: 100%;
        position: relative;
        padding: 15px 30px 20px 30px;
    }

    /*=====================================================*/

}

@media (min-width: 0px) and (max-width: 480px) {

    :root {
        --slides-visible: 1;
    }

    .projects_section {
        width: 90dvw;
        padding: 0;
    }

    /*=====================================================*/

    .menu {
        display: none;
    }

    .menu_expand_area.open {
        height: 255px;
        padding: 10px;
    }

    .menu_expand_area .menu {
        display: block;
        margin: 0;
    }

    .menu_expand_area .menu ul {
        margin: 0px;
        display: inline;
    }

    .menu_expand_area .menu ul li {
        display: grid;
        margin: 5px 0;
    }

    /*=====================================================*/

    .skills_section {
        width: 100dvw;        
    }

    .skills_grid {
        max-width: 100dvw;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        overflow: hidden;
    }

    .skills_section #skills_list .name #name {
        font-size: 0.6rem;
    }


    /*=====================================================*/

    .icons_contact {
        display: inline;
    }

    .contact_email {
        min-width: auto;
    }

    .email_contact {
        display: inline;
    }

    /*=====================================================*/

    .footer_grid {
        display: inline;
    }

    /*=====================================================*/

    .cursor-neon {
        display: none;
    }

    /*=====================================================*/

}

@media (min-width: 481px) and (max-width: 768px) {

    :root {
        --slides-visible: 1;
    }

    /*=====================================================*/

    .menu {
        display: none;
    }

    .menu_expand_area.open {
        height: 255px;
        padding: 10px;
    }

    .menu_expand_area .menu {
        display: block;
        margin: 0;
    }

    .menu_expand_area .menu ul {
        margin: 0px;
        display: inline;
    }

    .menu_expand_area .menu ul li {
        display: grid;
        margin: 5px 0;
    }

    /*=====================================================*/

    .icons_contact {
        display: inline;
    }

    .contact_email {
        min-width: auto;
    }

    .email_contact {
        display: inline;
    }

    /*=====================================================*/

    .footer_grid {
        display: inline;
    }

    /*=====================================================*/

    .cursor-neon {
        display: none;
    }

    /*=====================================================*/

}

@media (min-width: 769px) and (max-width: 1024px){

    :root {
        --slides-visible: 2;
    }

    .projects_section {
        width: 75dvw;
    }

    .projects_grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    /*=====================================================*/

    .menu {
        display: none;
    }

    .menu_expand_area {
        display: flex;
    }

    .menu_expand_area.open {
        height: 30px;
        padding: 10px;
    }

    .menu_expand_area .menu {
        margin: 5px 0;
        display: block;
    }

    .menu_expand_area .menu ul li {
        margin: 10px 0;
    }

    /*=====================================================*/

    .footer_grid {
        grid-template-columns: 2fr 1fr;
    }

    .footer_specs {
    margin: 0;
    }

    /*=====================================================*/
}

@media (min-width: 1025px) and (max-width: 1200px){

    :root {
        --slides-visible: 2;
    }

    .projects_section {
        width: 75dvw;
    }

    .projects_grid {
        grid-template-columns: repeat(auto-fit, minmax(344px, 1fr));
    }

}

@media (min-width: 1200px) and (max-width: 1440px){

    :root {
        --slides-visible: 3;
    }

    .projects_section {
        width: 75dvw;
    }

    .projects_grid {
        grid-template-columns: repeat(auto-fit, minmax(344px, 1fr));
    }

}

/* @media (min-width: 1441px) {
    .menu_expand_area .menu {
        display: none;
    }
} */

@media (min-width: 1570px) {

    :root {
        --slides-visible: 4;
    }

    .projects_section {
        max-width: 1700px;
    }

}