@media screen and (max-width: 1020px) {

    /* Estilos gerais */

    .flex {
        flex-direction: column;
    }

    /* menu do site */

    .btn-abrir-menu i {
        color: #80D8FF;
        font-size: 60px;
    }

    .Menu, .btn-contato {
        display: none;
    }

    .menu-mobile {
        background-color: rgb(0, 0, 0);
        flex-direction: column;
        height: 200vh;
        width: 0%;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 10000;
        overflow: hidden;
        transition: 0.5s;
    }

    .menu-mobile.abrir-menu-mobile {
        width: 50%;
    }
    
    .menu-mobile.abrir-menu-mobile ~ .overlay-menu {
        display: block;
    }


    .menu-mobile nav {
        text-align: right;
        margin-right: 40px;
        
        
    }

    .menu-mobile ul{
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 0;
        list-style: none;
        
        
    }

    .menu-mobile a {
        color: #ffffff;
        font-size: 20px;
        font-weight: 600;
        padding: 20px 4%;
        display: block;
        text-decoration: none;
    }

    .menu-mobile a:hover {
        background-color: #2e2e2e;
        color: #ffffff;
    }

    .menu-mobile .btn-fechar {
        padding: 20px 4%;
    }

    .menu-mobile .btn-fechar i {
        color: #80D8FF;
        font-size: 50px;

    }

    .overlay-menu {
        background-color: rgba(0, 0, 0, 0.719);
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 8888;
        display: none;
    }

    /* topo do site */

    .Txt-topo-site .flex {
        flex-direction: column-reverse;
    }

    .img-topo-site img {
        width: 90%;
        height: auto;
    }

    section.Topo-do-site .flex {
        gap: 20px;
    }

    /* Habilidades */

    section.Habilidades h1 {
        font-size: 40px;
    }

    .Habilidades .interface .flex {
        display: grid;
        gap: 30px;
        grid-template-columns: repeat(2, 1fr);
        align-items: stretch;
    }

    .Habilidades-box {
        text-align: center;
        width: min-content;
        justify-content: center;
        height: 100%;
        width: 100%;
        
    }

    .badgets {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-content: center;
        text-align: center;
        gap: 10px;
        
    }

    /* footer */

    footer .flex {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

}

@media screen and (min-width: 1020px) {
    .menu-mobile {
        display: none;
    }
    
    .btn-abrir-menu {
        display: none;
    }

    .overlay-menu {
        display: none;
    }
}

@media screen and (max-width: 620px) {

    .img-topo-site img {
        display: block;
        margin: 0 auto; 
        width: 90%; 
        height: auto;
    }

    .Habilidades .interface .flex {
        display: grid;
        gap: 20px;
        grid-template-columns: repeat(1, 1fr);
        align-items: stretch;
    }

    .Habilidades-box {
        text-align: center;
        width: min-content;
        justify-content: center;
        height: 100%;
        width: 100%;
        
    }

    .Habilidades .interface h1 {
        font-size: 22px;
        text-align: center;
        margin: 0;
        margin-bottom: 20px;
    }

    .badgets {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        align-content: center;
        text-align: center;
        gap: 10px;
        
    }

    .img-sobre img {
        width: 100%;
        height: auto;
    }
}


@media screen and (max-width: 500px) {
    
    /* Topo do site */
    .Txt-topo-site {
        display: block;
        margin: 0 auto; 
        text-align: center;
        width: 90%; 
        height: auto;
    }
    
    .Txt-topo-site h1 {
        font-size: 35px;
        line-height: 35px;
    }

    .Txt-topo-site p {
        font-size: 20px;
        text-align: justify;
    }

    .img-topo-site img {
        display: block;
        margin: 0 auto; 
        width: 90%; 
        height: auto;
    }

    /* Habilidades */

    .Habilidades .interface h1 {
        font-size: 22px;
        text-align: center;
        margin: 0;
        margin-bottom: 20px;
    }

   /* Sobre */

    .txt-sobre h2 {
        font-size: 40px;
    }

    .txt-sobre h2 span {
        font-size: 35px;
    }

    .icones-contato {
        display: flex;
        justify-content: center;
        gap: 5px;
    }

    .btn-normal {
        width: 50px !important;
        height: 50px !important;
        font-size: 25px !important;
    }

    .btn-curriculo {
        margin-left: 10px !important;
        
        height: 50px !important;
        font-size: 20px !important;
    }

    .btn-curriculo i {
        font-size: 25px !important;
    }

    
     /* Portifolio */

    .portifolio h2 {
        font-size: 35px;
    }

    section.portifolio .flex {
    display: flex;
    flex-direction: column;
    }

     .img-port {
        width: 100%;
        height: 400px;
    }

    /*Cursos*/

    .cursos h2 {
        font-size: 35px;
    }

    section.cursos .flex {
    display: flex;
    flex-direction: column;
    }

     .img-cursos {
        width: 100%;
        height: 400px;
    }

    h1.sub-titulo-cursos {
    font-size: 30px;
}
}