@media only screen and (max-width: 430px){
    
    .head {
        display: flex;
        flex-direction: column;
        list-style: none;
        position: absolute;
        justify-content: space-around;
        font-size: 3vw;
        padding: 0vw;
        margin-left: 5vh;
        margin-top: 22vh;
        width: 80vw;
        z-index: 999;
    }
    
    .head a{
        color: #fff;
        font-weight: bolder;
        text-align: center;
        margin-top: 5vh;
        font-size: 4vh;
        text-decoration: none;
    }
    
    nav{
        display: none;
        justify-content: space-between;
        width: 100vw;
        
    }
    
    nav .logo {
        width: 25vw;
        margin: 0 auto;
        right: 35vw;
        top: 25vw;
        position: absolute;
    }
    .cont-inf{
        position: absolute;
        bottom: 0;
        width: 100vw;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        gap: 0.3vw;
        padding: 0;
        right: 0;
        bottom: 10vh;
    }
    .cont-inf img{
        width: 20vw;
        margin: 0;
        padding: 0;
    }

    /* MENU HAMBURGUER */
    .menu{
        width: 15vw;
        height: 15vw;
        border-radius: 50%;
        background-color: #fff;
        cursor: pointer;
        position: absolute;
        margin-top: 5vw;
        margin-left: 5vw;
        transition: 0.5s ease-in-out;
    }
    .menu:hover{
        transform: scale(1.1);
    }
    .hamburguer{
        display: block;
        background-color: #000;
        width: 10vw;
        position: relative;
        height: 1.5vw;
        top: 6.5vw;
        left: 2.5vw;
        transition: 0.5s ease-in-out;
    }
    
    .hamburguer:before,
    .hamburguer:after {
        background-color: #000;
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        transition: 0.5s ease-in-out;
    }
    
    .hamburguer:before{
        top: -3vw;
    }
    
    .hamburguer:after{
        bottom: -3vw;
    }

    /**/
    #home{
        flex-direction: column;
    }
    .second-home h1
    {
        font-size: 7vw;
    }
    .second-home p{
        font-size: 7vw;    
    }
    .perfil {
        width: 50vw;
        border-radius: 50%;
        margin-top: 10vh;
        margin-bottom: 0vh;
        border: 0.5vw solid #000000;
    }

    .first-home{
        margin-top: -15vh;
        
    }
    
    .second-home {
        margin-left: -10vh;
        margin-top: 5vh;
    }

    /*About*/

    .hist{
        position: relative;
        background-color: #06ee29;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 70vw;
        height: 64vh;
        margin-top: 0vh;
        border-radius: 4%;
        box-shadow: 1rem 3rem 1rem green;
        padding: 5vw;
    }

    .hist p {
        text-shadow: 10px 10px rgba(0, 0, 0, 0.131);
        margin: 0;
        font-family: 'Sometype Mono';
        padding: 0;
        
        
        box-sizing: border-box;
        font-weight: bolder;
        color: #000000;
    }

    .expl {
        font-size: 4.5vw;
        
        line-height: 8vw;
    }



    /*Projects */
    

    .container-carrousel{
        display: block;
        position: absolute;
        padding: 0;
        background-color: #06ee2900;
        width: 60vw;
        height: 20vh;
        left: 10vh;
        margin-top: 20vh;
        border-radius: 5vw;
        box-shadow: 0px 0px 0px #06ee29;
    }
    
    .gallery-wrapper{
        width: 90vw;
        overflow-x: auto;
        display: flex;
        height: 90vh;
        margin-top: -80vw;
        position: absolute;
        flex-direction: column;
        margin-left: -15.8vw;
    }
    
    .item{
        width: 85vw;
        height: 30vh;
        opacity: 0.6;
        transition:  all 600ms ease-in-out;
        margin: 5vw 4vh;
        border-radius: 15vw;
        box-shadow: 5px 10px 10px #fff;
    }
   
    .details{
        height: 20vw;
        padding: 0;
        width: 80vw;
        display: flex;
        flex-direction: column;
    }
    

    .tech, .explain {
        color: #000000;
        display: flex;
        flex-direction: column;
        margin: 0 auto;
        margin-top: 6vh;
        
        align-items: center;
        width: 60vw;
        position: absolute;
        font-family: 'Sometype Mono';
        font-weight: bolder;
        box-shadow: 15px 15px 15px #06ee29;
    }

    .explain{
        background-color: #06ee29d1;
        width: 60vw;
        height: 24vh;
        position: absolute;
        margin-left: 3vh;
        border-radius: 3vh;
        margin-top: 67vh;
        margin-left: 8vw;
    }
    .tech{
        background-color: #06ee29d1;
        width: 60vw;
        height: 20vh;
        position: absolute;
        
        margin-left: 8vw;
        border-radius: 3vh;
        margin-top: 15vh;
    }
    
   
    .tech h3, .explain h3 {
        border-bottom: 1vw solid black;
        margin-left: 3vh;
        margin-top: 0vh;
        font-size: 2vh;
    }

    .explain h3{
        margin-top: 2vh;
    }
    .tech h3{
        margin-top: 5vh;
        
    }

    .explain p, .tech span{
        font-size: 1.7vh;
        position: absolute;
        width: 40vw;
    }

    .tech span{
        margin-top: 0vh;
        position: relative;
        text-align: center;
    }
    .explain p{
        text-align: justify;
        margin-top: 5vh;
        
    }
    
    /*AROW*/
    .arrow-left,
    .arrow-right {
        position: absolute;
        top: 15vw;
        left: 0;
        right: auto;
        height: 25vw;
        font-size: 2vw;
        width: 6vw;
        text-align: center;
        color: #ffffff;
        border-radius: 1vh;
        cursor: pointer;
        border: none;
        opacity: 0.5;
        padding: 0;
        transition: all 600ms ease-in-out;
        background: #000;
        z-index: 7;
    }
    .arrow-right{
        background: linear-gradient(to right black 0%, transparent 200%);
        left: auto;
        right: 0;
    }
    /* Skills */
    
    h2.front, h2.back{
        display: none;
    }
    .card-tech div{
        height: 13vh;
        width: 30vw;
        position: absolute;
    }
    .card-tech span{
        font-size: 2vh;
    }
    .card-tech{
        height: 2000px;
    }
    .HTML{
        left: 8vh;
        top: 13vh;
    }
    .CSS{
        right: 8vh;
        top: 17vh;
    }
    .JAVASCRIPT{
        left: 8vh;
        top: 28vh;
    }
    .TYPESCRIPT{
        right: 8vh;
        top: 32vh;
    }


    .C{
        left: 8vh;
        top: 43vh;
    }
    .PYTHON{
        right: 8vh;
        top: 47vh;
    }
    .MYSQL{
        left: 8vh;
        top: 58vh;
    }
    .AWS{
        right: 8vh;
        top: 62vh;
    }
    .GIT{
        left: 18vh;
        bottom: 2.3vh;
    }
    i{
        font-size: 10vw;
        color: #000;
    }

    /*Contact*/
    #contacts {
        height: 100%;
        display: flex;
        flex-direction: column-reverse;
        width: 100vw;
        background: linear-gradient(to bottom, #012907 0%, #000000 50%);
    }
    .rocket-img{
        width: 30vw;
        text-shadow: 0px 0px white;
        margin-left: 0vw;
        margin-top: -35vh;
        padding: 0;
    }
    
    #contacts .rocket-div{
        position: absolute;
        padding: 0;
        margin: 0;
        bottom: -50vh;
        background-color: black;
        height: 84% !important;
        width: 60%;
        transform: rotate(90deg);
    }
    .rocket{
        position: relative;
        animation:  ROKETO 0.2s ease infinite;
    }
    .rocket-div i{
        position: absolute;
        top: -0vh;
        padding: 0;
        margin: 0;
        background: rgba(255, 255, 255, 0.5);
        animation: animateStars linear infinite;
    }
    .rocket:before{
        content: '';
        position: absolute;
        bottom: -10.5vw;
        left: 15vw;
        transform: translateX(-50%);
        width: 3vw;
        border-top-right-radius: 1vw;
        border-top-left-radius: 1vw;
        height: 5vh;
        background: linear-gradient(#06ee29, transparent);
    }
    
    .rocket:after{
        content: '';
        position: absolute;
        bottom: -15vw;
        left: 15vw;
        transform: translateX(-50%);
        width: 4vw;
        height: 8vh;
        background: linear-gradient(#06ee29, transparent);
        filter: blur(1vw);
    }
    
    .form-content{
        margin: auto auto;
        display: flex;
        height: 60%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 5vh;
    }
    #contacts div.form{
        width: 160%;
        margin-top: 0vh;
    }
    form{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 70vh; 
        margin-top: 2.5vh;
        box-sizing: border-box;
    }

    .form{
        background-color: #048217;
        box-shadow: 1vh 1vh 1vh #06ee29;
        height: 75vh;
        border-radius: 1vh;
    }

    /*Inputs and text area*/
    label{
        font-family: 'Sometype mono';
        font-size: 6vw; 
        font-weight: bolder;
        text-shadow: #06ee29 0.1vh 0.1vh;
    }
    #msg{
        height: 20vh;
        width: 65vw;
        margin: 1.5vh;
        border-radius: 2vw;
        padding: 2vw;
        font-size: 2vh;
    }
    input{
        margin: 2vw;
        border-radius: 1vw;
        height: 5vh;
        width: 60vw;
        font-size: 2vh;
        font-weight: bolder;
        padding: 0.7vw;
        border: none;
    }

    .button{
        background-color: #06ee29;
        box-shadow: 1vw 1vw 1vw rgba(0, 0, 0, 0.491);
        width: 40vw;
        position: relative;
        height: 10vh;
        font-weight: bold;
        font-family: 'Sometype mono';
        font-size: 5vw;
        border-radius: 2vh;
    }

    
    /*Animation*/

    @keyframes typing {
        from {
            width: 0;
        }
        to {
            width: 77vw;
        }
    }
    @keyframes typing2 {
        from {
            width: 0;
        }
        to {
            width: 75vw;
        }
    }
}