* {
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Ubuntu,sans-serif;
    text-decoration:none;
    --border-angle:0turn;
    --main-bg:conic-gradient(from var(--border-angle),  #213,  #112 5%,  #112 60%,  #213 95%);
    --gradient-border:conic-gradient(from var(--border-angle), transparent 25%, #08f, #f03 99%, transparent)
}
@font-face  {
    font-family: 'Ubuntu';
    src: url('/fonts/ubuntu-v20-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face  {
    font-family: 'Ubuntu';
    src: url('/fonts/ubuntu-v20-latin-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
:root {
    --background1-dark:#0F0F0F;
    --background2-dark:#1A1A1A;
    --menuMobile-color:#1E1E1E;
    --menmuMobile-secondColor:#3A3A3A;
    --font1-text:#EAEAEA;
    --font-text2:#C4C4C4;
    --portifolio-color:#292929;
    --font-text-p:#fff;
    --font-text-quemSomos: #fff;
    --button-footer: #fff;
    --font-buttonColor:#EAEAEA;
    --button-background:#8f00ff;
    --button-background2:#8f00ff2a;
   
}
.light-theme {
    --background1-dark:#fff;
    --background2-dark:#3A3A3A;
    --menuMobile-color:#dfdcdc;
    --menmuMobile-secondColor:#3A3A3A;
    --font1-text:#0F0F0F;
    --font-text2:#C4C4C4;
    --portifolio-color:#fff;
    --font-buttonColor:#1f1e1e;
    --font-text-p:#fff;
    --font-text-quemSomos: #000;
    --button-footer: #000; 
    --button-background:#8f00ff;
    --button-background2:#8f00ff2a;
    --font-buttonColor:#1f1e1e;
 
}
#theme-toggle {
    background:0 0;
    border:none;
    color:var(--font1-text);
    cursor:pointer;
    padding:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-left:15px;
    transition:transform .3s ease
}
#theme-toggle i {
    font-size:20px
}
.fa-sun {
    color:#f49e12
}
#theme-toggle:hover {
    transform:scale3d(1,1,1);
    box-shadow:1px 1px 1px var(--background2-dark),-7px -7px 15px rgb(255 255 255 / .07);
    border-radius:10px;
    padding:10px
}
nav {
    display:flex;
    justify-content:space-between;
    align-items:center;
    background-color:var(--background1-dark);
    height:10vh
}
ul {
    display:flex;
    justify-content:center;
    align-items:center;
    margin:0 auto
}
ul li {
    list-style:none;
    font-size:26px;
    padding:12px
}
ul li img {
    width:200px;
    height:200px;
    padding:36px
}
ul li a {
    position:relative;
    color:var(--font1-text);
    text-decoration:none;
    font-size:22px;
    padding-bottom:12px
}
ul li a:after {
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    height:2px;
    width:0%;
    background-color:var(--font1-text);
    margin-bottom:2px;
    transition:width .4s ease-in-out
}
ul li a:hover::after {
    width:100%;
    margin-top:4px
}
.menu-toggle {
    display:none
}
.menu-icon {
    display:block;
    cursor:pointer
}
.menu-icon div {
    width:25px;
    height:3px;
    background-color:var(--font1-text);
    margin:5px 0
}
.menu-toggle {
    display:none;
    font-size:30px;
    background:0 0;
    border:none;
    color:var(--font1-text);
    cursor:pointer;
    margin-right:20px
}
#particles-container {
    background:var(--background2-dark);
    position:relative;
    width:100%;
    height:50vh
}
.conteudo {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:80px;
    flex-wrap:wrap;
    padding:20px;
    max-width:100%;
    z-index:10;
    pointer-events:none
}
.conteudo .about-me {
    max-width:500px;
    color:var(--font-text2)
}
.conteudo .about-me h1,span {
    font-size:32px
}
.conteudo .about-me p {
    font-size:22px;
    letter-spacing:1px;
    text-align:left;
    margin-top:10px
}
.conteudo .image img {
    width:300px;
    height:300px;
    border-radius:50%;
    object-fit:cover
}
.conteudo .about-me .sociais {
    margin:16px 0 0 0;
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
    pointer-events:visible
}
.conteudo .about-me .sociais a {
    color:var(--font-text2)
}
.conteudo .about-me .sociais a i {
    font-size:52px;
    margin-right:20px;
    border-radius:6px
}
.portifolio {
    background:var(--background1-dark);
    color:#1a1a1a;
    width:100%
}
.portifolio h2 {
    font-size:28px;
    margin-bottom:20px;
    color:var(--font1-text);
    text-align:center;
    transition:3s ease
}





.portifolio .container-screen {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:row;
    flex-wrap:wrap;
    gap:10px
}
.portifolio .screen {
    background-color:var(--portifolio-color);
    width:350px;
    height:250px;
    border:1px solid var(--font1-text);
    border-radius:18px;
    margin-bottom:20px
}
.portifolio .screen:focus {
  outline: 2px dashed var(--primary-color);
  outline-offset: 4px;
}
.portifolio .screen:hover {
    background-position:bottom
}
.portifolio .s0 {
    background:url(../img/projetos/mago-min.webp);
    background-position:top;
    background-size:cover;
    transition:background-position 10s linear
}
.portifolio .s1 {
    background:url(../img/projetos/construtordeurl.webp);
    background-position:top;
    background-size:cover;
    transition:background-position 20s linear
}
.portifolio .s3 {
    background:url(../img/projetos/adietaketo-min.webp);
    background-position:top;
    background-size:cover;
    transition:background-position 20s linear
}

.s4 {
    background:url(../img/projetos/landigPage-min.webp);
    background-position:top;
    background-size:cover;
    transition:background-position 14s linear
}
.s5 {
    background:url(../img/projetos/newsletter.webp);
    background-position:top;
    background-size:cover;
    transition:background-position 10s linear
}
.s6 {
    background:url(../img/projetos/galeria.webp);
    background-position:top;
    background-size:cover;
    transition:background-position 8s linear
}
.s7 {
    background:url(../img/projetos/lista-de-tarefas.webp);
    background-position:top;
    background-size:cover;
    transition:background-position 8s linear
}

.s8 {
    background:url(../img/projetos/spotifyclone.webp);
    background-position:top;
    background-size:cover;
    transition:background-position 8s linear
}
.s9 {
    background:url(../img/projetos/javascript.webp);
    background-position:top;
    background-size:cover;
    transition:background-position 8s linear
}
.habilidades {
    display:flex;
    flex-direction:column;
    flex-wrap:wrap;
    width:100%;
    background-color:var(--background2-dark)
}
.habilidades h2 {
    font-size:32px;
    color:var(--font-text2);
    text-align:center;
    letter-spacing:2px;
    font-weight:700
}
.habilidades h3 {
    font-size:32px;
    color:var(--font-text2);
    text-align:center;
    letter-spacing:2px;
    font-weight:700;
    margin:10px
}
.box-skills {
    display:flex;
    flex-direction:column;
    justify-content:center;
    flex-wrap:wrap
}
.box-skills .skills {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:10px
}
.box-skills .skills div {
    position:relative;
    text-align:center;
    padding:12px 24px;
    margin-right:10px;
    color:var(--font-text2);
    cursor:pointer;
    display:flex;
    flex-direction:column;
    align-items:center;
    border:solid 1px #fff0;
    border-radius:2em;
    background:var(--main-bg) padding-box,var(--gradient-border) border-box,var(--main-bg) border-box;
    transition:--border-angle 1s ease
}
.box-skills .skills div:hover {
    --border-angle:1turn
}
@keyframes bg-spin {
    to {
        --border-angle:1turn
    }
}
@supports (background:paint(something)) {
    @property --border-angle {
        syntax:"<angle>";
        inherits:true;
        initial-value:0turn
    }
}
.sobre {
    background:var(--background1-dark);
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center
}
.sobre h3 {
    text-align:center;
    color:var(--font1-text);
    font-size:20px;
    margin-bottom:28px;
    padding:10px
}
.sobre .sobre-container {
    display:flex;
    justify-content:flex-start;
    align-items:flex-start;
    max-width:50%;
    gap:60px
}
.sobre .sobre-container img {
    width:100%;
    border-radius:20px;
    object-fit:cover;
    transition:transform .5s ease,box-shadow .5s ease
}
.sobre .sobre-container img:hover {
    transform:translateY(-10px);
    box-shadow:0 15px 30px rgb(0 0 0 / .5)
}
.sobre .sobre-container p {
    color: var(--font-text-quemSomos);
    font-size:16px;
    letter-spacing:2px;
    text-align:justify
}
.email {
    color:var(--font1-text);
    font-size:16px
}
.email i {
    margin-right:4px
}
.btn {
    font-family:Orbitron,sans-serif;
    font-size:1.2rem;
    color:var(--font-buttonColor);
    padding:15px 30px;
    border:2px solid var(--button-background);
    background:#fff0;
    border-radius:8px;
    cursor:pointer;
    position:relative;
    transition:.3s ease-in-out;
    box-shadow:0 0 10px var(--button-background),0 0 20px var(--button-background2);
    text-shadow:0 0 5px var(--button-background);
    margin:20px 0
}
.btn:hover {
    box-shadow:0 0 15px var(--button-background),0 0 15px var(--button-background),0 0 30px var(--button-background);
    transform:scale(1.05)
}


.artigos {
    background-color:var(--background2-dark);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
  }
  
  .artigos h1 {
    color:var(--font-text-p);
    margin: 8px 0 24px;
  }
  
  .artigos .content {
    display: flex;
    flex-wrap: wrap; /* Permite que os cards quebrem linha */
    justify-content: center;
    gap: 1.5rem;
    max-width: 1200px;
    width: 100%;
  }
  #posts {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    width: 100%;
    max-width: 1200px;
    
  }
  .artigos .post {
    border: 1px solid #ccc;
    padding: 1rem;
    border-radius: 8px;
    background: var(--background2-dark); 
    font-family: sans-serif;
    color: var(--font1-text);
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 340px; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
  }
  
  .artigos .post:hover {
    transform: translateY(-4px);
  }
  
  .post h2 {
    margin: 0 0 0.5rem;
    font-size: 1.2rem;
  }
  
  .post p {
    margin: 0.5rem 0;
    font-size: 0.9rem;
    color: var(--font1-text);
  }
  
  .post a {
    color: var(--font-text-p);
    text-decoration: none;
  }
  .post a:hover {
    text-decoration: underline;
  }

