@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,100..900;1,100..900&display=swap');
:root
{
    --bg: #131019;
    --text: #beb6d2;
    --white: #ffffff;
    --red:#fa1e4e;
}
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html
{
    height: 100%;
    font-size: 62.5%;
}
body
{
    display: flex;
    flex-direction: column;
    font-weight: 400;
    height: auto;
    min-height: 100%;
    background: var(--bg);
    color: var(--text);
}
h1
{
    font-size: 3.4rem;
    font-family: 'Audiowide', sans-serif;
    text-align: center;
    color: var(--white);
}
h2
{
    font-size: 2rem;
    color: var(--red);
    font-family: 'Audiowide', sans-serif;
}
h3
{
    font-size: 2.8rem;
    font-family: 'Audiowide', sans-serif;
    font-weight: 500;
    color: var(--white);
    border-bottom: #d1d1d1 solid 1px;
}
h4
{
    font-size: 1.6rem;
    font-weight: 500;
    font-family: 'Audiowide', sans-serif;
    color: var(--white);
}
h5
{
    font-size: 2rem;
    font-family: 'Audiowide', sans-serif;
}
p
{
    font-size: 1.5rem;
    font-family: 'Audiowide', sans-serif;
}
span
{
    font-size: 1.4rem;
    font-family: 'Saira';
    color: whitesmoke;
}
ul{list-style: none;}
#header
{
    height: 7.2rem;
    background: rgba(19, 16, 25, 0.5);
    backdrop-filter: blur(15px);
    flex: none;
    font-size: 1.2rem;
    letter-spacing: .03rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;

    left: 0;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 9999;
}
.header__nav{display: none;}
.header__mobile {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: row;
    font-size: 0;
    height: 7.2rem;
    transition: height .4s ease;
    z-index: 2;
    position: relative;
}


.menu-toggle {
    width: 7.2rem;
    height: 100%;
    background-color: #33333300;
    position: relative;
    cursor: pointer;
    transition: 0.4s;
}

.menu-toggle::before,
.menu-toggle::after {
    content: '';
    position: absolute;
    width: 2.4rem;
    height: .2rem;
    background-color: var(--text);
    transition: 0.4s;
}

.menu-toggle::before {
    top: 4rem;
    left: 2.5rem;
}

.menu-toggle::after {
    top: 3rem;
    left: 2.5rem;
}

.menu-toggle.change {
    background-color: transparent;
}

.menu-toggle.change::before {
    transform: rotate(-45deg);
    top: 3.6rem;
    left: 2.5rem;
}

.menu-toggle.change::after {
    transform: rotate(45deg);
    top: 3.6rem;
}

.menu{
    background-color: #131019;
    bottom: 0;
    display: block;
    transform: translateX(100%);
    max-height: none;
    position: fixed;
    width: 100%;
    top: 7.2rem;
    -webkit-transition: transform .3s ease;
    transition: transform .3s ease;
    list-style: none;
    z-index: 2;
}

.menu.show {
    transform: translateX(0);
}

.menu__item{
    font-family: 'Audiowide', sans-serif;
    font-size: 2rem;
    padding: 1.6rem 2.8rem;
    border-top: 1px solid #beb6d2;
}
.menu__item:last-child{
    border-bottom: 1px solid #beb6d2;
}
.menu__item:hover{
    background:#2e273f
}
.menu__item a{
    text-decoration: none;
}
/* MAIN */
#about
{
    margin-top: 7.2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem;
}