.formacao {
    background:var(--background1-dark);
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center
}
.formacao .card-formacao {
    display:flex;
    justify-content:center;
    align-items:flex-start;
    flex-wrap:wrap
}
.formacao .card {
    display:flex;
    flex-direction:column;
    max-width:400px;
    justify-content:flex-start;
    align-items:flex-start;
    border:1px solid var(--font-text-quemSomos);
    border-radius:10px;
    margin:20px;
    gap:10px;
    object-fit:cover;
    transition:transform .5s ease,box-shadow .5s ease
}
.formacao .card:hover {
    transform:translateY(-10px);
    box-shadow:0 15px 30px rgb(0 0 0 / .5)
}
.card-formacao .card img {
    width:100%;
    height:40%;
    padding:14px;
    border-radius:8px
}
.formacao .content {
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center
}
.formacao h3 {
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
    color:var(--font-text-quemSomos);
    font-size:20px;
    margin-bottom:28px;
    padding:14px
}
.formacao h4 {
    text-align:center;
    color:var(--font-text-quemSomos);
    font-size:20px;
    margin-bottom:28px;
    padding:14px
}
.formacao p {
    align-items: center;
    justify-content: center;
    text-align:center;
    color:var(--font-text-quemSomos);
    font-size:18px;
    margin-bottom:28px;
    padding:14px
}
footer {
    background-color:var(--background2-dark);
    width:100%;
    font-size:16px
}
footer .footer-content {
    display:flex;
    justify-content:space-around;
    align-items:center;
    width:100%;
    gap:30px
}
footer .greatings {
    color:var(--font1-text);
    padding:40px
}
.footer-content .contatcs {
    color:var(--font1-text);
    font-size:16px
}
.contatcs .sociais {
    font-size:26px;
    margin-top:20px
}
.contatcs .sociais i {
    color:var(--button-footer);
    border-radius:50%;
    background-color:var(--background1-dark);
    padding:10px
}
.contatcs .sociais i:hover {
    color:var(--font1-text);
    border-radius:50%;
    background-color:var(--portifolio-color);
    padding:10px
}
.copyright {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center
}
hr {
    width:80%
}
#date {
    color:var(--font1-text);
    margin-top:10px
}
.menu-mobile-btn {
    display:none;
    background:0 0;
    border:none;
    color:var(--font1-text);
    font-size:24px;
    cursor:pointer
}
@media screen and (min-width:1px) and (max-width:980px) {
    nav ul:last-child {
        display:none;
        flex-direction:column;
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        background-color:#1a1a1a;
        z-index:999
    }
    nav ul:last-child.active {
        display:flex
    }
    nav ul:last-child li {
        width:100%;
        border-bottom:1px solid #333
    }
    nav ul:last-child li a {
        display:block;
        padding:15px;
        color:#fff;
        text-decoration:none
    }
    .menu-mobile-btn {
        display:block;
        margin-right:15px
    }
    nav {
        justify-content:space-between;
        position:relative
    }
    #particles-container {
        position:relative;
        width:100%;
        height:140vh
    }
    .conteudo {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        display:flex;
        justify-content:center;
        align-items:center;
        gap:80px;
        flex-wrap:wrap;
        padding:20px;
        max-width:100%;
        z-index:10;
        pointer-events:none;
        text-align:center
    }
    .conteudo .about-me {
        max-width:500px
    }
    .conteudo .about-me h1,span {
        font-size:32px;
        text-align:center;
        color:#fff
    }
    .conteudo .about-me p {
        font-size:22px;
        letter-spacing:1px;
        text-align:left;
        margin-top:10px;
        text-align:center;
        color:#fff
    }
    .conteudo .image img {
        width:200px;
        height:200px;
        border-radius:50%;
        object-fit:cover
    }
    .conteudo .about-me .sociais {
        display:flex;
        align-items:center;
        justify-content:center;
        text-align:center;
        margin:4px
    }
    .conteudo .about-me .sociais i {
        font-size:42px
    }
    .sobre {
        display:flex;
        flex-direction:column;
        justify-content:center
    }
    .sobre h3 {
        font-size:26px
    }
    .sobre h3 {
        text-align:center;
        font-size:20px;
        margin-bottom:28px;
        padding:10px
    }
    .sobre .sobre-container {
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        max-width:80%;
        gap:60px
    }
    .sobre .sobre-container img {
        width:100%;
        border-radius:20px;
        object-fit:cover;
        transition:transform .5s ease,box-shadow .5s ease
    }
    .sobre .sobre-container p {
        color:var(--font-text-quemSomos);
        font-size:16px;
        letter-spacing:2px;
        text-align:justify;
    }
    .email {
        text-align:center;
        font-size:16px
    }
    .email i {
        margin-right:4px
    }
    .cv {
        text-align:center
    }
    footer {
        width:100%;
        font-size:16px
    }
    footer .footer-content {
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        width:100%;
        gap:10px
    }
    footer .greatings {
        text-align:center;
        padding:40px
    }
    .footer-content .contatcs {
        text-align:center;
        font-size:16px
    }
    .contatcs .sociais {
        font-size:26px;
        margin:20px
    }
    .contatcs .sociais i {
        color:var(--font-buttonColor);
        border-radius:50%;
        padding:10px
    }
    .copyright {
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        text-align:center
    }
}