.circle
{
    border-radius: 9999px;
    padding: 0.25rem;
    background-color: #d1d1d1;
}
.line
{
    height: 100%;
    width: 0;
    border-width: 1px;
    border-color: #d1d1d1;
    border-style:  solid;
}
.experience__content
{
    position: relative;
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 1rem;
    padding: 2rem;
}
.experience__timeline
{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.experience__data
{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.absolute__right
{
    position: absolute;
    right: 30px;
    font-weight: 600;
    font-size: 1.35rem;
}

.projects__content
{
    /* margin: 2rem; */
    background-color: #302d42;
    /* Position */
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* Bordes */
    --tw-border-opacity: 1;
    border-width: 2.5px;
    border-radius: 0.375rem;
    border-style: solid;
    padding: 1.5rem;

    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
}

.labels
{
    display: flex;
    gap: 0.75rem;
}

.labels li
{
    font-family:  Poppins,sans-serif;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 800;
    border: 1px solid #ff3636;
    border-radius: 5px;
    color: #fa1e4e;
    /* background: #ff363633; */
    padding: 3px;
}

.projects a{
    color: #fa1e4e;
    text-decoration: none;
}
a:hover{color: var(--red);}
a:visited{color: #fff;}

.options{
    display: flex;
    justify-content: space-between;
}
button{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    background-color: #2e273f;
    border-radius: 10px;
    border: solid 1px;
    color: var(--red);
    background-color: #fff;
    border: solid 2px;
    font-family: 'Saira';
    padding: 1rem 2rem;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}
button:hover{
    color: var(--white);
    background-color: var(--red);
}
.container{display: none;}
swiper-container {
    width: 100%;
    height: 100%;
    padding-inline: 2rem;
  }

.projects__content img{
    aspect-ratio: 59/29;
}
.content_footer
{
    display: flex;
    gap: 1rem;
}
.content_footer svg{
    color: var(--red);
    background-color: var(--white);
    border-radius: 50%;
    padding: 0.5rem;
}
.content_footer a:visited{
    color: var(--red);
}
.about__content{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
/* TABLET */
/* @media (min-width: 600px) and (max-width: 1024px) {

  } */

/* DESKTOP */
@media (min-width: 1025px) {
    main
    {
        scroll-behavior: smooth;
        scroll-snap-type: y mandatory; /* Ajuste vertical obligatorio */
        overflow-y: scroll; 
        height: 100vh;
    }
    section{ scroll-snap-align: start;}
    #header{height: auto;}
    .header__nav{ display: block;padding: 2rem; }
    .header__mobile {display: none;}
    .header__nav__items
    {
        display: flex;
        justify-content: space-around;
        align-items: center;
        align-content: center;
        flex-wrap: wrap;
        list-style: none;
        font-family: 'Audiowide', sans-serif;
        font-size: 2rem;
    }
    .header__nav__items a{
        color: var(--white);
        text-decoration: none;
        position: relative;
    }
    .header__nav__items a::before {
        content: " ";
        display: block;
        position: absolute;
        height: 200%;
        top: -50%;
        left: -25%;
        width: 1em;
        border: 1.5px solid #ffffff;
        transition-property: transform, opacity;
        transition-duration: 200ms;
        transition-timing-function: ease;
        /* opacity: 9; */
        border-right: none;
    }
    .header__nav__items a:after {
        content: " ";
        display: block;
        position: absolute;
        height: 200%;
        top: -50%;
        right: -25%;
        width: 1em;
        border: 1.5px solid #ffffff;
        transition-property: transform, opacity;
        transition-duration: 200ms;
        transition-timing-function: ease;

        border-left: none;
    }
    .header__nav__items a:hover{color: var(--red);}
    .header__nav__items a:hover::before{border-color: var(--red);}
    .header__nav__items a:hover::after{border-color: var(--red);}

    .header__nav__item{ padding: 1.6rem 2.4rem;}
    #about
    {
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .about__content
    {
        /* margin-top: -7.8rem; */
        margin-top: -3.9rem;
        width: 50vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        gap: 2rem;
    }

    #experience{
        height: 100vh;
        width: 80vw;
        margin: auto;
        display: flex;
        flex-direction: column;
        justify-content: center
        /* padding: 7.2rem; */
    }

    .experience__content{
        width: 80vw;
        gap: 2.5rem;
    }

    .content_footer svg{
        cursor: pointer;
        transition: 0.3s ease-in-out;
    }
    .content_footer svg:hover{
        color: var(--white);
        background-color: var(--red);
    }
    #projects{
        height: 100vh;
        width: 80vw;
        margin: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 3rem;
    }

    swiper-container{
        /* height: 60vh; */
        display: none;
    }

    .projects__content{
        width: 30% !important;
        margin: 0;
        /* height: 60%; */
    }
    .container
    {
        display: flex;
        justify-content: center;
        gap: 3rem;
    }
    .content__body{
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: space-between;
        gap: 1rem;
    }

    .about__content::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5px;
        background-color: black;
    }
    .content_footer{
        display: flex;
        gap: 1rem;
    }
    .content_footer a{
        color: var(--red);
        background-color: var(--white);
        border-radius: 50%;
        padding: 0.5rem;
    }

    ::-webkit-scrollbar {
        width: 6px;
    }

    ::-webkit-scrollbar-thumb {
        background: #fa1e4e;
        border-radius: 5px;
    }
  
    ::-webkit-scrollbar-track {
        background: #beb6d2;
    }
}